From dcdeae4e7bd527945b887ca347b3b4408c03055b Mon Sep 17 00:00:00 2001
From: Ben Schlegel <31989404+benschlegel@users.noreply.github.com>
Date: Thu, 21 Sep 2023 16:53:19 +0000
Subject: [PATCH] docs(explorer): update default config + new example (#493)
---
docs/features/explorer.md | 25 ++++++++++++++++++-------
1 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/docs/features/explorer.md b/docs/features/explorer.md
index 6f941b8..f48ad1b 100644
--- a/docs/features/explorer.md
+++ b/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()
},
})
```
@@ -159,6 +160,16 @@
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
}
}
},
--
Gitblit v1.10.0