add a collapsible ToC

assets/styles/base.scss

@@ -23,6 +23,23 @@ p, ul, text {
   padding: revert;
 }
 
+.mainTOC {
+  background: var(--lightgray);
+  border-radius: 8px;
+  padding: 0.8em;
+}
+
+.mainTOC details summary {
+  cursor: zoom-in;
+  font-family: Inter;
+  color: var(--dark);
+  font-weight: 700;
+}
+
+.mainTOC details[open] summary {
+    cursor: zoom-out;
+}
+
 #TableOfContents > ol {
   counter-reset: section;
   margin-left: 0em;

data/config.yaml

@@ -1,5 +1,6 @@
 name: Jacky Zhao
 enableToc: true
+openToc: false
 enableLinkPreview: true
 enableLatex: true
 description:

layouts/_default/single.html

@@ -24,8 +24,10 @@
       </ul>
       {{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false)) }}
       <aside class="mainTOC">
-          <h3>Table of Contents</h3>
-          {{ .TableOfContents }}
+          <details {{ if $.Site.Data.config.openToc }}open {{ end }}>
+            <summary>Table of Contents</summary>
+            {{ .TableOfContents }}
+          </details>
       </aside>
       {{end}}
       {{partial "textprocessing.html" . }}

layouts/index.html

@@ -15,8 +15,10 @@
     <article>
         {{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false)) }}
         <aside class="mainTOC">
-            <h3>Table of Contents</h3>
-            {{ .TableOfContents }}
+            <details {{ if $.Site.Data.config.openToc }}open {{ end }}>
+                <summary>Table of Contents</summary>
+                {{ .TableOfContents }}
+            </details>
         </aside>
         {{end}}
         {{partial "textprocessing.html" . }}