From 54064649ac271f99cf71a64d966fcf3ebd36f9a1 Mon Sep 17 00:00:00 2001
From: watashiwaaniket <aniketdhakane3@gmail.com>
Date: Fri, 9 Jan 2026 12:27:23 +0530
Subject: [PATCH 1/5] Explorer can now hold components in it so that they can
 be visible from the menu drawer on mobile view

---
 quartz.layout.ts               | 14 +++++++++++-
 quartz/components/Explorer.tsx | 40 +++++++++++++++++++++++++++++++---
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 970a5be34..3fb6cc09e 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -38,7 +38,19 @@ export const defaultContentPageLayout: PageLayout = {
         { Component: Component.ReaderMode() },
       ],
     }),
-    Component.Explorer(),
+    Component.Explorer({
+      folderDefaultState: "collapsed",
+      components: [
+        {
+          Component: Component.RecentNotes(),
+          position: "before",
+        },
+        {
+          Component: Component.ContentMeta(),
+          position: "after",
+        }
+      ]
+    }),
   ],
   right: [
     Component.Graph(),
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index e4cbcabae..e16a5f460 100644
--- a/quartz/components/Explorer.tsx
+++ b/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,16 @@ 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" || !c.position,
+    )
+    const afterCOmpoentns = (opts.components || []).filter(
+      (c) => c.position === "after" || !c.position,
+    )
+
     return (
       <div
         class={classNames(displayClass, "explorer")}
@@ -120,7 +132,19 @@ export default ((userOpts?: Partial<Options>) => {
           </svg>
         </button>
         <div id={id} class="explorer-content" aria-expanded={false} role="group">
+          {beforeComponents.map((comp, idx) => (
+            <div key={`before-${idx}`}>
+              <comp.Component {...props} cfg={cfg} />
+            </div>
+          ))}
+
           <OverflowList class="explorer-ul" />
+
+          {afterCOmpoentns.map((comp, idx) => (
+            <div key={`after-${idx}`}>
+              <comp.Component {...props} cfg={cfg} />
+            </div>
+          ))}
         </div>
         <template id="template-file">
           <li>
@@ -159,7 +183,17 @@ export default ((userOpts?: Partial<Options>) => {
     )
   }
 
-  Explorer.css = style
-  Explorer.afterDOMLoaded = concatenateResources(script, overflowListAfterDOMLoaded)
+  const additionalCSS = opts.components?.map(c => c.Component.css) || []
+  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

From a50dcc5fb25f69fe047563ef91fb92b454264c6d Mon Sep 17 00:00:00 2001
From: watashiwaaniket <aniketdhakane3@gmail.com>
Date: Fri, 9 Jan 2026 23:09:07 +0530
Subject: [PATCH 2/5] no need to change the layout

---
 quartz.layout.ts | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 3fb6cc09e..b544a765c 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -38,19 +38,7 @@ export const defaultContentPageLayout: PageLayout = {
         { Component: Component.ReaderMode() },
       ],
     }),
-    Component.Explorer({
-      folderDefaultState: "collapsed",
-      components: [
-        {
-          Component: Component.RecentNotes(),
-          position: "before",
-        },
-        {
-          Component: Component.ContentMeta(),
-          position: "after",
-        }
-      ]
-    }),
+    Component.Explorer(),
   ],
   right: [
     Component.Graph(),
@@ -77,4 +65,4 @@ export const defaultListPageLayout: PageLayout = {
     Component.Explorer(),
   ],
   right: [],
-}
+}
\ No newline at end of file

From a18c17f075747d521b0d93262d8608cd7a9f4168 Mon Sep 17 00:00:00 2001
From: watashiwaaniket <aniketdhakane3@gmail.com>
Date: Fri, 9 Jan 2026 23:31:19 +0530
Subject: [PATCH 3/5] added Prettier Formatting

---
 quartz.layout.ts               |  2 +-
 quartz/components/Explorer.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index b544a765c..970a5be34 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -65,4 +65,4 @@ export const defaultListPageLayout: PageLayout = {
     Component.Explorer(),
   ],
   right: [],
-}
\ No newline at end of file
+}
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index e16a5f460..bd5f1db9e 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -183,15 +183,15 @@ export default ((userOpts?: Partial<Options>) => {
     )
   }
 
-  const additionalCSS = opts.components?.map(c => c.Component.css) || []
-  const additionalAfterDOM = opts.components?.map(c => c.Component.afterDOMLoaded) || []
-  const additionalBeforeDOM = opts.components?.map(c => c.Component.beforeDOMLoaded) || []
+  const additionalCSS = opts.components?.map((c) => c.Component.css) || []
+  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, 
+    script,
     overflowListAfterDOMLoaded,
-    ...additionalAfterDOM
+    ...additionalAfterDOM,
   )
   Explorer.beforeDOMLoaded = concatenateResources(...additionalBeforeDOM)
 

From 65e36d9e6ce09cdd86be056e6b252db31e455d42 Mon Sep 17 00:00:00 2001
From: Aniket Dhakane <55570910+watashiwaaniket@users.noreply.github.com>
Date: Sat, 10 Jan 2026 10:51:28 +0530
Subject: [PATCH 4/5] Update quartz/components/Explorer.tsx - fixed typo

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 quartz/components/Explorer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index bd5f1db9e..5113d8930 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -71,7 +71,7 @@ export default ((userOpts?: Partial<Options>) => {
     const beforeComponents = (opts.components || []).filter(
       (c) => c.position === "before" || !c.position,
     )
-    const afterCOmpoentns = (opts.components || []).filter(
+    const afterComponents = (opts.components || []).filter(
       (c) => c.position === "after" || !c.position,
     )
 

From da264c13dea7151bd9f066d66267c8c002522147 Mon Sep 17 00:00:00 2001
From: watashiwaaniket <aniketdhakane3@gmail.com>
Date: Sat, 10 Jan 2026 16:18:39 +0530
Subject: [PATCH 5/5] implemented the copilot suggestions

---
 quartz/components/Explorer.tsx | 36 +++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index 5113d8930..b14e2967d 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -68,12 +68,8 @@ export default ((userOpts?: Partial<Options>) => {
   const Explorer: QuartzComponent = ({ cfg, displayClass, ...props }: QuartzComponentProps) => {
     const id = `explorer-${numExplorers++}`
 
-    const beforeComponents = (opts.components || []).filter(
-      (c) => c.position === "before" || !c.position,
-    )
-    const afterComponents = (opts.components || []).filter(
-      (c) => c.position === "after" || !c.position,
-    )
+    const beforeComponents = (opts.components || []).filter((c) => c.position === "before")
+    const afterComponents = (opts.components || []).filter((c) => c.position === "after")
 
     return (
       <div
@@ -132,19 +128,27 @@ export default ((userOpts?: Partial<Options>) => {
           </svg>
         </button>
         <div id={id} class="explorer-content" aria-expanded={false} role="group">
-          {beforeComponents.map((comp, idx) => (
-            <div key={`before-${idx}`}>
-              <comp.Component {...props} cfg={cfg} />
-            </div>
-          ))}
+          {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" />
 
-          {afterCOmpoentns.map((comp, idx) => (
-            <div key={`after-${idx}`}>
-              <comp.Component {...props} cfg={cfg} />
-            </div>
-          ))}
+          {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>