Jacky Zhao
2025-05-28 096ef220dc469ca81a5514d48bb8b8d48284990c
docs/features/explorer.md
@@ -43,9 +43,7 @@
- Removing explorer: remove `Component.Explorer()` from `quartz.layout.ts`
  - (optional): After removing the explorer component, you can move the [[table of contents | Table of Contents]] component back to the `left` part of the layout
- Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]]
- Component:
  - Wrapper (Outer component, generates file tree, etc): `quartz/components/Explorer.tsx`
  - Explorer node (recursive, either a folder or a file): `quartz/components/ExplorerNode.tsx`
- Component: `quartz/components/Explorer.tsx`
- Style: `quartz/components/styles/explorer.scss`
- Script: `quartz/components/scripts/explorer.inline.ts`
@@ -131,7 +129,8 @@
```ts title="quartz.layout.ts"
Component.Explorer({
  mapFn: (node) => {
    return (node.displayName = node.displayName.toUpperCase())
    node.displayName = node.displayName.toUpperCase()
    return node
  },
})
```
@@ -145,8 +144,12 @@
Component.Explorer({
  filterFn: (node) => {
    // set containing names of everything you want to filter out
    const omit = new Set(["authoring content", "tags", "hosting"])
    return !omit.has(node.data.title.toLowerCase())
    const omit = new Set(["authoring content", "tags", "advanced"])
    // can also use node.slug or by anything on node.data
    // note that node.data is only present for files that exist on disk
    // (e.g. implicit folder nodes that have no associated index.md)
    return !omit.has(node.displayName.toLowerCase())
  },
})
```
@@ -159,7 +162,7 @@
Component.Explorer({
  filterFn: (node) => {
    // exclude files with the tag "explorerexclude"
    return node.data.tags.includes("explorerexclude") !== true
    return node.data.tags?.includes("explorerexclude") !== true
  },
})
```
@@ -183,7 +186,7 @@
> and passing it in.
>
> ```ts title="quartz.layout.ts"
> import { Options } from "./quartz/components/ExplorerNode"
> import { Options } from "./quartz/components/Explorer"
>
> export const mapFn: Options["mapFn"] = (node) => {
>   // implement your function here