| | |
|---|
| | | ```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 |
|---|
| | | |
|---|
| | |
|---|
| | | 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 |
|---|
| | |
|---|
| | | 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 |
|---|
| | |
|---|
| | | ```ts title="quartz.layout.ts" |
|---|
| | | Component.Explorer({ |
|---|
| | | mapFn: (node) => { |
|---|
| | | node.name = node.name.toUpperCase() |
|---|
| | | node.displayName = node.displayName.toUpperCase() |
|---|
| | | }, |
|---|
| | | }) |
|---|
| | | ``` |
|---|
| | |
|---|
| | | 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 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
