The Trans Directory
feat: support non-singleton table of contents
+14
-16
+3
-4
quartz/components/TableOfContents.tsx
+3
-4
quartz/components/TableOfContents.tsx
···
29
29
<div class={classNames(displayClass, "toc")}>
30
30
<button
31
31
type="button"
32
-
id="toc"
33
-
class={fileData.collapseToc ? "collapsed" : ""}
32
+
class={fileData.collapseToc ? "collapsed toc-header" : "toc-header"}
34
33
aria-controls="toc-content"
35
34
aria-expanded={!fileData.collapseToc}
36
35
>
···
50
49
<polyline points="6 9 12 15 18 9"></polyline>
51
50
</svg>
52
51
</button>
53
-
<div id="toc-content" class={fileData.collapseToc ? "collapsed" : ""}>
52
+
<div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
54
53
<OverflowList id="toc-ul">
55
54
{fileData.toc.map((tocEntry) => (
56
55
<li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
···
72
71
return null
73
72
}
74
73
return (
75
-
<details id="toc" open={!fileData.collapseToc}>
74
+
<details class="toc" open={!fileData.collapseToc}>
76
75
<summary>
77
76
<h3>{i18n(cfg.locale).components.tableOfContents.title}</h3>
78
77
</summary>
+6
-7
quartz/components/scripts/toc.inline.ts
+6
-7
quartz/components/scripts/toc.inline.ts
···
25
25
}
26
26
27
27
function setupToc() {
28
-
const toc = document.getElementById("toc")
29
-
if (toc) {
30
-
const content = toc.nextElementSibling as HTMLElement | undefined
31
-
if (!content) return
32
-
toc.addEventListener("click", toggleToc)
33
-
window.addCleanup(() => toc.removeEventListener("click", toggleToc))
28
+
for (const toc of document.querySelectorAll(".toc")) {
29
+
const button = toc.querySelector(".toc-header")
30
+
const content = toc.querySelector(".toc-content")
31
+
if (!button || !content) return
32
+
button.addEventListener("click", toggleToc)
33
+
window.addCleanup(() => button.removeEventListener("click", toggleToc))
34
34
}
35
35
}
36
36
37
-
window.addEventListener("resize", setupToc)
38
37
document.addEventListener("nav", () => {
39
38
setupToc()
40
39
+1
-1
quartz/components/styles/legacyToc.scss
+1
-1
quartz/components/styles/legacyToc.scss
+4
-4
quartz/components/styles/toc.scss
+4
-4
quartz/components/styles/toc.scss
···
6
6
7
7
overflow-y: hidden;
8
8
flex: 0 1 auto;
9
-
&:has(button#toc.collapsed) {
9
+
&:has(button.toc-header.collapsed) {
10
10
flex: 0 1 1.2rem;
11
11
}
12
12
}
13
13
14
14
@media all and not ($mobile) {
15
-
.toc {
15
+
.toc-header {
16
16
display: flex;
17
17
}
18
18
}
19
19
20
-
button#toc {
20
+
button.toc-header {
21
21
background-color: transparent;
22
22
border: none;
23
23
text-align: left;
···
44
44
}
45
45
}
46
46
47
-
#toc-content {
47
+
.toc-content {
48
48
list-style: none;
49
49
position: relative;
50
50