From c7d3474ba8cb49ab0f1978216d80b08ec2c8e5d7 Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sat, 16 Sep 2023 12:40:19 +0200 Subject: [PATCH 01/12] feat(explorer): add config to support custom sort fn --- quartz/components/Explorer.tsx | 13 ++++++++++++- quartz/components/ExplorerNode.tsx | 21 ++++++++------------- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index ce69491e9..ee0f96ff3 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -11,6 +11,17 @@ const defaultOptions = (): Options => ({ folderClickBehavior: "collapse", folderDefaultState: "collapsed", useSavedState: true, + // Sort order: folders first, then files. Sort folders and files alphabetically + sortFn: (a, b) => { + if ((!a.file && !b.file) || (a.file && b.file)) { + return a.name.localeCompare(b.name) + } + if (a.file && !b.file) { + return 1 + } else { + return -1 + } + }, }) export default ((userOpts?: Partial) => { function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) { @@ -22,7 +33,7 @@ export default ((userOpts?: Partial) => { allFiles.forEach((file) => fileTree.add(file, 1)) // Sort tree (folders first, then files (alphabetic)) - fileTree.sort() + fileTree.sort(opts.sortFn!) // Get all folders of tree. Initialize with collapsed state const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed") diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index 6718ec9fa..4d00103d1 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -7,6 +7,7 @@ export interface Options { folderDefaultState: "collapsed" | "open" folderClickBehavior: "collapse" | "link" useSavedState: boolean + sortFn: (a: FileNode, b: FileNode) => number } type DataWrapper = { @@ -90,19 +91,13 @@ export class FileNode { } // Sort order: folders first, then files. Sort folders and files alphabetically - sort() { - this.children = this.children.sort((a, b) => { - if ((!a.file && !b.file) || (a.file && b.file)) { - return a.name.localeCompare(b.name) - } - if (a.file && !b.file) { - return 1 - } else { - return -1 - } - }) - - this.children.forEach((e) => e.sort()) + /** + * Sorts tree according to sort/compare function + * @param sortFn compare function used for `.sort()`, also used recursively for children + */ + sort(sortFn: (a: FileNode, b: FileNode) => number) { + this.children = this.children.sort(sortFn) + this.children.forEach((e) => e.sort(sortFn)) } } From 58aea1cb0791e18cd092d88de5374431eba7f1d3 Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sat, 16 Sep 2023 17:28:58 +0200 Subject: [PATCH 02/12] feat: implement filter function for explorer --- quartz/components/ExplorerNode.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index 4d00103d1..40e526ac8 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -66,6 +66,21 @@ export class FileNode { this.children.forEach((e) => e.print(depth + 1)) } + filter(filterFn: (node: FileNode) => boolean) { + const filteredNodes: FileNode[] = [] + + const traverse = (node: FileNode) => { + if (filterFn(node)) { + filteredNodes.push(node) + } + node.children.forEach(traverse) + } + + traverse(this) + + this.children = filteredNodes + } + /** * Get folder representation with state of tree. * Intended to only be called on root node before changes to the tree are made From 036a33f70bcabc17469956740847796a5f13b9ab Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sat, 16 Sep 2023 17:47:44 +0200 Subject: [PATCH 03/12] fix: use correct import for `QuartzPluginData` --- quartz/components/ExplorerNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index 40e526ac8..d96242543 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -1,5 +1,5 @@ // @ts-ignore -import { QuartzPluginData } from "vfile" +import { QuartzPluginData } from "../plugins/vfile" import { resolveRelative } from "../util/path" export interface Options { From 31d16fbd2c82380af586e458b2c1ff29b90b53ae Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sat, 16 Sep 2023 19:18:59 +0200 Subject: [PATCH 04/12] feat(explorer): integrate filter option --- quartz/components/Explorer.tsx | 5 +++++ quartz/components/ExplorerNode.tsx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index ee0f96ff3..efc9f6aa4 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -35,6 +35,11 @@ export default ((userOpts?: Partial) => { // Sort tree (folders first, then files (alphabetic)) fileTree.sort(opts.sortFn!) + // If provided, apply filter function to fileTree + if (opts.filterFn) { + fileTree.filter(opts.filterFn) + } + // Get all folders of tree. Initialize with collapsed state const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed") diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index d96242543..5cf3f0154 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -8,6 +8,7 @@ export interface Options { folderClickBehavior: "collapse" | "link" useSavedState: boolean sortFn: (a: FileNode, b: FileNode) => number + filterFn?: (node: FileNode) => boolean } type DataWrapper = { @@ -66,6 +67,10 @@ export class FileNode { this.children.forEach((e) => e.print(depth + 1)) } + /** + * 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) { const filteredNodes: FileNode[] = [] From 3d8c470c0d298f720614318fb4c14575e72bbd2e Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sat, 16 Sep 2023 19:35:27 +0200 Subject: [PATCH 05/12] feat(explorer): implement `map` fn argument Add a function for mapping over all FileNodes as an option for `Explorer` --- quartz/components/Explorer.tsx | 5 +++++ quartz/components/ExplorerNode.tsx | 11 +++++++++++ 2 files changed, 16 insertions(+) diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index efc9f6aa4..23c5db261 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -40,6 +40,11 @@ export default ((userOpts?: Partial) => { fileTree.filter(opts.filterFn) } + // If provided, apply map function to fileTree + if (opts.mapFn) { + fileTree.map(opts.mapFn) + } + // Get all folders of tree. Initialize with collapsed state const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed") diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index 5cf3f0154..b8d8c1401 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -9,6 +9,7 @@ export interface Options { useSavedState: boolean sortFn: (a: FileNode, b: FileNode) => number filterFn?: (node: FileNode) => boolean + mapFn?: (node: FileNode) => void } type DataWrapper = { @@ -86,6 +87,16 @@ export class FileNode { this.children = filteredNodes } + /** + * Filter FileNode tree. Behaves similar to `Array.prototype.map()`, but modifies tree in place + * @param mapFn function to filter tree with + */ + 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 From fea352849c6972da4b3b8935eb2e86f6cefc76ed Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sat, 16 Sep 2023 19:45:21 +0200 Subject: [PATCH 06/12] fix: create deep copy of file passed into tree --- quartz/components/ExplorerNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index b8d8c1401..e1c8b8e32 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -32,7 +32,7 @@ export class FileNode { 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 } From f7029012dfb73ce04405bfe44e4e4d984818bf5f Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sat, 16 Sep 2023 21:58:38 +0200 Subject: [PATCH 07/12] feat: black magic add config for `order` array, which determines the order in which all passed config functions for explorer will get executed in. functions will now dynamically be called on `fileTree` via array accessor (e.g. fileTree["sort"].call(...)) with corresponding function from options being passed to call) --- quartz/components/Explorer.tsx | 35 ++++++++++++++++++++++-------- quartz/components/ExplorerNode.tsx | 3 +++ 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index 23c5db261..346bd7587 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -22,6 +22,7 @@ const defaultOptions = (): Options => ({ return -1 } }, + order: ["filter", "map", "sort"], }) export default ((userOpts?: Partial) => { function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) { @@ -32,17 +33,33 @@ export default ((userOpts?: Partial) => { const fileTree = new FileNode("") allFiles.forEach((file) => fileTree.add(file, 1)) - // Sort tree (folders first, then files (alphabetic)) - fileTree.sort(opts.sortFn!) - - // If provided, apply filter function to fileTree - if (opts.filterFn) { - fileTree.filter(opts.filterFn) + /** + * Keys of this object must match corresponding function name of `FileNode`, + * while values must be the argument that will be passed to the function. + * + * e.g. entry for FileNode.sort: `sort: opts.sortFn` (value is sort function from options) + */ + const functions = { + map: opts.mapFn, + sort: opts.sortFn, + filter: opts.filterFn, } - // If provided, apply map function to fileTree - if (opts.mapFn) { - fileTree.map(opts.mapFn) + // Execute all functions (sort, filter, map) that were provided (if none were provided, only default "sort" is applied) + if (opts.order) { + // Order is important, use loop with index instead of order.map() + for (let i = 0; i < opts.order.length; i++) { + const functionName = opts.order[i] + if (functions[functionName]) { + // for every entry in order, call matching function in FileNode and pass matching argument + // e.g. i = 0; functionName = "filter" + // converted to: (if opts.filterFn) => fileTree.filter(opts.filterFn) + + // @ts-ignore + // typescript cant statically check these dynamic references, so manually make sure reference is valid and ignore warning + fileTree[functionName].call(fileTree, functions[functionName]) + } + } } // Get all folders of tree. Initialize with collapsed state diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index e1c8b8e32..b1817444d 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -2,6 +2,8 @@ import { QuartzPluginData } from "../plugins/vfile" import { resolveRelative } from "../util/path" +type OrderEntries = "sort" | "filter" | "map" + export interface Options { title: string folderDefaultState: "collapsed" | "open" @@ -10,6 +12,7 @@ export interface Options { sortFn: (a: FileNode, b: FileNode) => number filterFn?: (node: FileNode) => boolean mapFn?: (node: FileNode) => void + order?: OrderEntries[] } type DataWrapper = { From 9358f73f1c939ce459d7835457527e35e1bdf857 Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sun, 17 Sep 2023 12:41:06 +0200 Subject: [PATCH 08/12] fix: display name for file nodes --- quartz/components/ExplorerNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index b1817444d..e2d8871f2 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -160,7 +160,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro // Single file node
  • - {node.file.frontmatter?.title} + {node.name}
    • ) : ( From 94a04ab1c9fd099c808f3f4e6633722e0d13ac85 Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sun, 17 Sep 2023 15:51:08 +0200 Subject: [PATCH 09/12] fix(explorer): filter function in `ExplorerNode` --- quartz/components/ExplorerNode.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index e2d8871f2..f8b99f015 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -76,18 +76,8 @@ export class FileNode { * @param filterFn function to filter tree with */ filter(filterFn: (node: FileNode) => boolean) { - const filteredNodes: FileNode[] = [] - - const traverse = (node: FileNode) => { - if (filterFn(node)) { - filteredNodes.push(node) - } - node.children.forEach(traverse) - } - - traverse(this) - - this.children = filteredNodes + this.children = this.children.filter(filterFn) + this.children.forEach((child) => child.filter(filterFn)) } /** From 5cc9253c41fda87ba473df7023567ba66ce3c32b Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sun, 17 Sep 2023 16:41:23 +0200 Subject: [PATCH 10/12] docs(explorer): write docs for new features --- docs/features/explorer.md | 198 +++++++++++++++++++++++++++++++++++++- 1 file changed, 195 insertions(+), 3 deletions(-) diff --git a/docs/features/explorer.md b/docs/features/explorer.md index 17647de00..8a9f50657 100644 --- a/docs/features/explorer.md +++ b/docs/features/explorer.md @@ -4,9 +4,9 @@ tags: - component --- -Quartz features an explorer that allows you to navigate all files and folders on your site. It supports nested folders and has options for customization. +Quartz features an explorer that allows you to navigate all files and folders on your site. It supports nested folders and is highly customizable. -By default, it will show all folders and files on your page. To display the explorer in a different spot, you can edit the [[layout]]. +By default, it shows all folders and files on your page. To display the explorer in a different spot, you can edit the [[layout]]. > [!info] > The explorer uses local storage by default to save the state of your explorer. This is done to ensure a smooth experience when navigating to different pages. @@ -25,6 +25,14 @@ Component.Explorer({ folderClickBehavior: "collapse", // what happens when you click a folder ("link" to navigate to folder page on click or "collapse" to collapse folder on click) folderDefaultState: "collapsed", // default state of folders ("collapsed" or "open") useSavedState: true, // wether to use local storage to save "state" (which folders are opened) of explorer + // Sort order: folders first, then files. Sort folders and files alphabetically + sortFn: (a, b) => { + ... // default implementation shown later + }, + filterFn: undefined, + mapFn: undefined, + // what order to apply functions in + order: ["filter", "map", "sort"], }) ``` @@ -33,9 +41,193 @@ When passing in your own options, you can omit any or all of these fields if you Want to customize it even more? - Removing table of contents: remove `Component.Explorer()` from `quartz.layout.ts` - - (optional): After removing the explorer component, you can move the [[table of contents]] component back to the `left` part of the layout + - (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 [[explorer#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` - Style: `quartz/components/styles/explorer.scss` - Script: `quartz/components/scripts/explorer.inline.ts` + +## Advanced customization + +This component allows you to fully customize all of its behavior. You can pass a custom `sort`, `filter` and `map` function. +All functions you can pass work with the `FileNode` class, which has the following properties: + +```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) + file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail + depth: number // depth of current node + + ... // rest of implementation +} +``` + +Every function you can pass is optional. By default, only a `sort` function will be used: + +```ts title="Default sort function" +// Sort order: folders first, then files. Sort folders and files alphabetically +Component.Explorer({ + sortFn: (a, b) => { + if ((!a.file && !b.file) || (a.file && b.file)) { + return a.name.localeCompare(b.name) + } + if (a.file && !b.file) { + return 1 + } else { + return -1 + } + }, +}) +``` + +--- + +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 [[explorer#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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), [Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). + +Type definitions look like this: + +```ts +sortFn: (a: FileNode, b: FileNode) => number +filterFn: (node: FileNode) => boolean +mapFn: (node: FileNode) => void +``` + +> [!tip] +> You can check if a `FileNode` is a folder or a file like this: +> +> ```ts +> if (node.file) { +> // node is a file +> } else { +> // node is a folder +> } +> ``` + +## 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, but put all **files** above all **folders**. + +```ts title="quartz.layout.ts" +Component.Explorer({ + sortFn: (a, b) => { + if ((!a.file && !b.file) || (a.file && b.file)) { + return a.name.localeCompare(b.name) + } + if (a.file && !b.file) { + return -1 + } else { + return 1 + } + }, +}) +``` + +### Change display names (`map`) + +Using this example, the display names of all `FileNodes` (folders + files) will be converted to full upper case. + +```ts title="quartz.layout.ts" +Component.Explorer({ + mapFn: (node) => { + node.name = node.name.toUpperCase() + }, +}) +``` + +### Remove list of elements (`filter`) + +Using this example, you can remove elements from your explorer by providing a list of folders/files using the `list` array. + +```ts title="quartz.layout.ts" +Component.Explorer({ + filterFn: (node) => { + // list containing names of everything you want to filter out + const list = ["authoring content", "building your", "tags", "hosting"] + + for (let listNodeName of list) { + if (listNodeName.toLowerCase() === node.name.toLowerCase()) { + return false // Found a match, so return false to filter out the node + } + } + return true // No match found, so return true to keep the node + }, +}) +``` + +You can customize this by changing the entries of the `list` array. Simply add all folder or file names you want to remove to the array (case insensitive). + +## Advanced examples + +### Add emoji prefix + +To add emoji prefixes (📁 for folders, 📄 for files), you could use a map function like this: + +```ts title="quartz.layout.ts" +Component.Explorer({ + mapFn: (node) => { + // dont change name of root node + if (node.depth > 0) { + // set emoji for file/folder + if (node.file) { + node.name = "📄 " + node.name + } else { + node.name = "📁 " + node.name + } + } + }, +}}) +``` + +### Putting it all together + +In this example, we're going to customize the explorer by using functions from examples above to [[explorer#Add emoji prefix | add emoji prefixes]], [[explorer#remove-list-of-elements-filter| filter out some folders]] and [[explorer#use-sort-to-put-files-first | sort with files above folders]]. + +```ts title="quartz.layout.ts" +Component.Explorer({ + filterFn: sampleFilterFn, + mapFn: sampleMapFn, + sortFn: sampleSortFn, + order: ["filter", "sort", "map"], +}) +``` + +Notice how we customized the `order` array here. This is done because the default order applies the `sort` function last. While this normally works well, it would cause unintended behavior here, since we changed the first characters of all display names. In our example, `sort` would be applied based off the emoji prefix instead of the first _real_ character. + +To fix this, we just changed around the order and apply the `sort` function before changing the display names in the `map` function. + +> [!tip] +> When writing more complicated functions, the `layout` file can start to look very cramped. +> You can fix this by defining your functions in another file. +> +> ```ts title="functions.ts" +> import { Options } from "./quartz/components/ExplorerNode" +> 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 +> } +> ``` +> +> You can then import them like this: +> +> ```ts title="quartz.layout.ts" +> import { mapFn, filterFn, sortFn } from "./path/to/your/functions" +> Component.Explorer({ +> mapFn: mapFn, +> filterFn: filterFn, +> sortFn: sortFn, +> }) +> ``` From 6914d4b40caff901ccf3e9d9113c15129a68a80c Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sun, 17 Sep 2023 21:20:09 +0200 Subject: [PATCH 11/12] docs: fix intra page links --- docs/features/explorer.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/features/explorer.md b/docs/features/explorer.md index 8a9f50657..76d04c675 100644 --- a/docs/features/explorer.md +++ b/docs/features/explorer.md @@ -42,7 +42,7 @@ Want to customize it even more? - Removing table of contents: 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 [[explorer#Advanced customization]] +- 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` @@ -85,7 +85,7 @@ Component.Explorer({ --- -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 [[explorer#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. +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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), [Array.prototype.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [Array.prototype.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). @@ -189,7 +189,7 @@ Component.Explorer({ ### Putting it all together -In this example, we're going to customize the explorer by using functions from examples above to [[explorer#Add emoji prefix | add emoji prefixes]], [[explorer#remove-list-of-elements-filter| filter out some folders]] and [[explorer#use-sort-to-put-files-first | sort with files above folders]]. +In this example, we're going to customize the explorer by using functions from examples above to [[#Add emoji prefix | add emoji prefixes]], [[#remove-list-of-elements-filter| filter out some folders]] and [[#use-sort-to-put-files-first | sort with files above folders]]. ```ts title="quartz.layout.ts" Component.Explorer({ From 4afb099bf3ec96e5d795e871ecb19575271c0714 Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sun, 17 Sep 2023 21:32:23 +0200 Subject: [PATCH 12/12] docs: fix examples --- docs/features/explorer.md | 18 ++++++------------ quartz/components/ExplorerNode.tsx | 2 +- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/docs/features/explorer.md b/docs/features/explorer.md index 76d04c675..cb63e403a 100644 --- a/docs/features/explorer.md +++ b/docs/features/explorer.md @@ -145,25 +145,19 @@ Component.Explorer({ ### Remove list of elements (`filter`) -Using this example, you can remove elements from your explorer by providing a list of folders/files using the `list` array. +Using this example, you can remove elements from your explorer by providing an array of folders/files using the `omit` set. ```ts title="quartz.layout.ts" Component.Explorer({ filterFn: (node) => { - // list containing names of everything you want to filter out - const list = ["authoring content", "building your", "tags", "hosting"] - - for (let listNodeName of list) { - if (listNodeName.toLowerCase() === node.name.toLowerCase()) { - return false // Found a match, so return false to filter out the node - } - } - return true // No match found, so return true to keep the 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()) }, }) ``` -You can customize this by changing the entries of the `list` array. Simply add all folder or file names you want to remove to the array (case insensitive). +You can customize this by changing the entries of the `omit` set. Simply add all folder or file names you want to remove. ## Advanced examples @@ -224,7 +218,7 @@ To fix this, we just changed around the order and apply the `sort` function befo > You can then import them like this: > > ```ts title="quartz.layout.ts" -> import { mapFn, filterFn, sortFn } from "./path/to/your/functions" +> import { mapFn, filterFn, sortFn } from "./functions.ts" > Component.Explorer({ > mapFn: mapFn, > filterFn: filterFn, diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index f8b99f015..fd0c0823d 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -82,7 +82,7 @@ export class FileNode { /** * Filter FileNode tree. Behaves similar to `Array.prototype.map()`, but modifies tree in place - * @param mapFn function to filter tree with + * @param mapFn function to use for mapping over tree */ map(mapFn: (node: FileNode) => void) { mapFn(this)