Issues with adding altmetric scores

[dktanwar]

Adding altmetric scores:

<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>

<div class='altmetric-embed' data-badge-popover='bottom' data-doi='10.1016/S0140-6736(11)61619-x'></div>

It wors with .Rmd --> .html_document, but not for pagedown::html_resume

[RLesur]

This comes from the fact that Paged.js builds the document before the altmetric badge is retrieved. You need to synchronize the altmetric JavaScript library with the Paged.js library by using the altmetric:show event as described in the altmetric badge documentation. IMO, the most simple way is:

• remove the Paged.js auto mode (with window.PagedConfig.auto = false;)
• trigger Paged.js when the altmetric:show event is fired with PagedPolyfill.preview();

If you embed many badges in the same document, this will be a little more complex.

[dktanwar]

Basically, you want me to try to do this in the resume.css file?

/* Paged.js viewer */

@media screen {
  body {
    background-color: var(--viewer-background-color);
    margin: 0; /* for mobile */
    width: calc(var(--width) + 2 * var(--viewer-pages-spacing)); /* for mobile */
    window.PagedConfig.auto: false;
    PagedPolyfill.preview();
  }

[dktanwar]

And to fire the even of the altmetric, I should add this code to the .Rmd?

<script>
$(function () {
    $('div.altmetric-embed').on('altmetric:show', function () {
        alert('Altmetric badge shown!');
    });
});
</script>

[RLesur]

Absolutely not! I will document an example. @yihui I think it is possible to add a native support for the altmetric elements. I don't use altmetric and I don't know whether it is relevant for pagedown

[dktanwar]

OK. Sorry, I am not an advanced user of JS and css.

In case you would like to use it as an example CV. I personally enjoyed transforming my CV and it looks amazing. Thank you so much @RLesur!

Looking forward to adding altmetric info as well.

[RLesur]

@dktanwar No problem. Synchronizing JS libraries is always a hard task. Thanks for your CV. I understand well the previous issue.

[RLesur]

Here's how to implement the synchronization between altmetric and Paged.js:

<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>

<div class='altmetric-embed' data-badge-popover='bottom' data-doi='10.1016/S0140-6736(11)61619-x'></div>

```{js, echo=FALSE}
window.PagedConfig.auto = false;
document.querySelector('.altmetric-embed').addEventListener('altmetric:show', () => {
  window.PagedPolyfill.preview();
});
```

Be aware that this script will work for a single badge only.

[dktanwar]

OK. It works and kind of ruined the layout:

[dktanwar]

[RLesur]

Tweak the CSS for this new element: try to change the display property of the div

[RLesur]

or use a span instead of a div. altmetric add extra styles/elements through JavaScript: you have to find the good mean to embed it properly

[yihui]

I think it is possible to add a native support for the altmetric elements. I don't use altmetric and I don't know whether it is relevant for pagedown

I have never heard altmetric before, so I don't know, either. I'll let you decide.

[RLesur]

For now, I think that we should focus on the JS libraries used in the R Markdown ecosystem.
The highest priority is https://github.com/rstudio/pagedown/issues/58