43 lines
986 B
Text
43 lines
986 B
Text
---
|
|
import TableOfContentsHeading from './TableOfContentsHeading.astro'
|
|
|
|
// https://kld.dev/building-table-of-contents/
|
|
const { headings } = Astro.props
|
|
const toc = buildToc(headings)
|
|
|
|
export interface Heading {
|
|
depth: number
|
|
slug: string
|
|
text: string
|
|
}
|
|
|
|
function buildToc(headings: Heading[]) {
|
|
const toc: Heading[] = []
|
|
const parentHeadings = new Map()
|
|
headings.forEach((h) => {
|
|
const heading = { ...h, subheadings: [] }
|
|
parentHeadings.set(heading.depth, heading)
|
|
if (heading.depth === 2) {
|
|
toc.push(heading)
|
|
} else {
|
|
parentHeadings.get(heading.depth - 1).subheadings.push(heading)
|
|
}
|
|
})
|
|
return toc
|
|
}
|
|
---
|
|
|
|
<details open class="rounded-lg border">
|
|
<summary>Table of Contents</summary>
|
|
<nav>
|
|
<ul class="py-3">
|
|
{toc.map((heading) => <TableOfContentsHeading heading={heading} />)}
|
|
</ul>
|
|
</nav>
|
|
</details>
|
|
|
|
<style>
|
|
summary {
|
|
@apply cursor-pointer rounded-t-lg px-3 py-1.5 font-medium transition-colors;
|
|
}
|
|
</style>
|