add a collapsible ToC

meleu

2022-04-04 a287d11246cc0c18a9bf4435bddffc9e163e64fd

add a collapsible ToC

 assets/styles/base.scss

@@ -23,6 +23,23 @@
  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" . }}