From eb987369fc977569e0ec4df5bd5cc5ecd67b91ff Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 5 Mar 2022 12:08:13 +0100
Subject: [PATCH] blog style improvements

---
 src/lib/components/heroPost.svelte |  2 ++
 src/lib/components/navbar.svelte   |  4 +++
 src/lib/components/post.svelte     | 10 +++----
 src/lib/components/posts.svelte    |  2 +-
 src/lib/layouts/post.svelte        | 18 ++++++++----
 src/routes/posts/__layout.svelte   |  7 +++++
 src/routes/posts/index.svelte      | 47 ++++++++++++++++++++++++++++++
 7 files changed, 78 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/posts/__layout.svelte
 create mode 100644 src/routes/posts/index.svelte

diff --git a/src/lib/components/heroPost.svelte b/src/lib/components/heroPost.svelte
index 1b5b8b3..0c8a0f0 100644
--- a/src/lib/components/heroPost.svelte
+++ b/src/lib/components/heroPost.svelte
@@ -53,6 +53,8 @@
     h3 {
         font-weight: 400;
         font-size: 29px;
+        padding: 0;
+        margin: 0;
     }
     p {
         font-size: 18px;
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 4ad9f25..026b8e4 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -49,6 +49,10 @@
 	.bar h3 {
 		font-size: 18px;
 		font-weight: bold;
+		color: black;
+	}
+	.dark.bar h3 {
+		color: white;
 	}
 	.bar a {
 		color: #202020b2;
diff --git a/src/lib/components/post.svelte b/src/lib/components/post.svelte
index 5dfbb14..bc7ec59 100644
--- a/src/lib/components/post.svelte
+++ b/src/lib/components/post.svelte
@@ -2,7 +2,7 @@
     export var thumbnail;
     export var categories = [];
     export var author;
-    export var date;
+    export var relDate;
     export var title;
     export var authorIcon;
     export var currentHover;
@@ -30,10 +30,10 @@
         <h4>{title}</h4>
         <div class="author">
             <img src={authorIcon} alt="Avatar of author" draggable={false}>
-            —
+            <span class="spacer">—</span>
             <span class="author">{author}</span>
-            —
-            <span class="date">{date}</span>
+            <span class="spacer">—</span>
+            <span class="date">{relDate}</span>
         </div>
     </div>
 </a>
@@ -56,7 +56,7 @@
         align-items: center;
     }
     h4 {
-        margin: 0;
+        margin: 5px 0;
         font-weight: 400;
         font-size: 18px;
     }
diff --git a/src/lib/components/posts.svelte b/src/lib/components/posts.svelte
index fd71c55..0af1e9f 100644
--- a/src/lib/components/posts.svelte
+++ b/src/lib/components/posts.svelte
@@ -16,7 +16,7 @@
     </div>
     {#if posts.length > 1}
         <div class="posts">
-            {#each posts.slice(1) as post (post.title)}
+            {#each posts.slice(1, 6) as post (post.title)}
                 <Post {...post} bind:currentHover />
             {/each}
         </div>
diff --git a/src/lib/layouts/post.svelte b/src/lib/layouts/post.svelte
index 91449c2..b072fff 100644
--- a/src/lib/layouts/post.svelte
+++ b/src/lib/layouts/post.svelte
@@ -1,21 +1,21 @@
 <script>
-    import Navbar from "$lib/components/navbar.svelte";
     import darkmode from "$lib/stores/darkmode";
+    import { DateTime } from "luxon";
 
     export let title;
     export let date;
+    export let description;
 </script>
 
 <svelte:head>
-	<title>Daniel Bulant - Homepage</title>
-	<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
+	<title>{title} - Daniel Bulant</title>
+	<meta name="description" content={description}>
 </svelte:head>
 
-<Navbar />
-
 <main class:dark={$darkmode}>
+    <span>Posts /</span>
     <h1>{title}</h1>
-    <span>{date}</span>
+    <span>Written {DateTime.fromISO(date).toRelativeCalendar()}</span>
     <slot />
 </main>
 
@@ -25,4 +25,10 @@
         max-width: 700px;
         padding: 0 20px;
 	}
+    h1 {
+        padding: 0 0 15px;
+    }
+    span {
+        color: gray;
+    }
 </style>
\ No newline at end of file
diff --git a/src/routes/posts/__layout.svelte b/src/routes/posts/__layout.svelte
new file mode 100644
index 0000000..839160c
--- /dev/null
+++ b/src/routes/posts/__layout.svelte
@@ -0,0 +1,7 @@
+<script>
+    import Navbar from "$lib/components/navbar.svelte";
+</script>
+
+<Navbar/>
+
+<slot />
\ No newline at end of file
diff --git a/src/routes/posts/index.svelte b/src/routes/posts/index.svelte
new file mode 100644
index 0000000..ccc0c1d
--- /dev/null
+++ b/src/routes/posts/index.svelte
@@ -0,0 +1,47 @@
+<script context="module">
+	/** @type {import('./[slug]').Load} */
+	export async function load({ params, fetch, session, stuff }) {
+		const response = await fetch("/api/posts.json");
+	
+		return {
+			props: {
+				posts: response.ok && (await response.json())
+			}
+		};
+	}
+</script>
+
+<script>
+    import HeroPost from "$lib/components/heroPost.svelte";
+import Post from "$lib/components/post.svelte";
+
+    var currentHover = null;
+    export var posts;
+</script>
+
+<svelte:head>
+	<title>Blog - Daniel Bulant</title>
+	<meta name="description" content="My personal blog about work, programming and fun stuff.">
+</svelte:head>
+
+<div class="posts">
+    <h1>Posts</h1>
+
+    <HeroPost {...posts[0]} />
+
+    {#each posts.slice(1) as post (post.title)}
+        <Post {...post} bind:currentHover />
+    {/each}
+</div>
+
+<style>
+    .posts {
+        margin: auto;
+        max-width: 700px;
+        padding: 0 20px;
+    }
+    h1 {
+        margin: 0;
+        padding: 0;
+    }
+</style>
\ No newline at end of file