feat: Added ParentBreadcrumbs, which use a property called parent to build a breadcrumbs trail

quartz.layout.ts

@@ -1,5 +1,5 @@
-import { PageLayout, SharedLayout } from "./quartz/cfg"
+import { PageLayout, SharedLayout } from "./quartz/cfg";
-import * as Component from "./quartz/components"
+import * as Component from "./quartz/components";
 
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
@@ -12,13 +12,13 @@ export const sharedPageComponents: SharedLayout = {
 			"Discord Community": "https://discord.gg/cRFFHYye7t",
 		},
 	}),
-}
+};
 
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
 	beforeBody: [
 		Component.ConditionalRender({
-      component: Component.Breadcrumbs(),
+			component: Component.ParentBreadcrumbs(),
 			condition: (page) => page.fileData.slug !== "index",
 		}),
 		Component.ArticleTitle(),
@@ -45,7 +45,7 @@ export const defaultContentPageLayout: PageLayout = {
 		Component.DesktopOnly(Component.TableOfContents()),
 		Component.Backlinks(),
 	],
-}
+};
 
 // components for pages that display lists of pages  (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
@@ -65,4 +65,4 @@ export const defaultListPageLayout: PageLayout = {
 		Component.Explorer(),
 	],
 	right: [],
-}
+};

quartz/components/ParentBreadcrumbs.tsx

@@ -0,0 +1,97 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types";
+import { QuartzPluginData } from "../plugins/vfile";
+import { classNames } from "../util/lang";
+import { resolveRelative, simplifySlug, FullSlug, SimpleSlug } from "../util/path";
+import style from "./styles/breadcrumbs.scss";
+
+interface ParentBreadcrumbsOptions {
+	spacerSymbol?: string;
+	rootName?: string;
+	resolveFrontmatterTitle?: boolean;
+}
+
+const defaultOptions: ParentBreadcrumbsOptions = {
+	spacerSymbol: "❯",
+	rootName: "Home",
+	resolveFrontmatterTitle: true,
+};
+
+export default ((opts?: ParentBreadcrumbsOptions) => {
+	const options = { ...defaultOptions, ...opts };
+
+	const ParentBreadcrumbs: QuartzComponent = ({
+		fileData,
+		allFiles,
+		displayClass,
+	}: QuartzComponentProps) => {
+
+		const parseWikiLink = (content: string): string => {
+			if (!content) return "";
+			let clean = content.trim().replace(/^["']|["']$/g, "");
+			clean = clean.replace(/^\[\[|\]\]$/g, "");
+			return clean.split("|")[0];
+		};
+
+		const findFile = (name: string) => {
+			const targetSlug = simplifySlug(name as FullSlug);
+
+			return allFiles.find((f: QuartzPluginData) => {
+				const fSlug = simplifySlug(f.slug!);
+				return fSlug === targetSlug || fSlug.endsWith(targetSlug) || f.frontmatter?.title === name;
+			});
+		};
+
+		const crumbs: Array<{ displayName: string; path: string; }> = [];
+		let current = fileData;
+		const visited = new Set<string>();
+		if (current.slug) visited.add(current.slug);
+
+		while (current && current.frontmatter?.parent) {
+			const parentLink = parseWikiLink(current.frontmatter.parent as string);
+			const parentFile = findFile(parentLink);
+
+			if (parentFile && parentFile.slug && !visited.has(parentFile.slug)) {
+				visited.add(parentFile.slug);
+				crumbs.push({
+					displayName: options.resolveFrontmatterTitle
+						? parentFile.frontmatter?.title ?? parentFile.slug
+						: parentFile.slug,
+					path: resolveRelative(fileData.slug!, parentFile.slug!)
+				});
+				current = parentFile;
+			} else {
+				break;
+			}
+		}
+
+		if (current.slug !== "index") {
+			crumbs.push({
+				displayName: options.rootName!,
+				path: resolveRelative(fileData.slug!, "index" as SimpleSlug)
+			});
+		}
+
+		crumbs.reverse();
+
+		if (crumbs.length === 0 && fileData.slug === "index") {
+			return <></>;
+		}
+
+		return (
+			<nav class={classNames(displayClass, "breadcrumb-container")} aria-label="breadcrumbs">
+				{crumbs.map((crumb, index) => (
+					<div class="breadcrumb-element">
+						<a href={crumb.path}>{crumb.displayName}</a>
+						{index !== crumbs.length && <p>{options.spacerSymbol}</p>}
+					</div>
+				))}
+				<div class="breadcrumb-element">
+					<p>{fileData.frontmatter?.title}</p>
+				</div>
+			</nav>
+		);
+	};
+
+	ParentBreadcrumbs.css = style;
+	return ParentBreadcrumbs;
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -1,30 +1,32 @@
-import Content from "./pages/Content"
+import Content from "./pages/Content";
-import TagContent from "./pages/TagContent"
+import TagContent from "./pages/TagContent";
-import FolderContent from "./pages/FolderContent"
+import FolderContent from "./pages/FolderContent";
-import NotFound from "./pages/404"
+import NotFound from "./pages/404";
-import ArticleTitle from "./ArticleTitle"
+import ArticleTitle from "./ArticleTitle";
-import Darkmode from "./Darkmode"
+import Darkmode from "./Darkmode";
-import ReaderMode from "./ReaderMode"
+import ReaderMode from "./ReaderMode";
-import Head from "./Head"
+import Head from "./Head";
-import PageTitle from "./PageTitle"
+import PageTitle from "./PageTitle";
-import ContentMeta from "./ContentMeta"
+import ContentMeta from "./ContentMeta";
-import Spacer from "./Spacer"
+import Spacer from "./Spacer";
-import TableOfContents from "./TableOfContents"
+import TableOfContents from "./TableOfContents";
-import Explorer from "./Explorer"
+import Explorer from "./Explorer";
-import TagList from "./TagList"
+import TagList from "./TagList";
-import Graph from "./Graph"
+import Graph from "./Graph";
-import Backlinks from "./Backlinks"
+import Backlinks from "./Backlinks";
-import Search from "./Search"
+import Search from "./Search";
-import Footer from "./Footer"
+import Footer from "./Footer";
-import DesktopOnly from "./DesktopOnly"
+import DesktopOnly from "./DesktopOnly";
-import MobileOnly from "./MobileOnly"
+import MobileOnly from "./MobileOnly";
-import RecentNotes from "./RecentNotes"
+import RecentNotes from "./RecentNotes";
-import Breadcrumbs from "./Breadcrumbs"
+import Breadcrumbs from "./Breadcrumbs";
-import Comments from "./Comments"
+import Comments from "./Comments";
-import Flex from "./Flex"
+import Flex from "./Flex";
-import ConditionalRender from "./ConditionalRender"
+import ConditionalRender from "./ConditionalRender";
+import ParentBreadcrumbs from "./ParentBreadcrumbs";
 
 export {
+	ParentBreadcrumbs,
 	ArticleTitle,
 	Content,
 	TagContent,
@@ -50,4 +52,4 @@ export {
 	Comments,
 	Flex,
 	ConditionalRender,
-}
+};