Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 42 additions & 1 deletion src/components/CustomPageTitle.astro
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,39 @@ const title = Astro.locals.starlightRoute.entry.data.title;
// an empty paragraph.
const description = Astro.locals.starlightRoute.entry.data.description;
const body = Astro.locals.starlightRoute.entry.body ?? '';

// Eyebrow: a 2-level breadcrumb (e.g. "Agents > Third-Party CLI Agents")
// shown above the H1 to orient readers who land directly from search.
// Level 1 = the current sidebar topic (from starlightSidebarTopics).
// Level 2 = the immediate parent group of the current page in the sidebar
// tree (from starlightRoute.sidebar). Truncated to 2 levels max.
const topics = Astro.locals.starlightSidebarTopics?.topics;
const currentTopic = topics?.find((t: { isCurrent: boolean }) => t.isCurrent);
const topicLabel = currentTopic?.label;

// Walk the sidebar tree to find the parent group of the current page.
type SidebarEntry = { type: string; label: string; isCurrent?: boolean; entries?: SidebarEntry[] };
function findParentGroup(entries: SidebarEntry[], parentLabel?: string): string | undefined {
for (const entry of entries) {
if (entry.type === 'link' && entry.isCurrent) return parentLabel;
if (entry.type === 'group' && entry.entries) {
const found = findParentGroup(entry.entries, entry.label);
if (found) return found;
}
}
return undefined;
}
const sidebar = Astro.locals.starlightRoute?.sidebar as SidebarEntry[] | undefined;
const parentGroup = sidebar ? findParentGroup(sidebar) : undefined;

// Build the eyebrow: "Topic > Parent Group" or just "Topic" if the page
// is at the top level of its topic (no parent group, or parent matches topic).
const eyebrow = topicLabel && parentGroup && parentGroup !== topicLabel
? `${topicLabel} > ${parentGroup}`
: topicLabel;
---

{eyebrow && <p class="page-eyebrow">{eyebrow}</p>}
<div class="page-title-row">
<h1 id="_top">{title}</h1>
<CopyPageButton body={body} title={title} />
Expand All @@ -29,10 +60,20 @@ const body = Astro.locals.starlightRoute.entry.body ?? '';
gap: 1rem;
}

.page-eyebrow {
margin-top: 1rem;
margin-bottom: 0.25rem;
font-size: var(--sl-text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sl-color-text-accent);
}

.page-title-row h1 {
flex: 1;
min-width: 0;
margin-top: 1rem;
margin-top: 0;
font-size: var(--sl-text-h1);
line-height: var(--sl-line-height-headings);
font-weight: 700;
Expand Down
Loading