Merge pull request #1387 from quarto-dev/revealjs/scroll-view

Author: cderv

_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json

@@ -1,3 +1,4 @@
 prerelease-title: Pre-release
 prerelease-lower: pre-release
-prerelease-mode: ""
+prerelease-mode: ""
+prerelease-subdomain: prerelease.

_quarto-prerelease.yml

@@ -1,3 +1,4 @@
 prerelease-title: Release Candidate
 prerelease-lower: release candidate
-prerelease-mode: Release Candidate
+prerelease-mode: Release Candidate
+prerelease-subdomain: ''

_quarto-rc.yml

@@ -573,7 +573,7 @@ If your content benefits from vertical orientation (e.g. you have optional drill
 
 ## Touch Navigation
 
-You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides.
+You can swipe to navigate through a presentation on any touch-enabled device. 
 
 If you wish to disable this you can set the `touch` option to `false`:
 

docs/presentations/revealjs/advanced.qmd

@@ -9,7 +9,7 @@ format:
     preview-links: auto
     logo: images/quarto.png
     css: styles.css
-    footer: <https://quarto.org>
+    footer: '[https://{{< meta prerelease-subdomain >}}quarto.org](https://{{< meta prerelease-subdomain >}}quarto.org)'
 resources:
   - demo.pdf
 ---
@@ -22,7 +22,7 @@ This presentation will show you examples of what you can do with Quarto and [Rev
 -   Including computations in slide output
 -   Image, video, and iframe backgrounds
 -   Fancy transitions and animations
--   Printing to PDF
+-   Activating scroll view
 
 ...and much more
 
@@ -43,7 +43,7 @@ function(input, output) {
 ```
 
 ::: footer
-Learn more: [Syntax Highlighting](https://quarto.org/docs/output-formats/html-code.html#highlighting)
+Learn more: [Syntax Highlighting](https://{{< meta prerelease-subdomain >}}quarto.org/docs/output-formats/html-code.html#highlighting)
 :::
 
 ## Code Animations {auto-animate="true"}
@@ -67,7 +67,7 @@ function(input, output) {
 ```
 
 ::: footer
-Learn more: [Code Animations](https://quarto.org/docs/presentations/revealjs/advanced.html#code-animations)
+Learn more: [Code Animations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#code-animations)
 :::
 
 ## Line Highlighting
@@ -89,7 +89,7 @@ plt.show()
 ```
 
 ::: footer
-Learn more: [Line Highlighting](https://quarto.org/docs/presentations/revealjs/#line-highlighting)
+Learn more: [Line Highlighting](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#line-highlighting)
 :::
 
 ## Executable Code
@@ -105,7 +105,7 @@ ggplot(mtcars, aes(hp, mpg, color = am)) +
 ```
 
 ::: footer
-Learn more: [Executable Code](https://quarto.org/docs/presentations/revealjs/#executable-code)
+Learn more: [Executable Code](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#executable-code)
 :::
 
 ## LaTeX Equations
@@ -148,7 +148,7 @@ a_{21}& =b_{21}&
 :::
 
 ::: footer
-Learn more: [LaTeX Equations](https://quarto.org/docs/authoring/markdown-basics.html#equations)
+Learn more: [LaTeX Equations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/authoring/markdown-basics.html#equations)
 :::
 
 ## Column Layout {.smaller}
@@ -173,7 +173,7 @@ knitr::kable(head(mtcars)[,c("mpg",	"cyl", "disp", "hp", "wt")])
 :::
 
 ::: footer
-Learn more: [Multiple Columns](https://quarto.org/docs/presentations/revealjs/#multiple-columns)
+Learn more: [Multiple Columns](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#multiple-columns)
 :::
 
 ## Incremental Lists
@@ -191,7 +191,7 @@ Lists can optionally be displayed incrementally:
 <br/> Insert pauses to make other types of content display incrementally.
 
 ::: footer
-Learn more: [Incremental Lists](https://quarto.org/docs/presentations/revealjs/#incremental-lists)
+Learn more: [Incremental Lists](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#incremental-lists)
 :::
 
 ## Fragments
@@ -227,7 +227,7 @@ Highlight red
 :::
 
 ::: footer
-Learn more: [Fragments](https://quarto.org/docs/presentations/revealjs/advanced.html#fragments)
+Learn more: [Fragments](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#fragments)
 :::
 
 ## Slide Backgrounds {background="#43464B"}
@@ -237,7 +237,7 @@ Set the `background` attribute on a slide to change the background color (all CS
 Different background transitions are available via the `background-transition` option.
 
 ::: footer
-Learn more: [Slide Backgrounds](https://quarto.org/docs/presentations/revealjs/#color-backgrounds)
+Learn more: [Slide Backgrounds](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#color-backgrounds)
 :::
 
 ## Media Backgrounds {background="#43464B" background-image="images/milky-way.jpeg"}
@@ -251,7 +251,7 @@ You can also use the following as a slide background:
 -   An iframe: `background-iframe`
 
 ::: footer
-Learn more: [Media Backgrounds](https://quarto.org/docs/presentations/revealjs/#image-backgrounds)
+Learn more: [Media Backgrounds](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#image-backgrounds)
 :::
 
 ## Absolute Position
@@ -265,7 +265,7 @@ Position images or other elements at precise locations
 ![](mini/images/kitten-300-200.jpeg){.absolute .fragment bottom="110" right="130" width="300"}
 
 ::: footer
-Learn more: [Absolute Position](https://quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)
+Learn more: [Absolute Position](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)
 :::
 
 ## Auto-Animate {auto-animate="true" auto-animate-easing="ease-in-out"}
@@ -284,7 +284,7 @@ Automatically animate matching elements across slides with Auto-Animate.
 :::
 
 ::: footer
-Learn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)
+Learn more: [Auto-Animate](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)
 :::
 
 ## Auto-Animate {auto-animate="true" auto-animate-easing="ease-in-out"}
@@ -303,7 +303,7 @@ Automatically animate matching elements across slides with Auto-Animate.
 :::
 
 ::: footer
-Learn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)
+Learn more: [Auto-Animate](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)
 :::
 
 ## Slide Transitions {.smaller}
@@ -320,7 +320,7 @@ The next few slides will transition using the `slide` transition
 | `zoom`     | Scale the incoming slide so it grows in from the center of the screen. |
 
 ::: footer
-Learn more: [Slide Transitions](https://quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)
+Learn more: [Slide Transitions](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)
 :::
 
 ## Tabsets {.smaller .scrollable transition="slide"}
@@ -343,7 +343,7 @@ knitr::kable(mtcars)
 :::
 
 ::: footer
-Learn more: [Tabsets](https://quarto.org/docs/presentations/revealjs/#tabsets)
+Learn more: [Tabsets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#tabsets)
 :::
 
 ## Interactive Slides {.smaller transition="slide"}
@@ -360,7 +360,7 @@ leaflet() %>%
 ```
 
 ::: footer
-Learn more: [Jupyter widgets](https://quarto.org/docs/interactive/widgets/jupyter.html), [htmlwidgets](https://quarto.org/docs/interactive/widgets/htmlwidgets.html)
+Learn more: [Jupyter widgets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/widgets/jupyter.html), [htmlwidgets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/widgets/htmlwidgets.html)
 :::
 
 ## Interactive Slides {.smaller transition="slide"}
@@ -388,7 +388,7 @@ plotActors(actors, talentWeight, looksWeight, minimum)
 ```
 
 ::: footer
-Learn more: [Observable](https://quarto.org/docs/interactive/ojs/), [Shiny](https://quarto.org/docs/interactive/shiny/), [Component Layout](https://quarto.org/docs/interactive/layout.html)
+Learn more: [Observable](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/ojs/), [Shiny](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/shiny/), [Component Layout](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/layout.html)
 :::
 
 ## Preview Links
@@ -402,12 +402,12 @@ Use the `preview-links` option to open links in an iframe on top of your slides.
 :::
 
 ::: footer
-Learn more: [Preview Links](https://quarto.org/docs/presentations/revealjs/presenting.html#preview-links)
+Learn more: [Preview Links](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#preview-links)
 :::
 
 ## Themes
 
-10 Built-in Themes (or [create your own](https://quarto.org/docs/presentations/revealjs/themes.html#creating-themes))
+10 Built-in Themes (or [create your own](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/themes.html#creating-themes))
 
 ::: {layout-ncol="2"}
 ![](images/moon.png)
@@ -416,7 +416,7 @@ Learn more: [Preview Links](https://quarto.org/docs/presentations/revealjs/prese
 :::
 
 ::: footer
-Learn more: [Themes](https://quarto.org/docs/presentations/revealjs/themes.html)
+Learn more: [Themes](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/themes.html)
 :::
 
 ## Easy Navigation
@@ -431,9 +431,9 @@ Quickly jump to other parts of your presentation
 Toggle the slide menu with the menu button (bottom left of slide) to go to other slides and access presentation tools.
 :::
 
-You can also press `m` to toggle the menu open and closed.
+You can also press {{< kbd m >}} to toggle the menu open and closed.
 
-You can also press `g` to toggle 'Jump To Slide' modal box to quickly go to one of your slide using its number or id.
+You can also press {{< kbd g >}} to toggle 'Jump To Slide' modal box to quickly go to one of your slide using its number or id.
 
 ::: footer
 Learn more: [Navigation](/docs/presentations/revealjs/presenting.qmd#navigation-menu) / [Jump To Slide](/docs/presentations/revealjs/presenting.qmd#jump-to-slide)
@@ -463,32 +463,44 @@ Use the chalkboard button at the bottom left of the slide to toggle the chalkboa
 Use the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide.
 :::
 
-You can also press `b` to toggle the chalkboard or `c` to toggle the notes canvas.
+You can also press {{< kbd b >}} to toggle the chalkboard or {{< kbd c >}} to toggle the notes canvas.
 
 ::: footer
-Learn more: [Chalkboard](https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard)
+Learn more: [Chalkboard](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#chalkboard)
 :::
 
 ## Point of View
 
-Press `o` to toggle overview mode:
+press {{< kbd o >}} to toggle overview mode:
 
 ![](images/overview-mode.png){.border}
 
-Hold down the `Alt` key (or `Ctrl` in Linux) and click on any element to zoom towards it---try it now on this slide.
+Hold down the {{< kbd Alt linux=Ctrl >}} and click on any element to zoom towards it---try it now on this slide.
 
 ::: footer
-Learn more: [Overview Mode](https://quarto.org/docs/presentations/revealjs/presenting.html#overview-mode), [Slide Zoom](https://quarto.org/docs/presentations/revealjs/presenting.html#slide-zoom)
+Learn more: [Overview Mode](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#overview-mode), [Slide Zoom](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#slide-zoom)
 :::
 
 ## Speaker View
 
-Press `s` (or use the presentation menu) to open speaker view
+press {{< kbd s >}} (or use the tools in presentation menu ![](../images/navigation-menu-icon.png){style="padding-bottom: 1px; margin: 0" width="0.5em" height="0.5em"}) to open speaker view
 
 ![](images/speaker-view.png){fig-align="center" style="border: 3px solid #dee2e6;" width="780"}
 
 ::: footer
-Learn more: [Speaker View](https://quarto.org/docs/presentations/revealjs/presenting.html#speaker-view)
+Learn more: [Speaker View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#speaker-view)
+:::
+
+## Scroll View {#scroll-view}
+
+Press {{< kbd r >}} (or use the tools in presentation menu ![](../images/navigation-menu-icon.png){style="padding-bottom: 1px; margin: 0" width="0.5em" height="0.5em"}) to open scroll view
+
+Try it now on this slide --- You'll see a scroll bar on the right and you can scroll down the presentation using your mouse.
+
+Scroll view behavior can be configured using `scroll-view` configuration. 
+
+::: footer
+Learn more: [Scroll View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#scroll-view)
 :::
 
 ## Authoring Tools {.smaller}
@@ -506,7 +518,7 @@ Live side-by-side preview for any notebook or text editor including Jupyter and
 :::
 
 ::: footer
-Learn more: [Jupyter](https://quarto.org/docs/tools/jupyter-lab.html), [VS Code](https://quarto.org/docs/tools/vscode.html), [Text Editors](https://quarto.org/docs/tools/text-editors.html)
+Learn more: [Jupyter](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/jupyter-lab.html), [VS Code](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/vscode.html), [Text Editors](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/text-editors.html)
 :::
 
 ## Authoring Tools {.smaller}
@@ -516,16 +528,16 @@ RStudio includes an integrated presentation preview pane
 ![](images/rstudio.png){.border width="900"}
 
 ::: footer
-Learn more: [RStudio](https://quarto.org/docs/tools/rstudio.html)
+Learn more: [RStudio](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/rstudio.html)
 :::
 
 ## And More...
 
--   [Touch](https://quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides)
--   [Footer & Logo](https://quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide or hide global footer)
--   [Auto-Slide](https://quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input)
--   [Multiplex](https://quarto.org/docs/presentations/revealjs/presenting.html#multiplex) (allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop).
+-   [Touch](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides)
+-   [Footer & Logo](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide or hide global footer)
+-   [Auto-Slide](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input)
+-   [Multiplex](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#multiplex) (allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop).
 
 ::: footer
-Learn more: [Quarto Presentations](https://quarto.org/docs/presentations/revealjs/)
+Learn more: [Quarto Presentations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/)
 :::