diff --git a/src/app/pages/Guide.tsx b/src/app/pages/Guide.tsx
index 46715848..fb046152 100644
--- a/src/app/pages/Guide.tsx
+++ b/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 `${text}`
+ 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 = `${HASH}`
- return `${link}${text}`
+ renderer: {
+ link(href, title, text) {
+ if (href === null) return text
+ const title2 = title ? ` title="${title}"` : ''
+ const target = href?.match(/^https?:\/\//) ? ' target="_blank"' : ''
+ return `${text}`
+ },
+ heading(text, level, raw, slugger) {
+ let toc = ''
+ if (!insertedToc) {
+ 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 `- ${text}
`
+ }).join('')}
`
+ insertedToc = true
+ }
+ const id = slugger.slug(raw)
+ const link = `${HASH}`
+ return `${toc}${link}${text}`
+ },
},
- }})
+ })
const guide = content.substring(content.indexOf('---', 3) + 3)
const versionedContent = versionContent(guide, guideVersion)
return marked(versionedContent, { version: '1.19' } as any)
diff --git a/src/guides/density-functions.md b/src/guides/density-functions.md
index a1e2529c..767d2fe4 100644
--- a/src/guides/density-functions.md
+++ b/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
{
diff --git a/src/styles/global.css b/src/styles/global.css
index 917c3d43..a7220871 100644
--- a/src/styles/global.css
+++ b/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;