/post page styled

src/routes/+layout.server.ts

@@ -3,7 +3,7 @@
     * for all posts on the website.
 */
 
-import { posts } from './post/posts_data.js';
+import { posts } from './post/posts_data';
 
 // Basically the same as Post but might contain less infomation - save storage
 type Summary = {

src/routes/post/+page.svelte

@@ -1,17 +1,78 @@
-<script>
-    import NewsCard from '$lib/posts/NewsCard.svelte';
+<script lang="ts">
+    import { type Post } from './posts_data';
+    import NewsVerticalCard from '$lib/posts/NewsVerticalCard.svelte';
 
     export let data; // <- contains post data
+
+    let search : string;
+    $: regex = search ? new RegExp(search, 'i') : null;
+    $: matches = (item : Post) =>
+        regex ? regex.test(item.title) || regex.test(item.summary) : true;
+    $: matched_posts = data.summaries.filter(matches);
 </script>
 
-<h1>All posts on deprived.dev!</h1>
-<ul>
-    {#each data.summaries as summary}
-        <NewsCard
+<div class="head">
+    <header>
+        <h1>Blog Posts</h1>
+        <input id="search" placeholder="Search Blog Posts" bind:value={search} />
+    </header>
+</div>
+
+<div class="list">
+    {#if matched_posts.length == 0}
+        <span>No Matches</span>
+    {/if}
+    {#each matched_posts as summary}
+        <NewsVerticalCard
             post_url={summary.url}
             title={summary.title}
             summary={summary.summary}
             creation_date={summary.creation_date.toString()}
         />
     {/each}
-</ul>
+</div>
+
+<style>
+    h1 {
+        font-size: 48px;
+        font-family: var(--title-font);
+    }
+    .head {
+        width: 100%;
+        background-color: var(--primary);
+    }
+
+    header {
+        display: flex;
+        flex-wrap: wrap;
+
+        align-items: center;
+        justify-content: space-around;
+
+        padding-bottom: 25px;
+        margin-bottom: 25px;
+    }
+
+    #search {
+        height: 40px;
+
+        border: none;
+        border-radius: 10px;
+        font-size: 18px;
+        line-height: 2;
+        padding: 0.5rem 0.8rem;
+
+        background-color: var(--background);
+        color: var(--text1);
+    }
+
+    .list {
+        max-width: 1500px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 25px;
+
+        justify-content: center;
+    }
+
+</style>

src/routes/post/posts_data.ts

@@ -1,5 +1,5 @@
 // TODO: document members
-type Post = {
+export type Post = {
     // Required
     url : string,
     title: string,