Is there a way to control where content is placed in the `<head>` with `include-in-header`? #8694

jakoblistabarth · 2024-02-12T13:30:27Z

jakoblistabarth
Feb 12, 2024

Description

I am trying to load a third party js library from a cdn for a document with html output. This library needs importmaps. Which I can add like this:

---
title: Document with importmaps
include-in-header:
    - text: | 
        <script type="importmap">
            {
                "imports": {
                    "package": "resolves/to/path",
                    …
                }
            }
        </script>
include-after-body:
    - text: <script type="module" src="path/to-my-js-script-which-requires-importmap"></script>
…
---

Hello World

If I add the importmaps to the document via the include-in-header option it has no effect: it is placed – as defined in the documentation – at the end of the header. Hence, it is inserted only after other <script type="module"> (e.g. the quarto-ojs-runtime.js, which I would like to use in then document, so disabling it is not an option). Apparently, this makes the import map invalid.

Is there any way to place a text string before the script tags added by quarto (like the ojs-runtime), so that the importmaps are working?

Thanks!

mcanouil · 2024-02-14T21:01:41Z

mcanouil
Feb 14, 2024
Collaborator

Is there any way to place a text string before the script tags added by quarto (like the ojs-runtime), so that the importmaps are working?

Did you modify the HTML produced to confirm that the issue is the position in the header?
I don't see any reasons why the position here would matter in HTML.

Since your code is not self-contained and not reproducible, I cannot help much more here.

3 replies

jakoblistabarth Feb 15, 2024
Author

Thank you very much for your answer @mcanouil! I think I misunderstood the specs for importmap: it just needs to be declared before the specific module import where the mapping is used, not before any module import.
However, after changing the order manually in the HTML, the module import works. I created a reproducible example – which includes the manually modified HTML. Hope that makes it easier to narrow down the issue. Perhaps it is not at all related to the order. 🤷

mcanouil Feb 15, 2024
Collaborator

Thank you very much for your answer @mcanouil! I think I misunderstood the specs for importmap: it just needs to be declared before the specific module import where the mapping is used, not before any module import.

So, is it working?

However, after changing the order manually in the HTML, the module import works. I created a reproducible example – which includes the manually modified HTML. Hope that makes it easier to narrow down the issue. Perhaps it is not at all related to the order. 🤷

Out of the scope here I'm afraid. This is purely HTML and not really related to Quarto.
There might be some conflict between JavaScript libraries.
Quarto cannot unfortunately account for all existing JavaScript libraries.

You could try purging a bit the HTML produced by Quarto/Pandoc using:

---
format:
  html:
    minimal: true
    theme: none
---

Note that this will completely mess up the layout, but that does not really matter here.

jakoblistabarth Feb 16, 2024
Author

Thank you @mcanouil for your answer and sorry for the confusion I might have caused. I completely understand that this is not closely related to Quarto.

I think I misunderstood the specs for importmap: it just needs to be declared before the specific module import where the mapping is used, not before any module import.

Here I was just referring to the MDN docs on importmap, which I misunderstood. With the reproducible example I could confirm that the loading the library is working, but only if I (manually after building) move the importmap two lines up, just before the import of the ojs runtime.

My feeling is that giving finer control on where to inject html in the head (e.g. with an option like include-before-header) could increase the flexibility in terms of using other JavaScript libraries. But perhaps, instead of adding more arbitrary slots, it makes more sense to use a custom template as suggested in #6308?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is there a way to control where content is placed in the `<head>` with `include-in-header`? #8694

{{title}}

Replies: 1 comment 3 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Is there a way to control where content is placed in the <head> with include-in-header? #8694

jakoblistabarth Feb 12, 2024

Description

Replies: 1 comment · 3 replies

mcanouil Feb 14, 2024 Collaborator

jakoblistabarth Feb 15, 2024 Author

mcanouil Feb 15, 2024 Collaborator

jakoblistabarth Feb 16, 2024 Author

Is there a way to control where content is placed in the `<head>` with `include-in-header`? #8694

jakoblistabarth
Feb 12, 2024

Replies: 1 comment 3 replies

mcanouil
Feb 14, 2024
Collaborator

jakoblistabarth Feb 15, 2024
Author

mcanouil Feb 15, 2024
Collaborator

jakoblistabarth Feb 16, 2024
Author