Programmatically inject to <head />
#954
Replies: 4 comments
-
|
Thanks for the issue @JuanM04! We’ll have to think how best to enable this. We’re currently working on supporting component customisation (#415), and that may end up being the recommended way to do this, i.e. you provide a head component that will receive full route data and be able to return what it wants. There are some technical restrictions that mean we can’t easily use user-provided functions from the config (basically we need to serialize user config to access it in the pages). For MDX & Markdown content, this could be possible via a remark plugin that modifies frontmatter, not sure if that approach is available for Markdoc though. |
Beta Was this translation helpful? Give feedback.
-
This doesn't work as expected. There's a note about collections and modifying frontmatter, so that method is incompatible with the way Starlight handles frontmatter |
Beta Was this translation helpful? Give feedback.
-
|
Right, Starlight would need to do something like spread user-modified frontmatter into entry frontmatter when rendering content here: starlight/packages/starlight/index.astro Line 12 in ed4dd98 Would work for |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your feedback. Starting with Starlight 0.33.0, route data now include the Such data can be customized using a route data middleware. For example, to add some meta tags for Open Graph images, this would look like the following: // src/routeData.ts
import { defineRouteMiddleware } from "@astrojs/starlight/route-data";
export const onRequest = defineRouteMiddleware((context) => {
// Get the URL of the Open Graph image to use.
const ogImageUrl = new URL(`/og/my-og-image.png`, context.site);
// Get the array of all tags to include in the `<head>` of the current page.
const { head } = context.locals.starlightRoute;
// Add the `<meta/>` tags for the Open Graph images.
head.push({
tag: "meta",
attrs: { property: "og:image", content: ogImageUrl.href },
});
head.push({
tag: "meta",
attrs: { name: "twitter:image", content: ogImageUrl.href },
});
});You can of course use any of the route data properties in your middleware e.g. to compute a dynamic Open Graph image URL based on the current page's ID for example. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
What version of
starlightare you using?0.6.1
What is your idea?
It would be nice to have a way to add tags to
<head />programmatically. Something likeWhy is this feature necessary?
This could be useful for opengraph generation:
Do you have examples of this feature in other projects?
No response
Participation
Beta Was this translation helpful? Give feedback.
All reactions