Trim root breadcrumbs and trail parents

quartz-site/quartz.layout.ts

@@ -21,7 +21,7 @@ export const sharedPageComponents: SharedLayout = {
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
     Component.ConditionalRender({
-      component: Component.Breadcrumbs({ rootName: "GameCult", showCurrentPage: false }),
+      component: Component.Breadcrumbs({ rootName: "GameCult", showCurrentPage: false, showRoot: false }),
       condition: (page) => page.fileData.slug !== "index",
     }),
     Component.ConditionalRender({
@@ -47,7 +47,7 @@ export const defaultContentPageLayout: PageLayout = {
 export const defaultListPageLayout: PageLayout = {
   beforeBody: [
     Component.ConditionalRender({
-      component: Component.Breadcrumbs({ rootName: "GameCult", showCurrentPage: false }),
+      component: Component.Breadcrumbs({ rootName: "GameCult", showCurrentPage: false, showRoot: false }),
       condition: (page) => page.fileData.slug !== "index",
     }),
     Component.ConditionalRender({

quartz-site/quartz/components/Breadcrumbs.tsx

@@ -26,6 +26,10 @@ interface BreadcrumbOptions {
    * Whether to display the current page in the breadcrumbs.
    */
   showCurrentPage: boolean
+  /**
+   * Whether to display the root crumb.
+   */
+  showRoot: boolean
 }
 
 const defaultOptions: BreadcrumbOptions = {
@@ -33,6 +37,7 @@ const defaultOptions: BreadcrumbOptions = {
   rootName: "Home",
   resolveFrontmatterTitle: true,
   showCurrentPage: true,
+  showRoot: true,
 }
 
 function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: SimpleSlug): CrumbData {
@@ -76,12 +81,22 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
       crumbs.pop()
     }
 
+    if (!options.showRoot) {
+      crumbs.shift()
+    }
+
+    if (crumbs.length === 0) {
+      return null
+    }
+
     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 - 1 && <p>{` ${options.spacerSymbol} `}</p>}
+            <span class="breadcrumb-separator" aria-hidden="true">
+              {options.spacerSymbol}
+            </span>
           </div>
         ))}
       </nav>

quartz-site/quartz/components/styles/breadcrumbs.scss

@@ -9,14 +9,14 @@
 }
 
 .breadcrumb-element {
-  p {
-    margin: 0;
-    margin-left: 0.5rem;
-    padding: 0;
-    line-height: normal;
-  }
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+
+  .breadcrumb-separator {
+    margin: 0 0 0 0.4rem;
+    padding: 0;
+    line-height: 1;
+  }
 }