From c538c151c7462ad0395ff2c15c5e11e89e362aa8 Mon Sep 17 00:00:00 2001
From: Striven <sg.striven@cutecat.club>
Date: Sat, 04 Apr 2026 19:47:16 +0000
Subject: [PATCH] Initial commit
---
quartz/components/TableOfContents.tsx | 27 +++++++++++++++------------
1 files changed, 15 insertions(+), 12 deletions(-)
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index d376200..bbccf82 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -17,6 +17,7 @@
layout: "modern",
}
+let numTocs = 0
export default ((opts?: Partial<Options>) => {
const layout = opts?.layout ?? defaultOptions.layout
const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
@@ -29,12 +30,13 @@
return null
}
+ const id = `toc-${numTocs++}`
return (
<div class={classNames(displayClass, "toc")}>
<button
type="button"
class={fileData.collapseToc ? "collapsed toc-header" : "toc-header"}
- aria-controls="toc-content"
+ aria-controls={id}
aria-expanded={!fileData.collapseToc}
>
<h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
@@ -53,17 +55,18 @@
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
- <div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
- <OverflowList>
- {fileData.toc.map((tocEntry) => (
- <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
- <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
- {tocEntry.text}
- </a>
- </li>
- ))}
- </OverflowList>
- </div>
+ <OverflowList
+ id={id}
+ class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}
+ >
+ {fileData.toc.map((tocEntry) => (
+ <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
+ <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
+ {tocEntry.text}
+ </a>
+ </li>
+ ))}
+ </OverflowList>
</div>
)
}
--
Gitblit v1.10.0