| | |
| | | * Wether to display breadcrumbs on root `index.md` |
| | | */ |
| | | hideOnRoot: boolean |
| | | /** |
| | | * Wether to display the current page in the breadcrumbs. |
| | | */ |
| | | showCurrentPage: boolean |
| | | } |
| | | |
| | | const defaultOptions: BreadcrumbOptions = { |
| | | spacerSymbol: ">", |
| | | spacerSymbol: "❯", |
| | | rootName: "Home", |
| | | resolveFrontmatterTitle: false, |
| | | resolveFrontmatterTitle: true, |
| | | hideOnRoot: true, |
| | | showCurrentPage: true, |
| | | } |
| | | |
| | | function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: SimpleSlug): CrumbData { |
| | |
| | | } |
| | | } |
| | | |
| | | // given a folderName (e.g. "features"), search for the corresponding `index.md` file |
| | | function findCurrentFile(allFiles: QuartzPluginData[], folderName: string) { |
| | | return allFiles.find((file) => { |
| | | if (file.slug?.endsWith("index")) { |
| | | const folderParts = file.filePath?.split("/") |
| | | if (folderParts) { |
| | | const name = folderParts[folderParts?.length - 2] |
| | | if (name === folderName) { |
| | | return true |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | export default ((opts?: Partial<BreadcrumbOptions>) => { |
| | | // Merge options with defaults |
| | | const options: BreadcrumbOptions = { ...defaultOptions, ...opts } |
| | | |
| | | // computed index of folder name to its associated file data |
| | | let folderIndex: Map<string, QuartzPluginData> | undefined |
| | | |
| | | function Breadcrumbs({ fileData, allFiles, displayClass }: QuartzComponentProps) { |
| | | // Hide crumbs on root if enabled |
| | | if (options.hideOnRoot && fileData.slug === "index") { |
| | |
| | | const firstEntry = formatCrumb(options.rootName, fileData.slug!, "/" as SimpleSlug) |
| | | const crumbs: CrumbData[] = [firstEntry] |
| | | |
| | | if (!folderIndex && options.resolveFrontmatterTitle) { |
| | | folderIndex = new Map() |
| | | // construct the index for the first time |
| | | for (const file of allFiles) { |
| | | if (file.slug?.endsWith("index")) { |
| | | const folderParts = file.slug?.split("/") |
| | | if (folderParts) { |
| | | // 2nd last to exclude the /index |
| | | const folderName = folderParts[folderParts?.length - 2] |
| | | folderIndex.set(folderName, file) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | // Split slug into hierarchy/parts |
| | | const slugParts = fileData.slug?.split("/") |
| | | if (slugParts) { |
| | | // full path until current part |
| | | let currentPath = "" |
| | | for (let i = 0; i < slugParts.length - 1; i++) { |
| | | let currentTitle = slugParts[i] |
| | | let curPathSegment = 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, currentTitle) |
| | | if (currentFile) { |
| | | currentTitle = currentFile.frontmatter!.title |
| | | const currentFile = folderIndex?.get(curPathSegment) |
| | | if (currentFile) { |
| | | const title = currentFile.frontmatter!.title |
| | | if (title !== "index") { |
| | | curPathSegment = title |
| | | } |
| | | } |
| | | |
| | | // Add current slug to full path |
| | | currentPath += slugParts[i] + "/" |
| | | |
| | | // Format and add current crumb |
| | | const crumb = formatCrumb(currentTitle, fileData.slug!, currentPath as SimpleSlug) |
| | | const crumb = formatCrumb(curPathSegment, fileData.slug!, currentPath as SimpleSlug) |
| | | crumbs.push(crumb) |
| | | } |
| | | |
| | | // Add current file to crumb (can directly use frontmatter title) |
| | | crumbs.push({ |
| | | displayName: fileData.frontmatter!.title, |
| | | path: "", |
| | | }) |
| | | if (options.showCurrentPage && slugParts.at(-1) === "") { |
| | | crumbs.push({ |
| | | displayName: fileData.frontmatter!.title, |
| | | path: "", |
| | | }) |
| | | } |
| | | } |
| | | return ( |
| | | <nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs"> |