| | |
| | | import { QuartzComponentConstructor, QuartzComponentProps } from "./types" |
| | | import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" |
| | | import legacyStyle from "./styles/legacyToc.scss" |
| | | import modernStyle from "./styles/toc.scss" |
| | | import { classNames } from "../util/lang" |
| | | |
| | | // @ts-ignore |
| | | import script from "./scripts/toc.inline" |
| | | import { i18n } from "../i18n" |
| | | |
| | | interface Options { |
| | | layout: "modern" | "legacy" |
| | |
| | | layout: "modern", |
| | | } |
| | | |
| | | function TableOfContents({ fileData, displayClass }: QuartzComponentProps) { |
| | | const TableOfContents: QuartzComponent = ({ |
| | | fileData, |
| | | displayClass, |
| | | cfg, |
| | | }: QuartzComponentProps) => { |
| | | if (!fileData.toc) { |
| | | return null |
| | | } |
| | | |
| | | return ( |
| | | <div class={`toc ${displayClass}`}> |
| | | <button type="button" id="toc"> |
| | | <h3>Table of Contents</h3> |
| | | <div class={classNames(displayClass, "toc")}> |
| | | <button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}> |
| | | <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3> |
| | | <svg |
| | | xmlns="http://www.w3.org/2000/svg" |
| | | width="24" |
| | |
| | | TableOfContents.css = modernStyle |
| | | TableOfContents.afterDOMLoaded = script |
| | | |
| | | function LegacyTableOfContents({ fileData }: QuartzComponentProps) { |
| | | const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => { |
| | | if (!fileData.toc) { |
| | | return null |
| | | } |
| | | |
| | | return ( |
| | | <details id="toc" open> |
| | | <details id="toc" open={!fileData.collapseToc}> |
| | | <summary> |
| | | <h3>Table of Contents</h3> |
| | | <h3>{i18n(cfg.locale).components.tableOfContents.title}</h3> |
| | | </summary> |
| | | <ul> |
| | | {fileData.toc.map((tocEntry) => ( |