feat: proper http error pages (frontend only, closes #3)

web/nginx.conf

@@ -34,6 +34,7 @@ server {
     }
 
     location / {
+        # If no filepath matches to the requested, 404s will be handled by Svelte
         try_files $uri $uri/ /index.html;
 
         # Cache static assets
@@ -42,7 +43,4 @@ server {
             add_header Cache-Control "public, no-transform";
         }
     }
-
-    # Route 404 errors to front page
-    error_page 404 /;
 }

web/src/app.css

@@ -101,6 +101,22 @@
 }
 
 @layer components {
+	/* * * * * * * * * */
+	/*   Error pages   */
+	/* * * * * * * * * */
+
+	.error-page-container {
+		@apply flex h-screen w-full flex-col items-center justify-center align-middle;
+	}
+
+	.error-page-emoji {
+		@apply pb-3 text-6xl;
+	}
+
+	.error-page-title {
+		@apply font-copernicus text-2xl;
+	}
+
 	/* * * * * * * * * * * * */
 	/*   Loading animation   */
 	/* * * * * * * * * * * * */

web/src/routes/+error.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { page } from "$app/state"
+</script>
+
+<div class="error-page-container">
+	<p class="error-page-emoji">🫠</p>
+	<h1 class="error-page-title">{page.status} {page.error?.message}</h1>
+</div>