feat: support non-singleton explorer

Jacky Zhao

2025-03-10 a8001e9554a319782d8557acb8f19358996b5828

 quartz/components/TableOfContents.tsx

@@ -6,7 +6,8 @@
// @ts-ignore
import script from "./scripts/toc.inline"
import { i18n } from "../i18n"
import OverflowList from "./OverflowList"
import OverflowListFactory from "./OverflowList"
import { concatenateResources } from "../util/resources"

interface Options {
  layout: "modern" | "legacy"
@@ -16,6 +17,9 @@
  layout: "modern",
}

export default ((opts?: Partial<Options>) => {
  const layout = opts?.layout ?? defaultOptions.layout
  const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
const TableOfContents: QuartzComponent = ({
  fileData,
  displayClass,
@@ -50,7 +54,7 @@
        </svg>
      </button>
      <div class={fileData.collapseToc ? "collapsed toc-content" : "toc-content"}>
        <OverflowList id="toc-ul">
          <OverflowList>
          {fileData.toc.map((tocEntry) => (
            <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
              <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
@@ -63,8 +67,9 @@
    </div>
  )
}

TableOfContents.css = modernStyle
TableOfContents.afterDOMLoaded = script + OverflowList.afterDOMLoaded("toc-ul")
  TableOfContents.afterDOMLoaded = concatenateResources(script, overflowListAfterDOMLoaded)

const LegacyTableOfContents: QuartzComponent = ({ fileData, cfg }: QuartzComponentProps) => {
  if (!fileData.toc) {
@@ -89,7 +94,5 @@
}
LegacyTableOfContents.css = legacyStyle

export default ((opts?: Partial<Options>) => {
  const layout = opts?.layout ?? defaultOptions.layout
  return layout === "modern" ? TableOfContents : LegacyTableOfContents
}) satisfies QuartzComponentConstructor