From c5edaa69b2e9aeb43bad43712a2b9244a2a87a4e Mon Sep 17 00:00:00 2001
From: Gabriel Chartier <gabriel@chartier.link>
Date: Wed, 14 Aug 2024 15:53:10 -0400
Subject: [PATCH] Added custom error page so GH pages doesn't fallback

---
 src/routes/+error.svelte  | 29 +++++++++++++++++++++++++++++
 src/routes/+layout.svelte | 16 ++++++++++------
 svelte.config.js          |  4 +++-
 3 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/+error.svelte

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..ae486b4
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,29 @@
+<script>
+    import { page } from "$app/stores";
+    import Waves from "$lib/components/Waves.svelte";
+
+    let heading = $page.status === 404 ? "404" : "Error";
+    let errorMessage =
+        $page.error && $page.error.message.includes("Error: ")
+            ? "An unknown error occurred"
+            : $page.error?.message;
+    let notFoundMessage =
+        $page.error?.message === "Not Found" ? "Page not found" : $page.error?.message;
+</script>
+
+<div
+    class="flex flex-col min-h-full h-full flex-grow justify-center items-center text-2xl overflow-hidden"
+>
+    <div
+        class="flex flex-col bg-gradient-to-b from-primary to-accentLight justify-between items-center"
+    >
+        <div class="text-center space-y-2 items-center justify-center h-full mt-64">
+            <h1 class="text-5xl lg:text-9xl font-black">{heading}</h1>
+            <p class="text-2xl lg:text-4xl text-muted-foreground">
+                {$page.status === 404 ? notFoundMessage : errorMessage}
+            </p>
+        </div>
+        <Waves />
+        <div class="bg-accent h-64 w-full"></div>
+    </div>
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9b4900b..fe8498b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,13 @@
 <script>
-	import '../app.pcss';
-	import Footer from '$lib/sections/Footer.svelte';
-	import Header from '$lib/sections/Header.svelte';
+    import "../app.pcss";
+    import Footer from "$lib/sections/Footer.svelte";
+    import Header from "$lib/sections/Header.svelte";
 </script>
 
-<Header />
-<slot />
-<Footer />
+<div class="flex flex-col min-h-screen">
+    <Header />
+    <main class="flex-grow bg-accent">
+        <slot />
+    </main>
+    <Footer />
+</div>
diff --git a/svelte.config.js b/svelte.config.js
index 60db8aa..8bd673c 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -6,7 +6,9 @@ const config = {
     preprocess: vitePreprocess(),
 
     kit: {
-        adapter: adapter(),
+        adapter: adapter({
+            fallback: "404.html",
+        }),
         paths: {
             base: process.env.NODE_ENV === "production" ? process.env.BASE_PATH : "",
         },