toc

Jacky Zhao

2023-06-10 b8c011410d6bcd6837f4efd6a3948196a0f7aeea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { QuartzComponentProps } from "./types"
import style from "./styles/toc.scss"
 
export default function TableOfContents({ fileData, position }: QuartzComponentProps) {
  if (!fileData.toc) {
    return null
  }
 
  if (position === 'body') {
    // TODO: animate this
    return <details className="toc" open>
      <summary><h3>Table of Contents</h3></summary>
      <ul>
        {fileData.toc.map(tocEntry => <li key={tocEntry.slug} className={`depth-${tocEntry.depth}`}>
          <a href={`#${tocEntry.slug}`}>{tocEntry.text}</a>
        </li>)}
      </ul>
    </details>
  } else if (position === 'sidebar') {
    // TODO
  }
}
 
TableOfContents.css = style