Reduce boilerplate with TableOfContents

Author: Discusser

src/lib/components/shared/Code.svelte

@@ -6,11 +6,13 @@
 		children,
 		language,
 		nohl = false,
+		class: className,
 		...restProps
 	}: {
 		children: Snippet;
 		language?: string;
 		nohl?: boolean;
+		class: string;
 	} = $props();
 
 	let codeElement: HTMLElement;
@@ -22,7 +24,7 @@
 	});
 </script>
 
-<pre {...restProps}><code
+<pre class={className} {...restProps}><code
 		class={language != undefined ? 'language-' + language : ''}
 		bind:this={codeElement}>{@render children()}</code
 	></pre>

src/lib/components/shared/TableOfContents.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { cn } from '@/utils';
+	import { onMount, type Snippet } from 'svelte';
+	import type { TOC, TOCElem } from '@/lib/table-of-contents';
+
+	let {
+		// tableOfContents,
+		class: className,
+		...restProps
+	}: {
+		// tableOfContents: TOC;
+		class?: string;
+	} = $props();
+
+	let container: HTMLDivElement;
+	let stack: Array<HTMLUListElement> = [];
+	let previousElement: HTMLLIElement;
+
+	function applyListStyles(elem: HTMLLIElement | HTMLUListElement) {
+		elem.classList += 'list-decimal';
+	}
+
+	function processTOCElements() {
+		const elements = document.querySelectorAll('div[data-toc-level]');
+		elements.forEach((elem) => {
+			let levelString = elem.getAttribute('data-toc-level');
+			if (levelString == null) return;
+			let level = parseInt(levelString);
+			let title = elem.getAttribute('data-toc-title');
+			let currentLevel = stack.length - 1;
+
+			let listItem = document.createElement('li');
+			let anchor = document.createElement('a');
+			anchor.textContent = title;
+			anchor.href = '#' + title; // TODO: Convert title to id
+			anchor.classList += 'text-blue-500';
+			listItem.appendChild(anchor);
+
+			if (level > currentLevel) {
+				let list = document.createElement('ul');
+				applyListStyles(list);
+				previousElement.appendChild(list);
+				stack.push(list);
+			} else if (level < currentLevel) {
+				stack.pop();
+			}
+
+			stack.at(-1)?.appendChild(listItem);
+
+			previousElement = listItem;
+		});
+	}
+
+	onMount(() => {
+		let tocRoot = document.createElement('ul');
+		applyListStyles(tocRoot);
+		stack.push(tocRoot);
+		processTOCElements();
+		container.appendChild(tocRoot);
+	});
+</script>
+
+<div class={cn('', className)} {...restProps}>
+	<p class="text-foreground text-xl font-bold">Table of Contents</p>
+	<div bind:this={container}></div>
+</div>

src/lib/components/shared/table-of-contents/TableOfContents.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Linkable from '@/components/shared/Linkable.svelte';
+
+	let {
+		title,
+		level = 0,
+		...restProps
+	}: {
+		title: string;
+		level?: number;
+	} = $props();
+</script>
+
+<div data-toc-level={level} data-toc-title={title} {...restProps}>
+	<Linkable id={encodeURIComponent(title)}
+		><p class="text-foreground text-xl font-bold">{title}</p></Linkable
+	>
+</div>

src/lib/components/shared/table-of-contents/TableOfContentsElement.svelte

@@ -0,0 +1,10 @@
+import Root from './TableOfContents.svelte';
+import Element from './TableOfContentsElement.svelte';
+
+export {
+  Root,
+  Element,
+  //
+  Root as TableOfContents,
+  Element as TableOfContentsElement
+};

src/lib/components/shared/table-of-contents/index.ts

@@ -4,8 +4,8 @@
 	import Code from '@/components/shared/Code.svelte';
 	import Collapsible from '@/components/shared/Collapsible.svelte';
 	import Linkable from '@/components/shared/Linkable.svelte';
-	import TableOfContents from '@/components/shared/TableOfContents.svelte';
-	import type { TOC } from '@/lib/tableOfContents';
+	import * as TableOfContents from '$lib/components/shared/table-of-contents/index.js';
+	import type { TOC } from '@/lib/table-of-contents';
 
 	let tableOfContents: TOC = [
 		{ title: 'Introduction', id: 'intro' },
@@ -22,8 +22,8 @@
 </script>
 
 <Article article={NUMWORKS_PROGRAMMING}>
-	<TableOfContents {tableOfContents} />
-	<Linkable id="intro"><p class="text-foreground text-xl font-bold">Introduction</p></Linkable>
+	<TableOfContents.Root />
+	<TableOfContents.Element title="Introduction" />
 	<p>
 		Towards the end of 2023, I got a <a
 			target="_blank"
@@ -43,9 +43,7 @@
 		customizable graphs). I mostly programmed on my calculator when I had nothing to do during
 		class.
 	</p>
-	<Linkable id="py-modules">
-		<p class="text-foreground text-xl font-bold">Python Modules</p>
-	</Linkable>
+	<TableOfContents.Element title="Python Modules" />
 	<p>
 		The Python implementation comes with a select few custom modules: <code>math</code>,
 		<code>cmath</code>, <code>matplotlib.pyplot</code>, <code>numpy</code>, <code>turtle</code>,
@@ -74,12 +72,8 @@
 			suspend execution for t seconds</Code
 		>
 	</Collapsible>
-	<Linkable id="limits">
-		<p class="text-foreground text-xl font-bold">Limitations</p>
-	</Linkable>
-	<Linkable id="py-performance">
-		<p class="text-foreground text-xl font-bold">Performance</p>
-	</Linkable>
+	<TableOfContents.Element title="Limitations" />
+	<TableOfContents.Element title="Performance" level={1} />
 	<p>
 		With these methods mentioned above, you can theoretically make just about anything, only limited
 		by hardware. These limitations catch up to you quite quickly. For one, clearing the screen every
@@ -105,9 +99,7 @@
 		creating full-fledged modules. After all, the calculator wasn't made to create games with
 		Python, which is why the drawing module is as simple as it is.
 	</p>
-	<Linkable id="py-mem">
-		<p class="text-foreground text-xl font-bold">Memory and Storage</p>
-	</Linkable>
+	<TableOfContents.Element title="Memory and Storage" level={1} />
 	<p>
 		It should be obvious that the team behind this calculator chose Python as the programming
 		language available for users because of its simplicity for making scripts, and even more for
@@ -140,9 +132,7 @@ struct _mp_obj_base_t {
 		seem like a lot, and it actually is, but when you have multiple large scripts installed, the
 		limit is definitely reachable.
 	</p>
-	<Linkable id="native-apps">
-		<p class="text-foreground text-xl font-bold">Writing native apps</p>
-	</Linkable>
+	<TableOfContents.Element title="Writing Native Apps" />
 	<p>
 		Recently, I discovered that it is possible to write external apps in C (and C++ or any other
 		language that is compatible with C) that can be uploaded onto the calculator. This discovery