defualt post layout

src/routes/+layout.server.ts

@@ -11,15 +11,8 @@ export function load() {
     // Sort by newest news first
     posts.sort((a, b) => b.creation_date - a.creation_date);
 
-    posts.map((post) => {
-        let summary : Post = {
-            url: post.url,
-            title : post.title,
-            summary : post.summary,
-            creation_date : post.creation_date,
-            modification_date : post.modification_date
-        };
-        summaries.push(summary);
+    posts.forEach((post) => {
+        summaries.push(post);
     });
 
     return { summaries };

src/routes/+layout.svelte

@@ -63,7 +63,7 @@
 <footer>
     <div class="about-container">
         <div class="credits">
-            <span>© 2023-2024 Developed by:</span>
+            <span>© 2023-2024</span>
             <br>
             <span>Benjamin Dreyer</span>
             <br>

src/routes/post/+layout.svelte

@@ -3,10 +3,80 @@
     import { type BlogData } from './+layout';
 
     export let data : BlogData
+
+    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+    function humanDate(date : Date) : string {
+        return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
+    }
 </script>
 
-{#if data}
-    <h3>{data.post.title}</h3>
-{/if}
+<article>
+    <div class="body">
+        <header>
+            <img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} />
+            <h3 id="title">{data.post.title}</h3>
+            <div class="dates">
+                <span class="date">Created {humanDate(new Date(+data.post.creation_date * 1000))}</span>
+                <span class="date">Last Modified {humanDate(new Date(+data.post.modification_date * 1000))}</span>
+            </div>
+        </header>
+        <div class="content">
+            <slot />
+        </div>
+    </div>
+</article>
 
-<slot />
+
+<style>
+    article {
+        margin-top: 25px;
+        margin-inline: auto;
+        max-width: 1000px;
+
+        /* background: var(--background1); */
+    }
+
+    header {
+        display: flex;
+        flex-direction: column;
+
+        margin-bottom: 50px;
+    }
+
+    #blog-cover-img {
+        aspect-ratio: 16 / 9;
+        max-width: 100%;
+
+        border-radius: 0.5rem;
+    }
+
+    #title {
+        font-family: var(--title-font);
+        font-size: 36px;
+        margin: 0;
+    }
+
+    .dates {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .date {
+        color: var(--text3);
+    }
+
+    .body {
+        margin-inline: auto;
+        max-width: 1200px;
+        padding: 25px;
+    }
+
+    .content {
+        line-height: 2;
+        font-size: 18px;
+        text-rendering: optimizeLegibility;
+    }
+</style>

src/routes/posts/posts_data.ts

@@ -2,6 +2,8 @@
 export type Post = {
     // Required
     url : string,
+    cover_img : string,
+    cover_alt : string,
     title: string,
     summary : string,
     creation_date : number
@@ -9,12 +11,13 @@ export type Post = {
 
     // Optional
     // TODO: author?
-    // TODO: image cover
 }
 
 export const posts : Post[] = [
     {
         url: 'folder-icons',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Image of folder icons being used in the editor',
         title: 'Amazing Icons for Folders in Unity!',
         summary: 'See how you can use Zhen\'s folder icons for Unity to boost your developer experience',
         creation_date: 1708382491,
@@ -22,6 +25,8 @@ export const posts : Post[] = [
     },
     {
         url: 'lorem',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
         title: 'Lorem Ipsum !!',
         summary: 'This is a nice exploanation on lorem ipsum latin',
         creation_date: 1708382491,
@@ -29,6 +34,8 @@ export const posts : Post[] = [
     },
     {
         url: 'lorem1',
+        cover_img: '/images/posts/folder-icons/cover.png',
+        cover_alt: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
         title: 'Idk some arcticle bruh!',
         summary: 'Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.',
         creation_date: 1708558377,