Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[✨] Add a scripts key to head to allow for injecting custom scripts. #2593

Closed
shaunchander opened this issue Jan 8, 2023 · 8 comments
Closed
Labels
COMMUNITY: good first issue Good for newcomers COMMUNITY: PR is welcomed We think it's a good feature to have but would love for the community to help with the PR for it TYPE: enhancement New feature or request

Comments

@shaunchander
Copy link
Contributor

shaunchander commented Jan 8, 2023

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

@shaunchander shaunchander added TYPE: enhancement New feature or request STATUS-1: needs triage New issue which needs to be triaged labels Jan 8, 2023
@shaunchander shaunchander changed the title [✨] Add a script key to head to allow for injecting custom scripts. [✨] Add a scripts key to head to allow for injecting custom scripts. Jan 8, 2023
@shaunchander
Copy link
Contributor Author

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.

@jimjamdev
Copy link

This sounds like a use case for partytown https://qwik.builder.io/integrations/integration/partytown/

@manucorporat
Copy link
Contributor

anybody want to take into a PR?

@manucorporat manucorporat added COMMUNITY: good first issue Good for newcomers community and removed STATUS-1: needs triage New issue which needs to be triaged labels Feb 13, 2023
@manucorporat manucorporat added this to the BACKLOG: Post v1.0 milestone Feb 13, 2023
@moaoa
Copy link

moaoa commented Feb 17, 2023

Hi @manucorporat
I would love to open a PR could you give me some guidance

@kemilbeltre
Copy link

Hi @manucorporat 😄

I would like to work on this if possible.

Thanks!

@kemilbeltre
Copy link

@manucorporat which properties should we include in the DocumentScript interface? (src, id, type...)

@kemilbeltre
Copy link

@manucorporat Is there anything else expected to close this issue?

@shairez shairez added COMMUNITY: PR is welcomed We think it's a good feature to have but would love for the community to help with the PR for it and removed community labels Aug 13, 2023
zanettin pushed a commit that referenced this issue Aug 21, 2023
* feat: adding Script Tag to Head Tag via DocumentHead

Feat #2593

* refactor(fixes type import): fixes import type directly from package instead of absolute url

* feat(qwik-city): fix head file

* feat(qwik-city): fix styles in qwik-city-component

* docs(qwik-city): update api

* fix(qwik-city): fix export

* fixup! feat(qwik-city): Adding Script Tag to Head Tag via DocumentHead

* fixup! feat(qwik-city): Adding Script Tag to Head Tag via DocumentHead

---------

Co-authored-by: Harkunwar Kochar <harkunwar@qwik>
Co-authored-by: Miško Hevery <misko@hevery.com>
@gioboa
Copy link
Member

gioboa commented Aug 26, 2023

the feature is done.

@gioboa gioboa closed this as completed Aug 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
COMMUNITY: good first issue Good for newcomers COMMUNITY: PR is welcomed We think it's a good feature to have but would love for the community to help with the PR for it TYPE: enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

7 participants