Add table of contents for guides

src/app/pages/Guide.tsx

@@ -62,19 +62,37 @@ export function Guide({ id }: Props) {
 
 	const html = useMemo(() => {
 		if (!content) return undefined
-		marked.use({ renderer: {
-			link(href, title, text) {
-				if (href === null) return text
-				const title2 = title ? ` title="${title}"` : '' 
-				const target = href?.match(/^https?:\/\//) ? ' target="_blank"' : ''
-				return `<a href="${href}"${title2}${target}>${text}</a>`
+		const headings: marked.Tokens.Heading[] = []
+		let insertedToc = false
+		marked.use({
+			walkTokens(token) {
+				if (token.type === 'heading') {
+					headings.push(token)
+				}
 			},
-			heading(text, level, raw, slugger) {
-				const id = slugger.slug(raw)
-				const link = `<span id="guide-${id}" href="?version=${version}#${id}">${HASH}</span>`
-				return `<h${level}>${link}${text}</h${level}>`
+			renderer: {
+				link(href, title, text) {
+					if (href === null) return text
+					const title2 = title ? ` title="${title}"` : '' 
+					const target = href?.match(/^https?:\/\//) ? ' target="_blank"' : ''
+					return `<a href="${href}"${title2}${target}>${text}</a>`
+				},
+				heading(text, level, raw, slugger) {
+					let toc = ''
+					if (!insertedToc) {
+						toc = `<ol class="guide-toc">${headings.filter(t => t.depth === 2).map(t => {
+							const id = slugger.slug(t.raw.match(/^#+ (.*)/)?.[1] ?? '', { dryrun: true })
+							const text = t.text.replaceAll('`', '')
+							return `<li><a href="#${id}">${text}</a></li>`
+						}).join('')}</ol>`
+						insertedToc = true
+					}
+					const id = slugger.slug(raw)
+					const link = `<span id="guide-${id}" href="?version=${version}#${id}">${HASH}</span>`
+					return `${toc}<h${level}>${link}${text}</h${level}>`
+				},
 			},
-		}})
+		})
 		const guide = content.substring(content.indexOf('---', 3) + 3)
 		const versionedContent = versionContent(guide, guideVersion)
 		return marked(versionedContent, { version: '1.19' } as any)

src/guides/density-functions.md

@@ -63,7 +63,7 @@ With this information we can make the most basic noise router, one where every d
 }
 ```
 
-## Density function files
+## Density functions
 In the above example all the density functions are constant numbers, but they don't have to be. Another option is to reference a density function file. Vanilla has some builtin density functions, for example:
 
 ```json
@@ -72,7 +72,6 @@ In the above example all the density functions are constant numbers, but they do
 
 You can create your own density functions in the `worldgen/density_function` folder.
 
-## Complex density functions
 All the other density function types are defined as an object with a `"type"` field and optionally more fields. For example:
 ```json
 {

src/styles/global.css

@@ -1547,6 +1547,15 @@ hr {
 	margin-left: 12px;
 }
 
+.guide-toc {
+	display: inline-block;
+	border: 2px solid var(--background-6);
+	border-radius: 6px;
+	padding: 8px 16px;
+	line-height: 1.2;
+	font-size: 90%;
+}
+
 .guide-content {
 	color: var(--text-2);
 	margin-top: 12px;