Automatically add heading IDs to all pages (even non-markdown)

site/package.json

@@ -19,7 +19,9 @@
     "@fontsource/patua-one": "^5.0.19",
     "astro": "^5.7.13",
     "astro-icon": "^1.1.5",
+    "cheerio": "^1.0.0",
     "fast-glob": "^3.3.2",
+    "github-slugger": "^2.0.0",
     "lodash-es": "^4.17.21",
     "typescript": "^5.8.2"
   },

site/src/components/Footer.astro

@@ -23,7 +23,7 @@ const flattenedNavLinks = defaultNavLinks.reduce((links, parentOrLink) => {
 }, [] as NavLink[]);
 ---
 
-<footer class={mode}>
+<footer id="footer" class={mode}>
   <div class="links">
     {
       flattenedNavLinks.map(({ name, href, footerClass }) => (

site/src/middleware.ts

@@ -0,0 +1,22 @@
+import type { MiddlewareHandler } from "astro";
+import { sequence } from "astro:middleware";
+import { load } from "cheerio";
+import GithubSlugger from "github-slugger";
+
+/**
+ * Ensures all headings have IDs
+ * (even *.astro pages, which can't be done via `markdown` config)
+ */
+const addHeadingIds: MiddlewareHandler = async (_, next) => {
+  const response = await next();
+  const $ = load(await response.text());
+  const slugger = new GithubSlugger();
+
+  $("h1, h2, h3, h4, h5, h6").each((_, el) => {
+    if (!el.attribs.id) el.attribs.id = slugger.slug($(el).text());
+  });
+
+  return new Response($.html(), response);
+};
+
+export const onRequest = sequence(addHeadingIds);

site/src/pages/museum/about.astro

@@ -83,7 +83,7 @@ const headerNavLinks =
       </div>
     </div>
 
-    <div class="header-gradient-backer">
+    <div class="header-gradient-backer" id="travel-directions">
       <svg
         class="travel-directions"
         width="219px"

site/src/pages/museum/index.astro

@@ -1,7 +1,6 @@
 ---
 import { getCollection, getEntry } from "astro:content";
 import Carousel from "@/components/Carousel.astro";
-import CookieBanner from "@/components/CookieBanner.astro";
 import CoverImage from "@/components/CoverImage.astro";
 import Layout from "@/layouts/Layout.astro";
 import Video from "@/components/Video.astro";