feat: display name for folders, expand explorer a little bit (#489)

Jacky Zhao

2023-09-20 16d33fb77193710bede887d6a177d2144b78fb67

feat: display name for folders, expand explorer a little bit (#489)

* feat: display name for folders, expand explorer a little bit

* update docs

 docs/advanced/index.md

New file
@@ -0,0 +1,3 @@
---
title: "Advanced"
---

 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
      }
    }
  },

 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


 quartz/components/ExplorerNode.tsx

@@ -29,20 +29,26 @@
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) {
      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)
      for (const child of this.children) {
@@ -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>

 quartz/styles/base.scss

@@ -446,7 +446,7 @@

ul.overflow,
ol.overflow {
  max-height: 300;
  max-height: 400;
  overflow-y: auto;

  // clearfix