[✨] Add a `scripts` key to head to allow for injecting custom scripts.
Is your feature request related to a problem?
I'm trying to add structured data to a statically generated blog but there doesn't seem to be a native way to inject script tags into the page's head.
I believe you can only edit head within root.tsx. Outside of that we have to export a head object which only expects three keys: frontmatter, links, and meta. It would nice to also include a script key as well (or perhaps a Script component similar to what's in NextJS) to customize ad-hoc scripts.
Describe the solution you'd like
We can allow DocumentHead to accept a scripts key. The type of the key could be an array of objects. An example of this implementation can be:
scripts: [
{
script: "<script src='ink-to-external-js' />, <script>console.log('hello world')</script>",
eagerness: "load"
}
]
Where script accepts the script tag as a raw string and eagerness can determine where the script should be placed on the page (either in the head or right before the closing body tag).
Describe alternatives you've considered
I was considering using a QwikContext to store blog metadata and then consume this context up in root.tsx (essentially a bottom-up approach). Though I feel a solution like this shouldn't need to rely on context.
Additional context
No response
At the end of the day, I think DevEx should take precedence here. While contexts can be used to bubble data up into root.tsx, adding native support for appending scripts to head would make the process much quicker.
This sounds like a use case for partytown https://qwik.builder.io/integrations/integration/partytown/
anybody want to take into a PR?
Hi @manucorporat I would love to open a PR could you give me some guidance
Hi @manucorporat 😄
I would like to work on this if possible.
Thanks!
@manucorporat which properties should we include in the DocumentScript interface? (src, id, type...)
@manucorporat Is there anything else expected to close this issue?
the feature is done.