#Rewriting PageTitle component

4 messages · Page 1 of 1 (latest)

south trout
#

Here I have
import { PAGE_TITLE_ID } from '<@&1055234544183287879>/starlight/constants';
However it reports error: Missing "./constants" specifier in "<@&1055234544183287879>/starlight" package
The original one is import { PAGE_TITLE_ID } from '../constants'; and I'm pretty sure it won't work 'cause it's in the <@&1055234544183287879>/starlight pack but mine is in my own project

iron meadowBOT
#

Hi @south trout. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

You are correct that importing from ../constants will not work in your own project if the constants are internal to the Starlight package. The knowledge sources do not mention that PAGE_TITLE_ID or a constants file is publicly exported by @astrojs/starlight, nor do they provide a public API for importing such constants.

When overriding Starlight components like PageTitle, the recommended approach is to use the data available from Astro.locals.starlightRoute to render your component, as shown in the official example:

---
// src/components/Title.astro
const { title } = Astro.locals.starlightRoute.entry.data;
---
<h1 id="_top">{title}</h1>

If you need to set the id attribute to a specific value (like PAGE_TITLE_ID), and that constant is not exported for public use, you should define the value directly in your component:

---
const { title } = Astro.locals.starlightRoute.entry.data;
const PAGE_TITLE_ID = '_top'; // Use the value expected by Starlight
---
<h1 id={PAGE_TITLE_ID}>{title}</h1>

Unless Starlight documents a public export for PAGE_TITLE_ID, you should not attempt to import it from the package. Instead, use the literal value as shown above. This approach is consistent with the official documentation for overriding the PageTitle component Use page data.

If you need to use other constants from Starlight, check the documentation or the package’s public API to see if they are exported. If not, you will need to define them yourself.

#

Summary:

  • Do not import internal constants from Starlight unless they are publicly exported.
  • Use the literal value for id as shown in the docs.
  • Reference the official override pattern for PageTitle components Use page data.

If you need further customization, please provide more details or check if Starlight has added public exports for such constants in a newer release.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: