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

Jacky Zhao

2023-11-04 101e9946bddd053a42d269e19e35feae46fe4305

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

 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`

 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>

 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)
  }

 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
  }
}