[Docs Site] Extract breadcrumb labels from page titles (#16113)

Author: KianNH

src/components/overrides/PageTitle.astro

@@ -5,28 +5,81 @@ import Default from "@astrojs/starlight/components/PageTitle.astro";
 import { Breadcrumbs } from "astro-breadcrumbs";
 import "astro-breadcrumbs/breadcrumbs.css";
 
-import { Badge, Description, SpotlightAuthorDetails, LastReviewed } from "~/components";
+import {
+  Badge,
+  Description,
+  SpotlightAuthorDetails,
+  LastReviewed,
+} from "~/components";
+import type { ComponentProps } from "astro/types";
+import { getEntry } from "astro:content";
 
 const spotlightDetails = Astro.props.entry.data.spotlight;
 const updated = Astro.props.entry.data.updated;
 const badge = Astro.props.entry.data.sidebar?.badge;
 const summary = Astro.props.entry.data.summary;
+
+const breadcrumbProps: Record<string, any> = {
+  crumbs: [
+    {
+      text: "Products",
+      href: "/products/",
+    },
+  ],
+  truncated: true,
+};
+
+const slug = Astro.props.entry.slug;
+
+const segments = slug.split("/");
+
+for (let i = 0; i < segments.length; i++) {
+  if (i === 0) {
+    const entry = await getEntry("products", segments[0]);
+
+    let title = segments[0];
+    if (entry) {
+      title = entry.data.product.title;
+    }
+
+    breadcrumbProps.crumbs.push({
+      text: title,
+      href: `/${segments[0]}/`,
+    });
+
+    continue;
+  }
+
+  let path = segments.slice(0, i + 1).join("/");
+
+  const entry = await getEntry("docs", path);
+
+  let title = segments[i];
+  if (entry) {
+    title = entry.data.title;
+  }
+
+  breadcrumbProps.crumbs.push({
+    text: title,
+    href: `/${segments.join("/")}/`,
+  });
+}
 ---
 
-<Breadcrumbs linkTextFormat="capitalized" truncated={true}>
-	<svg
-		slot="separator"
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		><polyline points="9 18 15 12 9 6"></polyline>
-	</svg>
+<Breadcrumbs {...breadcrumbProps}>
+  <svg
+    slot="separator"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    ><polyline points="9 18 15 12 9 6"></polyline>
+  </svg>
 </Breadcrumbs>
 <Default {...Astro.props} />
 
@@ -35,19 +88,19 @@ const summary = Astro.props.entry.data.summary;
 {updated && <LastReviewed date={updated} />}
 
 {
-	spotlightDetails && (
-		<SpotlightAuthorDetails
-			author={spotlightDetails.author}
-			platform={spotlightDetails.author_bio_source}
-			link={spotlightDetails.author_bio_link}
-		/>
-	)
+  spotlightDetails && (
+    <SpotlightAuthorDetails
+      author={spotlightDetails.author}
+      platform={spotlightDetails.author_bio_source}
+      link={spotlightDetails.author_bio_link}
+    />
+  )
 }
 
-{ summary && <Description>{summary}</Description> }
+{summary && <Description>{summary}</Description>}
 
 <style>
-	:root {
-		--color-link-breadcrumbs: var(--sl-color-text-accent);
-	}
+  :root {
+    --color-link-breadcrumbs: var(--sl-color-text-accent);
+  }
 </style>