Merge da264c13de into ec00a40aef

quartz/components/Explorer.tsx

@@ -20,6 +20,10 @@ export interface Options {
   filterFn: (node: FileTrieNode) => boolean
   mapFn: (node: FileTrieNode) => void
   order: OrderEntries[]
+  components?: {
+    Component: QuartzComponent
+    position: "before" | "after"
+  }[]
 }
 
 const defaultOptions: Options = {
@@ -48,6 +52,7 @@ const defaultOptions: Options = {
   },
   filterFn: (node) => node.slugSegment !== "tags",
   order: ["filter", "map", "sort"],
+  components: [],
 }
 
 export type FolderState = {
@@ -60,9 +65,12 @@ export default ((userOpts?: Partial<Options>) => {
   const opts: Options = { ...defaultOptions, ...userOpts }
   const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
 
-  const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
+  const Explorer: QuartzComponent = ({ cfg, displayClass, ...props }: QuartzComponentProps) => {
     const id = `explorer-${numExplorers++}`
 
+    const beforeComponents = (opts.components || []).filter((c) => c.position === "before")
+    const afterComponents = (opts.components || []).filter((c) => c.position === "after")
+
     return (
       <div
         class={classNames(displayClass, "explorer")}
@@ -120,7 +128,27 @@ export default ((userOpts?: Partial<Options>) => {
           </svg>
         </button>
         <div id={id} class="explorer-content" aria-expanded={false} role="group">
+          {beforeComponents.map((comp, idx) => {
+            const componentName = comp.Component.displayName || `component-${idx}`
+            const key = `before-${componentName}-${idx}`
+            return (
+              <div key={key}>
+                <comp.Component {...props} cfg={cfg} />
+              </div>
+            )
+          })}
+
           <OverflowList class="explorer-ul" />
+
+          {afterComponents.map((comp, idx) => {
+            const componentName = comp.Component.displayName || `component-${idx}`
+            const key = `before-${componentName}-${idx}`
+            return (
+              <div key={key}>
+                <comp.Component {...props} cfg={cfg} />
+              </div>
+            )
+          })}
         </div>
         <template id="template-file">
           <li>
@@ -159,7 +187,17 @@ export default ((userOpts?: Partial<Options>) => {
     )
   }
 
-  Explorer.css = style
+  const additionalCSS = opts.components?.map((c) => c.Component.css) || []
-  Explorer.afterDOMLoaded = concatenateResources(script, overflowListAfterDOMLoaded)
+  const additionalAfterDOM = opts.components?.map((c) => c.Component.afterDOMLoaded) || []
+  const additionalBeforeDOM = opts.components?.map((c) => c.Component.beforeDOMLoaded) || []
+
+  Explorer.css = concatenateResources(style, ...additionalCSS)
+  Explorer.afterDOMLoaded = concatenateResources(
+    script,
+    overflowListAfterDOMLoaded,
+    ...additionalAfterDOM,
+  )
+  Explorer.beforeDOMLoaded = concatenateResources(...additionalBeforeDOM)
+
   return Explorer
 }) satisfies QuartzComponentConstructor