render empty toc if needed (#331)

mbostock · web-flow · commit 8bdd4cd27a4b · 2023-12-06T16:00:52.000+01:00
diff --git a/src/render.ts b/src/render.ts
@@ -54,7 +54,6 @@ type RenderInternalOptions =
 async function render(parseResult: ParseResult, options: RenderOptions & RenderInternalOptions): Promise<string> {
   const {root, path, pages, title, preview} = options;
   const toc = mergeToc(parseResult.data?.toc, options.toc);
-  const headers = toc.show ? findHeaders(parseResult) : [];
   return String(html`<!DOCTYPE html>
 <meta charset="utf-8">${path === "/404" ? html`\n<base href="/">` : ""}
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -85,7 +84,7 @@ ${
   preview ? `\nopen({hash: ${JSON.stringify(parseResult.hash)}, eval: (body) => (0, eval)(body)});\n` : ""
 }${parseResult.cells.map((cell) => `\n${renderDefineCell(cell)}`).join("")}`)}
 </script>${pages.length > 0 ? html`\n${await renderSidebar(title, pages, path)}` : ""}${
-    headers.length > 0 ? html`\n${renderToc(headers, toc.label)}` : ""
+    toc.show ? html`\n${renderToc(findHeaders(parseResult), toc.label)}` : ""
   }
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
@@ -139,16 +138,20 @@ function findHeaders(parseResult: ParseResult): Header[] {
     .filter((d): d is Header => !!d.label && !!d.href);
 }
 
-function renderToc(headers: Header[], label = "Contents"): Html {
+function renderToc(headers: Header[], label: string): Html {
   return html`<aside id="observablehq-toc" data-selector="${tocSelector
     .map((selector) => `#observablehq-main ${selector}`)
     .join(", ")}">
-<nav>
+<nav>${
+    headers.length > 0
+      ? html`
 <div>${label}</div>
 <ol>${headers.map(
-    ({label, href}) => html`\n<li class="observablehq-secondary-link"><a href="${href}">${label}</a></li>`
-  )}
-</ol>
+          ({label, href}) => html`\n<li class="observablehq-secondary-link"><a href="${href}">${label}</a></li>`
+        )}
+</ol>`
+      : ""
+  }
 </nav>
 </aside>`;
 }
diff --git a/test/output/build/404/404.html b/test/output/build/404/404.html
@@ -24,6 +24,10 @@
 import "./_observablehq/client.js";
 
 </script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="page-not-found" tabindex="-1"><a class="observablehq-header-anchor" href="#page-not-found">Page not found</a></h1>
diff --git a/test/output/build/archives/tar.html b/test/output/build/archives/tar.html
@@ -69,6 +69,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="tar" tabindex="-1"><a class="observablehq-header-anchor" href="#tar">Tar</a></h1>
diff --git a/test/output/build/archives/zip.html b/test/output/build/archives/zip.html
@@ -55,6 +55,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="zip" tabindex="-1"><a class="observablehq-header-anchor" href="#zip">Zip</a></h1>
diff --git a/test/output/build/config/closed/page.html b/test/output/build/config/closed/page.html
@@ -34,6 +34,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="a-page%E2%80%A6" tabindex="-1"><a class="observablehq-header-anchor" href="#a-page%E2%80%A6">A page…</a></h1>
diff --git a/test/output/build/config/index.html b/test/output/build/config/index.html
@@ -34,6 +34,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="index" tabindex="-1"><a class="observablehq-header-anchor" href="#index">Index</a></h1>
diff --git a/test/output/build/config/one.html b/test/output/build/config/one.html
@@ -34,6 +34,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="one" tabindex="-1"><a class="observablehq-header-anchor" href="#one">One</a></h1>
diff --git a/test/output/build/config/sub/two.html b/test/output/build/config/sub/two.html
@@ -34,6 +34,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="two" tabindex="-1"><a class="observablehq-header-anchor" href="#two">Two</a></h1>
diff --git a/test/output/build/fetches/foo.html b/test/output/build/fetches/foo.html
@@ -36,6 +36,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="top" tabindex="-1"><a class="observablehq-header-anchor" href="#top">Top</a></h1>
diff --git a/test/output/build/fetches/top.html b/test/output/build/fetches/top.html
@@ -39,6 +39,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="top" tabindex="-1"><a class="observablehq-header-anchor" href="#top">Top</a></h1>
diff --git a/test/output/build/files/files.html b/test/output/build/files/files.html
@@ -50,6 +50,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <span><link rel="stylesheet" href="./_file/custom-styles.css">
diff --git a/test/output/build/files/subsection/subfiles.html b/test/output/build/files/subsection/subfiles.html
@@ -50,6 +50,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <span><link rel="stylesheet" href="../_file/custom-styles.css">
diff --git a/test/output/build/imports/foo/foo.html b/test/output/build/imports/foo/foo.html
@@ -42,6 +42,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="foo" tabindex="-1"><a class="observablehq-header-anchor" href="#foo">Foo</a></h1>
diff --git a/test/output/build/missing-file/index.html b/test/output/build/missing-file/index.html
@@ -32,6 +32,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="build-test-case" tabindex="-1"><a class="observablehq-header-anchor" href="#build-test-case">Build test case</a></h1>
diff --git a/test/output/build/missing-import/index.html b/test/output/build/missing-import/index.html
@@ -33,6 +33,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="build-test-case" tabindex="-1"><a class="observablehq-header-anchor" href="#build-test-case">Build test case</a></h1>
diff --git a/test/output/build/multi/index.html b/test/output/build/multi/index.html
@@ -43,6 +43,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="multi-test" tabindex="-1"><a class="observablehq-header-anchor" href="#multi-test">Multi test</a></h1>
diff --git a/test/output/build/multi/subsection/index.html b/test/output/build/multi/subsection/index.html
@@ -27,6 +27,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="sub-section" tabindex="-1"><a class="observablehq-header-anchor" href="#sub-section">Sub-Section</a></h1>
diff --git a/test/output/build/simple-public/index.html b/test/output/build/simple-public/index.html
@@ -26,6 +26,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="build-test-case" tabindex="-1"><a class="observablehq-header-anchor" href="#build-test-case">Build test case</a></h1>
diff --git a/test/output/build/simple/simple.html b/test/output/build/simple/simple.html
@@ -35,6 +35,10 @@
   </ol>
 </nav>
 <script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="#observablehq-main h1:not(:first-of-type), #observablehq-main h2:not(h1 + h2)">
+<nav>
+</nav>
+</aside>
 <div id="observablehq-center">
 <main id="observablehq-main" class="observablehq">
 <h1 id="build-test-case" tabindex="-1"><a class="observablehq-header-anchor" href="#build-test-case">Build test case</a></h1>
