Made a 'pretty' news section on the main page for the latest news

src/routes/+layout.server.ts

@@ -3,13 +3,13 @@
     * for all posts on the website.
 */
 
-import { posts } from './post/data.js';
+import { posts } from './post/posts_data.js';
 
 // Basically the same as Post but might contain less infomation - save storage
 type Summary = {
     url : string,
     title : string,
-    description : string,
+    summary : string,
     creation_date : number,
     modification_date: number,
 };
@@ -21,7 +21,7 @@ export function load() {
         let summary : Summary = {
             url: post.url,
             title : post.title,
-            description : post.description,
+            summary : post.summary,
             creation_date : post.creation_date,
             modification_date : post.modification_date
         };

src/routes/+page.svelte

@@ -1,28 +1,74 @@
 <script lang="ts">
-    export let data;
+    import NewsCard from '$lib/posts/NewsCard.svelte';
+import ShowcaseNewsCard from '$lib/posts/ShowcaseNewsCard.svelte';
+
+    export let data; // <- contains post data
 </script>
 
 <div class="main-title">
     <h1>The Deprived Devs</h1>
 </div>
 
-<h1>Recent posts on Deprived.dev</h1>
-<ul>
-    <!-- TODO: Filter by date or something -->
-    {#each data.summaries as summary}
-        <li><a href="/post/{summary.url}">{summary.title}</a></li>
-    {/each}
-</ul>
+
+<section id="news-section">
+    <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} />
+
+        <div class="news-list">
+            {#each data.summaries as summary}
+                <NewsCard post_url={summary.url} title={summary.title} summary={summary.summary} creation_date={summary.creation_date} />
+            {/each}
+        </div>
+            <!-- TODO: Filter by date or something -->
+
+    </div>
+</section>
 
 <style>
+    #news-section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        width: 60%;
+        margin: auto;
+    }
+
+    #news-header {
+        font-size: 48px;
+        margin-right: auto;
+    }
+
+    .news-container {
+        display: flex;
+        flex-direction: row;
+        gap: 25px;
+
+        width: 100%;
+        align-items: left;
+    }
+
+    .news-list {
+        display: flex;
+        flex-direction: column;
+
+        gap: 20px;
+    }
+
     .main-title {
-        font-family: "CozetteVector";
+        color: var(--text1);
         margin: 0 auto;
         width: 80%;
         text-align: center;
     }
 
     .main-title > h1 {
-        font-size: 4.5vw; /* Change if title changes */
+        font-size: 9vw; /* Change if title changes */
+    }
+
+    h1 {
+        color: var(--text1);
     }
 </style>

src/routes/post/+page.svelte

@@ -1,10 +1,6 @@
-<script lang="ts">
-    export let data;
-</script>
-
 <h1>All posts on deprived.dev!</h1>
 <ul>
-    {#each data.summaries as summary}
+    {#each posts_data.summaries as summary}
         <li><a href="/post/{summary.url}">{summary.title}</a></li>
     {/each}
 </ul>

src/routes/post/posts_data.ts

@@ -3,7 +3,7 @@ type Post = {
     // Required
     url : string,
     title: string,
-    description : string,
+    summary : string,
     creation_date : number
     modification_date: number,
 
@@ -16,14 +16,14 @@ export const posts : Post[] = [
     {
         url: 'folder-icons',
         title: 'Amazing Icons for Folders in Unity!',
-        description: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
+        summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
         creation_date: 1708382491,
         modification_date: 1708382491,
     },
     {
         url: 'lorem',
         title: 'Lorem Ipsum !!',
-        description: 'This is a nice exploanation on lorem ipsum latin',
+        summary: 'This is a nice exploanation on lorem ipsum latin',
         creation_date: 1708382491,
         modification_date: 1708382491,
     },