Custom templates for more control over <html> and <head>
#3418
Replies: 1 comment 2 replies
-
|
Ah, yeah, we don't offer great ways to handle those currently. It's technically possible to override When building the overrides system I was really striving for a single, consistent API that would feel the same regardless of where in the component hierarchy you were customizing things, but that is hard to do for these top-level things, which is why I left them out during that work. It might be slightly easier now we moved away from prop drilling everywhere, so maybe we can revisit it. A middleware that rewrites the HTML might actually be the nicest currently available approach to avoid the client-side script: stream through the response and add your class name to the And yeah, we've heard a few times now that making I can also imagine some dedicated APIs specifically for e.g. html and body attributes, but that feels like maybe a case of just narrowly designing for the use case rather than offering a proper escape hatch with full flexibility. |
Beta Was this translation helpful? Give feedback.
-
|
I agree it would be a bit much to have to reimplement everything from the default I would think that if Example---
import HeadContent from "@astrojs/starlight/components/HeadContent.astro";
import BodyContent from "@astrojs/starlight/components/BodyContent.astro";
const { starlightRoute } = Astro.locals;
---
<html
data-custom-attr
lang={starlightRoute.lang}
dir={starlightRoute.dir}
data-has-toc={starlightRoute.toc ? "" : undefined}
data-has-hero={starlightRoute.entry.data.hero ? "" : undefined}
data-has-sidebar={starlightRoute.hasSidebar ? "" : undefined}
>
<head>
<!-- most important blocking script could go here -->
{/* cascade layer order is super important */
<style is:inline>@layer reset, starlight, overrides;</style>
<HeadContent />
{/* least important head stuff at the end (e.g. prefetch or some weird meta) */}
</head>
<body data-custom-attr>
{/* can even use body-level DSD here! */}
<template shadowrootmode="open">
<slot is:inline></slot>
</template>
<BodyContent />
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, it might even need components that render Something like |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
What version of
starlightare you using?0.35.2
What is your idea?
It would be nice if Starlight offered full control over the page, all the way up to the
<html>element, including the<head>and<body>.This could be offered in one of two different ways:
templatefield.Pagecomponent to be overridden.Why is this feature necessary?
The main issue is that Starlight currently does not provide any way to add classes/attributes to the
<html>element. This is often necessary for configuring global styles, especially when supporting light/dark modes.Currently, I'm hacking around it by overriding the
Headcomponent and adding an inline script which adds these attributes to the<html>element.Do you have examples of this feature in other projects?
No response
Participation
Beta Was this translation helpful? Give feedback.
All reactions