add footer navigation and breadcrumbs (#29)

dscho · web-flow · commit e4f7dd175f8e · 2026-02-25T08:00:21.000Z
## Summary - Add a footer with navigation links (Home, Architecture, Reply to this) to de-orphan sub-pages that previously had no way to navigate between them - Prevent `graphviz-ssr.js` from rewriting footer URLs into empty links. - Add JSON-LD breadcrumb structured data for each page so search engines understand the site hierarchy <br /><br /> <img width="400" height="241" alt="footer-gitgitgadget" src="https://github.com/user-attachments/assets/64c8b1cf-6a06-46bd-9c73-44255d025fc8" />
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -78,6 +78,29 @@ div.feature-matrix {
     vertical-align: center;
   }
 }
+footer nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em 1em;
+  justify-content: center;
+  text-align: center;
+}
+footer nav ul li a {
+  text-decoration: none;
+}
+.footer-favicon {
+  width: 24px;
+  height: 24px;
+  display: block;
+}
+.footer-home-link {
+  display: block;
+  width: 24px;
+  margin: 0.75em auto 0;
+}
 @media screen and (max-width: 450px) {
   big {
     font-size: 300%;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,6 +7,7 @@
     <link rel="icon" href="{{ relURL "favicon.ico" }}">
     {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "main.scss" . | css.Sass }}
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+    {{- partial "breadcrumbs.html" . -}}
   </head>
   <body>
     {{ partial "banner.html" . -}}
diff --git a/layouts/_default/index.html b/layouts/_default/index.html
@@ -1,3 +1,4 @@
 {{ define "main" }}
 {{ .Content | replaceRE "(<h2 id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1} <a href="#${2}">#</a> ${3}` | safeHTML }}
+{{ partial "footer.html" . }}
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -2,4 +2,5 @@
 <div class="block">
 {{ .Content }}
 </div>
+{{ partial "footer.html" . }}
 {{ end }}
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
@@ -0,0 +1,20 @@
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "BreadcrumbList",
+  "itemListElement": [
+    {
+      "@type": "ListItem",
+      "position": 1,
+      "name": "Home",
+      "item": "{{ .Site.BaseURL }}"
+    }{{ if ne .Kind "home" }},
+    {
+      "@type": "ListItem",
+      "position": 2,
+      "name": "{{ .Title }}",
+      "item": "{{ .Permalink }}"
+    }{{ end }}
+  ]
+}
+</script>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -0,0 +1,13 @@
+<footer>
+  <hr>
+  <nav>
+    <ul>
+      <li><a href="{{ relURL "/" }}">Home</a></li>
+      <li><a href="{{ relURL "architecture/" }}">Architecture</a></li>
+      <li><a href="{{ relURL "reply-to-this/" }}">Reply to this</a></li>
+    </ul>
+  </nav>
+  <a class="footer-home-link" href="{{ relURL "/" }}" aria-label="Home">
+    <img class="footer-favicon" src="{{ relURL "favicon.ico" }}" alt="" aria-hidden="true">
+  </a>
+</footer>
diff --git a/script/graphviz-ssr.js b/script/graphviz-ssr.js
@@ -13,7 +13,10 @@ import Viz from "../static/js/viz-global.js"
   for (const { Path: pathInPublic } of JSON.parse(readFileSync("public/diagram-list.json", "utf-8"))) {
     const path = `public${pathInPublic}.html`
     const contents = readFileSync(path, "utf-8")
-    const html = parse(contents)
+    // `node-html-parser` can misparse unquoted URLs ending in `/` (e.g. `href=../architecture/`)
+    // and rewrite links as empty anchors. Quote these attribute values before parsing.
+    const normalized = contents.replace(/\b(href|src)=([^"'`\s>]+)/g, '$1="$2"')
+    const html = parse(normalized)
     const vizImport = html.querySelector('script[src$="viz-global.js"]')
     if (!vizImport) {
       console.error(`No 'viz-global.js' import found in ${path}; skipping`)
