docs: fix explorer example (#483)

Ben Schlegel

2023-09-18 0d3cf2922618774fc397dca8cb92fcf76fb0db02

 quartz/components/ExplorerNode.tsx

@@ -1,13 +1,18 @@
// @ts-ignore
import { QuartzPluginData } from "vfile"
import { QuartzPluginData } from "../plugins/vfile"
import { resolveRelative } from "../util/path"

type OrderEntries = "sort" | "filter" | "map"

export interface Options {
  title: string
  folderDefaultState: "collapsed" | "open"
  folderClickBehavior: "collapse" | "link"
  useSavedState: boolean
  sortFn: (a: FileNode, b: FileNode) => number
  filterFn?: (node: FileNode) => boolean
  mapFn?: (node: FileNode) => void
  order?: OrderEntries[]
}

type DataWrapper = {
@@ -30,7 +35,7 @@
  constructor(name: string, file?: QuartzPluginData, depth?: number) {
    this.children = []
    this.name = name
    this.file = file ?? null
    this.file = file ? structuredClone(file) : null
    this.depth = depth ?? 0
  }

@@ -67,6 +72,25 @@
  }

  /**
   * Filter FileNode tree. Behaves similar to `Array.prototype.filter()`, but modifies tree in place
   * @param filterFn function to filter tree with
   */
  filter(filterFn: (node: FileNode) => boolean) {
    this.children = this.children.filter(filterFn)
    this.children.forEach((child) => child.filter(filterFn))
  }

  /**
   * Filter FileNode tree. Behaves similar to `Array.prototype.map()`, but modifies tree in place
   * @param mapFn function to use for mapping over tree
   */
  map(mapFn: (node: FileNode) => void) {
    mapFn(this)

    this.children.forEach((child) => child.map(mapFn))
  }

  /**
   * Get folder representation with state of tree.
   * Intended to only be called on root node before changes to the tree are made
   * @param collapsed default state of folders (collapsed by default or not)
@@ -126,7 +150,7 @@
        // Single file node
        <li key={node.file.slug}>
          <a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
            {node.file.frontmatter?.title}
            {node.name}
          </a>
        </li>
      ) : (