Show full nav breadcrumbs in Pagefind page title

Signed-off-by: Julius Volz <julius.volz@gmail.com>

src/app/docs/[...slug]/page.tsx

@@ -8,6 +8,7 @@ import { Divider } from "@mantine/core";
 import PrevNextEditButtons from "./PrevNextEditButtons";
 import { HTMLAttributes } from "react";
 import path from "path";
+import { DocMetadata } from "@/docs-collection-types";
 
 // Next.js uses this function at build time to figure out which
 // docs pages it should statically generate.
@@ -54,6 +55,14 @@ function resolveRelativeUrl(currentPath: string, relativeUrl: string): string {
   return resolvedPath + (query ? `?${query}` : "") + (hash ? `#${hash}` : "");
 }
 
+function pagefindBreadcrumbsTitle(currentPage: DocMetadata) {
+  const titles: string[] = [];
+  for (let node = currentPage; node; node = node.parent!) {
+    titles.unshift(node.title);
+  }
+  return titles.join(" > ");
+}
+
 export default async function DocsPage({
   params,
 }: {
@@ -81,6 +90,9 @@ export default async function DocsPage({
         wrapperProps={
           {
             "data-pagefind-body": pagefindShouldIndex ? "true" : undefined,
+            "data-pagefind-meta": `breadcrumbs:${pagefindBreadcrumbsTitle(
+              docMeta
+            )}`,
           } as HTMLAttributes<HTMLDivElement>
         }
         normalizeHref={(href: string | undefined) => {

src/components/SpotlightSearch.tsx

@@ -48,7 +48,7 @@ const SearchResult = ({
 
   return (
     <Spotlight.ActionsGroup
-      label={data.meta.title.replace("'", "\\'") || "No title"}
+      label={data.meta.breadcrumbs || data.meta.title || "No page title"}
     >
       <Space h="xs" />
       {data.sub_results.slice(0, 4).map((subResult, subIdx) => (
@@ -105,6 +105,7 @@ type PagefindResultData = {
   excerpt: string;
   meta: {
     title: string;
+    breadcrumbs?: string;
   };
   sub_results: PagefindSubResult[];
 };