Merge pull request #1257 from nbogie/nb-add-astro-404-with-case-help

ksen0 · web-flow · commit eb3905c1cdc5 · 2026-03-20T02:10:10.000+01:00
Add rough custom 404 page in astro with quick search
diff --git a/.github/workflows/beta_deploy.yml b/.github/workflows/beta_deploy.yml
@@ -1,4 +1,4 @@
-name: Deploy beta to Netlify
+name: Deploy beta to Cloudflare
 
 on:
   # Trigger the workflow every time you push to the `main` branch
@@ -20,6 +20,12 @@ jobs:
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: Install dependencies
+        run: npm ci
       - name: Build website
         run: npm run build
       - name: Deploy to Cloudflare Workers
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -0,0 +1,54 @@
+---
+import Head from "@components/Head/index.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { getCurrentLocale } from "../i18n/utils.ts";
+const currentLocale = getCurrentLocale(Astro.url.pathname);
+---
+
+<Head title="404: Page Not Found" locale={currentLocale} />
+
+<BaseLayout title="404: Page Not Found">
+    <section class="flex flex-col items-start gap-8 py-8 px-2 prose max-w-none">
+        <p>
+            Sorry, we couldn't find your exact page
+            <code id="display-path"></code>.
+
+            <div class="flex flex-col gap-4">
+                <a id="search-link" href="/search/" class="btn">
+                    Search here for <code id="display-search-term"></code>
+                </a>
+                or
+                <a href="/" class="btn secondary">go home</a>
+            </div>
+        </p>
+    </section>
+    <script is:inline>
+        (function update404PageDetails() {
+            function getLastPathSegment(path) {
+                return path.split("/").filter(Boolean).pop() ?? "";
+            }
+
+            // 1. Get the last meaningful segment from the URL path, excluding hash part
+            // 2. Use that in the link href to the search
+            // 3. Also display it and the failed path
+
+            //(This .pathname already strips away any hash part)
+            const realPath = window.location.pathname;
+            const term = getLastPathSegment(realPath);
+
+            const displayPathEl = document.getElementById("display-path");
+            const searchLinkEl = document.getElementById("search-link");
+            const displaySearchTermEl = document.getElementById("display-search-term");
+
+            if (displayPathEl) {
+                displayPathEl.textContent = realPath;
+            }
+            if (displaySearchTermEl) {
+                displaySearchTermEl.textContent = term;
+            }
+            if (searchLinkEl) {
+                searchLinkEl.href = `/search/?term=${encodeURIComponent(term)}`;
+            }
+        })();
+    </script>
+</BaseLayout>
diff --git a/wrangler.jsonc b/wrangler.jsonc
@@ -17,7 +17,8 @@
     "nodejs_compat"
   ],
   "assets": {
-    "directory": "dist"
+    "directory": "dist",
+    "not_found_handling": "404-page"
   },
   "env": {
     "beta": {
