The Trans Directory
feat: display name for folders, expand explorer a little bit (#489)
* feat: display name for folders, expand explorer a little bit
* update docs
authored by
Jacky Zhao
and committed by
GitHub
16d33fb7
b029eead
+24
-13
+7
-6
docs/features/explorer.md
+7
-6
docs/features/explorer.md
···
57
57
```ts title="quartz/components/ExplorerNode.tsx" {2-5}
58
58
export class FileNode {
59
59
children: FileNode[] // children of current node
60
-
name: string // name of node (only useful for folders)
60
+
name: string // last part of slug
61
+
displayName: string // what actually should be displayed in the explorer
61
62
file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail
62
63
depth: number // depth of current node
63
64
···
72
73
Component.Explorer({
73
74
sortFn: (a, b) => {
74
75
if ((!a.file && !b.file) || (a.file && b.file)) {
75
-
return a.name.localeCompare(b.name)
76
+
return a.displayName.localeCompare(b.displayName)
76
77
}
77
78
if (a.file && !b.file) {
78
79
return 1
···
120
121
Component.Explorer({
121
122
sortFn: (a, b) => {
122
123
if ((!a.file && !b.file) || (a.file && b.file)) {
123
-
return a.name.localeCompare(b.name)
124
+
return a.displayName.localeCompare(b.displayName)
124
125
}
125
126
if (a.file && !b.file) {
126
127
return -1
···
138
139
```ts title="quartz.layout.ts"
139
140
Component.Explorer({
140
141
mapFn: (node) => {
141
-
node.name = node.name.toUpperCase()
142
+
node.displayName = node.displayName.toUpperCase()
142
143
},
143
144
})
144
145
```
···
172
173
if (node.depth > 0) {
173
174
// set emoji for file/folder
174
175
if (node.file) {
175
-
node.name = "📄 " + node.name
176
+
node.displayName = "📄 " + node.displayName
176
177
} else {
177
-
node.name = "📁 " + node.name
178
+
node.displayName = "📁 " + node.displayName
178
179
}
179
180
}
180
181
},
+3
-2
quartz/components/Explorer.tsx
+3
-2
quartz/components/Explorer.tsx
···
11
11
folderClickBehavior: "collapse",
12
12
folderDefaultState: "collapsed",
13
13
useSavedState: true,
14
-
// Sort order: folders first, then files. Sort folders and files alphabetically
15
14
sortFn: (a, b) => {
15
+
// Sort order: folders first, then files. Sort folders and files alphabetically
16
16
if ((!a.file && !b.file) || (a.file && b.file)) {
17
-
return a.name.localeCompare(b.name)
17
+
return a.displayName.localeCompare(b.displayName)
18
18
}
19
19
if (a.file && !b.file) {
20
20
return 1
···
22
22
return -1
23
23
}
24
24
},
25
+
filterFn: (node) => node.name !== "tags",
25
26
order: ["filter", "map", "sort"],
26
27
} satisfies Options
27
28
+10
-4
quartz/components/ExplorerNode.tsx
+10
-4
quartz/components/ExplorerNode.tsx
···
29
29
export class FileNode {
30
30
children: FileNode[]
31
31
name: string
32
+
displayName: string
32
33
file: QuartzPluginData | null
33
34
depth: number
34
35
35
36
constructor(name: string, file?: QuartzPluginData, depth?: number) {
36
37
this.children = []
37
38
this.name = name
39
+
this.displayName = name
38
40
this.file = file ? structuredClone(file) : null
39
41
this.depth = depth ?? 0
40
42
}
41
43
42
44
private insert(file: DataWrapper) {
43
45
if (file.path.length === 1) {
44
-
this.children.push(new FileNode(file.file.frontmatter!.title, file.file, this.depth + 1))
46
+
if (file.path[0] !== "index.md") {
47
+
this.children.push(new FileNode(file.file.frontmatter!.title, file.file, this.depth + 1))
48
+
} else {
49
+
this.displayName = file.file.frontmatter!.title
50
+
}
45
51
} else {
46
52
const next = file.path[0]
47
53
file.path = file.path.splice(1)
···
150
156
// Single file node
151
157
<li key={node.file.slug}>
152
158
<a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
153
-
{node.name}
159
+
{node.displayName}
154
160
</a>
155
161
</li>
156
162
) : (
···
177
183
<div key={node.name} data-folderpath={folderPath}>
178
184
{folderBehavior === "link" ? (
179
185
<a href={`${folderPath}`} data-for={node.name} class="folder-title">
180
-
{node.name}
186
+
{node.displayName}
181
187
</a>
182
188
) : (
183
189
<button class="folder-button">
184
-
<p class="folder-title">{node.name}</p>
190
+
<p class="folder-title">{node.displayName}</p>
185
191
</button>
186
192
)}
187
193
</div>