refined 404 page

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>

src/global.css

@@ -33,4 +33,5 @@ html, body {
 
 a, p {
   font-family: 'JetBrains Mono';
+  font-size: 20px;
 }

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
 };

src/routes/NotFound.svelte

@@ -1,11 +1,30 @@
-<h1>Not Found</h1>
+<div id="error">
-<p>This route doesn't exist.</p>
+	<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 {
+	#error {
-		color: #ff0040;
+		display: flex;
-		text-transform: uppercase;
+		justify-content: center;
-		font-size: 4em;
+		align-items: center;
-		font-weight: 100;
+		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>

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;
+    if (params.year && params.month && params.day && params.title) {
-    $: {
+        const date = new Date(`${params.year}-${params.month}-${params.day}`);
-        repeat = 1
+        if (isNaN(date.getTime())) {
-        if (params?.repeat) {
+            // the date is invalid
-            repeat = parseInt(params.repeat, 10)
+            // navigate to the 404 page
-            if (repeat < 1) {
+            // this is the same as returning { status: 404 } from load()
-                repeat = 1
+            location.href = '/404';
-            }
         }
+    } else {
+        // the URL is missing some parameters
+        // navigate to the 404 page
+        location.href = '/#/404';
     }
 </script>