Skip to content

PageTitle

The PageTitle is what you see at the top of every page. Ion’s override provides the ability to use icons there.

PageTitle.astro
---
import { Icon } from "astro-icon/components";
import { PAGE_TITLE_ID } from "starlight-ion-theme/constants";
import { icons } from "ion:globals";
const { entry } = Astro.locals.starlightRoute;
---
<h1 id={PAGE_TITLE_ID}>
{
icons && entry.data.title.includes("[") && (
<Icon
size="28"
name={entry.data.title.split("[").pop()?.split("]")[0] || ""}
/>
)
}
<span>{entry.data.title.split("]").pop()?.trim()}</span>
</h1>
<style>
@layer starlight.core {
h1 {
margin-top: 1rem;
font-size: var(--sl-text-h1);
line-height: var(--sl-line-height-headings);
font-weight: 600;
color: var(--sl-color-white);
}
}
</style>