✨ Add 404 Page

Thanks @IanSSenne for pointing out it was missing!

Author: SnaveSutit

src/lib/styles/kit-docs.css

@@ -75,6 +75,8 @@
 	--kd-color-body: 31 33 40;
 	--kd-color-focus: 129 140 248;
 
+	--kd-color-subtle: rgb(106, 116, 132);
+
 	--kd-code-fence-bg: rgb(22 23 27);
 	--kd-code-fence-fg: rgb(186 190 216);
 }

src/routes/+layout.ts

@@ -1,11 +1,12 @@
 import { createKitDocsLoader } from '@svelteness/kit-docs'
 
 export const prerender = true
+export const ssr = false
 
 export const load = createKitDocsLoader({
 	sidebar: {
 		'/': null,
 		'/docs': '/docs',
-		"/404": "/docs"
+		'/404': '/docs'
 	}
 })

src/routes/404/+page.svelte

@@ -1,17 +1,49 @@
 <script lang="ts">
+	export const flavorQuotes = [
+		`Uh oh!`,
+		`Time to fire up the ol' debugger!`,
+		`Your item displays are sad 🥺`,
+		`Skill Issue.`,
+		`Should'a seen that one comming...`,
+		`Snaviewavie did an oopsie poopsie x3`,
+		`We to a little trolling.`,
+		`execute run execute run execute run execute run say This is fine.`,
+		`This is why we can't have nice things. :(`,
+		`Have you tried turning it off and on again?`,
+		`What if I put my command block next to yours? Haha just kidding... Unless?`,
+		`If at first you don't succeed, try, try again!`,
+		// We do a little trolling in binary.
+		`B:01010111 01100101 00100000 01100100 01101111 00100000 01100001 00100000 01101100 01101001 01110100 01110100 01101100 01100101 00100000 01110100 01110010 01101111 01101100 01101100 01101001 01101110 01100111`,
+		`I've decided to stop working for today. Try again tomorrow!`,
+		`Every time you see this error message, a developer vanishes in a puff of binary.`,
+		`"Flavor Text"? I've never tasted text before...`,
+		`( ͡° ͜ʖ ͡°) nice 404 page you got there.`,
+		`Some day you'll learn. But until then, I control the cheese.`,
+		`Please deposit 5 coins!`,
+		`Failed to find global 'pandemic'.`,
+		`I'm sorry, Dave. I'm afraid I can't do that.`,
+		`<a href="https://xkcd.com/221/"><img src="https://imgs.xkcd.com/comics/random_number.png" alt="https://xkcd.com/221/"/></a>`
+	]
+
+	function getRandomFlavorQuote() {
+		return flavorQuotes[Math.floor(Math.random() * flavorQuotes.length)]
+	}
 </script>
 
 <div class="page">
 	<div class="center-container">
 		<div class="header-container">
-			<!-- svelte-ignore a11y-missing-attribute -->
-			<img src="/img/animated_java_icon.svg" />
+			<img src="/img/animated_java_icon.svg" alt="Animated Java icon" />
 			<div>
 				<h1>Uh oh :(</h1>
-				<p>Something's missing here.</p>
+				<p>Looks like that page doesn't exist!</p>
+				<p>
+					Try <a href="/docs">searching our documentation</a> or return to the
+					<a href="/">home page</a>.
+				</p>
 			</div>
-
 		</div>
+		<q class="quote"><span>{@html getRandomFlavorQuote()}</span></q>
 	</div>
 </div>
 
@@ -35,6 +67,13 @@
 	.discord-widget :global(.widgetBody-38iyIo) {
 		display: none;
 	} */
+	a {
+		color: var(--tw-prose-links);
+		text-decoration: none;
+		font-weight: 400;
+		border-bottom: 1px solid rgb(var(--kd-color-brand));
+	}
+
 	.page {
 		display: flex;
 		flex-direction: column;
@@ -54,7 +93,7 @@
 	.header-container {
 		display: flex;
 		align-items: center;
-		margin: 6rem 0 0rem 0;
+		margin-top: 2rem;
 	}
 	.header-container div {
 		display: flex;
@@ -71,16 +110,21 @@
 		margin: 0px;
 		font-size: 3rem;
 	}
-	hr {
-		width: 100%;
-		margin: 0rem 0 0.5rem 0;
-		border: 1px solid rgb(var(--kd-color-brand));
+
+	q {
+		margin: 1rem 0;
+		color: var(--kd-color-subtle);
+		font-size: 1.25rem;
+		font-style: italic;
+	}
+
+	q span {
+		margin: 0 0.25em;
 	}
 
 	@media (max-width: 768px) {
 		.header-container {
 			flex-direction: column;
-			margin: 2rem 0 0 0;
 		}
 		.header-container > div {
 			margin-left: unset;