astro-adds-to-head
v1.0.0
Published
Fix a corner case in content collections rendering.
Downloads
2,430
Readme
astro-adds-to-head 🗣️
This Astro integration lets you explicitly mark components that add scripts and styles to the parent page.
Why astro-adds-to-head?
Due to Astro's streaming, we only wait until the page's frontmatter has run before generating the <head> element. Frontmatter of a component cannot add scripts or stylesheets because by the time it is run, the <head> element is already sent to the browser so that it can start loading assets.
This becomes an issue when a component uses the content collections API. The render() function adds styles and scripts relevant to the content entry to the element. Therefore, it must only be used in the routed page's frontmatter, not a component's. Using it elsewhere would lead to missing assets, as reported in this issue: withastro/astro#7761.
This integration gives you a way to fix this corner case by letting you explicitly mark components that may contribute styles or scripts. When a component is marked, Astro will wait until it is rendered before rendering the <head> element.
Installation
Manual Install
First, install the astro-adds-to-head package using your package manager. If you're using npm or aren't sure, run this in the terminal:
npm install astro-adds-to-headThen, apply this integration to your astro.config.* file using the integrations property:
// astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
+ import addsToHead from 'astro-adds-to-head';
export default defineConfig({
// ...
+ integrations: [addsToHead()],
// ^^^^^^^^^^^^
});Usage
Once the integration is installed and added to the configuration file, add export const addsToHead = true to the component that calls the render() method of a content entry.
---
const { Content } = await Astro.props.entry.render();
export const addsToHead = true
---
<Content />Troubleshooting
For help, check out the Discussions tab on the GitHub repo.
Contributing
This package is maintained by lilnasy independently from Astro. The integration code is located at packages/global/integration.ts. You're welcome to contribute by submitting an issue or opening a PR!
Changelog
See CHANGELOG.md for a history of changes to this integration.