tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(breadcrumbs): problem with folder whitespace (#522)

Browse Source 
* 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
This commit is contained in:
Ben Schlegel
2023-10-05 18:19:56 +02:00
committed by GitHub
parent cf0c090e3c
commit cec4877adb
1 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
quartz/components/Breadcrumbs.tsx
View File

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