feat: redirect to previous path if its a 404 (denoland#1162)

Co-authored-by: Josh Collinsworth <[email protected]>

404/index.page.tsx

@@ -0,0 +1,50 @@
+export const layout = "raw.tsx";
+export const url = "/404";
+import { sidebar } from "../runtime/_data.ts";
+
+const styles = /*css*/ `
+#content nav {
+  padding-inline: 0;
+}
+#content nav > ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+  gap: 1.5rem;
+}
+
+#content nav h2 {
+  width: 100%;
+  margin-inline: 0;
+  margin-block-start: 0;
+}
+
+#content nav :where(li, a, h2, button) {
+  padding-inline-start: 0;
+  text-wrap: balance;
+}`;
+
+export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
+  return (
+    <main
+      id="content"
+      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
+        </h1>
+        <p class="md:text-xl">
+          Maybe one of these links is what you're looking for?
+        </p>
+      </div>
+
+      <props.comp.Sidebar
+        sidebar={sidebar}
+        search={props.search}
+        url={props.url}
+        headerPath={props.headerPath!}
+      />
+    </main>
+  );
+}

_config.ts

@@ -1,24 +1,24 @@
 import "@std/dotenv/load";
 
 import lume from "lume/mod.ts";
+import checkUrls from "lume/plugins/check_urls.ts";
 import esbuild from "lume/plugins/esbuild.ts";
 import jsx from "lume/plugins/jsx_preact.ts";
+import postcss from "lume/plugins/postcss.ts";
 import prism from "lume/plugins/prism.ts";
 import redirects from "lume/plugins/redirects.ts";
 import search from "lume/plugins/search.ts";
 import sitemap from "lume/plugins/sitemap.ts";
-import postcss from "lume/plugins/postcss.ts";
-import checkUrls from "lume/plugins/check_urls.ts";
 
 import tw from "tailwindcss";
 import tailwindConfig from "./tailwind.config.js";
 
 import Prism from "npm:[email protected]";
-import "npm:[email protected]/components/prism-typescript.js";
+import "npm:[email protected]/components/prism-bash.js";
 import "npm:[email protected]/components/prism-diff.js";
 import "npm:[email protected]/components/prism-json.js";
-import "npm:[email protected]/components/prism-bash.js";
 import "npm:[email protected]/components/prism-json5.js";
+import "npm:[email protected]/components/prism-typescript.js";
 
 Prism.languages.jsonc = Prism.languages.json5;
 
@@ -43,11 +43,11 @@ import {
 } from "./orama.ts";
 
 import apiDocumentContentTypeMiddleware from "./middleware/apiDocContentType.ts";
+import createRoutingMiddleware from "./middleware/functionRoutes.ts";
+import createGAMiddleware from "./middleware/googleAnalytics.ts";
 import redirectsMiddleware, {
   toFileAndInMemory,
 } from "./middleware/redirects.ts";
-import createRoutingMiddleware from "./middleware/functionRoutes.ts";
-import createGAMiddleware from "./middleware/googleAnalytics.ts";
 
 const site = lume(
   {
@@ -62,6 +62,7 @@ const site = lume(
         }),
         apiDocumentContentTypeMiddleware,
       ],
+      page404: "/404",
     },
   },
   {
@@ -280,13 +281,13 @@ site.ignore(
 );
 
 site.scopedUpdates((path) => path == "/overrides.css");
-site.use(checkUrls({
-  external: false, // Set to true to check external links
-  output: "_broken_links.json",
-  ignore: [
-    "https://www.googletagmanager.com",
-  ],
-}));
+site.use(
+  checkUrls({
+    external: false, // Set to true to check external links
+    output: "_broken_links.json",
+    ignore: ["https://www.googletagmanager.com"],
+  }),
+);
 
 site.remoteFile(
   "orama.css",

middleware/redirects.ts

@@ -1,9 +1,9 @@
+import { existsSync } from "@std/fs";
+import { Page } from "lume/core/file.ts";
 import type { RequestHandler } from "lume/core/server.ts";
+import type Site from "lume/core/site.ts";
 import GO_LINKS from "../go.json" with { type: "json" };
 import REDIRECT_LINKS from "../oldurls.json" with { type: "json" };
-import { existsSync } from "@std/fs";
-import type Site from "lume/core/site.ts";
-import { Page } from "lume/core/file.ts";
 
 type Status = 301 | 302 | 307 | 308;
 type Redirect = [string, string, Status];
@@ -45,6 +45,7 @@ export default async function redirectsMiddleware(
     } else {
       res = await next(req);
     }
+
     return res;
   } catch (e) {
     res = new Response("Internal Server Error", {

tailwind.config.js

@@ -2,7 +2,7 @@
 /** @type {import('npm:tailwindcss').Config} */
 export default {
   content: [
-    "{by-example,deploy,_components,_includes,runtime,static,subhosting}/**/*.{md,ts,tsx}",
+    "{by-example,deploy,_components,_includes,runtime,static,subhosting,404}/**/*.{md,ts,tsx}",
     "*.{ts,tsx}",
   ],
   corePlugins: {