yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add collapseByDefault option to TableOfContents (closes #566)

Browse Source
This commit is contained in:
Jacky Zhao
2023-11-04 12:11:42 -07:00
parent a62a97c7ab
commit 101e9946bd
4 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/features/table of contents.md
View File

@@ -18,6 +18,7 @@ You can also hide the table of contents on a page by adding `showToc: false` to
- Removing table of contents: remove all instances of `Plugin.TableOfContents()` from `quartz.config.ts`. and `Component.TableOfContents()` from `quartz.layout.ts` - 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 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 })` - 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` - Component: `quartz/components/TableOfContents.tsx`
- Style: - Style:
- Modern (default): `quartz/components/styles/toc.scss` - Modern (default): `quartz/components/styles/toc.scss`

4
quartz/components/TableOfContents.tsx
View File

@@ -20,7 +20,7 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
return ( return (
<div class={`toc ${displayClass ?? ""}`}> <div class={`toc ${displayClass ?? ""}`}>
<button type="button" id="toc"> <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
<h3>Table of Contents</h3> <h3>Table of Contents</h3>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -60,7 +60,7 @@ function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
} }
return ( return (
<details id="toc" open> <details id="toc" open={!fileData.collapseToc}>
<summary> <summary>
<h3>Table of Contents</h3> <h3>Table of Contents</h3>
</summary> </summary>

3
quartz/components/scripts/toc.inline.ts
View File

@@ -24,8 +24,9 @@ function toggleToc(this: HTMLElement) {
function setupToc() { function setupToc() {
const toc = document.getElementById("toc") const toc = document.getElementById("toc")
if (toc) { if (toc) {
const collapsed = toc.classList.contains("collapsed")
const content = toc.nextElementSibling as HTMLElement 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.removeEventListener("click", toggleToc)
toc.addEventListener("click", toggleToc) toc.addEventListener("click", toggleToc)
} }

4
quartz/plugins/transformers/toc.ts
View File

@@ -8,12 +8,14 @@ export interface Options {
maxDepth: 1 | 2 | 3 | 4 | 5 | 6 maxDepth: 1 | 2 | 3 | 4 | 5 | 6
minEntries: 1 minEntries: 1
showByDefault: boolean showByDefault: boolean
collapseByDefault: boolean
} }
const defaultOptions: Options = { const defaultOptions: Options = {
maxDepth: 3, maxDepth: 3,
minEntries: 1, minEntries: 1,
showByDefault: true, showByDefault: true,
collapseByDefault: false,
} }
interface TocEntry { interface TocEntry {
@@ -54,6 +56,7 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
...entry, ...entry,
depth: entry.depth - highestDepth, depth: entry.depth - highestDepth,
})) }))
file.data.collapseToc = opts.collapseByDefault
} }
} }
} }
@@ -66,5 +69,6 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
declare module "vfile" { declare module "vfile" {
interface DataMap { interface DataMap {
toc: TocEntry[] toc: TocEntry[]
collapseToc: boolean
} }
} }