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:
Jacky Zhao 2023-09-20 16:08:54 -07:00 committed by GitHub
parent 31d6601a0d
commit 96abbf63d3
5 changed files with 24 additions and 13 deletions

3
docs/advanced/index.md Normal file
View File

@ -0,0 +1,3 @@
---
title: "Advanced"
---

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} ```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
} }
} }
}, },

View File

@ -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

View File

@ -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) {
this.children.push(new FileNode(file.file.frontmatter!.title, file.file, this.depth + 1)) if (file.path[0] !== "index.md") {
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>

View File

@ -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