feat: display name for folders, expand explorer a little bit (#489)
* feat: display name for folders, expand explorer a little bit * update docs
This commit is contained in:
parent
31d6601a0d
commit
96abbf63d3
3
docs/advanced/index.md
Normal file
3
docs/advanced/index.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
---
|
||||||
|
title: "Advanced"
|
||||||
|
---
|
@ -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}
|
```ts title="quartz/components/ExplorerNode.tsx" {2-5}
|
||||||
export class FileNode {
|
export class FileNode {
|
||||||
children: FileNode[] // children of current node
|
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
|
file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail
|
||||||
depth: number // depth of current node
|
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({
|
Component.Explorer({
|
||||||
sortFn: (a, b) => {
|
sortFn: (a, b) => {
|
||||||
if ((!a.file && !b.file) || (a.file && b.file)) {
|
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) {
|
if (a.file && !b.file) {
|
||||||
return 1
|
return 1
|
||||||
@ -120,7 +121,7 @@ Using this example, the explorer will alphabetically sort everything, but put al
|
|||||||
Component.Explorer({
|
Component.Explorer({
|
||||||
sortFn: (a, b) => {
|
sortFn: (a, b) => {
|
||||||
if ((!a.file && !b.file) || (a.file && b.file)) {
|
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) {
|
if (a.file && !b.file) {
|
||||||
return -1
|
return -1
|
||||||
@ -138,7 +139,7 @@ Using this example, the display names of all `FileNodes` (folders + files) will
|
|||||||
```ts title="quartz.layout.ts"
|
```ts title="quartz.layout.ts"
|
||||||
Component.Explorer({
|
Component.Explorer({
|
||||||
mapFn: (node) => {
|
mapFn: (node) => {
|
||||||
node.name = node.name.toUpperCase()
|
node.displayName = node.displayName.toUpperCase()
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@ -172,9 +173,9 @@ Component.Explorer({
|
|||||||
if (node.depth > 0) {
|
if (node.depth > 0) {
|
||||||
// set emoji for file/folder
|
// set emoji for file/folder
|
||||||
if (node.file) {
|
if (node.file) {
|
||||||
node.name = "📄 " + node.name
|
node.displayName = "📄 " + node.displayName
|
||||||
} else {
|
} else {
|
||||||
node.name = "📁 " + node.name
|
node.displayName = "📁 " + node.displayName
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -11,10 +11,10 @@ const defaultOptions = {
|
|||||||
folderClickBehavior: "collapse",
|
folderClickBehavior: "collapse",
|
||||||
folderDefaultState: "collapsed",
|
folderDefaultState: "collapsed",
|
||||||
useSavedState: true,
|
useSavedState: true,
|
||||||
// Sort order: folders first, then files. Sort folders and files alphabetically
|
|
||||||
sortFn: (a, b) => {
|
sortFn: (a, b) => {
|
||||||
|
// Sort order: folders first, then files. Sort folders and files alphabetically
|
||||||
if ((!a.file && !b.file) || (a.file && b.file)) {
|
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) {
|
if (a.file && !b.file) {
|
||||||
return 1
|
return 1
|
||||||
@ -22,6 +22,7 @@ const defaultOptions = {
|
|||||||
return -1
|
return -1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
filterFn: (node) => node.name !== "tags",
|
||||||
order: ["filter", "map", "sort"],
|
order: ["filter", "map", "sort"],
|
||||||
} satisfies Options
|
} satisfies Options
|
||||||
|
|
||||||
|
@ -29,19 +29,25 @@ export type FolderState = {
|
|||||||
export class FileNode {
|
export class FileNode {
|
||||||
children: FileNode[]
|
children: FileNode[]
|
||||||
name: string
|
name: string
|
||||||
|
displayName: string
|
||||||
file: QuartzPluginData | null
|
file: QuartzPluginData | null
|
||||||
depth: number
|
depth: number
|
||||||
|
|
||||||
constructor(name: string, file?: QuartzPluginData, depth?: number) {
|
constructor(name: string, file?: QuartzPluginData, depth?: number) {
|
||||||
this.children = []
|
this.children = []
|
||||||
this.name = name
|
this.name = name
|
||||||
|
this.displayName = name
|
||||||
this.file = file ? structuredClone(file) : null
|
this.file = file ? structuredClone(file) : null
|
||||||
this.depth = depth ?? 0
|
this.depth = depth ?? 0
|
||||||
}
|
}
|
||||||
|
|
||||||
private insert(file: DataWrapper) {
|
private insert(file: DataWrapper) {
|
||||||
if (file.path.length === 1) {
|
if (file.path.length === 1) {
|
||||||
|
if (file.path[0] !== "index.md") {
|
||||||
this.children.push(new FileNode(file.file.frontmatter!.title, file.file, this.depth + 1))
|
this.children.push(new FileNode(file.file.frontmatter!.title, file.file, this.depth + 1))
|
||||||
|
} else {
|
||||||
|
this.displayName = file.file.frontmatter!.title
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
const next = file.path[0]
|
const next = file.path[0]
|
||||||
file.path = file.path.splice(1)
|
file.path = file.path.splice(1)
|
||||||
@ -150,7 +156,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
|||||||
// Single file node
|
// Single file node
|
||||||
<li key={node.file.slug}>
|
<li key={node.file.slug}>
|
||||||
<a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
|
<a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
|
||||||
{node.name}
|
{node.displayName}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
) : (
|
) : (
|
||||||
@ -177,11 +183,11 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
|
|||||||
<div key={node.name} data-folderpath={folderPath}>
|
<div key={node.name} data-folderpath={folderPath}>
|
||||||
{folderBehavior === "link" ? (
|
{folderBehavior === "link" ? (
|
||||||
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
|
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
|
||||||
{node.name}
|
{node.displayName}
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<button class="folder-button">
|
<button class="folder-button">
|
||||||
<p class="folder-title">{node.name}</p>
|
<p class="folder-title">{node.displayName}</p>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -446,7 +446,7 @@ video {
|
|||||||
|
|
||||||
ul.overflow,
|
ul.overflow,
|
||||||
ol.overflow {
|
ol.overflow {
|
||||||
max-height: 300;
|
max-height: 400;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
// clearfix
|
// clearfix
|
||||||
|
Loading…
Reference in New Issue
Block a user