link headings with id (#1293)

* link headings with id

* fix win32 test

* encodeURI

Author: mbostock

src/client/toc.ts

@@ -2,9 +2,8 @@ const toc = document.querySelector<HTMLElement>("#observablehq-toc");
 if (toc) {
   const highlight = toc.appendChild(document.createElement("div"));
   highlight.classList.add("observablehq-secondary-link-highlight");
-  const headings = Array.from(document.querySelector("#observablehq-main")!.querySelectorAll(toc.dataset.selector!))
-    .filter((e) => e.querySelector("a.observablehq-header-anchor"))
-    .reverse();
+  const main = document.querySelector("#observablehq-main")!;
+  const headings = Array.from(main.querySelectorAll(toc.dataset.selector!)).reverse();
   const links = toc.querySelectorAll<HTMLElement>(".observablehq-secondary-link");
   const relink = (): HTMLElement | undefined => {
     for (const link of links) {
@@ -13,7 +12,7 @@ if (toc) {
     // If there’s a location.hash, highlight that if it’s at the top of the viewport.
     if (location.hash) {
       for (const heading of headings) {
-        const hash = heading.querySelector<HTMLAnchorElement>("a[href]")?.hash;
+        const hash = encodeURI(`#${heading.id}`);
         if (hash === location.hash) {
           const top = heading.getBoundingClientRect().top;
           if (0 < top && top < 40) {

src/html.ts

@@ -172,6 +172,15 @@ export function rewriteHtml(
     code.innerHTML = html;
   }
 
+  // Wrap <h2 id> etc. elements in <a> tags for linking.
+  for (const h of document.querySelectorAll<HTMLHeadingElement>("h1[id], h2[id], h3[id], h4[id]")) {
+    const a = document.createElement("a");
+    a.className = "observablehq-header-anchor";
+    a.href = `#${h.id}`;
+    a.append(...h.childNodes);
+    h.append(a);
+  }
+
   return document.body.innerHTML;
 }
 

src/markdown.ts

@@ -322,7 +322,7 @@ export function createMarkdownIt({
 } = {}): MarkdownIt {
   const md = MarkdownIt({html: true, linkify, typographer, quotes});
   if (linkify) md.linkify.set({fuzzyLink: false, fuzzyEmail: false});
-  md.use(MarkdownItAnchor, {permalink: MarkdownItAnchor.permalink.headerLink({class: "observablehq-header-anchor"})});
+  md.use(MarkdownItAnchor);
   md.inline.ruler.push("placeholder", transformPlaceholderInline);
   md.core.ruler.before("linkify", "placeholder", transformPlaceholderCore);
   md.renderer.rules.placeholder = makePlaceholderRenderer();

src/render.ts

@@ -177,12 +177,12 @@ interface Header {
   href: string;
 }
 
-const tocSelector = "h1:not(:first-of-type), h2:first-child, :not(h1) + h2";
+const tocSelector = "h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]";
 
 function findHeaders(page: MarkdownPage): Header[] {
   return Array.from(parseHtml(page.body).document.querySelectorAll(tocSelector))
-    .map((node) => ({label: node.textContent, href: node.firstElementChild?.getAttribute("href")}))
-    .filter((d): d is Header => !!d.label && !!d.href);
+    .map((node) => ({label: node.textContent, href: `#${node.id}`}))
+    .filter((d): d is Header => !!d.label);
 }
 
 function renderToc(headers: Header[], label: string): Html {

test/output/build/404/404.html

@@ -24,7 +24,7 @@
 import "./_observablehq/client.js";
 
 </script>
-<aside id="observablehq-toc" data-selector="h1:not(:first-of-type), h2:first-child, :not(h1) + h2">
+<aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
 <nav>
 </nav>
 </aside>

test/output/build/archives.posix/tar.html

@@ -79,7 +79,7 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
-<aside id="observablehq-toc" data-selector="h1:not(:first-of-type), h2:first-child, :not(h1) + h2">
+<aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
 <nav>
 </nav>
 </aside>

test/output/build/archives.posix/zip.html

@@ -62,7 +62,7 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
-<aside id="observablehq-toc" data-selector="h1:not(:first-of-type), h2:first-child, :not(h1) + h2">
+<aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
 <nav>
 </nav>
 </aside>

test/output/build/archives.win32/tar.html

@@ -51,7 +51,7 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
-<aside id="observablehq-toc" data-selector="h1:not(:first-of-type), h2:first-child, :not(h1) + h2">
+<aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
 <nav>
 </nav>
 </aside>

test/output/build/archives.win32/zip.html

@@ -44,7 +44,7 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
-<aside id="observablehq-toc" data-selector="h1:not(:first-of-type), h2:first-child, :not(h1) + h2">
+<aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
 <nav>
 </nav>
 </aside>

test/output/build/config/closed/page.html

@@ -35,7 +35,7 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
-<aside id="observablehq-toc" data-selector="h1:not(:first-of-type), h2:first-child, :not(h1) + h2">
+<aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
 <nav>
 </nav>
 </aside>