fix(explorer): show file name instead of slug if no file data (closes #1822)

Jacky Zhao

2025-03-12 270a5dc14ac3654c3aac94dfca222bab0d091474

fix(explorer): show file name instead of slug if no file data (closes #1822)

 quartz.layout.ts

@@ -49,8 +49,15 @@
  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: [],

 quartz/plugins/emitters/contentIndex.tsx

@@ -12,6 +12,7 @@
export type ContentIndexMap = Map<FullSlug, ContentDetails>
export type ContentDetails = {
  slug: FullSlug
  filePath: FilePath
  title: string
  links: SimpleSlug[]
  tags: string[]
@@ -126,6 +127,7 @@
        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 ?? [],

 quartz/util/fileTrie.test.ts

@@ -5,6 +5,7 @@
interface TestData {
  title: string
  slug: string
  filePath: string
}

describe("FileTrie", () => {
@@ -26,6 +27,7 @@
      const data = {
        title: "Test Title",
        slug: "test",
        filePath: "test.md",
      }

      trie.add(data)
@@ -36,6 +38,7 @@
      const data = {
        title: "Test Title",
        slug: "test",
        filePath: "test.md",
      }

      trie.add(data)
@@ -49,6 +52,7 @@
      const data = {
        title: "Test",
        slug: "test",
        filePath: "test.md",
      }

      trie.add(data)
@@ -61,6 +65,7 @@
      const data = {
        title: "Index",
        slug: "index",
        filePath: "index.md",
      }

      trie.add(data)
@@ -72,11 +77,13 @@
      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("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("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 @@
    })

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

      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 @@
          ["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 @@
      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("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)

 quartz/util/fileTrie.ts

@@ -4,6 +4,7 @@
interface FileTrieData {
  slug: string
  title: string
  filePath: string
}

export class FileTrieNode<T extends FileTrieData = ContentDetails> {
@@ -11,6 +12,10 @@
  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 @@
  }

  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 @@
      // 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)
    }
  }