roadmap/quartz/components/TableOfContents.tsx

85 lines
2.1 KiB
TypeScript
Raw Normal View History

2023-06-12 06:46:38 +00:00
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
2023-06-17 02:41:59 +00:00
import legacyStyle from "./styles/legacyToc.scss"
import modernStyle from "./styles/toc.scss"
2023-06-10 06:06:02 +00:00
2023-06-17 19:07:40 +00:00
// @ts-ignore
import script from "./scripts/toc.inline"
2023-06-13 05:41:42 +00:00
interface Options {
2023-07-23 00:27:41 +00:00
layout: "modern" | "legacy"
2023-06-13 05:41:42 +00:00
}
const defaultOptions: Options = {
2023-07-23 00:27:41 +00:00
layout: "modern",
2023-06-10 06:06:02 +00:00
}
2023-08-20 21:05:37 +00:00
function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
2023-06-17 19:07:40 +00:00
if (!fileData.toc) {
return null
}
2023-06-12 06:46:38 +00:00
2023-07-23 00:27:41 +00:00
return (
2023-08-20 21:05:37 +00:00
<div class={`toc ${displayClass}`}>
2023-07-23 00:27:41 +00:00
<button type="button" id="toc">
<h3>Table of Contents</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="fold"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<div id="toc-content">
<ul class="overflow">
{fileData.toc.map((tocEntry) => (
<li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
<a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
{tocEntry.text}
</a>
</li>
))}
</ul>
</div>
2023-06-17 19:07:40 +00:00
</div>
2023-07-23 00:27:41 +00:00
)
2023-06-17 19:07:40 +00:00
}
TableOfContents.css = modernStyle
TableOfContents.afterDOMLoaded = script
2023-06-17 02:41:59 +00:00
2023-06-17 19:07:40 +00:00
function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
if (!fileData.toc) {
return null
2023-06-17 02:41:59 +00:00
}
2023-07-23 00:27:41 +00:00
return (
<details id="toc" open>
<summary>
<h3>Table of Contents</h3>
</summary>
<ul>
{fileData.toc.map((tocEntry) => (
<li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
<a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
{tocEntry.text}
</a>
</li>
))}
</ul>
</details>
)
2023-06-17 02:41:59 +00:00
}
2023-06-17 19:07:40 +00:00
LegacyTableOfContents.css = legacyStyle
2023-06-17 02:41:59 +00:00
2023-06-17 19:07:40 +00:00
export default ((opts?: Partial<Options>) => {
const layout = opts?.layout ?? defaultOptions.layout
return layout === "modern" ? TableOfContents : LegacyTableOfContents
2023-06-13 05:41:42 +00:00
}) satisfies QuartzComponentConstructor