docs(explorer): update default config + new example (#493)

Ben Schlegel

2023-09-21 dcdeae4e7bd527945b887ca347b3b4408c03055b

 docs/features/explorer.md

@@ -29,7 +29,7 @@
  sortFn: (a, b) => {
    ... // default implementation shown later
  },
  filterFn: undefined,
  filterFn: filterFn: (node) => node.name !== "tags", // filters out 'tags' folder
  mapFn: undefined,
  // what order to apply functions in
  order: ["filter", "map", "sort"],
@@ -57,7 +57,8 @@
```ts title="quartz/components/ExplorerNode.tsx" {2-5}
export class FileNode {
  children: FileNode[]  // children of current node
  name: string  // name of node (only useful for folders)
  name: string  // last part of slug
  displayName: string // what actually should be displayed in the explorer
  file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail
  depth: number // depth of current node

@@ -72,7 +73,7 @@
Component.Explorer({
  sortFn: (a, b) => {
    if ((!a.file && !b.file) || (a.file && b.file)) {
      return a.name.localeCompare(b.name)
      return a.displayName.localeCompare(b.displayName)
    }
    if (a.file && !b.file) {
      return 1
@@ -120,7 +121,7 @@
Component.Explorer({
  sortFn: (a, b) => {
    if ((!a.file && !b.file) || (a.file && b.file)) {
      return a.name.localeCompare(b.name)
      return a.displayName.localeCompare(b.displayName)
    }
    if (a.file && !b.file) {
      return -1
@@ -138,7 +139,7 @@
```ts title="quartz.layout.ts"
Component.Explorer({
  mapFn: (node) => {
    node.name = node.name.toUpperCase()
    node.displayName = node.displayName.toUpperCase()
  },
})
```
@@ -152,13 +153,23 @@
  filterFn: (node) => {
    // set containing names of everything you want to filter out
    const omit = new Set(["authoring content", "tags", "hosting"])
    return omit.has(node.name.toLowerCase())
    return !omit.has(node.name.toLowerCase())
  },
})
```

You can customize this by changing the entries of the `omit` set. Simply add all folder or file names you want to remove.

### Show every element in explorer

To override the default filter function that removes the `tags` folder from the explorer, you can set the filter function to `undefined`.

```ts title="quartz.layout.ts"
Component.Explorer({
  filterFn: undefined, // apply no filter function, every file and folder will visible
})
```

## Advanced examples

### Add emoji prefix
@@ -172,9 +183,9 @@
    if (node.depth > 0) {
      // set emoji for file/folder
      if (node.file) {
        node.name = "📄 " + node.name
        node.displayName = "📄 " + node.displayName
      } else {
        node.name = "📁 " + node.name
        node.displayName = "📁 " + node.displayName
      }
    }
  },