fix(explorer): show file name instead of slug if no file data (closes #1822)
This commit is contained in:
		
							parent
							
								
									bfa938cc62
								
							
						
					
					
						commit
						270a5dc14a
					
				| @ -49,8 +49,15 @@ export const defaultListPageLayout: PageLayout = { | ||||
|   left: [ | ||||
|     Component.PageTitle(), | ||||
|     Component.MobileOnly(Component.Spacer()), | ||||
|     Component.Search(), | ||||
|     Component.Darkmode(), | ||||
|     Component.Flex({ | ||||
|       components: [ | ||||
|         { | ||||
|           Component: Component.Search(), | ||||
|           grow: true, | ||||
|         }, | ||||
|         { Component: Component.Darkmode() }, | ||||
|       ], | ||||
|     }), | ||||
|     Component.Explorer(), | ||||
|   ], | ||||
|   right: [], | ||||
|  | ||||
| @ -12,6 +12,7 @@ import DepGraph from "../../depgraph" | ||||
| export type ContentIndexMap = Map<FullSlug, ContentDetails> | ||||
| export type ContentDetails = { | ||||
|   slug: FullSlug | ||||
|   filePath: FilePath | ||||
|   title: string | ||||
|   links: SimpleSlug[] | ||||
|   tags: string[] | ||||
| @ -126,6 +127,7 @@ export const ContentIndex: QuartzEmitterPlugin<Partial<Options>> = (opts) => { | ||||
|         if (opts?.includeEmptyFiles || (file.data.text && file.data.text !== "")) { | ||||
|           linkIndex.set(slug, { | ||||
|             slug, | ||||
|             filePath: file.data.filePath!, | ||||
|             title: file.data.frontmatter?.title!, | ||||
|             links: file.data.links ?? [], | ||||
|             tags: file.data.frontmatter?.tags ?? [], | ||||
|  | ||||
| @ -5,6 +5,7 @@ import { FileTrieNode } from "./fileTrie" | ||||
| interface TestData { | ||||
|   title: string | ||||
|   slug: string | ||||
|   filePath: string | ||||
| } | ||||
| 
 | ||||
| describe("FileTrie", () => { | ||||
| @ -26,6 +27,7 @@ describe("FileTrie", () => { | ||||
|       const data = { | ||||
|         title: "Test Title", | ||||
|         slug: "test", | ||||
|         filePath: "test.md", | ||||
|       } | ||||
| 
 | ||||
|       trie.add(data) | ||||
| @ -36,6 +38,7 @@ describe("FileTrie", () => { | ||||
|       const data = { | ||||
|         title: "Test Title", | ||||
|         slug: "test", | ||||
|         filePath: "test.md", | ||||
|       } | ||||
| 
 | ||||
|       trie.add(data) | ||||
| @ -49,6 +52,7 @@ describe("FileTrie", () => { | ||||
|       const data = { | ||||
|         title: "Test", | ||||
|         slug: "test", | ||||
|         filePath: "test.md", | ||||
|       } | ||||
| 
 | ||||
|       trie.add(data) | ||||
| @ -61,6 +65,7 @@ describe("FileTrie", () => { | ||||
|       const data = { | ||||
|         title: "Index", | ||||
|         slug: "index", | ||||
|         filePath: "index.md", | ||||
|       } | ||||
| 
 | ||||
|       trie.add(data) | ||||
| @ -72,11 +77,13 @@ describe("FileTrie", () => { | ||||
|       const data1 = { | ||||
|         title: "Nested", | ||||
|         slug: "folder/test", | ||||
|         filePath: "folder/test.md", | ||||
|       } | ||||
| 
 | ||||
|       const data2 = { | ||||
|         title: "Really nested index", | ||||
|         slug: "a/b/c/index", | ||||
|         filePath: "a/b/c/index.md", | ||||
|       } | ||||
| 
 | ||||
|       trie.add(data1) | ||||
| @ -103,8 +110,8 @@ describe("FileTrie", () => { | ||||
| 
 | ||||
|   describe("filter", () => { | ||||
|     test("should filter nodes based on condition", () => { | ||||
|       const data1 = { title: "Test1", slug: "test1" } | ||||
|       const data2 = { title: "Test2", slug: "test2" } | ||||
|       const data1 = { title: "Test1", slug: "test1", filePath: "test1.md" } | ||||
|       const data2 = { title: "Test2", slug: "test2", filePath: "test2.md" } | ||||
| 
 | ||||
|       trie.add(data1) | ||||
|       trie.add(data2) | ||||
| @ -117,8 +124,8 @@ describe("FileTrie", () => { | ||||
| 
 | ||||
|   describe("map", () => { | ||||
|     test("should apply function to all nodes", () => { | ||||
|       const data1 = { title: "Test1", slug: "test1" } | ||||
|       const data2 = { title: "Test2", slug: "test2" } | ||||
|       const data1 = { title: "Test1", slug: "test1", filePath: "test1.md" } | ||||
|       const data2 = { title: "Test2", slug: "test2", filePath: "test2.md" } | ||||
| 
 | ||||
|       trie.add(data1) | ||||
|       trie.add(data2) | ||||
| @ -134,8 +141,12 @@ describe("FileTrie", () => { | ||||
|     }) | ||||
| 
 | ||||
|     test("map over folders should work", () => { | ||||
|       const data1 = { title: "Test1", slug: "test1" } | ||||
|       const data2 = { title: "Test2", slug: "a/b/test2" } | ||||
|       const data1 = { title: "Test1", slug: "test1", filePath: "test1.md" } | ||||
|       const data2 = { | ||||
|         title: "Test2", | ||||
|         slug: "a/b-with-space/test2", | ||||
|         filePath: "a/b with space/test2.md", | ||||
|       } | ||||
| 
 | ||||
|       trie.add(data1) | ||||
|       trie.add(data2) | ||||
| @ -150,15 +161,19 @@ describe("FileTrie", () => { | ||||
| 
 | ||||
|       assert.strictEqual(trie.children[0].displayName, "File: Test1") | ||||
|       assert.strictEqual(trie.children[1].displayName, "Folder: a") | ||||
|       assert.strictEqual(trie.children[1].children[0].displayName, "Folder: b") | ||||
|       assert.strictEqual(trie.children[1].children[0].displayName, "Folder: b with space") | ||||
|       assert.strictEqual(trie.children[1].children[0].children[0].displayName, "File: Test2") | ||||
|     }) | ||||
|   }) | ||||
| 
 | ||||
|   describe("entries", () => { | ||||
|     test("should return all entries", () => { | ||||
|       const data1 = { title: "Test1", slug: "test1" } | ||||
|       const data2 = { title: "Test2", slug: "a/b/test2" } | ||||
|       const data1 = { title: "Test1", slug: "test1", filePath: "test1.md" } | ||||
|       const data2 = { | ||||
|         title: "Test2", | ||||
|         slug: "a/b-with-space/test2", | ||||
|         filePath: "a/b with space/test2.md", | ||||
|       } | ||||
| 
 | ||||
|       trie.add(data1) | ||||
|       trie.add(data2) | ||||
| @ -170,8 +185,8 @@ describe("FileTrie", () => { | ||||
|           ["index", trie.data], | ||||
|           ["test1", data1], | ||||
|           ["a/index", null], | ||||
|           ["a/b/index", null], | ||||
|           ["a/b/test2", data2], | ||||
|           ["a/b-with-space/index", null], | ||||
|           ["a/b-with-space/test2", data2], | ||||
|         ], | ||||
|       ) | ||||
|     }) | ||||
| @ -182,14 +197,17 @@ describe("FileTrie", () => { | ||||
|       const data1 = { | ||||
|         title: "Root", | ||||
|         slug: "index", | ||||
|         filePath: "index.md", | ||||
|       } | ||||
|       const data2 = { | ||||
|         title: "Test", | ||||
|         slug: "folder/subfolder/test", | ||||
|         filePath: "folder/subfolder/test.md", | ||||
|       } | ||||
|       const data3 = { | ||||
|         title: "Folder Index", | ||||
|         slug: "abc/index", | ||||
|         filePath: "abc/index.md", | ||||
|       } | ||||
| 
 | ||||
|       trie.add(data1) | ||||
| @ -208,9 +226,9 @@ describe("FileTrie", () => { | ||||
| 
 | ||||
|   describe("sort", () => { | ||||
|     test("should sort nodes according to sort function", () => { | ||||
|       const data1 = { title: "A", slug: "a" } | ||||
|       const data2 = { title: "B", slug: "b" } | ||||
|       const data3 = { title: "C", slug: "c" } | ||||
|       const data1 = { title: "A", slug: "a", filePath: "a.md" } | ||||
|       const data2 = { title: "B", slug: "b", filePath: "b.md" } | ||||
|       const data3 = { title: "C", slug: "c", filePath: "c.md" } | ||||
| 
 | ||||
|       trie.add(data3) | ||||
|       trie.add(data1) | ||||
|  | ||||
| @ -4,6 +4,7 @@ import { FullSlug, joinSegments } from "./path" | ||||
| interface FileTrieData { | ||||
|   slug: string | ||||
|   title: string | ||||
|   filePath: string | ||||
| } | ||||
| 
 | ||||
| export class FileTrieNode<T extends FileTrieData = ContentDetails> { | ||||
| @ -11,6 +12,10 @@ export class FileTrieNode<T extends FileTrieData = ContentDetails> { | ||||
|   children: Array<FileTrieNode<T>> | ||||
| 
 | ||||
|   private slugSegments: string[] | ||||
|   // prefer showing the file path segment over the slug segment
 | ||||
|   // so that folders that dont have index files can be shown as is
 | ||||
|   // without dashes in the slug
 | ||||
|   private fileSegmentHint?: string | ||||
|   private displayNameOverride?: string | ||||
|   data: T | null | ||||
| 
 | ||||
| @ -23,7 +28,10 @@ export class FileTrieNode<T extends FileTrieData = ContentDetails> { | ||||
|   } | ||||
| 
 | ||||
|   get displayName(): string { | ||||
|     return this.displayNameOverride ?? this.data?.title ?? this.slugSegment ?? "" | ||||
|     const nonIndexTitle = this.data?.title === "index" ? undefined : this.data?.title | ||||
|     return ( | ||||
|       this.displayNameOverride ?? nonIndexTitle ?? this.fileSegmentHint ?? this.slugSegment ?? "" | ||||
|     ) | ||||
|   } | ||||
| 
 | ||||
|   set displayName(name: string) { | ||||
| @ -69,6 +77,9 @@ export class FileTrieNode<T extends FileTrieData = ContentDetails> { | ||||
|       // recursive case, we are not at the end of the path
 | ||||
|       const child = | ||||
|         this.children.find((c) => c.slugSegment === segment) ?? this.makeChild(path, undefined) | ||||
| 
 | ||||
|       const fileParts = file.filePath.split("/") | ||||
|       child.fileSegmentHint = fileParts.at(-path.length) | ||||
|       child.insert(path.slice(1), file) | ||||
|     } | ||||
|   } | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user