From 3bae1a096425b1e1811256b56dad59dc613d8d22 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Thu, 21 Nov 2024 15:47:06 -0600
Subject: [PATCH] Fix live 404 handling

---
 404/index.page.tsx      | 27 +++++++++++++++++++++------
 middleware/redirects.ts |  9 +++++++++
 styles.css              | 18 ++++++++++++++++--
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/404/index.page.tsx b/404/index.page.tsx
index f75958d8..d3800f19 100644
--- a/404/index.page.tsx
+++ b/404/index.page.tsx
@@ -18,11 +18,19 @@ const styles = /*css*/ `
   margin-block-start: 0;
 }
 
-#content nav :where(li, a, h2, button) {
+#content nav :where(li, h2) {
   padding-inline-start: 0;
+  margin-inline: 0;
   text-wrap: balance;
 }`;
 
+const scripts = /*js*/ `
+  const searchParams = new URLSearchParams(document.location.search);
+  const pathParam = searchParams.get("path");
+  const decodedPath = decodeURIComponent(pathParam);
+  document.getElementById("tried-path").innerText = decodedPath;
+`;
+
 export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
   return (
     <main
@@ -30,14 +38,21 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
       class="max-w-screen-xl px-4 md:px-12 md:mx-auto pt-6 mb-20"
     >
       <style>{styles}</style>
-      <div class="space-y-2 mt-8 mb-16">
-        <h1 class="text-2xl font-semibold sm:text-3xl lg:text-4xl">
-          Sorry, couldn't find that page
+      <div class="mt-8 mb-16 lg:mb-24">
+        <h1 class="text-2xl font-semibold sm:text-3xl md:text-4xl">
+          Sorry, couldn’t find that page.
         </h1>
-        <p class="md:text-xl">
-          Maybe one of these links is what you're looking for?
+        <p class="text-sm mt-3">
+          Failed to match route{" "}
+          <code class="p-1 rounded bg-foreground-tertiary" id="tried-path">
+            404
+          </code>
+        </p>
+        <p class="md:text-lg mt-6">
+          Maybe one of these links has what you're looking for?
         </p>
       </div>
+      <script dangerouslySetInnerHTML={{ __html: scripts }} />
 
       <props.comp.Sidebar
         sidebar={sidebar}
diff --git a/middleware/redirects.ts b/middleware/redirects.ts
index 1f582dd0..b0f857ad 100644
--- a/middleware/redirects.ts
+++ b/middleware/redirects.ts
@@ -46,6 +46,15 @@ export default async function redirectsMiddleware(
       res = await next(req);
     }
 
+    if (res.status === 404) {
+      res = new Response(null, {
+        headers: {
+          location: "/404" + "?path=" + encodeURIComponent(url.pathname)
+        },
+        status: 303,
+      });
+    }
+
     return res;
   } catch (e) {
     res = new Response("Internal Server Error", {
diff --git a/styles.css b/styles.css
index c0d3abbe..0eef9053 100644
--- a/styles.css
+++ b/styles.css
@@ -232,8 +232,22 @@ pre.highlight:has(code):where(:hover, :focus) + .copyButton {
   opacity: 1;
 }
 
-:root {
-  font-feature-settings: "cv05" on, "cv08" on, "cv09" on, "ss01" on, "ss08" on;
+@font-feature-values Inter {
+  @character-variant {
+    cv05: 5;
+    cv08: 8;
+    cv10: 10;
+  }
+  @styleset {
+    ss01: 1;
+    ss07: 7;
+    ss08: 8;
+  }
+}
+
+body {
+  font-variant-alternates: character-variant(cv05, cv08, cv10)
+    styleset(ss01, ss07, ss08);
 }
 
 /* Common styles for all CTAs */