The Trans Directory
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
+3
docs/advanced/index.md
··· 1 + --- 2 + title: "Advanced" 3 + ---
+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
··· 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
··· 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>
+1 -1
quartz/styles/base.scss
··· 446 446 447 447 ul.overflow, 448 448 ol.overflow { 449 - max-height: 300; 449 + max-height: 400; 450 450 overflow-y: auto; 451 451 452 452 // clearfix