From cec4877adb7e89f4d4e0a442e82655e0d35dbe16 Mon Sep 17 00:00:00 2001
From: Ben Schlegel <31989404+benschlegel@users.noreply.github.com>
Date: Thu, 5 Oct 2023 18:19:56 +0200
Subject: [PATCH] fix(breadcrumbs): problem with folder whitespace (#522)

* fix(breadcrumbs): problem with folder whitespace

use slugs for folder hrefs so folder paths get resolved properly

* feat: only use `slug` for constructing crumbs

* fix: remove capitalization
---
 quartz/components/Breadcrumbs.tsx | 39 +++++++++++++++----------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/quartz/components/Breadcrumbs.tsx b/quartz/components/Breadcrumbs.tsx
index fb2f0c6..467b5a5 100644
--- a/quartz/components/Breadcrumbs.tsx
+++ b/quartz/components/Breadcrumbs.tsx
@@ -1,7 +1,6 @@
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
 import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
-import { capitalize } from "../util/lang"
 import { QuartzPluginData } from "../plugins/vfile"
 
 type CrumbData = {
@@ -36,7 +35,10 @@ const defaultOptions: BreadcrumbOptions = {
 }
 
 function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: SimpleSlug): CrumbData {
-  return { displayName, path: resolveRelative(baseSlug, currentSlug) }
+  return {
+    displayName: displayName.replaceAll("-", " "),
+    path: resolveRelative(baseSlug, currentSlug),
+  }
 }
 
 // given a folderName (e.g. "features"), search for the corresponding `index.md` file
@@ -65,42 +67,39 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
     }
 
     // Format entry for root element
-    const firstEntry = formatCrumb(capitalize(options.rootName), fileData.slug!, "/" as SimpleSlug)
+    const firstEntry = formatCrumb(options.rootName, fileData.slug!, "/" as SimpleSlug)
     const crumbs: CrumbData[] = [firstEntry]
 
-    // Get parts of filePath (every folder)
-    const parts = fileData.filePath?.split("/")?.splice(1)
-    if (parts) {
+    // Split slug into hierarchy/parts
+    const slugParts = fileData.slug?.split("/")
+    if (slugParts) {
       // full path until current part
-      let current = ""
-      for (let i = 0; i < parts.length - 1; i++) {
-        const folderName = parts[i]
-        let currentTitle = folderName
+      let currentPath = ""
+      for (let i = 0; i < slugParts.length - 1; i++) {
+        let currentTitle = slugParts[i]
 
         // TODO: performance optimizations/memoizing
         // Try to resolve frontmatter folder title
         if (options?.resolveFrontmatterTitle) {
           // try to find file for current path
-          const currentFile = findCurrentFile(allFiles, folderName)
+          const currentFile = findCurrentFile(allFiles, currentTitle)
           if (currentFile) {
             currentTitle = currentFile.frontmatter!.title
           }
         }
-        // Add current path to full path
-        current += folderName + "/"
+        // Add current slug to full path
+        currentPath += slugParts[i] + "/"
 
         // Format and add current crumb
-        const crumb = formatCrumb(capitalize(currentTitle), fileData.slug!, current as SimpleSlug)
+        const crumb = formatCrumb(currentTitle, fileData.slug!, currentPath as SimpleSlug)
         crumbs.push(crumb)
       }
 
       // Add current file to crumb (can directly use frontmatter title)
-      if (parts.length > 0) {
-        crumbs.push({
-          displayName: capitalize(fileData.frontmatter!.title),
-          path: "",
-        })
-      }
+      crumbs.push({
+        displayName: fileData.frontmatter!.title,
+        path: "",
+      })
     }
     return (
       <nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs">