feat: add custom 404 page

braboj · claude · braboj · commit aec4a47568c4 · 2026-04-26T15:09:44.000+03:00
Branded error page with header, footer, and link back to tutorial home. Includes noindex meta tag and dark mode support. Closes #212 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/astro-site/src/pages/404.astro b/astro-site/src/pages/404.astro
@@ -0,0 +1,35 @@
+---
+import "../styles/global.css";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
+import site from "../data/site.json";
+
+const base = import.meta.env.BASE_URL;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Page Not Found — {site.title}</title>
+    <meta name="robots" content="noindex" />
+    <script is:inline>
+      document.documentElement.setAttribute(
+        "data-theme",
+        localStorage.getItem("theme") || "light"
+      );
+    </script>
+  </head>
+  <body>
+    <Header currentPath="/" />
+    <main class="content" style="text-align: center; padding: 4rem 1rem;">
+      <h1>404 — Page Not Found</h1>
+      <p style="margin: 1rem 0 2rem; color: var(--color-fg-muted);">
+        The page you're looking for doesn't exist or has been moved.
+      </p>
+      <a href={base} style="color: var(--color-link);">Back to the tutorial</a>
+    </main>
+    <Footer />
+  </body>
+</html>
