Automation of AnchorHeading & StarlightPage headings

Author: FileEX

web/package-lock.json

@@ -18,6 +18,7 @@
     "glob": "^11.0.2",
     "js-yaml": "^4.1.0",
     "marked": "^15.0.6",
+    "node-html-parser": "^7.0.1",
     "pagefind": "^1.3.0",
     "sharp": "^0.32.5",
     "tm-themes": "^1.10.6"

web/package.json

@@ -0,0 +1,61 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { parse } from 'node-html-parser';
+
+const { frontmatter = {} } = Astro.props;
+
+let slot = '';
+if (Astro.slots.has('default')) {
+  slot = await Astro.slots.render('default');
+}
+
+const root = parse(slot ?? '', { lowerCaseTagName: false });
+
+const headings = [];
+
+// AnchorHeading component source
+function renderAnchorHeading(level, id, text) {
+  const accessibleLabel = `Section ${text}`;
+
+  return `
+  <div class="sl-heading-wrapper level-h${level}">
+    <h${level} id="${id}">${text}</h${level}>
+    <a class="sl-anchor-link" href="#${id}">
+      <span aria-hidden="true" class="sl-anchor-icon">
+        <svg width="16" height="16" viewBox="0 0 24 24">
+          <path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path>
+        </svg>
+      </span>
+      <span class="sr-only">${accessibleLabel}</span>
+    </a>
+  </div>
+  `;
+}
+
+function escapeHtml(str: string) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+root.querySelectorAll('h2, h3').forEach((el) => {
+  const level = parseInt(el.tagName[1]);
+  const text = el.text.trim();
+  const slug = text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-');
+
+  headings.push({ depth: level, slug, text });
+
+  el.replaceWith(renderAnchorHeading(level, slug, escapeHtml(text)));
+});
+
+const finalHtml = root.toString();
+---
+
+<StarlightPage frontmatter={frontmatter} headings={headings}>
+  <div id="_top" />
+  <Fragment set:html={finalHtml} />
+</StarlightPage>