Adding metadata for a Quarto Revealjs Presentation. #3287

JauntyJJS · 2022-11-11T02:54:15Z

JauntyJJS
Nov 11, 2022

Hi,

I have created a revealjs slide in Quarto (See https://github.com/JauntyJJS/NHS-R2022, source code in index.qmd file) and wish to add some metadata.

I understand from this discussion that it is possible to do this in Quarto Book and html output but the way to do it for a revealjs output seems unclear to me.

I tried to add the following to the index.qmd

meta() %>%
  meta_name("github-repo" = "JauntyJJS/NHS-R2022") %>% 
  meta_social(
    title = "Viewing Multiple Inteactive Plots Using Plotly and Trelliscopejs",
    description = glue::glue("
    NHS-R Online Conference 2022. 
    "),
    url = "https://jauntyjjs-nhs-r-2022.netlify.app/",
    image = "https://raw.githubusercontent.com/JauntyJJS/NHS-R2022/main/share-card.png",
    image_alt = glue::glue("
      Title slide of Viewing Multiple Inteactive Plots Using \\
      Plotly and Trelliscopejs presented at NHS-R Online Conference 2022.
      "),
    og_type = "website",
    og_author = "Jeremy Selva",
    twitter_card_type = "summary_large_image",
    twitter_creator = "@JauntyJJS"
  )

but it gives this error when I click on the Render button

Error in FUN(X[[i]], ...) : 
  Dependency metathis-04a1b509 0.1.0 is not disk-based
Calls: .main ... dependencies_from_render -> html_dependencies_as_string -> lapply -> FUN
In addition: Warning message:
knitr output format is not HTML. Use `include_meta()` to ensure that the <meta> tags are properly included in the <head> output (if possible). 
Execution halted

Is there an alternative way to do this ?

Answered by mcanouil

Nov 11, 2022

As described in the discussion you referenced, you need to provide the metadata as HTML to be used in include-in-header YAML option.

---
title: Title
format:
  revealjs:
    include-in-header: 
      text: |
        <meta name="github-repo" content="JauntyJJS/NHS-R2022"/>
        <meta name="twitter:title" content="Viewing Multiple Inteactive Plots Using Plotly and Trelliscopejs"/>
        <meta name="twitter:description" content="NHS-R Online Conference 2022. "/>
        <meta name="twitter:url" content="https://jauntyjjs-nhs-r-2022.netlify.app/"/>
        <meta name="twitter:image" content="https://raw.githubusercontent.com/JauntyJJS/NHS-R2022/main/share-card.png"/>
        <meta name="…

View full answer

chris-gaskell · 2022-11-11T08:02:44Z

chris-gaskell
Nov 11, 2022

I absolutely need the answer to this query.

Fingers crossed that it comes :)

0 replies

mcanouil · 2022-11-11T09:45:35Z

mcanouil
Nov 11, 2022
Collaborator

As described in the discussion you referenced, you need to provide the metadata as HTML to be used in include-in-header YAML option.

---
title: Title
format:
  revealjs:
    include-in-header: 
      text: |
        <meta name="github-repo" content="JauntyJJS/NHS-R2022"/>
        <meta name="twitter:title" content="Viewing Multiple Inteactive Plots Using Plotly and Trelliscopejs"/>
        <meta name="twitter:description" content="NHS-R Online Conference 2022. "/>
        <meta name="twitter:url" content="https://jauntyjjs-nhs-r-2022.netlify.app/"/>
        <meta name="twitter:image" content="https://raw.githubusercontent.com/JauntyJJS/NHS-R2022/main/share-card.png"/>
        <meta name="twitter:image:alt" content="Title slide of Viewing Multiple Inteactive Plots Using Plotly and Trelliscopejs presented at NHS-R Online Conference 2022."/>
        <meta name="twitter:card" content="summary_large_image"/>
        <meta name="twitter:creator" content="@JauntyJJS"/>
        <meta name="twitter:site" content="@JauntyJJS"/>
        <meta property="og:title" content="Viewing Multiple Inteactive Plots Using Plotly and Trelliscopejs"/>
        <meta property="og:description" content="NHS-R Online Conference 2022. "/>
        <meta property="og:url" content="https://jauntyjjs-nhs-r-2022.netlify.app/"/>
        <meta property="og:image" content="https://raw.githubusercontent.com/JauntyJJS/NHS-R2022/main/share-card.png"/>
        <meta property="og:image:alt" content="Title slide of Viewing Multiple Inteactive Plots Using Plotly and Trelliscopejs presented at NHS-R Online Conference 2022."/>
        <meta property="og:type" content="website"/>
        <meta property="og:locale" content="en_US"/>
        <meta property="article:author" content="Jeremy Selva"/>
---

Or if you absolutely want to use R:

Create pre- and post-render scripts:

meta.R

writeLines(
  text = as.character(metathis::meta_social(
    metathis::meta_name(metathis::meta(), "github-repo" = "JauntyJJS/NHS-R2022"),
    title = "Viewing Multiple Inteactive Plots Using Plotly and Trelliscopejs",
    description = glue::glue("
    NHS-R Online Conference 2022. 
    "),
    url = "https://jauntyjjs-nhs-r-2022.netlify.app/",
    image = "https://raw.githubusercontent.com/JauntyJJS/NHS-R2022/main/share-card.png",
    image_alt = glue::glue("
      Title slide of Viewing Multiple Inteactive Plots Using \\
      Plotly and Trelliscopejs presented at NHS-R Online Conference 2022.
      "),
    og_type = "website",
    og_author = "Jeremy Selva",
    twitter_card_type = "summary_large_image",
    twitter_creator = "@JauntyJJS"
  )),
  con = "meta.txt"
)

clean_meta.R
```
unlink("meta.txt")
```

_quarto.yml

project:
  pre-render: meta.R
  post-render: clean_meta.R

document.qmd

---
title: Title
format:
  revealjs:
    include-in-header: meta.txt
---

1 reply

JauntyJJS Nov 15, 2022
Author

Sorry for the late reply.

Many thanks for your assistant.

I have tried the first option and it is good enough for me.
The meta data can be read in the twitter card validator https://cards-dev.twitter.com/validator

Putting the link in the tweet now gives me this.

EllaKaye · 2024-07-06T14:55:00Z

EllaKaye
Jul 6, 2024

There's also this discussion as a (closed) issue for metathis which gives a neat way to use that package to create a meta.html file that can then be included in the header, rather than all those lines as text (edited from that issue to use revealjs format, but otherwise using Shannon's talk's details:

(I'm not sure how to format this properly - the r code block needs to start and end with three backticks)

---
title: "Issue 28"
format: 
  html:
    include-in-header:
      meta.html
editor: visual
---

{r meta}
#| include: false
library(metathis)
meta() %>%
  meta_name("github-repo" = "https://github.com/shannonpileggi/introducing-gtreg-rmed-2022") %>% 
  meta_social(
    title = "Introducing gtreg: an R package to produce regulatory tables for clinical research",
    url = "https://shannonpileggi.github.io/introducing-gtreg-rmed-2022/#/title-slide",
    image = "https://github.com/shannonpileggi/introducing-gtreg-rmed-2022/blob/main/img/gtreg_overview_preview.PNG?raw=true",
    image_alt = "Flow chart overview of {gtreg} usage and functions.",
    og_type = "slides",
    og_author = "Shannon Pileggi",
    twitter_card_type = "summary_large_image",
    twitter_creator = "@PipingHotdata",
    twitter_site = "@PipingHotdata"
  ) %>% 
  format() %>% 
  writeLines("meta.html")

1 reply

cderv Jul 6, 2024
Maintainer

(I'm not sure how to format this properly - the r code block needs to start and end with three backticks)

You can use more backticks to wrap the R code block . See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding metadata for a Quarto Revealjs Presentation. #3287

{{title}}

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Adding metadata for a Quarto Revealjs Presentation. #3287

JauntyJJS Nov 11, 2022

Replies: 3 comments · 2 replies

chris-gaskell Nov 11, 2022

mcanouil Nov 11, 2022 Collaborator

JauntyJJS Nov 15, 2022 Author

EllaKaye Jul 6, 2024

cderv Jul 6, 2024 Maintainer

JauntyJJS
Nov 11, 2022

Replies: 3 comments 2 replies

chris-gaskell
Nov 11, 2022

mcanouil
Nov 11, 2022
Collaborator

JauntyJJS Nov 15, 2022
Author

EllaKaye
Jul 6, 2024

cderv Jul 6, 2024
Maintainer