From 101e9946bddd053a42d269e19e35feae46fe4305 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 4 Nov 2023 12:11:42 -0700
Subject: [PATCH] feat: add collapseByDefault option to TableOfContents (closes
 #566)

---
 docs/features/table of contents.md      | 1 +
 quartz/components/TableOfContents.tsx   | 4 ++--
 quartz/components/scripts/toc.inline.ts | 3 ++-
 quartz/plugins/transformers/toc.ts      | 4 ++++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/features/table of contents.md b/docs/features/table of contents.md
index a66c8501..f169b22d 100644
--- a/docs/features/table of contents.md	
+++ b/docs/features/table of contents.md	
@@ -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`
 - 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 38477268..1c55f074 100644
--- a/quartz/components/TableOfContents.tsx
+++ b/quartz/components/TableOfContents.tsx
@@ -20,7 +20,7 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
 
   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 @@ function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
   }
 
   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 f33d8f50..f3da52cd 100644
--- a/quartz/components/scripts/toc.inline.ts
+++ b/quartz/components/scripts/toc.inline.ts
@@ -24,8 +24,9 @@ function toggleToc(this: HTMLElement) {
 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 be006f61..87c5802f 100644
--- a/quartz/plugins/transformers/toc.ts
+++ b/quartz/plugins/transformers/toc.ts
@@ -8,12 +8,14 @@ export interface Options {
   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 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
                   ...entry,
                   depth: entry.depth - highestDepth,
                 }))
+                file.data.collapseToc = opts.collapseByDefault
               }
             }
           }
@@ -66,5 +69,6 @@ export const TableOfContents: QuartzTransformerPlugin<Partial<Options> | undefin
 declare module "vfile" {
   interface DataMap {
     toc: TocEntry[]
+    collapseToc: boolean
   }
 }