Fix: add Second Table of Contents component

Fixes Table of Contents fold button not working consistently due to instantiating the TOC twice in `quartz.layout`

Still to fix: Explorer

Author: MasssiveJuice08

quartz.layout.ts

@@ -48,7 +48,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),
-    Component.MobileOnly(Component.TableOfContents()),
+    Component.MobileOnly(Component.TableOfContents2()),
   ],
   left: [
     Component.PageTitle(),
@@ -73,7 +73,7 @@ export const defaultContentPageLayout: PageLayout = {
 
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
-  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta(), Component.MobileOnly(Component.TableOfContents())],
+  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta(), Component.MobileOnly(Component.TableOfContents2())],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),

quartz/components/TableOfContents2.tsx

@@ -0,0 +1,95 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import legacyStyle from "./styles/legacyToc.scss"
+import modernStyle from "./styles/toc.scss"
+import { classNames } from "../util/lang"
+
+// @ts-ignore
+import script from "./scripts/toc.inline"
+import { i18n } from "../i18n"
+
+interface Options {
+  layout: "modern" | "legacy"
+}
+
+const defaultOptions: Options = {
+  layout: "modern",
+}
+
+const TableOfContents: QuartzComponent = ({
+  fileData,
+  displayClass,
+  cfg,
+}: QuartzComponentProps) => {
+  if (!fileData.toc) {
+    return null
+  }
+
+  return (
+    <div class={classNames(displayClass, "toc")}>
+      <button
+        type="button"
+        id="toc2"
+        class={fileData.collapseToc ? "collapsed" : ""}
+        aria-controls="toc-content"
+        aria-expanded={!fileData.collapseToc}
+      >
+        <h3>{i18n(cfg.locale).components.tableOfContents.title}</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" class={fileData.collapseToc ? "collapsed" : ""}>
+        <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>
+    </div>
+  )
+}
+TableOfContents.css = modernStyle
+TableOfContents.afterDOMLoaded = script
+
+const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => {
+  if (!fileData.toc) {
+    return null
+  }
+  return (
+    <details id="toc" open={!fileData.collapseToc}>
+      <summary>
+        <h3>{i18n(cfg.locale).components.tableOfContents.title}</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>
+  )
+}
+LegacyTableOfContents.css = legacyStyle
+
+export default ((opts?: Partial<Options>) => {
+  const layout = opts?.layout ?? defaultOptions.layout
+  return layout === "modern" ? TableOfContents : LegacyTableOfContents
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -22,6 +22,7 @@ import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 
 import LinksHeader from "./LinksHeader"
+import TableOfContents2 from "./TableOfContents2"
 
 export {
   ArticleTitle,
@@ -47,4 +48,6 @@ export {
   Breadcrumbs,
   LinksHeader,
   Comments,
+
+  TableOfContents2,
 }

quartz/components/scripts/toc.inline.ts

@@ -47,3 +47,28 @@ document.addEventListener("nav", () => {
   const headers = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")
   headers.forEach((header) => observer.observe(header))
 })
+
+// MMW: toc2 for mobile
+
+function setupToc2() {
+  const toc = document.getElementById("toc2")
+  if (toc) {
+    const collapsed = toc.classList.contains("collapsed")
+    const content = toc.nextElementSibling as HTMLElement | undefined
+    if (!content) return
+    content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
+    toc.addEventListener("click", toggleToc)
+    window.addCleanup(() => toc.removeEventListener("click", toggleToc))
+  }
+}
+
+window.addEventListener("resize", setupToc2)
+document.addEventListener("nav", () => {
+  setupToc2()
+
+  // update toc entry highlighting
+  observer.disconnect()
+  const headers = document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")
+  headers.forEach((header) => observer.observe(header))
+})
+

quartz/components/styles/toc.scss

@@ -1,4 +1,4 @@
-button#toc {
+button#toc, button#toc2 {
   background-color: transparent;
   border: none;
   text-align: left;

quartz/plugins/transformers/index.ts

@@ -9,4 +9,5 @@ export { ObsidianFlavoredMarkdown } from "./ofm"
 export { OxHugoFlavouredMarkdown } from "./oxhugofm"
 export { SyntaxHighlighting } from "./syntax"
 export { TableOfContents } from "./toc"
+export { TableOfContents2 } from "./toc2"
 export { HardLineBreaks } from "./linebreaks"

quartz/plugins/transformers/toc2.ts

@@ -0,0 +1,73 @@
+import { QuartzTransformerPlugin } from "../types"
+import { Root } from "mdast"
+import { visit } from "unist-util-visit"
+import { toString } from "mdast-util-to-string"
+import Slugger from "github-slugger"
+
+export interface Options {
+  maxDepth: 1 | 2 | 3 | 4 | 5 | 6
+  minEntries: number
+  showByDefault: boolean
+  collapseByDefault: boolean
+}
+
+const defaultOptions: Options = {
+  maxDepth: 3,
+  minEntries: 1,
+  showByDefault: true,
+  collapseByDefault: false,
+}
+
+interface TocEntry {
+  depth: number
+  text: string
+  slug: string // this is just the anchor (#some-slug), not the canonical slug
+}
+
+const slugAnchor = new Slugger()
+export const TableOfContents2: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+  const opts = { ...defaultOptions, ...userOpts }
+  return {
+    name: "TableOfContents",
+    markdownPlugins() {
+      return [
+        () => {
+          return async (tree: Root, file) => {
+            const display = file.data.frontmatter?.enableToc ?? opts.showByDefault
+            if (display) {
+              slugAnchor.reset()
+              const toc: TocEntry[] = []
+              let highestDepth: number = opts.maxDepth
+              visit(tree, "heading", (node) => {
+                if (node.depth <= opts.maxDepth) {
+                  const text = toString(node)
+                  highestDepth = Math.min(highestDepth, node.depth)
+                  toc.push({
+                    depth: node.depth,
+                    text,
+                    slug: slugAnchor.slug(text),
+                  })
+                }
+              })
+
+              if (toc.length > 0 && toc.length > opts.minEntries) {
+                file.data.toc = toc.map((entry) => ({
+                  ...entry,
+                  depth: entry.depth - highestDepth,
+                }))
+                file.data.collapseToc = opts.collapseByDefault
+              }
+            }
+          }
+        },
+      ]
+    },
+  }
+}
+
+declare module "vfile" {
+  interface DataMap {
+    toc: TocEntry[]
+    collapseToc: boolean
+  }
+}