From 5e66f120f364735d0d4410e55d0ed7c15d98a2a6 Mon Sep 17 00:00:00 2001
From: J-onasJones <me@jonasjones.dev>
Date: Fri, 7 Jun 2024 01:48:01 +0200
Subject: [PATCH] refined 404 page

---
 src/components/Navbar.svelte             |  2 +-
 src/global.css                           |  1 +
 src/routes.ts                            |  4 +--
 src/routes/NotFound.svelte               | 33 +++++++++++++++++++-----
 src/routes/{Lorem.svelte => Post.svelte} | 21 ++++++++-------
 5 files changed, 42 insertions(+), 19 deletions(-)
 rename src/routes/{Lorem.svelte => Post.svelte} (56%)

diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index 3239f7b..ec1a03d 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -1,6 +1,6 @@
 <nav class="navbar">
     <ul>
-        <li><a href="/">Home</a></li>
+        <li><a href="/#/">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#contact">Contact</a></li>
         <a href="https://jonasjones.dev" class="sticky-link">Homepage</a>
diff --git a/src/global.css b/src/global.css
index 22c45b6..de09bdf 100644
--- a/src/global.css
+++ b/src/global.css
@@ -33,4 +33,5 @@ html, body {
 
 a, p {
   font-family: 'JetBrains Mono';
+  font-size: 20px;
 }
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 9ae68c3..fcac36a 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,9 +1,9 @@
 import Home from './routes/Home.svelte';
-import Lorem from './routes/Lorem.svelte';
+import Post from './routes/Post.svelte';
 import NotFound from './routes/NotFound.svelte';
 
 export default {
     '/': Home,
-    '/lorem/:repeat': Lorem,
+    '/post/:year/:month/:day/:title': Post,
     '*': NotFound
 };
diff --git a/src/routes/NotFound.svelte b/src/routes/NotFound.svelte
index 83598a8..98fa751 100644
--- a/src/routes/NotFound.svelte
+++ b/src/routes/NotFound.svelte
@@ -1,11 +1,30 @@
-<h1>Not Found</h1>
-<p>This route doesn't exist.</p>
+<div id="error">
+	<h1 id="code">404</h1>
+	<h1 id="msg">Not Found</h1>
+	<p>This post doesn't exist or has been deleted.</p>
+</div>
+
 
 <style>
-	h1 {
-		color: #ff0040;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
+	#error {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		text-align: center;
+
+	}
+	#code {
+		font-family: 'Pixelify Sans';
+		font-size: 7em;
+		font-weight: 400;
+		margin-bottom: 0;
+	}
+
+	#msg {
+		margin-top: 0;
+		font-family: 'Libre Barcode 128';
+		font-size: 5em;
+		font-weight: 400;
 	}
 </style>
diff --git a/src/routes/Lorem.svelte b/src/routes/Post.svelte
similarity index 56%
rename from src/routes/Lorem.svelte
rename to src/routes/Post.svelte
index ec5b555..08e852c 100644
--- a/src/routes/Lorem.svelte
+++ b/src/routes/Post.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
-    export let params: {repeat?: string} = {};
+    export let params: {year?: string, month?: string, day?: string, title?: string} = {};
 
-    let repeat = 1;
-    $: {
-        repeat = 1
-        if (params?.repeat) {
-            repeat = parseInt(params.repeat, 10)
-            if (repeat < 1) {
-                repeat = 1
-            }
+    if (params.year && params.month && params.day && params.title) {
+        const date = new Date(`${params.year}-${params.month}-${params.day}`);
+        if (isNaN(date.getTime())) {
+            // the date is invalid
+            // navigate to the 404 page
+            // this is the same as returning { status: 404 } from load()
+            location.href = '/404';
         }
+    } else {
+        // the URL is missing some parameters
+        // navigate to the 404 page
+        location.href = '/#/404';
     }
 </script>