DibyashanuPati/quartz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: display name for folders, expand explorer a little bit (#489)

Browse source 
* feat: display name for folders, expand explorer a little bit

* update docs
This commit is contained in:
Jacky Zhao 2023-09-20 16:08:54 -07:00 • committed by GitHub
parent b029eeadab
commit 16d33fb771
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

13
docs/features/explorer.md
View file

@ -57,7 +57,8 @@ All functions you can pass work with the `FileNode` class, which has the followi
```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 @@ Every function you can pass is optional. By default, only a `sort` function will
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 @@ Using this example, the explorer will alphabetically sort everything, but put al
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 @@ Using this example, the display names of all `FileNodes` (folders + files) will
```ts title="quartz.layout.ts"
Component.Explorer({
mapFn: (node) => {
node.name = node.name.toUpperCase()
node.displayName = node.displayName.toUpperCase()
},
})
```
@ -172,9 +173,9 @@ Component.Explorer({
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
}
}
},