From e106e7271cd4030996bef219b0d7b311debcd098 Mon Sep 17 00:00:00 2001
From: J-onasJones <me@jonasjones.dev>
Date: Sun, 16 Jun 2024 20:08:38 +0200
Subject: [PATCH] added PostList for Home page

---
 src/components/PostList.svelte | 105 +++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/components/PostList.svelte

diff --git a/src/components/PostList.svelte b/src/components/PostList.svelte
new file mode 100644
index 0000000..cfa10ca
--- /dev/null
+++ b/src/components/PostList.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+    export let query: string = "";
+
+    import { onMount } from 'svelte';
+    import Loading from './Loading.svelte';
+    import NotFound from '../routes/Error.svelte';
+
+    let posts: {id: String, date: Date, title: String, author: String, description: String}[] = [];
+
+    let filteredPosts: {id: String, date: Date, title: String, author: String, description: String}[] = [];
+
+    let error = false;
+    let loading = true;
+
+    onMount(async () => {
+        try {
+            const response = await fetch('https://cdn.jonasjones.dev/blog/index.json');
+
+            posts = await response.json();
+
+            // for each post, conver the date string to a Date object
+            posts.forEach(post => {
+                post.date = new Date(post.date);
+            });
+
+            filteredPosts = posts.filter(post => post.title.toLowerCase().includes(query.toLowerCase()));
+
+            // sort the posts by date
+            filteredPosts.sort((a, b) => b.date - a.date);
+            loading = false;
+        } catch (error) {
+            console.error(error);
+            error = true;
+            loading = false;
+        }
+    });
+</script>
+
+{#if loading}
+    <Loading />
+{:else}
+    {#if error}
+        <NotFound />
+    {:else}
+        <div class="postList">
+            {#each filteredPosts as post}
+                <div class="postDiv">
+                    <a href="/#/post/{post.date.getFullYear()}/{post.date.getMonth() + 1}/{post.date.getDate()}/{post.id}">
+                        <h2 class="postTitle">{post.title}</h2>
+                        <div class="inline">
+                            <p class="postAuthor">{post.author}</p>
+                            <p class="postDate">{post.date.toLocaleDateString()}</p>
+                        </div>
+                        <p class="postDescription">{post.description}</p>
+                    </a>
+                </div>
+            {/each}
+            </div>
+    {/if}
+{/if}
+
+
+<style>
+    .postList {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      margin-bottom: 25px;
+    }
+    .postDiv {
+      border-bottom: 3px solid #e2b714;
+      padding: 16px;
+      margin: 8px;
+      border-radius: 8px;
+      flex: 1 1 500px; /* Flex-grow, flex-shrink, flex-basis */
+      box-sizing: border-box;
+      text-align: center;
+    }
+    .postDiv:hover {
+        background-color: #555;
+    }
+    .postDiv a {
+      text-decoration: none;
+      color: inherit;
+    }
+    .postTitle {
+      font-weight: bold;
+      font-size: 1.5em;
+      margin-bottom: 8px;
+    }
+    .postAuthor, .postDate {
+      font-size: 0.9em;
+      color: #555;
+    }
+    .postDescription {
+      margin-top: 8px;
+    }
+    .postDiv:hover .postAuthor, .postDiv:hover .postDate {
+      color: #333;
+    }
+    .inline {
+      display: flex;
+      justify-content:space-around;
+    }
+  </style>
\ No newline at end of file