fix: properly compute relative path for explorer (closes #1055, #1066)

Jacky Zhao

2024-06-18 265faef4e8717eab9678a5515ca9150b7776b148

 quartz/components/ExplorerNode.tsx

@@ -12,7 +12,7 @@
type OrderEntries = "sort" | "filter" | "map"

export interface Options {
  title: string
  title?: string
  folderDefaultState: "collapsed" | "open"
  folderClickBehavior: "collapse" | "link"
  useSavedState: boolean
@@ -168,13 +168,11 @@
  const isDefaultOpen = opts.folderDefaultState === "open"

  // Calculate current folderPath
  let folderPath = ""
  if (node.name !== "") {
    folderPath = joinSegments(fullPath ?? "", node.name)
  }
  const folderPath = node.name !== "" ? joinSegments(fullPath ?? "", node.name) : ""
  const href = resolveRelative(fileData.slug!, folderPath as SimpleSlug) + "/"

  return (
    <li>
    <>
      {node.file ? (
        // Single file node
        <li key={node.file.slug}>
@@ -183,7 +181,7 @@
          </a>
        </li>
      ) : (
        <div>
        <li>
          {node.name !== "" && (
            // Node with entire folder
            // Render svg button + folder name, then children
@@ -205,16 +203,12 @@
              {/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
              <div key={node.name} data-folderpath={folderPath}>
                {folderBehavior === "link" ? (
                  <a
                    href={resolveRelative(fileData.slug!, folderPath as SimpleSlug)}
                    data-for={node.name}
                    class="folder-title"
                  >
                  <a href={href} data-for={node.name} class="folder-title">
                    {node.displayName}
                  </a>
                ) : (
                  <button class="folder-button">
                    <p class="folder-title">{node.displayName}</p>
                    <span class="folder-title">{node.displayName}</span>
                  </button>
                )}
              </div>
@@ -241,8 +235,8 @@
              ))}
            </ul>
          </div>
        </div>
        </li>
      )}
    </li>
    </>
  )
}