From ac9db622ff5a65a295b9a3a78d9a9999d3f69b56 Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Sat, 1 Mar 2025 14:58:20 +0100
Subject: [PATCH] feat(explorer): highlight current path in explorer

---
 docs/features/explorer.md                    | 1 +
 quartz/components/Explorer.tsx               | 3 +++
 quartz/components/ExplorerNode.tsx           | 1 +
 quartz/components/scripts/explorer.inline.ts | 5 +++++
 quartz/components/styles/explorer.scss       | 4 ++++
 5 files changed, 14 insertions(+)

diff --git a/docs/features/explorer.md b/docs/features/explorer.md
index 95878f787..fccf174a3 100644
--- a/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -27,6 +27,7 @@ Component.Explorer({
   folderClickBehavior: "collapse", // what happens when you click a folder ("link" to navigate to folder page on click or "collapse" to collapse folder on click)
   folderDefaultState: "collapsed", // default state of folders ("collapsed" or "open")
   useSavedState: true, // whether to use local storage to save "state" (which folders are opened) of explorer
+  highlightCurrentPath: true, // whether to highlight the current file in the explorer
   // Sort order: folders first, then files. Sort folders and files alphabetically
   sortFn: (a, b) => {
     ... // default implementation shown later
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index ac276a8bc..a62013d35 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -13,6 +13,7 @@ const defaultOptions = {
   folderClickBehavior: "collapse",
   folderDefaultState: "collapsed",
   useSavedState: true,
+  highlightCurrentPath: true,
   mapFn: (node) => {
     return node
   },
@@ -92,6 +93,7 @@ export default ((userOpts?: Partial<Options>) => {
           data-behavior={opts.folderClickBehavior}
           data-collapsed={opts.folderDefaultState}
           data-savestate={opts.useSavedState}
+          data-highlightpath={opts.highlightCurrentPath}
           data-tree={jsonTree}
           data-mobile={true}
           aria-controls="explorer-content"
@@ -119,6 +121,7 @@ export default ((userOpts?: Partial<Options>) => {
           data-behavior={opts.folderClickBehavior}
           data-collapsed={opts.folderDefaultState}
           data-savestate={opts.useSavedState}
+          data-highlightpath={opts.highlightCurrentPath}
           data-tree={jsonTree}
           data-mobile={false}
           aria-controls="explorer-content"
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index e57d67715..ce4da274d 100644
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -16,6 +16,7 @@ export interface Options {
   folderDefaultState: "collapsed" | "open"
   folderClickBehavior: "collapse" | "link"
   useSavedState: boolean
+  highlightCurrentPath: boolean
   sortFn: (a: FileNode, b: FileNode) => number
   filterFn: (node: FileNode) => boolean
   mapFn: (node: FileNode) => void
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 9c6c0508f..37aa0f271 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -169,6 +169,7 @@ window.addEventListener("resize", setupExplorer)
 
 document.addEventListener("nav", () => {
   const explorer = document.querySelector("#mobile-explorer")
+  const currentPath = document.getElementsByTagName("body")[0].getAttribute("data-slug") ?? ""
   if (explorer) {
     explorer.classList.add("collapsed")
     const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
@@ -176,6 +177,10 @@ document.addEventListener("nav", () => {
       content.classList.add("collapsed")
       content.classList.toggle("explorer-viewmode")
     }
+    const currentPathInExplorer = document.querySelector(`a[data-for="${currentPath}"]`)
+    if (currentPathInExplorer) {
+      currentPathInExplorer.classList.add("highlight-path")
+    }
   }
   setupExplorer()
 
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index fbeb58d82..c2df29865 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -158,6 +158,10 @@ button#desktop-explorer {
   > #explorer-ul {
     max-height: none;
   }
+
+  .highlight-path {
+    color: var(--tertiary);
+  }
 }
 
 svg {