Creating a listing page that includes revealjs and xaringan slide decks

[spcanelon]

Hello! I'd like to create a listing page with a grid layout that lists all of the slide decks in the directory, with one card corresponding to each slide deck.

If the slide deck being featured on the listing page is a revealjs deck from a .qmd file, this is straightforward, but if it's a xaringan slide deck, it's a little trickier because Quarto will want to render the .Rmd xaringan file as an article.

After a lot trial and error, I came up with a workaround that gets me about 95% of the way but I'm having trouble populating the xaringan listing cards with all of the necessary fields. Below is a screenshot of a minimal working example where the card for the revealjs deck looks fine but the one for the xaringan deck is missing the title field:

These are the steps that got me to this point:

1. Rendered the index.Rmd xaringan file to a self-contained HTML file using rmarkdown::render()
2. Changed the name of the xaringan file to _index.Rmd so that Quarto ignores it when rendering the site
3. In the index.qmd file governing the listing page, I specify that I want to include any index.qmd files in folders, and the index.html file in a specific xaringan folder: source code in GitHub
4. In order to provide the listing page with the necessary fields for the xaringan index.html file, I added a _metadata.yml file in the xaringan folder with title, author, date, and image: source code in GitHub

So far so good except the listing page ignores the title field that I've provided in _metadata.yml. Am I missing something or is this maybe a bug? Or is there maybe a different approach altogether that I could be taking?

Any suggestions would be greatly appreciated -- thanks in advance!

[mcanouil]

Interesting workflow! I'll take a look 😏

I would add something to generate the "featured" image using something like below:

• Quarto:

  quarto::quarto_render("index.qmd")
  webshot2::webshot(
    url = "index.html",
    file = "featured.png",
    vwidth = 1920,
    vheight = 1080
  )
  unlink("index.html")

• Xaringan:

  webshot2::webshot(
    url = rmarkdown::render("_index.Rmd", output_file = "index.html"),
    file = "featured.png",
    vwidth = 1920,
    vheight = 1080
  )

[spcanelon]

Thanks for the webshot tip! I've gotten in the habit of doing this manually after rendering my slides with a ratio of 191:100, but this is great to have for future reference ⭐

[dragonstyle]

I was able to get this minimal example working as follows:

1. In 02-xaringan, rename _metadata.yml to metadata.yml. The underscore metadata files are typically used when you'd like metadata merged when rendering items in that folder / subfolders.

2. In metadata.yml, update to:

title: "Presentation Ninja"
author: "Yihui Xie"
date: "2016/12/12 (updated: `r Sys.Date()`)"
image: /02-xaringan/featured.png
path: /02-xaringan/index.html

3. Change the listing to point to the yml file rather than the HTML file:

listing:
  contents:
    - "*/index.qmd"
    - "02-xaringan/metadata.yml"

This is a cool test case, hope this gets you going!

[spcanelon]

This worked perfectly, thank you @dragonstyle!

[spcanelon]

Many thanks @dragonstyle and @mcanouil for your help! My listing page is now finished (though the styling is a WIP):

• Site: https://slides.silviacanelon.com/
• Source: https://github.com/spcanelon/slides

[dragonstyle]

Looks great!