From 917d5791acd6361c691902b445bdc4f7129ba3fc Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 17 Jun 2023 02:41:59 +0000
Subject: [PATCH] modern toc tweaks
---
quartz/components/TableOfContents.tsx | 69 +++++++++++++++++++++++++++-------
1 files changed, 55 insertions(+), 14 deletions(-)
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 8192da4..afb8388 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -1,24 +1,65 @@
-import { QuartzComponentProps } from "./types"
-import style from "./styles/toc.scss"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import legacyStyle from "./styles/legacyToc.scss"
+import modernStyle from "./styles/toc.scss"
-export default function TableOfContents({ fileData, position }: QuartzComponentProps) {
- if (!fileData.toc) {
- return null
- }
+interface Options {
+ layout: 'modern' | 'legacy'
+}
- if (position === 'body') {
- // TODO: animate this
- return <details className="toc" open>
+const defaultOptions: Options = {
+ layout: 'modern'
+}
+
+export default ((opts?: Partial<Options>) => {
+ const layout = opts?.layout ?? defaultOptions.layout
+ function TableOfContents({ fileData }: QuartzComponentProps) {
+ if (!fileData.toc) {
+ return null
+ }
+
+ return <details class="toc" open>
<summary><h3>Table of Contents</h3></summary>
<ul>
- {fileData.toc.map(tocEntry => <li key={tocEntry.slug} className={`depth-${tocEntry.depth}`}>
- <a href={`#${tocEntry.slug}`}>{tocEntry.text}</a>
+ {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>
- } else if (position === 'sidebar') {
- // TODO
}
+
+ TableOfContents.css = layout === "modern" ? modernStyle : legacyStyle
+
+ if (layout === "modern") {
+ TableOfContents.afterDOMLoaded = `
+const bufferPx = 150
+const observer = new IntersectionObserver(entries => {
+ for (const entry of entries) {
+ const slug = entry.target.id
+ const tocEntryElement = document.querySelector(\`a[data-for="$\{slug\}"]\`)
+ const windowHeight = entry.rootBounds?.height
+ if (windowHeight && tocEntryElement) {
+ if (entry.boundingClientRect.y < windowHeight) {
+ tocEntryElement.classList.add("in-view")
+ } else {
+ tocEntryElement.classList.remove("in-view")
+ }
+ }
+ }
+})
+
+function init() {
+ const headers = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")
+ headers.forEach(header => observer.observe(header))
}
-TableOfContents.css = style
+init()
+
+document.addEventListener("spa_nav", (e) => {
+ observer.disconnect()
+ init()
+})
+`
+ }
+
+ return TableOfContents
+}) satisfies QuartzComponentConstructor
--
Gitblit v1.10.0