feat(explorer): highlight current path in explorer

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

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"

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

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()
 

quartz/components/styles/explorer.scss

@@ -158,6 +158,10 @@ button#desktop-explorer {
   > #explorer-ul {
     max-height: none;
   }
+
+  .highlight-path {
+    color: var(--tertiary);
+  }
 }
 
 svg {