website: redesign part 8

website_next/learn/index.js

@@ -1,5 +1,7 @@
 import { createContents } from "./contents/index.js";
 import { sections } from "./data.js";
+import { initScrollSpy } from "./scroll-spy.js";
+import { createId } from "../utils/id.js";
 
 /** @param {string} label */
 function createChart(label) {
@@ -14,23 +16,16 @@ function createChart(label) {
   return figure;
 }
 
-/**
- * @param {string} title
- */
-function createSectionId(title) {
-  return title.toLowerCase().replaceAll(" ", "-");
-}
-
 /**
  * @param {Section} section
- * @param {number[]} indexes
+ * @param {number} [level]
  */
-function createSection(section, indexes) {
+function createSection(section, level = 1) {
   const element = document.createElement("section");
-  const title = document.createElement(indexes.length === 1 ? "h1" : "h2");
+  const title = document.createElement(level === 1 ? "h1" : "h2");
   const anchor = document.createElement("a");
   const description = document.createElement("p");
-  const id = createSectionId(section.title);
+  const id = createId(section.title);
 
   element.id = id;
   anchor.href = `#${id}`;
@@ -39,84 +34,20 @@ function createSection(section, indexes) {
   description.append(section.description);
   element.append(title, description, createChart(section.chart));
 
-  for (const [index, child] of section.children.entries()) {
-    element.append(createSection(child, indexes.concat(index + 1)));
+  for (const child of section.children) {
+    element.append(createSection(child, level + 1));
   }
 
   return element;
 }
 
-/** @param {HTMLElement} main */
-function initScrollSpy(main) {
-  const headings = [...main.querySelectorAll("article h1, article h2")];
-  const visibleHeadings = new Set();
-  const links = new Map(
-    [...main.querySelectorAll('nav a[href^="#"]')].map((link) => [
-      link.getAttribute("href"),
-      link,
-    ]),
-  );
-
-  /** @type {string | null} */
-  let current = null;
-
-  /** @param {Element} heading */
-  function getHash(heading) {
-    const section = /** @type {HTMLElement} */ (
-      heading.closest("section[id]")
-    );
-    return `#${section.id}`;
-  }
-
-  /** @param {string} hash */
-  function getLink(hash) {
-    return /** @type {HTMLAnchorElement} */ (links.get(hash));
-  }
-
-  /** @param {string} hash */
-  function setCurrent(hash) {
-    if (hash === current) return;
-
-    if (current) getLink(current).removeAttribute("aria-current");
-    getLink(hash).setAttribute("aria-current", "location");
-    history.replaceState(null, "", hash);
-    current = hash;
-  }
-
-  function update() {
-    if (main.hidden) return;
-
-    const heading = headings.findLast((heading) =>
-      visibleHeadings.has(heading),
-    );
-    if (heading) setCurrent(getHash(heading));
-  }
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      for (const entry of entries) {
-        if (entry.isIntersecting) {
-          visibleHeadings.add(entry.target);
-        } else {
-          visibleHeadings.delete(entry.target);
-        }
-      }
-
-      update();
-    },
-    { rootMargin: "0px 0px -80% 0px" },
-  );
-
-  for (const heading of headings) observer.observe(heading);
-}
-
 export function createLearnPage() {
   const main = document.createElement("main");
   main.className = "learn";
   const article = document.createElement("article");
 
-  for (const [index, section] of sections.entries()) {
-    article.append(createSection(section, [index + 1]));
+  for (const section of sections) {
+    article.append(createSection(section));
   }
 
   main.append(createContents(sections), article);