Add table of contents to skooma page

page/skooma.html

@@ -3,6 +3,7 @@
 <script type="module" src="codeblock.js"></script>
 <script type="module" src="filesize.js"></script>
 <script type="module" src="scrollToTop.js"></script>
+<script type="module" src="toc.js"></script>
 
 <scroll-to-top>
 </scroll-to-top>
@@ -11,6 +12,12 @@
 
 <code-block>import {html} from 'skooma.js'</code-block>
 
+<section>
+	<h2>Table of Contents</h2>
+	<table-of-contents>
+	</table-of-contents>
+</section>
+
 <section>
 	<h2 id="introduction">Introduction & Scope</h2>
 	<p>

page/style.css

@@ -45,7 +45,8 @@ h2 {
 }
 
 h3::before {
-	content: "\2023" ' ';
+	content: "\2023";
+	margin-right: .6ch;
 	color: var(--color-ac);
 }
 
@@ -151,3 +152,14 @@ dl>code>dt~dd { grid-column: 2/2; }
 
 .all-unset { all: unset; }
 .full-width { grid-column: 1/-1; }
+
+table-of-contents ul {
+	list-style: none;
+	padding: 0;
+}
+
+table-of-contents ul li::before {
+	content: "\2023";
+	color: var(--color-hl);
+	margin-right: 1ch;
+}

page/toc.js

@@ -0,0 +1,22 @@
+import element from '../element.js'
+import {html} from '../skooma.js'
+
+element(class TableOfContents extends HTMLElement {
+	connectedCallback() {
+		this.generate()
+	}
+
+	generate() {
+		const entries = Array.from(document.querySelectorAll("h2[id]"))
+			.map(heading => html.li(
+				html.a(
+					heading.innerText,
+					{
+						href: `#${heading.id}`,
+						class: ["fancy"]
+					})
+				)
+			)
+		this.replaceChildren(html.ul(entries))
+	}
+})