/post page styled

src/lib/posts/NewsVerticalCard.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    export let post_url : string = '404';
+    export let thumbnail_url : string = '/favicon.png';
+    export let thumbnail_alt : string = 'Picture describting the deprived devs logo';
+    export let title : string = '<title>';
+    export let summary : string = '<summary>';
+    export let creation_date : string = '<date>';
+
+    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
+</script>
+
+<div class="news-card">
+    <a href=/post/{post_url}>
+        <div class="thumbnail">
+            <img src={thumbnail_url} alt={thumbnail_alt}/>
+        </div>
+        <div class="content">
+            <p id="date">
+                {human_creation_date.getDate()}
+                {monthNames[human_creation_date.getMonth()]}
+                {human_creation_date.getFullYear()}
+            </p>
+            <h3 id="title">{title}</h3>
+            <p id="summary-text">{summary}</p>
+        </div>
+    </a>
+</div>
+
+<style>
+    .news-card {
+        flex: 0 0 300px;
+    }
+
+    a {
+        min-width: 100%;
+        text-decoration: none;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    .thumbnail > img {
+        object-fit: cover;
+
+        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
+        border-radius: 8px;
+
+        min-width: 100%;
+        aspect-ratio: 16 / 9;
+    }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    #title {
+        font-size: 22px;
+        margin: 0;
+        text-decoration: none;
+        color: var(--text2);
+    }
+
+    #summary-text {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text3);
+    }
+
+    #date {
+        margin: 0;
+        text-decoration: none;
+        color: var(--text4);
+    }
+</style>

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,