Custom components
Starlight pages are MDX: import Astro or React components anywhere in the body. That is how SaaS teams add design-system widgets, analytics, status embeds, and interactive demos without forking the theme.
Branded callout (Astro wrapper)
Section titled “Branded callout (Astro wrapper)”DocsCallout.astro wraps Starlight <Aside> with an optional kicker for design-system alignment.
Custom element
Third-party product tour (Supademo)
Section titled “Third-party product tour (Supademo)”The same embed used on Connect overview — gated by product role in production paths; public here for evaluator convenience.
Site chrome (Astro)
Section titled “Site chrome (Astro)”Global layout uses Telekom magenta / white / black styling (no ODS dependency):
| Component | Role |
|---|---|
Header.astro | Telekom T logo, DIH diamond, nav, sign-in/out |
Sidebar.astro | Starlight sidebar with DIH styling |
UpsellScreen.astro | Subscription gate when a product role is missing |
SiteFooter.astro | T-Systems legal links |
Use ProductLogo.astro and assets under /images/branding/ for product artwork in MDX.
SaaS doc elements to add next
Section titled “SaaS doc elements to add next”| Element | Typical use |
|---|---|
| Changelog feed | RSS or GitHub releases API |
| Status embed | Instatus, Better Stack iframe |
| Cookie/consent | CMP script in starlight.head |
| Feedback widget | Thumbs on each page |
| Version picker | Starlight i18n or custom dropdown |
| Search | Static JSON index in header (SSR-friendly); Starlight Pagefind when fully prerendered |
Starlight overrides (this repo)
Section titled “Starlight overrides (this repo)”Configured in astro.config.mjs under components:
PageFrame→AuthPageFrame(access + upsell)Header/Sidebar/ThemeProvider→ Telekom DIH layout
That is the extension point for footer, breadcrumbs, or in-page TOC without losing Starlight content collections.