akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-27 08:48:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add table of contents for guides

Browse Source
This commit is contained in:
Misode
2022-05-10 18:26:43 +02:00
parent 589dc5a0dd
commit 1dd724cec4
3 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/pages/Guide.tsx
View File

@@ -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)