zenno/doc: auto-toc

zenno/src/routes/doc/Article.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	import Sec from './Sec.svelte';
+	import { sections, type Section } from './article.svelte';
+
+	interface Props {
+		head: Snippet;
+		children: Snippet;
+	}
+
+	let { head, children }: Props = $props();
+
+	function tocClass(s: Section) {
+		switch (s.h) {
+			case 1:
+				return null;
+			case 2:
+				return null;
+			case 3:
+				return 'ml-4';
+			case 4:
+				return 'ml-8';
+			case 5:
+				return 'ml-12';
+			case 6:
+				return 'ml-16';
+		}
+	}
+</script>
+
+<article class="mx-auto max-w-4xl text-justify hyphens-auto">
+	{@render head()}
+	{#if sections.length > 0}
+		<Sec h={2} id="toc" toc={false}>Table of Contents</Sec>
+		<ul class="mb-4 list-disc pl-4">
+			{#each sections as s (s.id)}
+				<li class={tocClass(s)}><a href={`#${s.id}`}>{@render s.children()}</a></li>
+			{/each}
+		</ul>
+	{/if}
+	{@render children()}
+</article>