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 `
  1. ${text}
  2. ` + }).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;