You can pass your own functions for sortFn, filterFn and mapFn. All functions will be executed in the order provided by the order option (see [[#Customization]]). These functions behave similarly to their Array.prototype counterpart, except they modify the entire FileNode tree in place instead of returning a new one.

For more information on how to use sort, filter and map, you can check Array.prototype.sort(), Array.prototype.filter() and Array.prototype.map().

Type definitions look like this:

type SortFn = (a: FileTrieNode, b: FileTrieNode) => number
type FilterFn = (node: FileTrieNode) => boolean
type MapFn = (node: FileTrieNode) => void

Basic examples

These examples show the basic usage of sort, map and filter.

Use sort to put files first

Using this example, the explorer will alphabetically sort everything.

Component.Explorer({
  sortFn: (a, b) => {
    return a.displayName.localeCompare(b.displayName)
  },
})

Change display names (map)

Using this example, the display names of all FileNodes (folders + files) will be converted to full upper case.

Component.Explorer({
  mapFn: (node) => {
    node.displayName = node.displayName.toUpperCase()
    return node
  },
})

Remove list of elements (filter)

Using this example, you can remove elements from your explorer by providing an array of folders/files to exclude. Note that this example filters on the title but you can also do it via slug or any other field available on FileTrieNode.

Component.Explorer({
  filterFn: (node) => {
    // set containing names of everything you want to filter out
    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())
  },
})

Remove files by tag

You can access the tags of a file by node.data.tags.

Component.Explorer({
  filterFn: (node) => {
    // exclude files with the tag "explorerexclude"
    return node.data?.tags?.includes("explorerexclude") !== true
  },
})

Show every element in explorer

By default, the explorer will filter out the tags folder. To override the default filter function, you can set the filter function to undefined.

Component.Explorer({
  filterFn: undefined, // apply no filter function, every file and folder will visible
})

Advanced examples

[!tip] When writing more complicated functions, the layout file can start to look very cramped. You can fix this by defining your sort functions outside of the component and passing it in.

import { Options } from "./quartz/components/Explorer"

export const mapFn: Options["mapFn"] = (node) => {
  // implement your function here
}
export const filterFn: Options["filterFn"] = (node) => {
  // implement your function here
}
export const sortFn: Options["sortFn"] = (a, b) => {
  // implement your function here
}

Component.Explorer({
  // ... your other options
  mapFn,
  filterFn,
  sortFn,
})

Add emoji prefix

To add emoji prefixes (📁 for folders, 📄 for files), you could use a map function like this:

Component.Explorer({
  mapFn: (node) => {
    if (node.isFolder) {
      node.displayName = "📁 " + node.displayName
    } else {
      node.displayName = "📄 " + node.displayName
    }
  },
})