aboutsummaryrefslogtreecommitdiff
path: root/174bg/handbook/source/table-of-contents.js
diff options
context:
space:
mode:
Diffstat (limited to '174bg/handbook/source/table-of-contents.js')
-rw-r--r--174bg/handbook/source/table-of-contents.js78
1 files changed, 0 insertions, 78 deletions
diff --git a/174bg/handbook/source/table-of-contents.js b/174bg/handbook/source/table-of-contents.js
deleted file mode 100644
index dd87353..0000000
--- a/174bg/handbook/source/table-of-contents.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * table-of-contents.js
- *
- * Builds a nested table of contents from the page's sections and injects it
- * into the element with id "table-of-contents".
- *
- * How it works:
- * 1. Finds every `<article>` and `<section>` in `<main>` that has an `id`.
- * 2. Reads the first heading (h1–h6) in each to determine its title and
- * nesting level.
- * 3. Builds a hierarchical <ul>/<li> tree using a stack to track the
- * current nesting level, indenting nested levels with a left border.
- * 4. Each entry links to its section via an `#id` anchor.
- *
- * The TOC is only rendered if the container exists and at least one
- * qualifying section with a heading is found.
- */
-document.addEventListener("DOMContentLoaded", () => {
- const container = document.getElementById("table-of-contents");
- if (!container) return;
-
- const sections = document.querySelectorAll(
- "main article[id], main section[id]",
- );
-
- const entries = [];
- sections.forEach((section) => {
- const heading = section.querySelector("h1, h2, h3, h4, h5, h6");
- if (!heading) return;
- entries.push({
- id: section.id,
- level: parseInt(heading.tagName.charAt(1), 10),
- text: heading.textContent.trim(),
- });
- });
-
- if (entries.length === 0) return;
-
- const baseLevel = Math.min(...entries.map((entry) => entry.level));
-
- const rootList = document.createElement("ul");
- rootList.className = "space-y-1 text-sm";
- const stack = [{ level: baseLevel - 1, list: rootList, item: null }];
-
- entries.forEach((entry) => {
- while (stack.length > 1 && entry.level <= stack[stack.length - 1].level) {
- stack.pop();
- }
-
- const parent = stack[stack.length - 1];
-
- let parentList = parent.list;
- if (!parentList) {
- parentList = document.createElement("ul");
- parentList.className =
- "mt-1 ml-3 space-y-1 border-l border-stone-200 pl-3 dark:border-stone-700";
- parent.item.appendChild(parentList);
- parent.list = parentList;
- }
-
- const listItem = document.createElement("li");
- const link = document.createElement("a");
- link.href = "#" + entry.id;
- link.textContent = entry.text;
- link.className =
- "block rounded px-2 py-1 text-stone-600 no-underline transition-colors hover:bg-stone-100 hover:text-stone-900 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-stone-100";
- listItem.appendChild(link);
- parentList.appendChild(listItem);
-
- stack.push({
- level: entry.level,
- list: null,
- item: listItem,
- });
- });
-
- container.appendChild(rootList);
-});