book chapters as separate revealjs presentations

[dhicks]

I'm a university professor. For one of my classes, I like to present my lecture notes as both a presentation (eg, slidy or revealjs, for use in class) and a unified website (eg, gitbook, for students to consult out of class). With Rmarkdown, I could do this by having two different recipes in a Makefile: one that uses bookdown::render_book() to create the single gitbook, and another that uses rmarkdown::render() to create a presentation for each separate chapter Rmd file.

I'm playing around with Quarto, trying to figure out how I might be able to do this. Something like quarto render chfile --to revealjs in a book project generates a warning: WARNING: The revealjs format is not supported by book projects. (This should probably be an error, because Quarto doesn't go on to executive any code chunks or produce any output files.) Including revealjs as a format in _quarto.yml does the same thing. I tried setting up a separate metadata file, _slides.yml, but quarto render doesn't seem to have any flags to select which metadata file should be used.

So currently the best option seems to be to stick with rmarkdown::render() for the slides?

[jjallaire]

This is indeed an unfortunate constraint (and the warning should be an error!). I'd suggest for now just wrapping the rendering of the slides with code that either temporarily renames the _quarto.yml file OR stages the presentations in another directory.

[tomkom]

I have a very similar problem. I am unsure how to modify the overall yml to have a "parallel" one for the slides. It appears there is no project type for revealjs, and any reveal slides are therefore purely defined within the single qmd file. Is there a way to have a "project" for many slides/chapters? I thought about including the header of all the slides in a central yml, and including/excluding a corresponding qmd as in render, but cannot figure out how to do this.

I am asking this as I have the same need as above, trying to keep book chapters and corresponding slides based on the same codebase to a large extent.

[mcanouil]

Small example (source: https://github.com/mcanouil/quarto-issues/tree/main/quarto-cli-1433):

1. quarto create-project . --type book

2. default yaml for book: _quarto.yml

   See the code.

   project:
     type: book
     output-dir: _book
   
   book:
     title: "test"
     author: "Jane Doe"
     date: "25/07/2022"
     chapters:
       - index.qmd
       - intro.qmd
       - summary.qmd
       - references.qmd
   
   bibliography: references.bib
   
   format:
     html:
       theme: cosmo

4. yaml for slides: _quarto_revealjs.yml

   See the code.

   project:
     output-dir: _slides
     render:
       - index.qmd
       - intro.qmd
       - summary.qmd
       - references.qmd
   
   title: "test"
   author: "Jane Doe"
   date: "25/07/2022"
   bibliography: references.bib
   
   format: revealjs

5. A function to render everything in both formats (below are really simple functions)

   • In R:

     See the code.

     render_book_slides <- function(...) {
       quarto::quarto_render(..., as_job = FALSE)
       file.rename("_quarto.yml", "_quarto_book.yml")
       file.rename("_quarto_revealjs.yml", "_quarto.yml")
       on.exit(file.rename("_quarto.yml", "_quarto_revealjs.yml"))
       on.exit(file.rename("_quarto_book.yml", "_quarto.yml"), add = TRUE)
       quarto::quarto_render(..., as_job = FALSE)
     }

   • In bash:

     See the code.

     function render_book_slides() {
       quarto render .
       mv _quarto.yml _quarto_book.yml
       mv _quarto_revealjs.yml _quarto.yml
       quarto render .
       mv _quarto.yml _quarto_revealjs.yml
       mv _quarto_book.yml _quarto.yml
       return 0
     }

6. Render using any of the functions

   • In R: render_book_slides() (or execute _build.r from the command line)

     See the output.

     render_book_slides()
     #> [1/4] index.qmd
     #> [2/4] intro.qmd
     #> [3/4] summary.qmd
     #> [4/4] references.qmd
     #> 
     #> Output created: _book/index.html
     #> 
     #> [1/4] index.qmd
     #> [2/4] intro.qmd
     #> [3/4] summary.qmd
     #> [4/4] references.qmd
     #> 
     #> Output created: _slides/index.html

   • In bash: render_book_slides (or execute _build.sh from the command line)

     See the output.

     render_book_slides
     #> [1/4] index.qmd
     #> [2/4] intro.qmd
     #> [3/4] summary.qmd
     #> [4/4] references.qmd
     #> 
     #> Output created: _book/index.html
     #> 
     #> renamed '_quarto.yml' -> '_quarto_book.yml'
     #> renamed '_quarto_revealjs.yml' -> '_quarto.yml'
     #> [1/4] index.qmd
     #> [2/4] intro.qmd
     #> [3/4] summary.qmd
     #> [4/4] references.qmd
     #> 
     #> Output created: _slides/index.html
     #> 
     #> renamed '_quarto.yml' -> '_quarto_revealjs.yml'
     #> renamed '_quarto_book.yml' -> '_quarto.yml'

7. Project directory tree with your slides in _slides and your book in _book.

   See the directory tree.

   .
   ├── _book
   │   ├── index.html
   │   ├── intro.html
   │   ├── references.html
   │   ├── search.json
   │   ├── site_libs
   │   └── summary.html
   ├── _quarto.yml
   ├── _quarto_revealjs.yml
   ├── _slides
   │   ├── index.html
   │   ├── index_files
   │   ├── intro.html
   │   ├── intro_files
   │   ├── references.html
   │   ├── references_files
   │   ├── summary.html
   │   └── summary_files
   ├── cover.png
   ├── index.qmd
   ├── intro.qmd
   ├── references.bib
   ├── references.qmd
   └── summary.qmd
   

Note: variables could be used to define shared variables between the two yaml and calling out those variables using shortcodes (see https://quarto.org/docs/authoring/variables.html).

[tomkom]

This works very nicely, thank you! I have a follow up question ( which probably merits it's own question then): can we tag content in the "book" to not be included in the slides ( and vice versa?). I suspect some :::{.keep_inbook} or similar magic ( I am not entirely across how this gets fed to the CSS and post-processing at render would work. Simply, in a book there is way more text, but often you want to keep a few figures, or bullet points for the slides.

Anyway, the above works perfectly, thanks!

[mcanouil]

I can only think of some JavaScript hiding contents based on classes/attributes, but it's still included.

[jcolomb]

it seems you can use {visibility="hidden"} in the header , it shows in the book, but not in the slide deck.

Not sure if there is a vice Versa way to do it (show only on slides). Maybe using {when-profile="advanced"} could work ? https://quarto.org/docs/projects/profiles.html#profile-content

[jcolomb]

PS: you can also add some more metadata.
PS: no need of an index.qmd for slides, needed for the book though.

In my case, reveals options is not working for all slides (probably something to do with paragraph with only headers of level 1).

project:
  output-dir: _slides
  render:
    - _episodes/01-introduction.md
    - _episodes/02-motivation.md
    
title: "test-slides"
author: "jc"


format:
  revealjs:
    smaller: true
    scrollable: true
    slide-level: 3

[MitchellAcoustics]

I thought people might be interested in a slightly different way I've done this using Quarto profiles. It was inspired by @mcanouil 's bash script method, but trying to integrate it more.

In my directory, I have lectures split into week folders (Week1/, Week2, etc), each of which has an index.qmd file and a slides.qmd. Index is a standard quarto document as a landing page for the week's chapter, and the slides.qmd is a live-revealjs presentation.

I then have three _quarto.yml profile files in the root directory.

Dir structure

. 📂 Code
└── 📂 Week1/
└── 📂 Week2/
│  └── 📂 img/
│  ├── 📄 index.qmd
│  ├── 📄 live-slides.qmd
└── 📂 Week3/
│  └── 📂 data/
│  ├── 📄 probability-live-tutorial.qmd
│  ├── 📄 probability-slides.qmd
│  ├── 📄 sampling-slides.qmd
└── 📂 _book/
├── 📄 _quarto-book.yml
├── 📄 _quarto-slides.yml
├── 📄 _quarto.yml
├── 📄 clean.scss
├── 📄 index.qmd
├── 📄 references.bib

• _quarto.yml is almost empty, it just sets up the default profile and includes shared title and author info.

  Click to expand _quarto.yml

  profile:
    default: slides
  author:
      - name: Dr Andrew Mitchell
        orcid: 0000-0003-0978-5046
        affiliations: Lecturer in AI and Machine Learning for Sustainable Construction
        institute: University College London
    date: last-modified
    
    filters:
      - fontawesome
    bibliography: references.bib
  

• _quarto-slides.yml sets up a default project with the revealjs format, only renders *slides.qmd files, and outputs to _slides

  Click to expand _quarto-slides.yml

  project:
    output-dir: _slides
    render:
      - "*slides.qmd"
  
  metadata-files:
    - _metadata.yml
  
  format:
    revealjs:
      theme: [default, clean.scss]
      slide-number: true
      show-slide-number: all
  

• _quarto-book.yml sets up a book project which outputs to _book.

  Click to expand _quarto-book.yml

  project:
    type: book
    output-dir: _book
    post-render: quarto render --profile slides
  
  metadata-files:
    - _metadata.yml
  
  book:
    reader-mode: false
    chapters:
      - index.qmd
      - Week1/age-guessing.qmd
      - Week2/index.qmd
  
  format:
    html:
      theme: cosmo
    pdf:
      documentclass: scrreprt
  

---

So now, I have two profiles available - slides and book.

In my case, I need the book to render first, then the slides, so I simply set a post-render script in _quarto-book.yml which runs the slides profile. So compiling the whole thing is quarto render --profile book. Within the book pages, I just use a relative link to _slides to embed the html:

Slide embedding in ./Week2/index.qmd

*yaml header and some content here*


[Slides](../_slides/Week2/slides.html){.btn .btn-outline-primary .btn role="button" data-toggle="tooltip" title="Here's a tooltip"}

<style>
.slide-deck {
    border: 3px solid #dee2e6;
    width: 100%;
    height: 475px;
}
</style>

<div>
```{=html}
<iframe class="slide-deck" src="../_slides/Week2/slides.html"></iframe>
```

While I'm working on my slides, I set the default profile to `slides`, so previewing in VS Code works nicely. If I'm working on the other content, I could either disable the default profile which will just give a default html, or set book as the default and remove the post-render script to not bother with rendering the slides too.

Essentially it works the same as @mcanouil 's, but using the built in profiles and without requiring renaming the .yml files with a bash script.

I haven't yet used it, but it seems like it would then be easy to do conditional execution based on the profiles. It also works to include slides.qmd in the book files, it just renders it like an html page which may or may not work as lecture notes depending on how tailored your revealjs formatting is.

[jcolomb]

slightly related, is there a way to then combine different chapters into a single slide deck ?

[mcanouil]

It would probably have been better to open a new discussion and linked it by typing #1433 to auto-link to this discussion.

I think, there is only one way to do what you want, which is the use of {{< include chapter.qmd >}} in your Quarto document using the format: revealjs.

[tomkom]

This is very elegant! Will give this a try!

…

On Wed, Jan 29, 2025 at 12:57 PM Andrew Mitchell ***@***.***> wrote: I thought people might be interested in a slightly different way I've done this using Quarto profiles. It was inspired by @mcanouil <https://github.com/mcanouil> 's bash script method, but trying to integrate it more. In my directory, I have lectures split into week folders (Week1/, Week2, etc), each of which has an index.qmd file and a slides.qmd. Index is a standard quarto document as a landing page for the week's chapter, and the slides.qmd is a live-revealjs presentation. I then have three _quarto.yml type files in the root directory and a shared _metadata.yml with title and author info. - _quarto.yml is almost empty, it just sets up the default profile Click to expand _quarto.yml profile: default: slides - _quarto-slides.yml sets up a default project with the revealjs format, only renders *slides.qmd files, and outputs to _slides Click to expand _quarto-slides.yml project: output-dir: _slides render: - "*slides.qmd" metadata-files: - _metadata.yml format: revealjs: theme: [default, clean.scss] slide-number: true show-slide-number: all - _quarto-book.yml sets up a book project which outputs to _book. Click to expand _quarto-book.yml project: type: book output-dir: _book post-render: quarto render --profile slides metadata-files: - _metadata.yml book: reader-mode: false chapters: - index.qmd - Week1/age-guessing.qmd - Week2/index.qmd format: html: theme: cosmo pdf: documentclass: scrreprt ------------------------------ So now, I have two profiles available - slides and book. In my case, I need the book to render first, then the slides, so I simply set a post-render script in _quarto-book.yml which runs the slides profile. So compiling the whole thing is quarto render --profile book. Within the book pages, I just use a relative link to _slides to embed the html: Slide embedding in ./Week2/index.qmd *yaml header and some content here* [Slides](../_slides/Week2/slides.html){.btn .btn-outline-primary .btn role="button" data-toggle="tooltip" title="Here's a tooltip"} <style> .slide-deck { border: 3px solid #dee2e6; width: 100%; height: 475px; } </style> <div> ```{=html} <iframe class="slide-deck" src="../_slides/Week2/slides.html"></iframe> ``` While I'm working on my slides, I set the default profile to `slides`, so previewing in VS Code works nicely. If I'm working on the other content, I could either disable the default profile which will just give a default html, or set book as the default and remove the post-render script to not bother with rendering the slides too. Essentially it works the same as @mcanouil <https://github.com/mcanouil> 's, but using the built in profiles and without requiring renaming the .yml files with a bash script. — Reply to this email directly, view it on GitHub <#1433 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AALLGHWYL7ZTD3SX6MVV6HT2NAYQ5AVCNFSM53YUPUH2U5DIOJSWCZC7NNSXTOSENFZWG5LTONUW63SDN5WW2ZLOOQ5TCMJZHEYDMNRT> . You are receiving this because you commented.Message ID: ***@***.***>

[MitchellAcoustics]

Thanks! Yeah, it seems to be working pretty well now. Only issue has been I actually need to output the slides to _book/_slides to get the relative linking in the book pages to work. This means if the slide render is run first, it gets overwritten by the book render. But rendering the slides second works fine and doesn't overwrite anything else in the _book output-dir.

I realised with this setup, there's no reason to have the separate _metadata.yml file, it was just left over from the bash script method. So all the shared info like author, bibliography, etc. can just go in the main _quarto.yml file.