use with quarto

[jcolomb]

would be nice to have a specific function for use with quarto (with all right defaults)

• a white background would be nice when using dark mode
• the QR code is on the right side in my case, do not know why. Also not in the table (html output), and size seems not to work. hyperlink not working either

now using:

bib_path <- "references.bib"

htmltools::div(
  style = "background-color: white;",
  htmltools::includeHTML(
  drop_name(bib_path,
            cite_key = "colomb2019",
            export_as = "html",
            qr_size = 150,
            qr_hyperlink = TRUE,
            vc_width = "80%",
            use_xaringan =TRUE,
            style = "classic"
          )
)
)

gives

<div style="background-color: white;"><table class="visual-citation">
  <tbody><tr>
    <td>
      <div style="width:80%px">
        <div class="top-row" style="font-size: 1.8rem;font-family: 'Vollkorn', 'Georgia', 'Times New Roman', serif;font-weight: normal;font-variant: small-caps;color:#e72e00;margin-bottom: 10px;">
          <span> (2019)</span>
        </div>
        <div class="title-row" style="font-size: 2.5rem;font-family: 'Vollkorn', 'Georgia', 'Times New Roman', serif;font-weight: bold;margin-bottom: 15px;color: #000000;">
          <span>Why research data management: four videos</span>
        </div>
        <div class="author-row" style="font-size: 1.3rem;font-family: 'Vollkorn', 'Georgia', 'Times New Roman', serif;font-weight: normal;color: #000000;">
          <span>Colomb, Julien; Gerlach, Roman</span>
        </div>
      </div>
    </td>
    
  </tr>
</tbody></table></div>
</div>
</div>
<img src="qr/colomb2019_qr.png" alt="QR code" class="r-stretch"></section>

[jcolomb]

Note that using the same code in R (not in quarto chunk) gives the expected result:

<div style="background-color: white;"><table class="visual-citation">                                                     
  <tr>
    <td>
      <div style="width:80%px">
        <div class="top-row" style="font-size: 1.8rem;font-family: &#39;Vollkorn&#39;, &#39;Georgia&#39;, &#39;Times New Roman&#39;, serif;font-weight: normal;font-variant: small-caps;color:#e72e00;margin-bottom: 10px;">
          <span> (2019)</span>
        </div>
        <div class="title-row" style="font-size: 2.5rem;font-family: &#39;Vollkorn&#39;, &#39;Georgia&#39;, &#39;Times New Roman&#39;, serif;font-weight: bold;margin-bottom: 15px;color: #000000;">
          <span>Why research data management: four videos</span>
        </div>
        <div class="author-row" style="font-size: 1.3rem;font-family: &#39;Vollkorn&#39;, &#39;Georgia&#39;, &#39;Times New Roman&#39;, serif;font-weight: normal;color: #000000;">
          <span>Colomb, Julien; Gerlach, Roman</span>
        </div>
      </div>
    </td>
    <td>
      <a href="https://doi.org/10.5281/ZENODO.2602634">
        <img src="qr/colomb2019_qr.png" alt="QR code"/>
      </a>
    </td>
  </tr>
</table></div>

seem to work in Rmarkdown( html_document outputs, slidy_presentation and ioslides (more or less) too) -but not for quarto-.

[jcolomb]

AS for now, I will use the png option, instead.

library('namedropR')
bib_path <- "references.bib"


htmltools::img(
  src =  drop_name(bib_path,
            cite_key = "colomb2019",
            export_as = "png",
            qr_size = 150,
            qr_hyperlink = TRUE,
            use_xaringan =TRUE,
            style = "classic"
          )
)

but hyperlink does nothing. the only html output is <img src="visual_citations/colomb2019.html.png" class="r-stretch">

[nucleic-acid]

Sorry for not replying earlier. Thanks for reporting the issue. I had tried it with a quarto doc some time ago and did not run into issues, so I'd like to investigate this:

Are you using the code above in a stand-alone qmd file or within a quarto-website/blog or a quarto-revealJS presentation?

[jcolomb]

I am using it in a quarto presentation, reveal.js type.

[nucleic-acid]

I'll have a look into it. Sorry to hear it doesn't work for you as expected and I hope in the meantime using PNG is ok.