From 17e60a240ff68e16189c586c244b79514ea44ac9 Mon Sep 17 00:00:00 2001
From: jxom <7336481+jxom@users.noreply.github.com>
Date: Tue, 20 Jan 2026 14:57:41 +1100
Subject: [PATCH] Add custom 404 page

---
 src/pages/404.mdx | 15 +++++++++++++++
 vocs.config.ts    | 21 +++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/pages/404.mdx

diff --git a/src/pages/404.mdx b/src/pages/404.mdx
new file mode 100644
index 0000000..0363f5f
--- /dev/null
+++ b/src/pages/404.mdx
@@ -0,0 +1,15 @@
+---
+title: Page not found
+description: The page you're looking for doesn't exist. Navigate back to Tempo documentation.
+---
+
+<div className="flex flex-col items-center justify-center text-center py-16">
+  <div className="text-[120px] font-bold text-[var(--vocs-color_text3)] leading-none select-none">404</div>
+  <h1 className="text-2xl font-semibold mt-4 mb-2">Page not found</h1>
+  <p className="text-[var(--vocs-color_text2)] max-w-md mb-8">
+    The page you're looking for doesn't exist or may have been moved.
+  </p>
+  <a href="/" className="text-[var(--vocs-color_textAccent)] hover:underline">
+    ← Back to home
+  </a>
+</div>
diff --git a/vocs.config.ts b/vocs.config.ts
index 6f5b8dc..1567731 100644
--- a/vocs.config.ts
+++ b/vocs.config.ts
@@ -645,4 +645,25 @@ export default defineConfig({
       },
     },
   },
+  vite: {
+    plugins: [
+      {
+        // Vocs's default NotFound component shows a generic 404 page.
+        // This patches it to redirect to our custom /404 page instead.
+        name: 'fix-404-route',
+        transform(code, id) {
+          if (!id.includes('vocs/_lib/app/routes')) return
+          return code
+            .replace(
+              "import { NotFound } from './components/NotFound.js';",
+              "import { Navigate } from 'react-router';",
+            )
+            .replace(
+              '_jsx(NotFound, {})',
+              '_jsx(Navigate, { to: "/404", replace: true })',
+            )
+        },
+      },
+    ],
+  },
 })