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.

Sign up for GitHub

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

Jump to bottom

Add javascript to header html #378

Closed
koaning opened this issue Jun 1, 2021 · 7 comments
Closed

Add javascript to header html #378

koaning opened this issue Jun 1, 2021 · 7 comments
Labels
question ❓ general questions - not an issue

Comments

@koaning
Copy link

koaning commented Jun 1, 2021

The documentation of my analytics provider tells me that the only supported method of adding tracking to my blog is to add a tag to the <head> of my page.

<script async defer data-domain="koaning.io" src="https://plausible.io/js/plausible.js"></script>

Is that even possible with distill? It seems to only support GA, but I could imagine that javascript libraries like jquery also cannot be placed in the header.
@cderv
Copy link
Collaborator

cderv commented Jun 2, 2021

You should be able to use the includes argument in distill_article output format like with other rmarkdown format. https://pkgs.rstudio.com/distill/reference/distill_article.html

With this you can pass a .html file to include in header of you article or you site.

If you put the line above in a file then include it this way, it should be enough.

You can see an example on this repo found in Github search : https://github.com/beatrizmilz/slidesR/blob/bae491168f8f702133c733b61b8f4afb9865f94f/docs/_site.yml#L28-L32

Documentation about includes can be found in:

Hope it helps

@cderv cderv added the question ❓ general questions - not an issue label Jun 2, 2021
@koaning
Copy link
Author

koaning commented Jun 2, 2021 •
edited
Loading

Thanks for the swift reply!

It totally seems to work when I add this to the _site.yml.

output:  
  distill::distill_article:    
    css: styles.css    
    includes:      
      in_header: header.html

@koaning koaning closed this as completed Jun 2, 2021
@koaning koaning mentioned this issue Jun 2, 2021
Closed
@giocomai
Copy link

giocomai commented Dec 9, 2021 •
edited
Loading

I see this is closed, but the solution given works only for Distill sites, not for Distill documents. I can confirm that everything works fine with the header given in _site.yml for Distill sites, but if the same is given in the yaml section of a Distill article this doesn't work.

As it turns out, this is due to self_contained: true: even if it's an external script linked in "header.html", the renderer gets the script and includes it directly in the html file.

This may be fine in many instances, but it doesn't work with tracking scripts such as the ones used by Plausible (or, for that matter, Google Analytics). In the case of Google Analytics, the end result of including a link to an external script even if self_contained is set to true is achieved with a custom parameter.

It would be nice if there was a way to leave self_contained set to true, but just keep the exact line given in the external header.html in <head> (e.g. as in the example above <script async defer data-domain="koaning.io" src="https://plausible.io/js/plausible.js"></script>) rather than have the renderer download the script and break the whole thing, turning it into something like <script async defer data-domain="koaning.io" src="data:application/javascript;base64....">

If self_contained is set to false, then the line remains as expected in <head> but then all javascript libraries are stored externally, which may be undesirable.

@cderv
Copy link
Collaborator

cderv commented Dec 10, 2021

The process to make a document self_contained is done by Pandoc. For such case, you could either not using self_contained, or tell Pandoc to not process an element. You should be able to do that using data-external="1" attribute
https://pandoc.org/MANUAL.html#option--self-contained

If you add this to your element, Pandoc should leave the element alone.

<script async defer data-domain="koaning.io" src="https://plausible.io/js/plausible.js" data-external="1"></script>

Can you try this ?

@giocomai
Copy link

Thanks a lot @cderv, that's perfect, I can confirm this works. I see this is really a pandoc issue, that is adequately documented there. Considering the different behaviour this has depending if one is using a Distill website or Distill article, perhaps it would anyway make sense to add a short reference in the documentation, to save others the lengthy troubleshooting.

Either way, thank you for your swift reply, it is much appreciated.

@cderv
Copy link
Collaborator

cderv commented Dec 10, 2021 •
edited
Loading

Considering the different behaviour this has depending if one is using a Distill website or Distill article, perhaps it would anyway make sense to add a short reference in the documentation, to save others the lengthy troubleshooting.

This is for all type of production using R Markdown: You won't have this issue with format like website as they are using self_contained = FALSE, but you can with single document which usually uses self_contained = TRUE. self_contained really means with Pandoc no external internet usage or file is needed. So usually, when you know you'll have need of it, using self_contained = FALSE is best.

But this data-external thing is useful for a mix. We had it for iframe with knitr::include_url() already. So we could add something about how this work in the R Markdown Cookbook probably. (rstudio/rmarkdown-cookbook#321)

@giocomai
Copy link

Thanks for the thoughtful reply. Yes, I did notice that this happens with regular Rmarkdown documents as well as I was troubleshooting, and now I understand the reasoning and the logic. But at first, I re-read the Rmarkdown documentation, and made online searches with reference to includes, in_header, and such, and nothing really popped up. I included such headers successfully in a Distill site before, and was puzzled this wouldn't work in an article.

Of course, with hindsight, when this happens and why is all clear and obvious, but, even a brief reference in the R Markdown Cookbook or documentation would make this a matter of minutes to find for anybody having this or similar issue.

@edornshuld edornshuld mentioned this issue Feb 15, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question ❓ general questions - not an issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@koaning @cderv @giocomai