From 101e9946bddd053a42d269e19e35feae46fe4305 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 04 Nov 2023 19:11:42 +0000
Subject: [PATCH] feat: add collapseByDefault option to TableOfContents (closes #566)
---
quartz/plugins/transformers/toc.ts | 4 ++++
quartz/components/TableOfContents.tsx | 4 ++--
docs/features/table of contents.md | 1 +
quartz/components/scripts/toc.inline.ts | 3 ++-
4 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/docs/features/table of contents.md b/docs/features/table of contents.md
index a66c850..f169b22 100644
--- a/docs/features/table of contents.md
+++ b/docs/features/table of contents.md
@@ -18,6 +18,7 @@
- Removing table of contents: remove all instances of `Plugin.TableOfContents()` from `quartz.config.ts`. and `Component.TableOfContents()` from `quartz.layout.ts`
- Changing the max depth: pass in a parameter to `Plugin.TableOfContents({ maxDepth: 4 })`
- Changing the minimum number of entries in the Table of Contents before it renders: pass in a parameter to `Plugin.TableOfContents({ minEntries: 3 })`
+- Collapse the table of content by default: pass in a parameter to `Plugin.TableOfContents({ collapseByDefault: true })`
- Component: `quartz/components/TableOfContents.tsx`
- Style:
- Modern (default): `quartz/components/styles/toc.scss`
diff --git a/quartz/components/TableOfContents.tsx b/quartz/components/TableOfContents.tsx
index 3847726..1c55f07 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -20,7 +20,7 @@
return (
<div class={`toc ${displayClass ?? ""}`}>
- <button type="button" id="toc">
+ <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
<h3>Table of Contents</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -60,7 +60,7 @@
}
return (
- <details id="toc" open>
+ <details id="toc" open={!fileData.collapseToc}>
<summary>
<h3>Table of Contents</h3>
</summary>
diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts
index f33d8f5..f3da52c 100644
--- a/quartz/components/scripts/toc.inline.ts
+++ b/quartz/components/scripts/toc.inline.ts
@@ -24,8 +24,9 @@
function setupToc() {
const toc = document.getElementById("toc")
if (toc) {
+ const collapsed = toc.classList.contains("collapsed")
const content = toc.nextElementSibling as HTMLElement
- content.style.maxHeight = content.scrollHeight + "px"
+ content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
toc.removeEventListener("click", toggleToc)
toc.addEventListener("click", toggleToc)
}
diff --git a/quartz/plugins/transformers/toc.ts b/quartz/plugins/transformers/toc.ts
index be006f6..87c5802 100644
--- a/quartz/plugins/transformers/toc.ts
+++ b/quartz/plugins/transformers/toc.ts
@@ -8,12 +8,14 @@
maxDepth: 1 | 2 | 3 | 4 | 5 | 6
minEntries: 1
showByDefault: boolean
+ collapseByDefault: boolean
}
const defaultOptions: Options = {
maxDepth: 3,
minEntries: 1,
showByDefault: true,
+ collapseByDefault: false,
}
interface TocEntry {
@@ -54,6 +56,7 @@
...entry,
depth: entry.depth - highestDepth,
}))
+ file.data.collapseToc = opts.collapseByDefault
}
}
}
@@ -66,5 +69,6 @@
declare module "vfile" {
interface DataMap {
toc: TocEntry[]
+ collapseToc: boolean
}
}
--
Gitblit v1.10.0