From c7fb3f7945cd3a012ddb4dbc55fb5821907b61db Mon Sep 17 00:00:00 2001
From: Sveske_Juice <carl.benjamin.dreyer@gmail.com>
Date: Thu, 22 Feb 2024 00:46:51 +0100
Subject: [PATCH] Responsive news (+ import svelte-media-queries lib)
---
package-lock.json | 8 ++++++++
package.json | 5 ++++-
src/routes/+page.svelte | 29 ++++++++++++++++++++++++++---
src/routes/post/lorem1/+page.svelte | 0
src/routes/post/posts_data.ts | 7 +++++++
5 files changed, 45 insertions(+), 4 deletions(-)
create mode 100644 src/routes/post/lorem1/+page.svelte
diff --git a/package-lock.json b/package-lock.json
index c8c4167..cb456f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
"": {
"name": "deprived-main-website",
"version": "0.0.1",
+ "dependencies": {
+ "svelte-media-queries": "^1.6.2"
+ },
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.1",
@@ -1184,6 +1187,11 @@
"svelte": "^3.19.0 || ^4.0.0"
}
},
+ "node_modules/svelte-media-queries": {
+ "version": "1.6.2",
+ "resolved": "https://registry.npmjs.org/svelte-media-queries/-/svelte-media-queries-1.6.2.tgz",
+ "integrity": "sha512-SMz6od/vIeZEGlc4P0HKJK4G0fZotuwFhCSpBQaPqh75h6sL6sNf+4+IjbegFKXbP7b+SOfyzVOIMXTr8jynkA=="
+ },
"node_modules/svelte/node_modules/@ampproject/remapping": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
diff --git a/package.json b/package.json
index 35b03d0..fa525e8 100644
--- a/package.json
+++ b/package.json
@@ -19,5 +19,8 @@
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
- "type": "module"
+ "type": "module",
+ "dependencies": {
+ "svelte-media-queries": "^1.6.2"
+ }
}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 96a7eef..44eb3e4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,10 +1,20 @@
<script lang="ts">
+ import MediaQuery from 'svelte-media-queries';
import NewsCard from '$lib/posts/NewsCard.svelte';
import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
export let data; // <- contains post data
+
+ $: most_recent_post = data.summaries[0];
+
+ const mobileThreshold : string = '1000px';
+ const post_show_count : number = 3;
+ let mobile : boolean;
</script>
+<!-- Detect mobile -->
+<MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
+
<div class="main-title">
<h1>The Deprived Devs</h1>
</div>
@@ -14,10 +24,10 @@
<h1 id="news-header">Recent News</h1>
<div class="news-container">
<!-- The newest blog post being showcased -->
- <ShowcaseNewsCard post_url={data.summaries[0].url} title={data.summaries[0].title} summary={data.summaries[0].summary} creation_date={data.summaries[0].creation_date} />
+ <ShowcaseNewsCard post_url={most_recent_post.url} title={most_recent_post.title} summary={most_recent_post.summary} creation_date={most_recent_post.creation_date} />
<div class="news-list">
- {#each data.summaries as summary}
+ {#each data.summaries.slice(1, post_show_count) as summary}
<NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
{/each}
</div>
@@ -33,7 +43,7 @@
align-items: center;
width: 60%;
- margin: auto;
+ margin-inline: auto;
}
#news-header {
@@ -71,4 +81,17 @@
h1 {
color: var(--text1);
}
+
</style>
+
+{#if mobile}
+ <style>
+ #news-section {
+ width: 90vw !important;
+ }
+ .news-container {
+ flex-direction: column !important;
+ }
+ </style>
+{/if}
+
diff --git a/src/routes/post/lorem1/+page.svelte b/src/routes/post/lorem1/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/post/posts_data.ts b/src/routes/post/posts_data.ts
index e5f928c..6f3ada8 100644
--- a/src/routes/post/posts_data.ts
+++ b/src/routes/post/posts_data.ts
@@ -27,4 +27,11 @@ export const posts : Post[] = [
creation_date: 1708382491,
modification_date: 1708382491,
},
+ {
+ url: 'lorem1',
+ title: 'Idk some arcticle bruh!',
+ summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
+ creation_date: 1708558377,
+ modification_date: 1708558377,
+ },
];