Best way to direct site title logo to another url?

[jackbridger]

Hi, great docs. Thank you for making them.

I would like to use starlight on a subdomain e.g. "docs.website.com"

Therefore, I would like the title logo to link to a custom "website.com" instead of "/"

Is there a suggested approach to do this? I can think of a few hacky ways but just wanted to check I'm not missing something obvious.

Thanks!

[HiDeoo]

Hey 👋 There is no dedicated option to change the URL of the site title logo in Starlight altho this should be doable.

Starlight supports overriding components which allows you to use your own custom components and override its default components.

One of the component that we can be overridden is the <SiteTitle/> component.
You could override the built-in <SiteTitle/> component and considering it's a fairly simple component, you could just copy the one used in Starlight in your custom override and change the URL of the site title logo to your liking.

The various links in my message should help you get started with overriding components in Starlight but if needed, here is a StackBlitz example that showcases this specific use case where the Starlight logo now links to Google.

If you have any questions or need further help, feel free to ask!

Note: a similar approach using overrides is also used in the Astro Docs where the left part of the site title links to the Astro homepage and the right part of the site title links to the Astro documentation homepage.

[jackbridger]

Wow thanks so much, amazingly helpful answer. Really appreciate it

…

On Sat, 17 Feb 2024, 20:22 HiDeoo, ***@***.***> wrote: Hey 👋 There is no dedicated option to change the URL of the site title logo in Starlight altho this should be doable. Starlight supports overriding components <https://starlight.astro.build/guides/overriding-components/> which allows you to use your own custom components and override its default components. One of the component that we can be overridden is the <SiteTitle/> component <https://starlight.astro.build/reference/overrides/#sitetitle>. You could override the built-in <SiteTitle/> component and considering it's a fairly simple component, you could just copy the one used in Starlight <https://github.com/withastro/starlight/blob/main/packages/starlight/components/SiteTitle.astro>in your custom override and change the URL of the site title logo to your liking. The various links in my message should help you get started with overriding components in Starlight but if needed, here is a StackBlitz example <https://stackblitz.com/edit/github-vespzh?file=src%2Foverrides%2FSiteTitle.astro> that showcases this specific use case where the Starlight logo now links to Google. If you have any questions or need further help, feel free to ask! Note: a similar approach using overrides <https://github.com/withastro/docs/blob/main/src/components/starlight/SiteTitle.astro> is also used in the Astro Docs where the left part of the site title links to the Astro homepage and the right part of the site title links to the Astro documentation homepage. — Reply to this email directly, view it on GitHub <#1517 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABXSJRFFMM4R7JVRALNFBCTYUEGPRAVCNFSM6AAAAABDNQK6I6VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DKMBTGEYTQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[jackbridger]

Implemented this. Really easy. Thanks especially for making the stackblitz example