From 16d33fb77193710bede887d6a177d2144b78fb67 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 20 Sep 2023 23:08:54 +0000
Subject: [PATCH] feat: display name for folders, expand explorer a little bit (#489)
---
quartz/components/ExplorerNode.tsx | 14 ++++++++++----
quartz/styles/base.scss | 2 +-
quartz/components/Explorer.tsx | 5 +++--
docs/advanced/index.md | 3 +++
docs/features/explorer.md | 13 +++++++------
5 files changed, 24 insertions(+), 13 deletions(-)
diff --git a/docs/advanced/index.md b/docs/advanced/index.md
new file mode 100644
index 0000000..4822589
--- /dev/null
+++ b/docs/advanced/index.md
@@ -0,0 +1,3 @@
+---
+title: "Advanced"
+---
diff --git a/docs/features/explorer.md b/docs/features/explorer.md
index 6f941b8..b0eb12d 100644
--- a/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -57,7 +57,8 @@
```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 @@
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 @@
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 @@
```ts title="quartz.layout.ts"
Component.Explorer({
mapFn: (node) => {
- node.name = node.name.toUpperCase()
+ node.displayName = node.displayName.toUpperCase()
},
})
```
@@ -172,9 +173,9 @@
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
}
}
},
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index bc4855e..73c620f 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -11,10 +11,10 @@
folderClickBehavior: "collapse",
folderDefaultState: "collapsed",
useSavedState: true,
- // Sort order: folders first, then files. Sort folders and files alphabetically
sortFn: (a, b) => {
+ // Sort order: folders first, then files. Sort folders and files alphabetically
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
@@ -22,6 +22,7 @@
return -1
}
},
+ filterFn: (node) => node.name !== "tags",
order: ["filter", "map", "sort"],
} satisfies Options
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index c55a7a0..9bdd0df 100644
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -29,19 +29,25 @@
export class FileNode {
children: FileNode[]
name: string
+ displayName: string
file: QuartzPluginData | null
depth: number
constructor(name: string, file?: QuartzPluginData, depth?: number) {
this.children = []
this.name = name
+ this.displayName = name
this.file = file ? structuredClone(file) : null
this.depth = depth ?? 0
}
private insert(file: DataWrapper) {
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 {
const next = file.path[0]
file.path = file.path.splice(1)
@@ -150,7 +156,7 @@
// Single file node
<li key={node.file.slug}>
<a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
- {node.name}
+ {node.displayName}
</a>
</li>
) : (
@@ -177,11 +183,11 @@
<div key={node.name} data-folderpath={folderPath}>
{folderBehavior === "link" ? (
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
- {node.name}
+ {node.displayName}
</a>
) : (
<button class="folder-button">
- <p class="folder-title">{node.name}</p>
+ <p class="folder-title">{node.displayName}</p>
</button>
)}
</div>
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index c6925fb..9d55362 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -446,7 +446,7 @@
ul.overflow,
ol.overflow {
- max-height: 300;
+ max-height: 400;
overflow-y: auto;
// clearfix
--
Gitblit v1.10.0