Detailed analysis of every component registered via Starlight's standard components: override API in astro.config.ts:120–130. All files live in src/components/overrides/.

Full replacement. Does not import or wrap Starlight's Default Banner.

Starlight's built-in banner is a plain unstyled block. This replacement adds typed alert variants and a client-side dismissal system.

banner.type (note, tip, caution, danger) is mapped to a Starlight Icon name:

Each type gets distinct background and border colors via scoped CSS, with explicit light/dark overrides for note and caution (lines 80–143).

When banner.dismissible is set, the banner is wrapped in a React <Dismissible> island (client:load). A close button renders via <Dismisser>, which writes a timestamped key to localStorage. On subsequent page loads, <Dismissible> reads that key and suppresses rendering if the TTL (banner.days) has not expired.

Non-dismissible banners render as a plain <div> with icon and content (lines 67–77).

Full replacement. Does not import Starlight's Default Footer, but does manually re-compose three of its sub-components: <EditLink>, <LastUpdated>, and <Pagination>.

A 5-column link grid (Resources, Support, Company, Tools, Community) and a legal bar (Privacy Policy, Terms of Use, Report Security Issues, Trademark).

The OneTrust cookie consent script is only injected when running on a production branch, detected via the CF_PAGES_BRANCH or GITHUB_REF_NAME environment variables.

Starlight's <Pagination>, <EditLink>, and <LastUpdated> are re-inserted below the corporate footer, but only on non-splash pages.

A <FeedbackPrompt> React island (client:idle) is shown on non-homepage pages when feedback: true is set in frontmatter. At ≥72rem viewports it is hidden via CSS when a ToC is present (lines 196–201), because TableOfContents.astro renders its own copy in the right rail instead.

flex-direction: column-reverse is applied so the editorial section (pagination, edit link) appears visually above the corporate footer even though it's rendered below it in source order.

Wraps Default (<Default> called at line 237). Mutates the head[] array in Astro.locals.starlightRoute before delegating, then injects three <script> tags.

Reformats the page title from Starlight's default "Page Title | Cloudflare Docs" to "Page Title · Product Name" by looking up the product entry from the directory collection. og:title is set to the same value. Changelog pages use the first entry from frontmatter.products.

<meta name="robots" content="noindex"> is injected for:

• Products in the NOINDEX_PRODUCTS blocklist (currently email-security)
• Pages with noindex: true in frontmatter
• Pages with external_link in frontmatter

For external_link pages, <meta http-equiv="refresh" content="0; url=..."> is injected to redirect the browser. This is the mechanism behind sidebar entries that point off-site without a full server-side redirect.

For pcx_content_type: changelog pages, a <link rel="alternate" type="application/rss+xml"> is injected pointing to the product's index.xml feed.

og:image, twitter:image, and image meta tags are resolved via getOgImage().

<link rel="alternate" type="text/markdown"> pointing to the .md source is added to every page, enabling LLM-friendly content discovery.

Three scripts are injected: footnotes.ts (footnote popups), mermaid.ts (diagram rendering), analytics.ts (Zaraz setup).

Full replacement. Imports Starlight's SiteTitle, ThemeSelect, and LanguageSelect sub-components directly and composes them manually alongside custom elements.

Two-column flex layout:

• Left: <SiteTitle> (Cloudflare logo)
• Right (#right-group, hidden below 800px): DocSearch (fixed 20rem width) → <HeaderDropdowns> (React, client:idle) → Login button → <ThemeSelect> → <LanguageSelect>

Styled with bg-cl1-brand-orange (Cloudflare brand orange), links to dash.cloudflare.com. Fires a Zaraz track("clicked header login button") event on click (lines 82–90).

A React island (client:idle) using floating-UI to render a "Help" dropdown menu. Loaded idle so it does not block initial render.

Conditional wrapper. A minimal one-liner delegates based on route:

const isHomepage = Astro.locals.starlightRoute.id === "";

• Homepage (/): renders <HomepageHero>
• All other pages: passes through to Starlight's <Default />

• 2-column grid layout (text left, image right at ≥50rem)
• Quick-nav links: Directory, Resources, API, Changelog (lines 48–52)
• h1 from data.hero.title and a tagline div
• Dark/light image variants via Astro's <Image> component
• Starlight's default CTA action buttons are removed entirely

Full reimplementation of the same <div class="sl-markdown-content"> wrapper. No Default import.

Imports Starlight's markdown.css directly (line 2) to preserve all default prose styles, then adds two things:

<ImageZoom /> from starlight-image-zoom is rendered before the content div. This registers the plugin's click-to-zoom behavior globally for all content images on the page.

Extensive styles for the anchor links injected by rehypeAutolinkHeadings:

• Links are hidden by default (opacity: 0) and revealed on heading hover
• At min-width: 95em, anchors float to the left of the heading text via flex-direction: row-reverse, keeping them out of the content column
• Custom properties --icon-size and --icon-spacing control sizing per heading level
• Heading level font sizes are explicitly set here rather than inherited from Starlight

Wraps Default (<Default><slot /></Default> at line 38). Prepends a product header and a live search input above Starlight's sidebar tree.

A linked <a> containing:

• The product's SVG icon via astro-icon (colored cl1-brand-orange, 32px)
• The product title via lookupProductTitle(product, module)

The product and module are extracted from the first two URL path segments (line 7).

A styled <input type="text" id="sidebar-search"> with a CSS mask-image search icon. Below it, a "No results" message with a "global search" button that calls openGlobalSearch(query) to hand off to Algolia DocSearch (lines 30–36).

A <script> block implements full sidebar filtering without a framework:

Global style overrides for sidebar items: tighter padding, custom active-item styling (accent color + bold instead of background highlight), normalized font sizes for top-level .large labels, and hairline separator colors for light/dark themes.

Wraps Default conditionally — {!hideTitle && <Default />} at line 105. Adds content above and below the <h1>.

Builds a crumbs array by resolving each URL path segment against the directory and docs content collections to get display titles. The first crumb is always "Directory → /directory/". Rendered in a flex row alongside <CopyPageButton> (lines 76–103).

hideBreadcrumbs (from Astro.locals.starlightRoute) suppresses the breadcrumb row. When both hideTitle and hideBreadcrumbs are true, a scoped <style> hides the entire first .content-panel (lines 145–152).

A React island (client:idle) that copies the page URL to the clipboard. Hidden on splash template pages.

Shown when frontmatter.reviewed is set. Displays the date of last human review alongside the page title.

When frontmatter.summary is set, renders it as a lead paragraph below the title using marked for Markdown parsing.

For style guide pages with a frontmatter.styleGuide.component key, renders a component usage reference block.

Wraps Default (<Default /> at line 11). Appends three sections below Starlight's standard ToC.

When frontmatter.tags is set, renders a <h2>Tags</h2> section with linked pill badges. Each tag links to /search/?tags={tag} with a data-tag-serp-link attribute for analytics tracking.

When frontmatter.feedback: true, renders <FeedbackPrompt client:idle /> below the ToC. This is only visible on wide viewports where the ToC column is present; the Footer override renders the same component in the footer on narrower screens.

Shown on all pages except /support/*:

• Edit — links to the GitHub edit URL from starlightRoute.editUrl, using Starlight's pencil icon
• Issue — links to github.com/cloudflare/cloudflare-docs/issues/new/choose, using Starlight's github icon