404 page

src/routes/+error.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import BackAnchor from '$lib/BackAnchor.svelte'
-
 	import { page } from '$app/stores'
+	
+	const message = $page.error?.message
 </script>
 
 <nav>
@@ -10,7 +11,9 @@
 <section class="error-page">
 	<div>
 		<h1>{$page.status}</h1>
-		<h2>{$page.error.message}</h2>
+		{#if message}
+			<h2>{message}</h2>
+		{/if}
 	</div>
 </section>
 

src/routes/+layout.ts

@@ -1,3 +1,5 @@
+export const prerender = true
+
 export const load = async function ({ url }) {
 	return {
 		pathname: url.pathname,

src/routes/404/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import BackAnchor from '$lib/BackAnchor.svelte'
+</script>
+
+<nav>
+	<BackAnchor href="/" />
+</nav>
+<section class="error-page">
+	<div>
+		<h1>404</h1>
+		<h2>Not found</h2>
+	</div>
+</section>
+
+<style>
+	.error-page {
+		max-width: fit-content;
+		text-align: center;
+		margin: 0 auto;
+
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	h1 {
+		margin: 0;
+		font-size: 5rem;
+	}
+
+	h2 {
+		margin: 0;
+		color: var(--text-color-alt-3);
+		font-weight: normal;
+	}
+</style>

svelte.config.js

@@ -19,10 +19,12 @@ const config = {
 	kit: {
 		adapter: staticAdapter({
 			precompress: true,
+			fallback: 'fallback.html',
 		}),
 		prerender: {
 			entries: [
 				'*',
+				'/404',
 				'/minecraft-scanning/minecraft-server-background.png',
 				// redirect /blog/* to /*
 				'/blog/matdoes-dev-markdown',