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 | 75 +++++++++++++++++++++++++------------
1 files changed, 51 insertions(+), 24 deletions(-)
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 19f26ef..afb8388 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -1,38 +1,65 @@
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import style from "./styles/toc.scss"
-
+import legacyStyle from "./styles/legacyToc.scss"
+import modernStyle from "./styles/toc.scss"
interface Options {
- layout: 'modern' | 'quartz-3'
+ layout: 'modern' | 'legacy'
}
const defaultOptions: Options = {
- layout: 'quartz-3'
+ layout: 'modern'
}
export default ((opts?: Partial<Options>) => {
const layout = opts?.layout ?? defaultOptions.layout
- if (layout === "modern") {
- return function() {
- return null // TODO (make this look like nextra)
- }
- } else {
- 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} class={`depth-${tocEntry.depth}`}>
- <a href={`#${tocEntry.slug}`}>{tocEntry.text}</a>
- </li>)}
- </ul>
- </details>
+ function TableOfContents({ fileData }: QuartzComponentProps) {
+ if (!fileData.toc) {
+ return null
}
- TableOfContents.css = style
- return TableOfContents
+ return <details class="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>
}
+
+ 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))
+}
+
+init()
+
+document.addEventListener("spa_nav", (e) => {
+ observer.disconnect()
+ init()
+})
+`
+ }
+
+ return TableOfContents
}) satisfies QuartzComponentConstructor
--
Gitblit v1.10.0