feat: support non-singleton explorer

quartz/components/Explorer.tsx

@@ -6,7 +6,8 @@ import script from "./scripts/explorer.inline"
 import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
 import { FileTrieNode } from "../util/fileTrie"
-import OverflowList from "./OverflowList"
+import OverflowListFactory from "./OverflowList"
+import { concatenateResources } from "../util/resources"
 
 type OrderEntries = "sort" | "filter" | "map"
 
@@ -56,6 +57,7 @@ export type FolderState = {
 
 export default ((userOpts?: Partial<Options>) => {
   const opts: Options = { ...defaultOptions, ...userOpts }
+  const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
 
   const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
     return (
@@ -73,8 +75,7 @@ export default ((userOpts?: Partial<Options>) => {
       >
         <button
           type="button"
-          id="mobile-explorer"
-          class="explorer-toggle hide-until-loaded"
+          class="explorer-toggle mobile-explorer hide-until-loaded"
           data-mobile={true}
           aria-controls="explorer-content"
         >
@@ -95,8 +96,7 @@ export default ((userOpts?: Partial<Options>) => {
         </button>
         <button
           type="button"
-          id="desktop-explorer"
-          class="title-button explorer-toggle"
+          class="title-button explorer-toggle desktop-explorer"
           data-mobile={false}
           aria-expanded={true}
         >
@@ -116,8 +116,8 @@ export default ((userOpts?: Partial<Options>) => {
             <polyline points="6 9 12 15 18 9"></polyline>
           </svg>
         </button>
-        <div id="explorer-content" aria-expanded={false}>
-          <OverflowList id="explorer-ul" />
+        <div class="explorer-content" aria-expanded={false}>
+          <OverflowList class="explorer-ul" />
         </div>
         <template id="template-file">
           <li>
@@ -157,6 +157,6 @@ export default ((userOpts?: Partial<Options>) => {
   }
 
   Explorer.css = style
-  Explorer.afterDOMLoaded = script + OverflowList.afterDOMLoaded("explorer-ul")
+  Explorer.afterDOMLoaded = concatenateResources(script, overflowListAfterDOMLoaded)
   return Explorer
 }) satisfies QuartzComponentConstructor