From 0bbe7a71e128afb3d490f1ae05cad6448ed02a6d Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Thu, 17 Oct 2024 15:07:07 +0200 Subject: [PATCH 01/17] edit in visual mode --- docs/presentations/revealjs/presenting.qmd | 91 +++++++++++----------- 1 file changed, 45 insertions(+), 46 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index c9e9422c88..da54ec6ddd 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -45,11 +45,11 @@ The navigation menu also includes a **Tools** pane that provides access to the v Use the following options to customize the appearance and behavior of the menu: -| Option | Description | -|-----------|--------------------------------------------------------------------------------------------------------------------| -| `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | -| `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | -| `numbers` | Add slide numbers to menu items. | +| Option | Description | +|----------------|--------------------------------------------------------| +| `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | +| `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | +| `numbers` | Add slide numbers to menu items. | For example: @@ -77,21 +77,19 @@ Note that you can still open the menu using the {{< kbd M >}} key even if the bu You can skip ahead to a specific slide using reveal.js' jump-to-slide shortcut. Here's how it works: -- Press {{< kbd G >}} to activate -- Type a slide number or an id -- Press Enter to confirm +- Press {{< kbd G >}} to activate +- Type a slide number or an id +- Press Enter to confirm -You can either enter -- a numeric value to navigate to the desired slide number -- a string, which will try to locate a slide with a matching id and navigate to it. +You can either enter - a numeric value to navigate to the desired slide number - a string, which will try to locate a slide with a matching id and navigate to it. This feature can be opt-out by setting `jump-to-slide: false` option: -````yaml +``` yaml format: revealjs: jump-to-slide: false -```` +``` ## Overview Mode @@ -110,6 +108,7 @@ Hold down the Alt key (or Ctrl in Linux) and click on any ```{=html} ``` + Alt or Ctrl click again to zoom back out. ## Speaker View @@ -177,7 +176,7 @@ Note: This feature has been confirmed to work in [Google Chrome](https://google. To Print to PDF, do the following: -1. Toggle into Print View using the {{< kbd E >}} key (or using the [Navigation Menu]) +1. Toggle into Print View using the {{< kbd E >}} key (or using the [Navigation Menu](#navigation-menu)) 2. Open the in-browser print dialog {{< kbd Ctrl+P win=Ctrl+P mac=Command+P >}}. 3. Change the **Destination** setting to **Save as PDF**. 4. Change the **Layout** to **Landscape**. @@ -195,12 +194,12 @@ Here's what the Chrome print dialog would look like with these settings enabled: There are a number of options that affected printed output that you may want to configure prior to printing: -| Option | Description | -|---------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `show-notes` | Include speaker notes (`true`, `false`, or `separate-page)` | -| `slide-number` | Include slide numbers (`true` or `false`) | +| Option | Description | +|-----------------|-------------------------------------------------------| +| `show-notes` | Include speaker notes (`true`, `false`, or `separate-page)` | +| `slide-number` | Include slide numbers (`true` or `false`) | | `pdf-max-pages-per-slide` | Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand to using the `pdf-max-pages-per-slide` option. | -| `pdf-separate-fragments` | Slides with multiple fragments are printed on a single page by default. To create a page for each fragment set this option to `true`. | +| `pdf-separate-fragments` | Slides with multiple fragments are printed on a single page by default. To create a page for each fragment set this option to `true`. | For example, the following specifies that we want to print speaker notes on their own page and include slide numbers: @@ -224,11 +223,11 @@ When you click on a hyperlink with `preview-links: true`, the link will be navig Available values for `preview-link` include: -| Value | Description | -|---------|-----------------------------------------------------------------------------------------| -| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | -| `true` | Always preview links | -| `false` | Never preview links (the default) | +| Value | Description | +|----------------|--------------------------------------------------------| +| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | +| `true` | Always preview links | +| `false` | Never preview links (the default) | For example, here we set `preview-links` to `auto`: @@ -310,8 +309,8 @@ There are two main ways to publish Reveal presentations: --- ``` - All of the dependent images, CSS styles, and other assets will be contained within the HTML file created by Quarto. - + All of the dependent images, CSS styles, and other assets will be contained within the HTML file created by Quarto. + ::: {.callout-note appearance="simple"} Note that specifying `embed-resources` can slow down rendering by a couple of seconds, so you may want to enable `embed-resources` only when you are ready to publish. Also note that Reveal plugin [Chalkboard] is not compatible with `embed-resources` --- when [Chalkboard] plugin is enabled, specifying `embed-resources: true` will result an error. ::: @@ -322,12 +321,12 @@ See the documentation on [Publishing HTML](/docs/publishing/index.qmd) for detai There are several navigational cues provided as part of Reveal presentations and corresponding options that control them: -| Option | Description | -|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `controls` | Show arrow controls for navigating through slides (defaults to `auto`, which will show controls when vertical slides are present or when the deck is embedded in an iframe). | -| `progress` | Show a progress bar at the bottom (defaults to `true`). | -| `history` | Push slide changes to the browser history. Defaults to `true`, which means that the browser Forward/Back buttons can be used for slide navigation. | -| `hash-type` | Type of URL hash to use for slides. Defaults to `title` which is derived from the slide title. You can also specify `number`. | +| Option | Description | +|----------------|--------------------------------------------------------| +| `controls` | Show arrow controls for navigating through slides (defaults to `auto`, which will show controls when vertical slides are present or when the deck is embedded in an iframe). | +| `progress` | Show a progress bar at the bottom (defaults to `true`). | +| `history` | Push slide changes to the browser history. Defaults to `true`, which means that the browser Forward/Back buttons can be used for slide navigation. | +| `hash-type` | Type of URL hash to use for slides. Defaults to `title` which is derived from the slide title. You can also specify `number`. | For example, the following configuration hides the progress bar and specifies that we want to use browser history: @@ -416,16 +415,16 @@ format: The following options are available to customize the behavior and appearance of the chalkboard: -| Option | Description | -|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------| -| `theme` | Can be set to either `chalkboard` (default) or `whiteboard`. | -| `boardmarker-width` | The drawing width of the boardmarker; larger values draw thicker line. Defaults to `3`. | -| `chalk-width` | The drawing width of the chalk; larger values draw thicker lines. Defaults to `7`. | -| `chalk-effect` | A float in the range `[0.0, 1.0]`, the intensity of the chalk effect on the chalk board. Full effect (default) `1.0`, no effect `0.0`. | -| `src` | Optional file name for pre-recorded drawings (download drawings using the D key). | -| `read-only` | Configuration option to prevent changes to existing drawings. `true`: no changes can be made, `false` (default): changes can be made. | -| `buttons` | Add chalkboard buttons at the bottom of the slide (defaults to `true`). | -| `transition` | Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed. | +| Option | Description | +|-----------------|-------------------------------------------------------| +| `theme` | Can be set to either `chalkboard` (default) or `whiteboard`. | +| `boardmarker-width` | The drawing width of the boardmarker; larger values draw thicker line. Defaults to `3`. | +| `chalk-width` | The drawing width of the chalk; larger values draw thicker lines. Defaults to `7`. | +| `chalk-effect` | A float in the range `[0.0, 1.0]`, the intensity of the chalk effect on the chalk board. Full effect (default) `1.0`, no effect `0.0`. | +| `src` | Optional file name for pre-recorded drawings (download drawings using the D key). | +| `read-only` | Configuration option to prevent changes to existing drawings. `true`: no changes can be made, `false` (default): changes can be made. | +| `buttons` | Add chalkboard buttons at the bottom of the slide (defaults to `true`). | +| `transition` | Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed. | For example, the following configuration specifies that we want to use the `whiteboard` theme with a (thicker) boardmarker width, and that we want to hide the chalkboard buttons at the bottom of each slide: @@ -466,9 +465,9 @@ format: Rendering the presentation will result in two HTML files being created by Quarto: -| File | Description | -|-----------------------------|------------------------------------------------------------------------------------------------------------------------------------| -| `presentation.html` | This is the file you should publish online and that your audience should view. | +| File | Description | +|------------------|------------------------------------------------------| +| `presentation.html` | This is the file you should publish online and that your audience should view. | | `presentation-speaker.html` | This is the file that you should present from . This file can remain on your computer and does not need to be published elsewhere. | The two versions of the presentation will be synchronized such that when the speaker version switches slides the viewers also all switch to the same slide. @@ -516,4 +515,4 @@ See these articles lo learn more about using Reveal: - [Reveal Basics](index.qmd) covers the basic mechanics of creating presentations. - [Advanced Reveal](advanced.qmd) delves into transitions, animations, advanced layout and positioning, and other options available for customizing presentations. -- [Reveal Themes](themes.qmd) talks about using and customizing existing themes as well as creating brand new themes. +- [Reveal Themes](themes.qmd) talks about using and customizing existing themes as well as creating brand new themes. \ No newline at end of file From 451be4134b68e27e20fca44d89e5ebd4f7874359 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Thu, 17 Oct 2024 15:40:28 +0200 Subject: [PATCH 02/17] visual mode edit has modified again some tables --- docs/presentations/revealjs/presenting.qmd | 105 ++++++++++++++------- 1 file changed, 70 insertions(+), 35 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index da54ec6ddd..cbf96348cd 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -6,12 +6,17 @@ title: "Presenting Slides" This article covers the mechanics of presenting slides with Reveal. Basic navigation is done using the following keyboard shortcuts: ++----------------------------+--------------------------------------------+ | Action | Keys | -|----------------------------|--------------------------------------------| ++============================+============================================+ | Next slide | → SPACE N | ++----------------------------+--------------------------------------------+ | Previous slide | ← P | ++----------------------------+--------------------------------------------+ | Navigate without fragments | Alt → Alt ← | ++----------------------------+--------------------------------------------+ | Jump to first/last slide | Shift → Shift ← | ++----------------------------+--------------------------------------------+ ::: {.callout-tip appearance="simple"} You will often want to enter fullscreen mode when presenting. You can do this by pressing the F key. @@ -45,11 +50,15 @@ The navigation menu also includes a **Tools** pane that provides access to the v Use the following options to customize the appearance and behavior of the menu: -| Option | Description | -|----------------|--------------------------------------------------------| -| `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | -| `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | -| `numbers` | Add slide numbers to menu items. | ++---------------+--------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++===============+====================================================================================================================+ +| `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | ++---------------+--------------------------------------------------------------------------------------------------------------------+ +| `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | ++---------------+--------------------------------------------------------------------------------------------------------------------+ +| `numbers` | Add slide numbers to menu items. | ++---------------+--------------------------------------------------------------------------------------------------------------------+ For example: @@ -194,12 +203,17 @@ Here's what the Chrome print dialog would look like with these settings enabled: There are a number of options that affected printed output that you may want to configure prior to printing: -| Option | Description | -|-----------------|-------------------------------------------------------| -| `show-notes` | Include speaker notes (`true`, `false`, or `separate-page)` | -| `slide-number` | Include slide numbers (`true` or `false`) | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++===========================+======================================================================================================================================================================================+ +| `show-notes` | Include speaker notes (`true`, `false`, or `separate-page)` | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `slide-number` | Include slide numbers (`true` or `false`) | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `pdf-max-pages-per-slide` | Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand to using the `pdf-max-pages-per-slide` option. | -| `pdf-separate-fragments` | Slides with multiple fragments are printed on a single page by default. To create a page for each fragment set this option to `true`. | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `pdf-separate-fragments` | Slides with multiple fragments are printed on a single page by default. To create a page for each fragment set this option to `true`. | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ For example, the following specifies that we want to print speaker notes on their own page and include slide numbers: @@ -223,11 +237,15 @@ When you click on a hyperlink with `preview-links: true`, the link will be navig Available values for `preview-link` include: -| Value | Description | -|----------------|--------------------------------------------------------| -| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | -| `true` | Always preview links | -| `false` | Never preview links (the default) | ++---------------+-----------------------------------------------------------------------------------------+ +| Value | Description | ++===============+=========================================================================================+ +| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | ++---------------+-----------------------------------------------------------------------------------------+ +| `true` | Always preview links | ++---------------+-----------------------------------------------------------------------------------------+ +| `false` | Never preview links (the default) | ++---------------+-----------------------------------------------------------------------------------------+ For example, here we set `preview-links` to `auto`: @@ -321,12 +339,17 @@ See the documentation on [Publishing HTML](/docs/publishing/index.qmd) for detai There are several navigational cues provided as part of Reveal presentations and corresponding options that control them: -| Option | Description | -|----------------|--------------------------------------------------------| -| `controls` | Show arrow controls for navigating through slides (defaults to `auto`, which will show controls when vertical slides are present or when the deck is embedded in an iframe). | -| `progress` | Show a progress bar at the bottom (defaults to `true`). | -| `history` | Push slide changes to the browser history. Defaults to `true`, which means that the browser Forward/Back buttons can be used for slide navigation. | -| `hash-type` | Type of URL hash to use for slides. Defaults to `title` which is derived from the slide title. You can also specify `number`. | ++---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++===============+==============================================================================================================================================================================+ +| `controls` | Show arrow controls for navigating through slides (defaults to `auto`, which will show controls when vertical slides are present or when the deck is embedded in an iframe). | ++---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `progress` | Show a progress bar at the bottom (defaults to `true`). | ++---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `history` | Push slide changes to the browser history. Defaults to `true`, which means that the browser Forward/Back buttons can be used for slide navigation. | ++---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `hash-type` | Type of URL hash to use for slides. Defaults to `title` which is derived from the slide title. You can also specify `number`. | ++---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ For example, the following configuration hides the progress bar and specifies that we want to use browser history: @@ -415,16 +438,25 @@ format: The following options are available to customize the behavior and appearance of the chalkboard: -| Option | Description | -|-----------------|-------------------------------------------------------| -| `theme` | Can be set to either `chalkboard` (default) or `whiteboard`. | -| `boardmarker-width` | The drawing width of the boardmarker; larger values draw thicker line. Defaults to `3`. | -| `chalk-width` | The drawing width of the chalk; larger values draw thicker lines. Defaults to `7`. | -| `chalk-effect` | A float in the range `[0.0, 1.0]`, the intensity of the chalk effect on the chalk board. Full effect (default) `1.0`, no effect `0.0`. | -| `src` | Optional file name for pre-recorded drawings (download drawings using the D key). | -| `read-only` | Configuration option to prevent changes to existing drawings. `true`: no changes can be made, `false` (default): changes can be made. | -| `buttons` | Add chalkboard buttons at the bottom of the slide (defaults to `true`). | -| `transition` | Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++=====================+=================================================================================================================================================+ +| `theme` | Can be set to either `chalkboard` (default) or `whiteboard`. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `boardmarker-width` | The drawing width of the boardmarker; larger values draw thicker line. Defaults to `3`. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `chalk-width` | The drawing width of the chalk; larger values draw thicker lines. Defaults to `7`. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `chalk-effect` | A float in the range `[0.0, 1.0]`, the intensity of the chalk effect on the chalk board. Full effect (default) `1.0`, no effect `0.0`. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `src` | Optional file name for pre-recorded drawings (download drawings using the D key). | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `read-only` | Configuration option to prevent changes to existing drawings. `true`: no changes can be made, `false` (default): changes can be made. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `buttons` | Add chalkboard buttons at the bottom of the slide (defaults to `true`). | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `transition` | Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ For example, the following configuration specifies that we want to use the `whiteboard` theme with a (thicker) boardmarker width, and that we want to hide the chalkboard buttons at the bottom of each slide: @@ -465,10 +497,13 @@ format: Rendering the presentation will result in two HTML files being created by Quarto: -| File | Description | -|------------------|------------------------------------------------------| -| `presentation.html` | This is the file you should publish online and that your audience should view. | ++-----------------------------+------------------------------------------------------------------------------------------------------------------------------------+ +| File | Description | ++=============================+====================================================================================================================================+ +| `presentation.html` | This is the file you should publish online and that your audience should view. | ++-----------------------------+------------------------------------------------------------------------------------------------------------------------------------+ | `presentation-speaker.html` | This is the file that you should present from . This file can remain on your computer and does not need to be published elsewhere. | ++-----------------------------+------------------------------------------------------------------------------------------------------------------------------------+ The two versions of the presentation will be synchronized such that when the speaker version switches slides the viewers also all switch to the same slide. From fd1b0a8fd898c7fd6d61fed88f9b581d078de593 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Thu, 17 Oct 2024 15:40:47 +0200 Subject: [PATCH 03/17] Add Scroll View documentation and configuration --- docs/presentations/revealjs/presenting.qmd | 70 +++++++++++++++++++++- 1 file changed, 68 insertions(+), 2 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index cbf96348cd..036a26420b 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -175,7 +175,7 @@ The `show-slide-number` option supports the following values: | `print` | Only show slide numbers when printing to PDF | | `speaker` | Only show slide numbers in the speaker view | -## Print to PDF +## Print to PDF {#print-to-pdf} Reveal presentations can be exported to PDF via a special print stylesheet. @@ -314,7 +314,7 @@ It's also possible to override the slide duration for individual slides and frag There are two main ways to publish Reveal presentations: -1. As a PDF file---see [Print to PDF] above for details on how to do this. +1. As a PDF file---see [Print to PDF](#print-to-pdf) above for details on how to do this. 2. As an HTML file. For HTML, it's often most convenient to distribute the presentation as a single self contained file. To do this, specify the `embed-resources` option: @@ -544,6 +544,72 @@ format: Note that the `secret` value will be included in only the speaker version of the presentation. +## Scroll View + +{{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}} + +Reveal presentations be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is is always available in all presentation as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used a default view on small screen (e.g. viewing a presentations on mobile). + +### Entering Scroll View {#scroll-view-toggle} + +To enter scroll view , do one the following: + +- Toggle into Scroll View using the {{< kbd R >}} key + +- Toggle into Scroll View using the [Navigation Menu](#navigation-menu) + +- Toggle into Scroll View by adding `?view=scroll` to the url, e.g. `https://quarto.org/docs/presentations/revealjs/demo/?view=scroll` + +You can easily toggle out of Scroll View by the same action. + +### Default view mode + +Scroll View can be made as default mode for the presentation, using default configuration. This can be configure using `scroll-view` configuration. + +``` yaml +format: + revealjs: + scroll-view: true +``` + +### Scroll View Options + +Scroll View in Reveal can be configured using the following option under `scroll-view`. + ++--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++====================+==============================================================================================================================================================================================================================================+ +| `progress` | Show the scrollbar while scrolling and hide while idle (default `auto`). Set to `true` to always show, `false` to always hide. | ++--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | ++--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | ++--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `activation-width` | Control scroll view activation width. The scroll view is automatically unable when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value to automatically trigger on bigger or smaller widths. | ++--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View]). `scroll-view: true` is equivalent to | +| | | +| | ``` yaml | +| | scroll-view: | +| | activate: true | +| | ``` | ++--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ + +For example, the following specifies that we want a compact layout with proximity snap mode, and always showing the progress scrollbar while keeping activation to scroll view manual, even disabling on mobile view: + +``` yaml +--- +title: "Presentation" +format: + revealjs: + scroll-view: + layout: compact + snap: proximity + progress: true + activation-width: 0 +--- +``` + ## Learning More See these articles lo learn more about using Reveal: From 52635fab8b6e8bb9ab77c4dcd87106b0504d8838 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Thu, 17 Oct 2024 15:41:36 +0200 Subject: [PATCH 04/17] New visual mode edit --- docs/presentations/revealjs/presenting.qmd | 60 +++++++++++----------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index 036a26420b..77a47e01f8 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -50,15 +50,15 @@ The navigation menu also includes a **Tools** pane that provides access to the v Use the following options to customize the appearance and behavior of the menu: -+---------------+--------------------------------------------------------------------------------------------------------------------+ -| Option | Description | -+===============+====================================================================================================================+ -| `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | -+---------------+--------------------------------------------------------------------------------------------------------------------+ -| `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | -+---------------+--------------------------------------------------------------------------------------------------------------------+ -| `numbers` | Add slide numbers to menu items. | -+---------------+--------------------------------------------------------------------------------------------------------------------+ ++------------+--------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++============+====================================================================================================================+ +| `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | ++------------+--------------------------------------------------------------------------------------------------------------------+ +| `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | ++------------+--------------------------------------------------------------------------------------------------------------------+ +| `numbers` | Add slide numbers to menu items. | ++------------+--------------------------------------------------------------------------------------------------------------------+ For example: @@ -237,15 +237,15 @@ When you click on a hyperlink with `preview-links: true`, the link will be navig Available values for `preview-link` include: -+---------------+-----------------------------------------------------------------------------------------+ -| Value | Description | -+===============+=========================================================================================+ -| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | -+---------------+-----------------------------------------------------------------------------------------+ -| `true` | Always preview links | -+---------------+-----------------------------------------------------------------------------------------+ -| `false` | Never preview links (the default) | -+---------------+-----------------------------------------------------------------------------------------+ ++-------------+-----------------------------------------------------------------------------------------+ +| Value | Description | ++=============+=========================================================================================+ +| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | ++-------------+-----------------------------------------------------------------------------------------+ +| `true` | Always preview links | ++-------------+-----------------------------------------------------------------------------------------+ +| `false` | Never preview links (the default) | ++-------------+-----------------------------------------------------------------------------------------+ For example, here we set `preview-links` to `auto`: @@ -339,17 +339,17 @@ See the documentation on [Publishing HTML](/docs/publishing/index.qmd) for detai There are several navigational cues provided as part of Reveal presentations and corresponding options that control them: -+---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| Option | Description | -+===============+==============================================================================================================================================================================+ -| `controls` | Show arrow controls for navigating through slides (defaults to `auto`, which will show controls when vertical slides are present or when the deck is embedded in an iframe). | -+---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `progress` | Show a progress bar at the bottom (defaults to `true`). | -+---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `history` | Push slide changes to the browser history. Defaults to `true`, which means that the browser Forward/Back buttons can be used for slide navigation. | -+---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `hash-type` | Type of URL hash to use for slides. Defaults to `title` which is derived from the slide title. You can also specify `number`. | -+---------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++=============+==============================================================================================================================================================================+ +| `controls` | Show arrow controls for navigating through slides (defaults to `auto`, which will show controls when vertical slides are present or when the deck is embedded in an iframe). | ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `progress` | Show a progress bar at the bottom (defaults to `true`). | ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `history` | Push slide changes to the browser history. Defaults to `true`, which means that the browser Forward/Back buttons can be used for slide navigation. | ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `hash-type` | Type of URL hash to use for slides. Defaults to `title` which is derived from the slide title. You can also specify `number`. | ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ For example, the following configuration hides the progress bar and specifies that we want to use browser history: @@ -587,7 +587,7 @@ Scroll View in Reveal can be configured using the following option under `scroll +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `activation-width` | Control scroll view activation width. The scroll view is automatically unable when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value to automatically trigger on bigger or smaller widths. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View]). `scroll-view: true` is equivalent to | +| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | | | | | | ``` yaml | | | scroll-view: | From ec07e61d6538c93275e714ea2f1d7e4556834ab3 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 11:23:14 +0200 Subject: [PATCH 05/17] Apply suggestions from code review Co-authored-by: Charlotte Wickham --- docs/presentations/revealjs/presenting.qmd | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index 77a47e01f8..80e72231ca 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -548,11 +548,11 @@ Note that the `secret` value will be included in only the speaker version of the {{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}} -Reveal presentations be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is is always available in all presentation as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used a default view on small screen (e.g. viewing a presentations on mobile). +Reveal presentations can be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is always available in presentations as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used as the default view on small screens (e.g. viewing a presentation on a mobile). ### Entering Scroll View {#scroll-view-toggle} -To enter scroll view , do one the following: +To enter Scroll View , do one the following: - Toggle into Scroll View using the {{< kbd R >}} key @@ -562,9 +562,9 @@ To enter scroll view , do one the following: You can easily toggle out of Scroll View by the same action. -### Default view mode +### Default View Mode -Scroll View can be made as default mode for the presentation, using default configuration. This can be configure using `scroll-view` configuration. +Scroll View can be set as the default mode for the presentation using the `scroll-view` option: ``` yaml format: @@ -574,18 +574,18 @@ format: ### Scroll View Options -Scroll View in Reveal can be configured using the following option under `scroll-view`. +Scroll View can be configured using the following options under `scroll-view`: +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Option | Description | +====================+==============================================================================================================================================================================================================================================+ -| `progress` | Show the scrollbar while scrolling and hide while idle (default `auto`). Set to `true` to always show, `false` to always hide. | +| `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `activation-width` | Control scroll view activation width. The scroll view is automatically unable when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value to automatically trigger on bigger or smaller widths. | +| `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value to automatically trigger on bigger or smaller widths. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | | | | @@ -595,7 +595,7 @@ Scroll View in Reveal can be configured using the following option under `scroll | | ``` | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -For example, the following specifies that we want a compact layout with proximity snap mode, and always showing the progress scrollbar while keeping activation to scroll view manual, even disabling on mobile view: +For example, the following specifies that we want a compact layout, proximity snap mode, to always show the progress scrollbar, and to never automatically activate for small screens: ``` yaml --- From 00c8ee8e84232ef65fe15dc347ea36a829df6e37 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 11:20:14 +0200 Subject: [PATCH 06/17] Use kbd shortcute where possible --- docs/presentations/revealjs/presenting.qmd | 78 +++++++++++----------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index 80e72231ca..6be21d8505 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -19,7 +19,7 @@ This article covers the mechanics of presenting slides with Reveal. Basic naviga +----------------------------+--------------------------------------------+ ::: {.callout-tip appearance="simple"} -You will often want to enter fullscreen mode when presenting. You can do this by pressing the F key. +You will often want to enter fullscreen mode when presenting. You can do this by pressing the {{< kbd F >}} key. ::: In addition to basic keyboard navigation, Reveal supports several more advanced capabilities, including: @@ -43,22 +43,22 @@ Quarto includes a built in version of the [reveal.js-menu](https://github.com/de ::: ::: {.callout-tip appearance="simple"} -You can also open the navigation menu by pressing the M key. +You can also open the navigation menu by pressing the {{< kbd M >}} key. ::: The navigation menu also includes a **Tools** pane that provides access to the various other navigation tools including Fullscreen, Speaker View, Overview Mode, and Print to PDF. Use the following options to customize the appearance and behavior of the menu: -+------------+--------------------------------------------------------------------------------------------------------------------+ -| Option | Description | -+============+====================================================================================================================+ -| `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | -+------------+--------------------------------------------------------------------------------------------------------------------+ -| `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | -+------------+--------------------------------------------------------------------------------------------------------------------+ -| `numbers` | Add slide numbers to menu items. | -+------------+--------------------------------------------------------------------------------------------------------------------+ ++-----------+--------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++===========+====================================================================================================================+ +| `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | ++-----------+--------------------------------------------------------------------------------------------------------------------+ +| `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | ++-----------+--------------------------------------------------------------------------------------------------------------------+ +| `numbers` | Add slide numbers to menu items. | ++-----------+--------------------------------------------------------------------------------------------------------------------+ For example: @@ -107,18 +107,18 @@ Overview mode provides an alternate view that shows you a thumbnail for each sli ![](images/overview-mode.png){.border fig-alt="Screenshot of slides shown in overview mode, showing a series of thumbnails for the slides in the presentation."} ::: {.callout-tip appearance="simple"} -You can enable Overview Mode by pressing the O key. +You can enable Overview Mode by pressing the {{< kbd O >}} key. ::: ## Slide Zoom -Hold down the Alt key (or Ctrl in Linux) and click on any element to zoom towards it. Try zooming in on one of these images: +Hold down the {{< kbd Alt linux=Ctrl >}} key and click on any element to zoom towards it. Try zooming in on one of these images: ```{=html} ``` -Alt or Ctrl click again to zoom back out. +{{< kbd Alt >}} or {{< kbd Ctrl >}} click again to zoom back out. ## Speaker View @@ -127,7 +127,7 @@ The speaker view shows the current slide along with the upcoming slide, a timer, ![](images/speaker-view.png){.border fig-alt="Screenshot of reveal.js presentation in Speaker View. On the right, the active slide is shown. The left column contains three sections which show (from top to bottom): the upcoming slide, time (both elapsed and clock time), and a section where speaker notes go."} ::: {.callout-tip appearance="simple"} -You can enable Speaker View by pressing the S key. +You can enable Speaker View by pressing the {{< kbd S >}} key. ::: You can add speaker notes to a slide using a div with class `.notes`. For example: @@ -186,7 +186,7 @@ Note: This feature has been confirmed to work in [Google Chrome](https://google. To Print to PDF, do the following: 1. Toggle into Print View using the {{< kbd E >}} key (or using the [Navigation Menu](#navigation-menu)) -2. Open the in-browser print dialog {{< kbd Ctrl+P win=Ctrl+P mac=Command+P >}}. +2. Open the in-browser print dialog {{< kbd Ctrl+P mac=Command+P >}}. 3. Change the **Destination** setting to **Save as PDF**. 4. Change the **Layout** to **Landscape**. 5. Change the **Margins** to **None**. @@ -237,15 +237,15 @@ When you click on a hyperlink with `preview-links: true`, the link will be navig Available values for `preview-link` include: -+-------------+-----------------------------------------------------------------------------------------+ -| Value | Description | -+=============+=========================================================================================+ -| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | -+-------------+-----------------------------------------------------------------------------------------+ -| `true` | Always preview links | -+-------------+-----------------------------------------------------------------------------------------+ -| `false` | Never preview links (the default) | -+-------------+-----------------------------------------------------------------------------------------+ ++------------+-----------------------------------------------------------------------------------------+ +| Value | Description | ++============+=========================================================================================+ +| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | ++------------+-----------------------------------------------------------------------------------------+ +| `true` | Always preview links | ++------------+-----------------------------------------------------------------------------------------+ +| `false` | Never preview links (the default) | ++------------+-----------------------------------------------------------------------------------------+ For example, here we set `preview-links` to `auto`: @@ -298,7 +298,7 @@ format: --- ``` -A play/pause control element will automatically appear for auto-sliding decks. Sliding is automatically paused if the user starts interacting with the deck. It's also possible to pause or resume sliding by pressing A on the keyboard. +A play/pause control element will automatically appear for auto-sliding decks. Sliding is automatically paused if the user starts interacting with the deck. It's also possible to pause or resume sliding by pressing {{< kbd A >}} on the keyboard. You can disable the auto-slide controls and prevent sliding from being paused by specifying `auto-slide-stoppable: false`. @@ -388,21 +388,21 @@ Here are what the notes canvas and chalkboard look like when activated: ![](images/chalkboard.png){.border fig-alt="Screenshot of chalkboard canvas with color selector on the left, and paintbrush tool at the bottom. The background is dark, and the equation 'y = mx + b' has been drawn in white with a chalky texture."} ::: -To toggle the notes canvas on and off use the ![](images/canvas-icon.png){width="19" height="17"} button or the C key. +To toggle the notes canvas on and off use the ![](images/canvas-icon.png){width="19" height="17"} button or the {{< kbd C >}} key. -To toggle the chalkboard on and off use the ![](images/chalkboard-icon.png){width="19" height="20"} button or the B key. +To toggle the chalkboard on and off use the ![](images/chalkboard-icon.png){width="19" height="20"} button or the {{< kbd B >}} key. Here are all of the keyboard shortcuts associated with the notes canvas and chalkboard: -| Action | Key | -|-------------------------|----------------------| -| Toggle notes canvas | C | -| Toggle chalkboard | B | -| Reset all drawings | BACKSPACE | -| Clear drawings on slide | DEL | -| Cycle colors forward | X | -| Cycle colors backward | Y | -| Download drawings | D | +| Action | Key | +|-------------------------|-----------------------| +| Toggle notes canvas | {{< kbd C >}} | +| Toggle chalkboard | {{< kbd B >}} | +| Reset all drawings | {{< kbd BACKSPACE >}} | +| Clear drawings on slide | {{< kbd DEL >}} | +| Cycle colors forward | {{< kbd X >}} | +| Cycle colors backward | {{< kbd Y >}} | +| Download drawings | {{< kbd D >}} | The following mouse and touch gestures can be used for interacting with drawings: @@ -422,7 +422,7 @@ The following mouse and touch gestures can be used for interacting with drawings ### Restoring Drawings -The D key downloads any active drawings into a JSON file. You can then restore these drawings when showing your presentation using the `src` option. For example: +The {{< kbd D >}} key downloads any active drawings into a JSON file. You can then restore these drawings when showing your presentation using the `src` option. For example: ``` yaml --- @@ -449,7 +449,7 @@ The following options are available to customize the behavior and appearance of +---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ | `chalk-effect` | A float in the range `[0.0, 1.0]`, the intensity of the chalk effect on the chalk board. Full effect (default) `1.0`, no effect `0.0`. | +---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ -| `src` | Optional file name for pre-recorded drawings (download drawings using the D key). | +| `src` | Optional file name for pre-recorded drawings (download drawings using the {{< kbd D >}} key). | +---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ | `read-only` | Configuration option to prevent changes to existing drawings. `true`: no changes can be made, `false` (default): changes can be made. | +---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ From bdef2d0df250d169615d1864f373d402dc8d4f48 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 11:30:39 +0200 Subject: [PATCH 07/17] revert change in markdown table as commiting from github the review messes up the table. --- docs/presentations/revealjs/presenting.qmd | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index 6be21d8505..8e9993db4a 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -579,13 +579,13 @@ Scroll View can be configured using the following options under `scroll-view`: +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Option | Description | +====================+==============================================================================================================================================================================================================================================+ -| `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. | +| `progress` | Show the scrollbar while scrolling and hide while idle (default `auto`). Set to `true` to always show, `false` to always hide. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value to automatically trigger on bigger or smaller widths. | +| `activation-width` | Control scroll view activation width. The scroll view is automatically unable when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value to automatically trigger on bigger or smaller widths. | +--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | | | | From 42e60e790400ab2ddb51dc1f373ca6b700c3a2a7 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 11:32:57 +0200 Subject: [PATCH 08/17] Add review from Charlotte in Visual Mode --- docs/presentations/revealjs/presenting.qmd | 36 +++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index 8e9993db4a..f409f6bca0 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -576,24 +576,24 @@ format: Scroll View can be configured using the following options under `scroll-view`: -+--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| Option | Description | -+====================+==============================================================================================================================================================================================================================================+ -| `progress` | Show the scrollbar while scrolling and hide while idle (default `auto`). Set to `true` to always show, `false` to always hide. | -+--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | -+--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | -+--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `activation-width` | Control scroll view activation width. The scroll view is automatically unable when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value to automatically trigger on bigger or smaller widths. | -+--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | -| | | -| | ``` yaml | -| | scroll-view: | -| | activate: true | -| | ``` | -+--------------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++====================+===========================================================================================================================================================================================================================================================+ +| `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value in pixels to automatically trigger on bigger or smaller widths. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | +| | | +| | ``` yaml | +| | scroll-view: | +| | activate: true | +| | ``` | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ For example, the following specifies that we want a compact layout, proximity snap mode, to always show the progress scrollbar, and to never automatically activate for small screens: From b23b6b0a03a80b14bb2f6f7263e18d2d3d8fc552 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 11:37:39 +0200 Subject: [PATCH 09/17] Move Scroll View mode doc up in the page --- docs/presentations/revealjs/presenting.qmd | 132 ++++++++++----------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index f409f6bca0..911cbf0505 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -110,6 +110,72 @@ Overview mode provides an alternate view that shows you a thumbnail for each sli You can enable Overview Mode by pressing the {{< kbd O >}} key. ::: +## Scroll View + +{{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}} + +Reveal presentations can be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is always available in presentations as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used as the default view on small screens (e.g. viewing a presentation on a mobile). + +### Entering Scroll View {#scroll-view-toggle} + +To enter Scroll View , do one the following: + +- Toggle into Scroll View using the {{< kbd R >}} key + +- Toggle into Scroll View using the [Navigation Menu](#navigation-menu) + +- Toggle into Scroll View by adding `?view=scroll` to the url, e.g. `https://quarto.org/docs/presentations/revealjs/demo/?view=scroll` + +You can easily toggle out of Scroll View by the same action. + +### Default View Mode + +Scroll View can be set as the default mode for the presentation using the `scroll-view` option: + +``` yaml +format: + revealjs: + scroll-view: true +``` + +### Scroll View Options + +Scroll View can be configured using the following options under `scroll-view`: + ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++====================+===========================================================================================================================================================================================================================================================+ +| `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value in pixels to automatically trigger on bigger or smaller widths. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | +| | | +| | ``` yaml | +| | scroll-view: | +| | activate: true | +| | ``` | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ + +For example, the following specifies that we want a compact layout, proximity snap mode, to always show the progress scrollbar, and to never automatically activate for small screens: + +``` yaml +--- +title: "Presentation" +format: + revealjs: + scroll-view: + layout: compact + snap: proximity + progress: true + activation-width: 0 +--- +``` + ## Slide Zoom Hold down the {{< kbd Alt linux=Ctrl >}} key and click on any element to zoom towards it. Try zooming in on one of these images: @@ -544,72 +610,6 @@ format: Note that the `secret` value will be included in only the speaker version of the presentation. -## Scroll View - -{{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}} - -Reveal presentations can be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is always available in presentations as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used as the default view on small screens (e.g. viewing a presentation on a mobile). - -### Entering Scroll View {#scroll-view-toggle} - -To enter Scroll View , do one the following: - -- Toggle into Scroll View using the {{< kbd R >}} key - -- Toggle into Scroll View using the [Navigation Menu](#navigation-menu) - -- Toggle into Scroll View by adding `?view=scroll` to the url, e.g. `https://quarto.org/docs/presentations/revealjs/demo/?view=scroll` - -You can easily toggle out of Scroll View by the same action. - -### Default View Mode - -Scroll View can be set as the default mode for the presentation using the `scroll-view` option: - -``` yaml -format: - revealjs: - scroll-view: true -``` - -### Scroll View Options - -Scroll View can be configured using the following options under `scroll-view`: - -+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| Option | Description | -+====================+===========================================================================================================================================================================================================================================================+ -| `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. | -+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | -+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | -+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value in pixels to automatically trigger on bigger or smaller widths. | -+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | -| | | -| | ``` yaml | -| | scroll-view: | -| | activate: true | -| | ``` | -+--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ - -For example, the following specifies that we want a compact layout, proximity snap mode, to always show the progress scrollbar, and to never automatically activate for small screens: - -``` yaml ---- -title: "Presentation" -format: - revealjs: - scroll-view: - layout: compact - snap: proximity - progress: true - activation-width: 0 ---- -``` - ## Learning More See these articles lo learn more about using Reveal: From 36e7331884da2b8fe75b1a186063cbdf23ab3f08 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 13:29:50 +0200 Subject: [PATCH 10/17] Tweak url in Revealjs demo to point to prerelease website This require a new meta to use as we want absolute here and not relative like [](/docs/...) gives us --- _quarto-prerelease.yml | 3 +- _quarto-rc.yml | 3 +- docs/presentations/revealjs/demo/index.qmd | 63 +++++++++++----------- 3 files changed, 36 insertions(+), 33 deletions(-) diff --git a/_quarto-prerelease.yml b/_quarto-prerelease.yml index 9484b55b4c..c35504b531 100644 --- a/_quarto-prerelease.yml +++ b/_quarto-prerelease.yml @@ -1,3 +1,4 @@ prerelease-title: Pre-release prerelease-lower: pre-release -prerelease-mode: "" \ No newline at end of file +prerelease-mode: "" +prerelease-subdomain: prerelease. \ No newline at end of file diff --git a/_quarto-rc.yml b/_quarto-rc.yml index 3084566f05..0f2c2e4d62 100644 --- a/_quarto-rc.yml +++ b/_quarto-rc.yml @@ -1,3 +1,4 @@ prerelease-title: Release Candidate prerelease-lower: release candidate -prerelease-mode: Release Candidate \ No newline at end of file +prerelease-mode: Release Candidate +prerelease-subdomain: '' \ No newline at end of file diff --git a/docs/presentations/revealjs/demo/index.qmd b/docs/presentations/revealjs/demo/index.qmd index 4075cf765f..95acb64413 100644 --- a/docs/presentations/revealjs/demo/index.qmd +++ b/docs/presentations/revealjs/demo/index.qmd @@ -9,7 +9,7 @@ format: preview-links: auto logo: images/quarto.png css: styles.css - footer: + footer: '[https://{{< meta prerelease-subdomain >}}quarto.org](https://{{< meta prerelease-subdomain >}}quarto.org)' resources: - demo.pdf --- @@ -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:
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 @@ -466,7 +466,7 @@ Use the notes canvas button at the bottom left of the slide to toggle drawing on You can also press `b` to toggle the chalkboard or `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 @@ -478,7 +478,7 @@ Press `o` to toggle overview mode: Hold down the `Alt` key (or `Ctrl` in Linux) 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 @@ -488,9 +488,10 @@ Press `s` (or use the presentation menu) 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) ::: + ## Authoring Tools {.smaller} Live side-by-side preview for any notebook or text editor including Jupyter and VS Code @@ -506,7 +507,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 +517,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/) ::: From c2dc62c3e4a67d81df9c64c5e3936dd0d65867d8 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 13:36:05 +0200 Subject: [PATCH 11/17] Add mention of scroll view in demo slide and link to doc --- docs/presentations/revealjs/demo/index.qmd | 11 ++++++++++- docs/presentations/revealjs/presenting.qmd | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/presentations/revealjs/demo/index.qmd b/docs/presentations/revealjs/demo/index.qmd index 95acb64413..9abde0e484 100644 --- a/docs/presentations/revealjs/demo/index.qmd +++ b/docs/presentations/revealjs/demo/index.qmd @@ -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 @@ -491,6 +491,15 @@ Press `s` (or use the presentation menu) to open speaker view Learn more: [Speaker View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#speaker-view) ::: +## Scroll View + +Press {{< kbd R >}} (or use the presentation menu) to open scroll view. This mode will be activated by default on small width screen (e.g. viewing presentation on mobile). + +Scroll view behavior can be configured using `scroll-view` configuration.S + +::: footer +Learn more: [Scroll View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#scroll-view) +::: ## Authoring Tools {.smaller} diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index 911cbf0505..b88ee4784c 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -110,7 +110,7 @@ Overview mode provides an alternate view that shows you a thumbnail for each sli You can enable Overview Mode by pressing the {{< kbd O >}} key. ::: -## Scroll View +## Scroll View {#scroll-view} {{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}} From 702c2228764ce65d22e21710e1f14f18cde07a2b Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 14:01:03 +0200 Subject: [PATCH 12/17] Use kbd for shortcut --- docs/presentations/revealjs/demo/index.qmd | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/presentations/revealjs/demo/index.qmd b/docs/presentations/revealjs/demo/index.qmd index 9abde0e484..8ce215f8fc 100644 --- a/docs/presentations/revealjs/demo/index.qmd +++ b/docs/presentations/revealjs/demo/index.qmd @@ -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,7 +463,7 @@ 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://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#chalkboard) @@ -471,11 +471,11 @@ Learn more: [Chalkboard](https://{{< meta prerelease-subdomain >}}quarto.org/doc ## 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://{{< 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) @@ -483,7 +483,7 @@ Learn more: [Overview Mode](https://{{< meta prerelease-subdomain >}}quarto.org/ ## Speaker View -Press `s` (or use the presentation menu) to open speaker view +press {{< kbd s >}} (or use the presentation menu) to open speaker view ![](images/speaker-view.png){fig-align="center" style="border: 3px solid #dee2e6;" width="780"} @@ -491,9 +491,9 @@ Press `s` (or use the presentation menu) to open speaker view Learn more: [Speaker View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#speaker-view) ::: -## Scroll View +## Scroll View {#scroll-view} -Press {{< kbd R >}} (or use the presentation menu) to open scroll view. This mode will be activated by default on small width screen (e.g. viewing presentation on mobile). +Press {{< kbd r >}} (or use the presentation menu) to open scroll view. This mode will be activated by default on small width screen (e.g. viewing presentation on mobile). Scroll view behavior can be configured using `scroll-view` configuration.S From 2433c2ba71a60d12329d2c64dc18da6f5abdc473 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 14:11:51 +0200 Subject: [PATCH 13/17] tweak scroll view part in demo slide --- docs/presentations/revealjs/demo/index.qmd | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/presentations/revealjs/demo/index.qmd b/docs/presentations/revealjs/demo/index.qmd index 8ce215f8fc..aeed12628c 100644 --- a/docs/presentations/revealjs/demo/index.qmd +++ b/docs/presentations/revealjs/demo/index.qmd @@ -483,7 +483,7 @@ Learn more: [Overview Mode](https://{{< meta prerelease-subdomain >}}quarto.org/ ## Speaker View -press {{< kbd 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"} @@ -493,9 +493,11 @@ Learn more: [Speaker View](https://{{< meta prerelease-subdomain >}}quarto.org/d ## Scroll View {#scroll-view} -Press {{< kbd r >}} (or use the presentation menu) to open scroll view. This mode will be activated by default on small width screen (e.g. viewing presentation on mobile). +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 -Scroll view behavior can be configured using `scroll-view` configuration.S +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) From 0228b3a3e2750df9a7b254f7dbfd4f29da4095f5 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 14:30:33 +0200 Subject: [PATCH 14/17] Add demo slides in scroll mode as example --- docs/presentations/revealjs/presenting.qmd | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index b88ee4784c..a34b993eab 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -116,6 +116,16 @@ You can enable Overview Mode by pressing the {{< kbd O >}} key. Reveal presentations can be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is always available in presentations as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used as the default view on small screens (e.g. viewing a presentation on a mobile). +Our demo presentation can be seen [in scroll view mode](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/demo/?view=scroll) and below + +
+ +```{=html} + +``` + +
+ ### Entering Scroll View {#scroll-view-toggle} To enter Scroll View , do one the following: From b5c0a3b190b730bf05cfc66a9d769e1fd37a1123 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 15:44:05 +0200 Subject: [PATCH 15/17] re-build with freeze --- .../revealjs/demo/index/execute-results/html.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json b/_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json index 0ddceaa8ae..e78909f035 100644 --- a/_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json +++ b/_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json @@ -1,8 +1,8 @@ { - "hash": "a25e51fa991f3bd0af87c0521d12e70c", + "hash": "6569aeff5d394a79b1e1a44ebbdf3ff3", "result": { "engine": "knitr", - "markdown": "---\ntitle: \"Quarto Presentations\"\nsubtitle: \"Create beautiful interactive slide decks with Reveal.js\"\nformat:\n revealjs: \n slide-number: true\n chalkboard: \n buttons: false\n preview-links: auto\n logo: images/quarto.png\n css: styles.css\n footer: \nresources:\n - demo.pdf\n---\n\n\n\n## Hello, There\n\nThis presentation will show you examples of what you can do with Quarto and [Reveal.js](https://revealjs.com), including:\n\n- Presenting code and LaTeX equations\n- Including computations in slide output\n- Image, video, and iframe backgrounds\n- Fancy transitions and animations\n- Printing to PDF\n\n...and much more\n\n## Pretty Code {auto-animate=\"true\"}\n\n- Over 20 syntax highlighting themes available\n- Default theme optimized for accessibility\n\n``` r\n# Define a server for the Shiny app\nfunction(input, output) {\n \n # Fill in the spot we created for a plot\n output$phonePlot <- renderPlot({\n # Render a barplot\n })\n}\n```\n\n::: footer\nLearn more: [Syntax Highlighting](https://quarto.org/docs/output-formats/html-code.html#highlighting)\n:::\n\n## Code Animations {auto-animate=\"true\"}\n\n- Over 20 syntax highlighting themes available\n- Default theme optimized for accessibility\n\n``` r\n# Define a server for the Shiny app\nfunction(input, output) {\n \n # Fill in the spot we created for a plot\n output$phonePlot <- renderPlot({\n # Render a barplot\n barplot(WorldPhones[,input$region]*1000, \n main=input$region,\n ylab=\"Number of Telephones\",\n xlab=\"Year\")\n })\n}\n```\n\n::: footer\nLearn more: [Code Animations](https://quarto.org/docs/presentations/revealjs/advanced.html#code-animations)\n:::\n\n## Line Highlighting\n\n- Highlight specific lines for emphasis\n- Incrementally highlight additional lines\n\n``` {.python code-line-numbers=\"4-5|7|10\"}\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={'projection': 'polar'})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n\n::: footer\nLearn more: [Line Highlighting](https://quarto.org/docs/presentations/revealjs/#line-highlighting)\n:::\n\n## Executable Code\n\n\n\n::: {.cell}\n\n```{.r .cell-code}\nlibrary(ggplot2)\nggplot(mtcars, aes(hp, mpg, color = am)) +\n geom_point() +\n geom_smooth(formula = y ~ x, method = \"loess\")\n```\n\n::: {.cell-output-display}\n![](index_files/figure-revealjs/unnamed-chunk-1-1.png){width=960}\n:::\n:::\n\n\n\n::: footer\nLearn more: [Executable Code](https://quarto.org/docs/presentations/revealjs/#executable-code)\n:::\n\n## LaTeX Equations\n\n[MathJax](https://www.mathjax.org/) rendering of equations to HTML\n\n::: columns\n::: {.column width=\"40%\"}\n``` tex\n\\begin{gather*}\na_1=b_1+c_1\\\\\na_2=b_2+c_2-d_2+e_2\n\\end{gather*}\n\n\\begin{align}\na_{11}& =b_{11}&\n a_{12}& =b_{12}\\\\\na_{21}& =b_{21}&\n a_{22}& =b_{22}+c_{22}\n\\end{align}\n```\n:::\n\n::: {.column width=\"60%\"}\n\n\n```{=tex}\n\\begin{gather*}\na_1=b_1+c_1\\\\\na_2=b_2+c_2-d_2+e_2\n\\end{gather*}\n```\n\n```{=tex}\n\\begin{align}\na_{11}& =b_{11}&\n a_{12}& =b_{12}\\\\\na_{21}& =b_{21}&\n a_{22}& =b_{22}+c_{22}\n\\end{align}\n```\n\n\n:::\n:::\n\n::: footer\nLearn more: [LaTeX Equations](https://quarto.org/docs/authoring/markdown-basics.html#equations)\n:::\n\n## Column Layout {.smaller}\n\nArrange content into columns of varying widths:\n\n::: columns\n::: {.column width=\"35%\"}\n#### Motor Trend Car Road Tests\n\nThe data was extracted from the 1974 Motor Trend US magazine, and comprises fuel consumption and 10 aspects of automobile design and performance for 32 automobiles.\n:::\n\n::: {.column width=\"3%\"}\n:::\n\n::: {.column width=\"62%\"}\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n\n| | mpg| cyl| disp| hp| wt|\n|:-----------------|----:|---:|----:|---:|-----:|\n|Mazda RX4 | 21.0| 6| 160| 110| 2.620|\n|Mazda RX4 Wag | 21.0| 6| 160| 110| 2.875|\n|Datsun 710 | 22.8| 4| 108| 93| 2.320|\n|Hornet 4 Drive | 21.4| 6| 258| 110| 3.215|\n|Hornet Sportabout | 18.7| 8| 360| 175| 3.440|\n|Valiant | 18.1| 6| 225| 105| 3.460|\n\n\n:::\n:::\n\n\n:::\n:::\n\n::: footer\nLearn more: [Multiple Columns](https://quarto.org/docs/presentations/revealjs/#multiple-columns)\n:::\n\n## Incremental Lists\n\nLists can optionally be displayed incrementally:\n\n::: incremental\n- First item\n- Second item\n- Third item\n:::\n\n. . .\n\n
Insert pauses to make other types of content display incrementally.\n\n::: footer\nLearn more: [Incremental Lists](https://quarto.org/docs/presentations/revealjs/#incremental-lists)\n:::\n\n## Fragments\n\nIncremental text display and animation with fragments:\n\n
\n\n::: {.fragment .fade-in}\nFade in\n:::\n\n::: {.fragment .fade-up}\nSlide up while fading in\n:::\n\n::: {.fragment .fade-left}\nSlide left while fading in\n:::\n\n::: {.fragment .fade-in-then-semi-out}\nFade in then semi out\n:::\n\n. . .\n\n::: {.fragment .strike}\nStrike\n:::\n\n::: {.fragment .highlight-red}\nHighlight red\n:::\n\n::: footer\nLearn more: [Fragments](https://quarto.org/docs/presentations/revealjs/advanced.html#fragments)\n:::\n\n## Slide Backgrounds {background=\"#43464B\"}\n\nSet the `background` attribute on a slide to change the background color (all CSS color formats are supported).\n\nDifferent background transitions are available via the `background-transition` option.\n\n::: footer\nLearn more: [Slide Backgrounds](https://quarto.org/docs/presentations/revealjs/#color-backgrounds)\n:::\n\n## Media Backgrounds {background=\"#43464B\" background-image=\"images/milky-way.jpeg\"}\n\nYou can also use the following as a slide background:\n\n- An image: `background-image`\n\n- A video: `background-video`\n\n- An iframe: `background-iframe`\n\n::: footer\nLearn more: [Media Backgrounds](https://quarto.org/docs/presentations/revealjs/#image-backgrounds)\n:::\n\n## Absolute Position\n\nPosition images or other elements at precise locations\n\n![](mini/images/kitten-400-350.jpeg){.absolute top=\"170\" left=\"30\" width=\"400\" height=\"400\"}\n\n![](mini/images/kitten-450-250.jpeg){.absolute .fragment top=\"150\" right=\"80\" width=\"450\"}\n\n![](mini/images/kitten-300-200.jpeg){.absolute .fragment bottom=\"110\" right=\"130\" width=\"300\"}\n\n::: footer\nLearn more: [Absolute Position](https://quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)\n:::\n\n## Auto-Animate {auto-animate=\"true\" auto-animate-easing=\"ease-in-out\"}\n\nAutomatically animate matching elements across slides with Auto-Animate.\n\n::: r-hstack\n::: {data-id=\"box1\" auto-animate-delay=\"0\" style=\"background: #2780e3; width: 200px; height: 150px; margin: 10px;\"}\n:::\n\n::: {data-id=\"box2\" auto-animate-delay=\"0.1\" style=\"background: #3fb618; width: 200px; height: 150px; margin: 10px;\"}\n:::\n\n::: {data-id=\"box3\" auto-animate-delay=\"0.2\" style=\"background: #e83e8c; width: 200px; height: 150px; margin: 10px;\"}\n:::\n:::\n\n::: footer\nLearn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)\n:::\n\n## Auto-Animate {auto-animate=\"true\" auto-animate-easing=\"ease-in-out\"}\n\nAutomatically animate matching elements across slides with Auto-Animate.\n\n::: r-stack\n::: {data-id=\"box1\" style=\"background: #2780e3; width: 350px; height: 350px; border-radius: 200px;\"}\n:::\n\n::: {data-id=\"box2\" style=\"background: #3fb618; width: 250px; height: 250px; border-radius: 200px;\"}\n:::\n\n::: {data-id=\"box3\" style=\"background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;\"}\n:::\n:::\n\n::: footer\nLearn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)\n:::\n\n## Slide Transitions {.smaller}\n\nThe next few slides will transition using the `slide` transition\n\n| Transition | Description |\n|------------|------------------------------------------------------------------------|\n| `none` | No transition (default, switch instantly) |\n| `fade` | Cross fade |\n| `slide` | Slide horizontally |\n| `convex` | Slide at a convex angle |\n| `concave` | Slide at a concave angle |\n| `zoom` | Scale the incoming slide so it grows in from the center of the screen. |\n\n::: footer\nLearn more: [Slide Transitions](https://quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)\n:::\n\n## Tabsets {.smaller .scrollable transition=\"slide\"}\n\n::: panel-tabset\n### Plot\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n![](index_files/figure-revealjs/unnamed-chunk-3-1.png){width=960}\n:::\n:::\n\n\n\n### Data\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n\n| | mpg| cyl| disp| hp| drat| wt| qsec| vs| am| gear| carb|\n|:-------------------|----:|---:|-----:|---:|----:|-----:|-----:|--:|--:|----:|----:|\n|Mazda RX4 | 21.0| 6| 160.0| 110| 3.90| 2.620| 16.46| 0| 1| 4| 4|\n|Mazda RX4 Wag | 21.0| 6| 160.0| 110| 3.90| 2.875| 17.02| 0| 1| 4| 4|\n|Datsun 710 | 22.8| 4| 108.0| 93| 3.85| 2.320| 18.61| 1| 1| 4| 1|\n|Hornet 4 Drive | 21.4| 6| 258.0| 110| 3.08| 3.215| 19.44| 1| 0| 3| 1|\n|Hornet Sportabout | 18.7| 8| 360.0| 175| 3.15| 3.440| 17.02| 0| 0| 3| 2|\n|Valiant | 18.1| 6| 225.0| 105| 2.76| 3.460| 20.22| 1| 0| 3| 1|\n|Duster 360 | 14.3| 8| 360.0| 245| 3.21| 3.570| 15.84| 0| 0| 3| 4|\n|Merc 240D | 24.4| 4| 146.7| 62| 3.69| 3.190| 20.00| 1| 0| 4| 2|\n|Merc 230 | 22.8| 4| 140.8| 95| 3.92| 3.150| 22.90| 1| 0| 4| 2|\n|Merc 280 | 19.2| 6| 167.6| 123| 3.92| 3.440| 18.30| 1| 0| 4| 4|\n|Merc 280C | 17.8| 6| 167.6| 123| 3.92| 3.440| 18.90| 1| 0| 4| 4|\n|Merc 450SE | 16.4| 8| 275.8| 180| 3.07| 4.070| 17.40| 0| 0| 3| 3|\n|Merc 450SL | 17.3| 8| 275.8| 180| 3.07| 3.730| 17.60| 0| 0| 3| 3|\n|Merc 450SLC | 15.2| 8| 275.8| 180| 3.07| 3.780| 18.00| 0| 0| 3| 3|\n|Cadillac Fleetwood | 10.4| 8| 472.0| 205| 2.93| 5.250| 17.98| 0| 0| 3| 4|\n|Lincoln Continental | 10.4| 8| 460.0| 215| 3.00| 5.424| 17.82| 0| 0| 3| 4|\n|Chrysler Imperial | 14.7| 8| 440.0| 230| 3.23| 5.345| 17.42| 0| 0| 3| 4|\n|Fiat 128 | 32.4| 4| 78.7| 66| 4.08| 2.200| 19.47| 1| 1| 4| 1|\n|Honda Civic | 30.4| 4| 75.7| 52| 4.93| 1.615| 18.52| 1| 1| 4| 2|\n|Toyota Corolla | 33.9| 4| 71.1| 65| 4.22| 1.835| 19.90| 1| 1| 4| 1|\n|Toyota Corona | 21.5| 4| 120.1| 97| 3.70| 2.465| 20.01| 1| 0| 3| 1|\n|Dodge Challenger | 15.5| 8| 318.0| 150| 2.76| 3.520| 16.87| 0| 0| 3| 2|\n|AMC Javelin | 15.2| 8| 304.0| 150| 3.15| 3.435| 17.30| 0| 0| 3| 2|\n|Camaro Z28 | 13.3| 8| 350.0| 245| 3.73| 3.840| 15.41| 0| 0| 3| 4|\n|Pontiac Firebird | 19.2| 8| 400.0| 175| 3.08| 3.845| 17.05| 0| 0| 3| 2|\n|Fiat X1-9 | 27.3| 4| 79.0| 66| 4.08| 1.935| 18.90| 1| 1| 4| 1|\n|Porsche 914-2 | 26.0| 4| 120.3| 91| 4.43| 2.140| 16.70| 0| 1| 5| 2|\n|Lotus Europa | 30.4| 4| 95.1| 113| 3.77| 1.513| 16.90| 1| 1| 5| 2|\n|Ford Pantera L | 15.8| 8| 351.0| 264| 4.22| 3.170| 14.50| 0| 1| 5| 4|\n|Ferrari Dino | 19.7| 6| 145.0| 175| 3.62| 2.770| 15.50| 0| 1| 5| 6|\n|Maserati Bora | 15.0| 8| 301.0| 335| 3.54| 3.570| 14.60| 0| 1| 5| 8|\n|Volvo 142E | 21.4| 4| 121.0| 109| 4.11| 2.780| 18.60| 1| 1| 4| 2|\n\n\n:::\n:::\n\n\n:::\n\n::: footer\nLearn more: [Tabsets](https://quarto.org/docs/presentations/revealjs/#tabsets)\n:::\n\n## Interactive Slides {.smaller transition=\"slide\"}\n\nInclude Jupyter widgets and htmlwidgets in your presentations\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n```{=html}\n
\n\n```\n\n:::\n:::\n\n\n\n::: footer\nLearn more: [Jupyter widgets](https://quarto.org/docs/interactive/widgets/jupyter.html), [htmlwidgets](https://quarto.org/docs/interactive/widgets/htmlwidgets.html)\n:::\n\n## Interactive Slides {.smaller transition=\"slide\"}\n\nTurn presentations into applications with Observable and Shiny. Use component layout to position inputs and outputs.\n\n\n\n::: {.cell}\n\n:::\n\n```{ojs}\n//| panel: sidebar\nviewof talentWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: \"talent weight\" })\nviewof looksWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: \"looks weight\" })\nviewof minimum = Inputs.range([-2, 2], { value: 1, step: 0.01, label: \"min fame\" })\n```\n\n```{ojs}\n//| panel: fill\nimport { plotActors } from './actors.js';\nplotActors(actors, talentWeight, looksWeight, minimum)\n```\n\n\n\n::: footer\nLearn more: [Observable](https://quarto.org/docs/interactive/ojs/), [Shiny](https://quarto.org/docs/interactive/shiny/), [Component Layout](https://quarto.org/docs/interactive/layout.html)\n:::\n\n## Preview Links\n\nNavigate to hyperlinks without disrupting the flow of your presentation.\n\nUse the `preview-links` option to open links in an iframe on top of your slides. Try clicking the link below for a demonstration:\n\n::: {style=\"text-align: center; margin-top: 1em\"}\n[Matplotlib: Visualization with Python](https://matplotlib.org/){preview-link=\"true\" style=\"text-align: center\"}\n:::\n\n::: footer\nLearn more: [Preview Links](https://quarto.org/docs/presentations/revealjs/presenting.html#preview-links)\n:::\n\n## Themes\n\n10 Built-in Themes (or [create your own](https://quarto.org/docs/presentations/revealjs/themes.html#creating-themes))\n\n::: {layout-ncol=\"2\"}\n![](images/moon.png)\n\n![](images/sky.png)\n:::\n\n::: footer\nLearn more: [Themes](https://quarto.org/docs/presentations/revealjs/themes.html)\n:::\n\n## Easy Navigation\n\n::: {style=\"margin-bottom: 0.9em;\"}\nQuickly jump to other parts of your presentation\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-menu.png){width=\"41\"}\n\nToggle the slide menu with the menu button (bottom left of slide) to go to other slides and access presentation tools.\n:::\n\nYou can also press `m` to toggle the menu open and closed.\n\nYou can also press `g` to toggle 'Jump To Slide' modal box to quickly go to one of your slide using its number or id.\n\n::: footer\nLearn more: [Navigation](/docs/presentations/revealjs/presenting.qmd#navigation-menu) / [Jump To Slide](/docs/presentations/revealjs/presenting.qmd#jump-to-slide)\n:::\n\n## Jump To Slide\n\n::: {style=\"margin-bottom: 0.9em;\"}\nQuickly jump to other parts of your presentation\n:::\n\n## Chalkboard {chalkboard-buttons=\"true\"}\n\n::: {style=\"margin-bottom: 0.9em;\"}\nFree form drawing and slide annotations\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-chalkboard.png){width=\"41\"}\n\nUse the chalkboard button at the bottom left of the slide to toggle the chalkboard.\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-notes-canvas.png){width=\"41\"}\n\nUse the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide.\n:::\n\nYou can also press `b` to toggle the chalkboard or `c` to toggle the notes canvas.\n\n::: footer\nLearn more: [Chalkboard](https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard)\n:::\n\n## Point of View\n\nPress `o` to toggle overview mode:\n\n![](images/overview-mode.png){.border}\n\nHold down the `Alt` key (or `Ctrl` in Linux) and click on any element to zoom towards it---try it now on this slide.\n\n::: footer\nLearn 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)\n:::\n\n## Speaker View\n\nPress `s` (or use the presentation menu) to open speaker view\n\n![](images/speaker-view.png){fig-align=\"center\" style=\"border: 3px solid #dee2e6;\" width=\"780\"}\n\n::: footer\nLearn more: [Speaker View](https://quarto.org/docs/presentations/revealjs/presenting.html#speaker-view)\n:::\n\n## Authoring Tools {.smaller}\n\nLive side-by-side preview for any notebook or text editor including Jupyter and VS Code\n\n::: columns\n::: {.column width=\"50%\"}\n![](images/jupyter-edit.png){.border .border-thick}\n:::\n\n::: {.column width=\"50%\"}\n![](images/jupyter-preview.png){.border .border-thick}\n:::\n:::\n\n::: footer\nLearn 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)\n:::\n\n## Authoring Tools {.smaller}\n\nRStudio includes an integrated presentation preview pane\n\n![](images/rstudio.png){.border width=\"900\"}\n\n::: footer\nLearn more: [RStudio](https://quarto.org/docs/tools/rstudio.html)\n:::\n\n## And More...\n\n- [Touch](https://quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides)\n- [Footer & Logo](https://quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide or hide global footer)\n- [Auto-Slide](https://quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input)\n- [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).\n\n::: footer\nLearn more: [Quarto Presentations](https://quarto.org/docs/presentations/revealjs/)\n:::\n", + "markdown": "---\ntitle: \"Quarto Presentations\"\nsubtitle: \"Create beautiful interactive slide decks with Reveal.js\"\nformat:\n revealjs: \n slide-number: true\n chalkboard: \n buttons: false\n preview-links: auto\n logo: images/quarto.png\n css: styles.css\n footer: '[https://{{< meta prerelease-subdomain >}}quarto.org](https://{{< meta prerelease-subdomain >}}quarto.org)'\nresources:\n - demo.pdf\n---\n\n\n\n## Hello, There\n\nThis presentation will show you examples of what you can do with Quarto and [Reveal.js](https://revealjs.com), including:\n\n- Presenting code and LaTeX equations\n- Including computations in slide output\n- Image, video, and iframe backgrounds\n- Fancy transitions and animations\n- Activating scroll view\n\n...and much more\n\n## Pretty Code {auto-animate=\"true\"}\n\n- Over 20 syntax highlighting themes available\n- Default theme optimized for accessibility\n\n``` r\n# Define a server for the Shiny app\nfunction(input, output) {\n \n # Fill in the spot we created for a plot\n output$phonePlot <- renderPlot({\n # Render a barplot\n })\n}\n```\n\n::: footer\nLearn more: [Syntax Highlighting](https://{{< meta prerelease-subdomain >}}quarto.org/docs/output-formats/html-code.html#highlighting)\n:::\n\n## Code Animations {auto-animate=\"true\"}\n\n- Over 20 syntax highlighting themes available\n- Default theme optimized for accessibility\n\n``` r\n# Define a server for the Shiny app\nfunction(input, output) {\n \n # Fill in the spot we created for a plot\n output$phonePlot <- renderPlot({\n # Render a barplot\n barplot(WorldPhones[,input$region]*1000, \n main=input$region,\n ylab=\"Number of Telephones\",\n xlab=\"Year\")\n })\n}\n```\n\n::: footer\nLearn more: [Code Animations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#code-animations)\n:::\n\n## Line Highlighting\n\n- Highlight specific lines for emphasis\n- Incrementally highlight additional lines\n\n``` {.python code-line-numbers=\"4-5|7|10\"}\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={'projection': 'polar'})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n\n::: footer\nLearn more: [Line Highlighting](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#line-highlighting)\n:::\n\n## Executable Code\n\n\n\n::: {.cell}\n\n```{.r .cell-code}\nlibrary(ggplot2)\nggplot(mtcars, aes(hp, mpg, color = am)) +\n geom_point() +\n geom_smooth(formula = y ~ x, method = \"loess\")\n```\n\n::: {.cell-output-display}\n![](index_files/figure-revealjs/unnamed-chunk-1-1.png){width=960}\n:::\n:::\n\n\n\n::: footer\nLearn more: [Executable Code](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#executable-code)\n:::\n\n## LaTeX Equations\n\n[MathJax](https://www.mathjax.org/) rendering of equations to HTML\n\n::: columns\n::: {.column width=\"40%\"}\n``` tex\n\\begin{gather*}\na_1=b_1+c_1\\\\\na_2=b_2+c_2-d_2+e_2\n\\end{gather*}\n\n\\begin{align}\na_{11}& =b_{11}&\n a_{12}& =b_{12}\\\\\na_{21}& =b_{21}&\n a_{22}& =b_{22}+c_{22}\n\\end{align}\n```\n:::\n\n::: {.column width=\"60%\"}\n\n\n```{=tex}\n\\begin{gather*}\na_1=b_1+c_1\\\\\na_2=b_2+c_2-d_2+e_2\n\\end{gather*}\n```\n\n```{=tex}\n\\begin{align}\na_{11}& =b_{11}&\n a_{12}& =b_{12}\\\\\na_{21}& =b_{21}&\n a_{22}& =b_{22}+c_{22}\n\\end{align}\n```\n\n\n:::\n:::\n\n::: footer\nLearn more: [LaTeX Equations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/authoring/markdown-basics.html#equations)\n:::\n\n## Column Layout {.smaller}\n\nArrange content into columns of varying widths:\n\n::: columns\n::: {.column width=\"35%\"}\n#### Motor Trend Car Road Tests\n\nThe data was extracted from the 1974 Motor Trend US magazine, and comprises fuel consumption and 10 aspects of automobile design and performance for 32 automobiles.\n:::\n\n::: {.column width=\"3%\"}\n:::\n\n::: {.column width=\"62%\"}\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n\n| | mpg| cyl| disp| hp| wt|\n|:-----------------|----:|---:|----:|---:|-----:|\n|Mazda RX4 | 21.0| 6| 160| 110| 2.620|\n|Mazda RX4 Wag | 21.0| 6| 160| 110| 2.875|\n|Datsun 710 | 22.8| 4| 108| 93| 2.320|\n|Hornet 4 Drive | 21.4| 6| 258| 110| 3.215|\n|Hornet Sportabout | 18.7| 8| 360| 175| 3.440|\n|Valiant | 18.1| 6| 225| 105| 3.460|\n\n\n:::\n:::\n\n\n:::\n:::\n\n::: footer\nLearn more: [Multiple Columns](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#multiple-columns)\n:::\n\n## Incremental Lists\n\nLists can optionally be displayed incrementally:\n\n::: incremental\n- First item\n- Second item\n- Third item\n:::\n\n. . .\n\n
Insert pauses to make other types of content display incrementally.\n\n::: footer\nLearn more: [Incremental Lists](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#incremental-lists)\n:::\n\n## Fragments\n\nIncremental text display and animation with fragments:\n\n
\n\n::: {.fragment .fade-in}\nFade in\n:::\n\n::: {.fragment .fade-up}\nSlide up while fading in\n:::\n\n::: {.fragment .fade-left}\nSlide left while fading in\n:::\n\n::: {.fragment .fade-in-then-semi-out}\nFade in then semi out\n:::\n\n. . .\n\n::: {.fragment .strike}\nStrike\n:::\n\n::: {.fragment .highlight-red}\nHighlight red\n:::\n\n::: footer\nLearn more: [Fragments](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#fragments)\n:::\n\n## Slide Backgrounds {background=\"#43464B\"}\n\nSet the `background` attribute on a slide to change the background color (all CSS color formats are supported).\n\nDifferent background transitions are available via the `background-transition` option.\n\n::: footer\nLearn more: [Slide Backgrounds](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#color-backgrounds)\n:::\n\n## Media Backgrounds {background=\"#43464B\" background-image=\"images/milky-way.jpeg\"}\n\nYou can also use the following as a slide background:\n\n- An image: `background-image`\n\n- A video: `background-video`\n\n- An iframe: `background-iframe`\n\n::: footer\nLearn more: [Media Backgrounds](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#image-backgrounds)\n:::\n\n## Absolute Position\n\nPosition images or other elements at precise locations\n\n![](mini/images/kitten-400-350.jpeg){.absolute top=\"170\" left=\"30\" width=\"400\" height=\"400\"}\n\n![](mini/images/kitten-450-250.jpeg){.absolute .fragment top=\"150\" right=\"80\" width=\"450\"}\n\n![](mini/images/kitten-300-200.jpeg){.absolute .fragment bottom=\"110\" right=\"130\" width=\"300\"}\n\n::: footer\nLearn more: [Absolute Position](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)\n:::\n\n## Auto-Animate {auto-animate=\"true\" auto-animate-easing=\"ease-in-out\"}\n\nAutomatically animate matching elements across slides with Auto-Animate.\n\n::: r-hstack\n::: {data-id=\"box1\" auto-animate-delay=\"0\" style=\"background: #2780e3; width: 200px; height: 150px; margin: 10px;\"}\n:::\n\n::: {data-id=\"box2\" auto-animate-delay=\"0.1\" style=\"background: #3fb618; width: 200px; height: 150px; margin: 10px;\"}\n:::\n\n::: {data-id=\"box3\" auto-animate-delay=\"0.2\" style=\"background: #e83e8c; width: 200px; height: 150px; margin: 10px;\"}\n:::\n:::\n\n::: footer\nLearn more: [Auto-Animate](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)\n:::\n\n## Auto-Animate {auto-animate=\"true\" auto-animate-easing=\"ease-in-out\"}\n\nAutomatically animate matching elements across slides with Auto-Animate.\n\n::: r-stack\n::: {data-id=\"box1\" style=\"background: #2780e3; width: 350px; height: 350px; border-radius: 200px;\"}\n:::\n\n::: {data-id=\"box2\" style=\"background: #3fb618; width: 250px; height: 250px; border-radius: 200px;\"}\n:::\n\n::: {data-id=\"box3\" style=\"background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;\"}\n:::\n:::\n\n::: footer\nLearn more: [Auto-Animate](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)\n:::\n\n## Slide Transitions {.smaller}\n\nThe next few slides will transition using the `slide` transition\n\n| Transition | Description |\n|------------|------------------------------------------------------------------------|\n| `none` | No transition (default, switch instantly) |\n| `fade` | Cross fade |\n| `slide` | Slide horizontally |\n| `convex` | Slide at a convex angle |\n| `concave` | Slide at a concave angle |\n| `zoom` | Scale the incoming slide so it grows in from the center of the screen. |\n\n::: footer\nLearn more: [Slide Transitions](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)\n:::\n\n## Tabsets {.smaller .scrollable transition=\"slide\"}\n\n::: panel-tabset\n### Plot\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n![](index_files/figure-revealjs/unnamed-chunk-3-1.png){width=960}\n:::\n:::\n\n\n\n### Data\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n\n| | mpg| cyl| disp| hp| drat| wt| qsec| vs| am| gear| carb|\n|:-------------------|----:|---:|-----:|---:|----:|-----:|-----:|--:|--:|----:|----:|\n|Mazda RX4 | 21.0| 6| 160.0| 110| 3.90| 2.620| 16.46| 0| 1| 4| 4|\n|Mazda RX4 Wag | 21.0| 6| 160.0| 110| 3.90| 2.875| 17.02| 0| 1| 4| 4|\n|Datsun 710 | 22.8| 4| 108.0| 93| 3.85| 2.320| 18.61| 1| 1| 4| 1|\n|Hornet 4 Drive | 21.4| 6| 258.0| 110| 3.08| 3.215| 19.44| 1| 0| 3| 1|\n|Hornet Sportabout | 18.7| 8| 360.0| 175| 3.15| 3.440| 17.02| 0| 0| 3| 2|\n|Valiant | 18.1| 6| 225.0| 105| 2.76| 3.460| 20.22| 1| 0| 3| 1|\n|Duster 360 | 14.3| 8| 360.0| 245| 3.21| 3.570| 15.84| 0| 0| 3| 4|\n|Merc 240D | 24.4| 4| 146.7| 62| 3.69| 3.190| 20.00| 1| 0| 4| 2|\n|Merc 230 | 22.8| 4| 140.8| 95| 3.92| 3.150| 22.90| 1| 0| 4| 2|\n|Merc 280 | 19.2| 6| 167.6| 123| 3.92| 3.440| 18.30| 1| 0| 4| 4|\n|Merc 280C | 17.8| 6| 167.6| 123| 3.92| 3.440| 18.90| 1| 0| 4| 4|\n|Merc 450SE | 16.4| 8| 275.8| 180| 3.07| 4.070| 17.40| 0| 0| 3| 3|\n|Merc 450SL | 17.3| 8| 275.8| 180| 3.07| 3.730| 17.60| 0| 0| 3| 3|\n|Merc 450SLC | 15.2| 8| 275.8| 180| 3.07| 3.780| 18.00| 0| 0| 3| 3|\n|Cadillac Fleetwood | 10.4| 8| 472.0| 205| 2.93| 5.250| 17.98| 0| 0| 3| 4|\n|Lincoln Continental | 10.4| 8| 460.0| 215| 3.00| 5.424| 17.82| 0| 0| 3| 4|\n|Chrysler Imperial | 14.7| 8| 440.0| 230| 3.23| 5.345| 17.42| 0| 0| 3| 4|\n|Fiat 128 | 32.4| 4| 78.7| 66| 4.08| 2.200| 19.47| 1| 1| 4| 1|\n|Honda Civic | 30.4| 4| 75.7| 52| 4.93| 1.615| 18.52| 1| 1| 4| 2|\n|Toyota Corolla | 33.9| 4| 71.1| 65| 4.22| 1.835| 19.90| 1| 1| 4| 1|\n|Toyota Corona | 21.5| 4| 120.1| 97| 3.70| 2.465| 20.01| 1| 0| 3| 1|\n|Dodge Challenger | 15.5| 8| 318.0| 150| 2.76| 3.520| 16.87| 0| 0| 3| 2|\n|AMC Javelin | 15.2| 8| 304.0| 150| 3.15| 3.435| 17.30| 0| 0| 3| 2|\n|Camaro Z28 | 13.3| 8| 350.0| 245| 3.73| 3.840| 15.41| 0| 0| 3| 4|\n|Pontiac Firebird | 19.2| 8| 400.0| 175| 3.08| 3.845| 17.05| 0| 0| 3| 2|\n|Fiat X1-9 | 27.3| 4| 79.0| 66| 4.08| 1.935| 18.90| 1| 1| 4| 1|\n|Porsche 914-2 | 26.0| 4| 120.3| 91| 4.43| 2.140| 16.70| 0| 1| 5| 2|\n|Lotus Europa | 30.4| 4| 95.1| 113| 3.77| 1.513| 16.90| 1| 1| 5| 2|\n|Ford Pantera L | 15.8| 8| 351.0| 264| 4.22| 3.170| 14.50| 0| 1| 5| 4|\n|Ferrari Dino | 19.7| 6| 145.0| 175| 3.62| 2.770| 15.50| 0| 1| 5| 6|\n|Maserati Bora | 15.0| 8| 301.0| 335| 3.54| 3.570| 14.60| 0| 1| 5| 8|\n|Volvo 142E | 21.4| 4| 121.0| 109| 4.11| 2.780| 18.60| 1| 1| 4| 2|\n\n\n:::\n:::\n\n\n:::\n\n::: footer\nLearn more: [Tabsets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#tabsets)\n:::\n\n## Interactive Slides {.smaller transition=\"slide\"}\n\nInclude Jupyter widgets and htmlwidgets in your presentations\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n```{=html}\n
\n\n```\n\n:::\n:::\n\n\n\n::: footer\nLearn 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)\n:::\n\n## Interactive Slides {.smaller transition=\"slide\"}\n\nTurn presentations into applications with Observable and Shiny. Use component layout to position inputs and outputs.\n\n\n\n::: {.cell}\n\n:::\n\n```{ojs}\n//| panel: sidebar\nviewof talentWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: \"talent weight\" })\nviewof looksWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: \"looks weight\" })\nviewof minimum = Inputs.range([-2, 2], { value: 1, step: 0.01, label: \"min fame\" })\n```\n\n```{ojs}\n//| panel: fill\nimport { plotActors } from './actors.js';\nplotActors(actors, talentWeight, looksWeight, minimum)\n```\n\n\n\n::: footer\nLearn 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)\n:::\n\n## Preview Links\n\nNavigate to hyperlinks without disrupting the flow of your presentation.\n\nUse the `preview-links` option to open links in an iframe on top of your slides. Try clicking the link below for a demonstration:\n\n::: {style=\"text-align: center; margin-top: 1em\"}\n[Matplotlib: Visualization with Python](https://matplotlib.org/){preview-link=\"true\" style=\"text-align: center\"}\n:::\n\n::: footer\nLearn more: [Preview Links](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#preview-links)\n:::\n\n## Themes\n\n10 Built-in Themes (or [create your own](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/themes.html#creating-themes))\n\n::: {layout-ncol=\"2\"}\n![](images/moon.png)\n\n![](images/sky.png)\n:::\n\n::: footer\nLearn more: [Themes](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/themes.html)\n:::\n\n## Easy Navigation\n\n::: {style=\"margin-bottom: 0.9em;\"}\nQuickly jump to other parts of your presentation\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-menu.png){width=\"41\"}\n\nToggle the slide menu with the menu button (bottom left of slide) to go to other slides and access presentation tools.\n:::\n\nYou can also press {{< kbd m >}} to toggle the menu open and closed.\n\nYou 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.\n\n::: footer\nLearn more: [Navigation](/docs/presentations/revealjs/presenting.qmd#navigation-menu) / [Jump To Slide](/docs/presentations/revealjs/presenting.qmd#jump-to-slide)\n:::\n\n## Jump To Slide\n\n::: {style=\"margin-bottom: 0.9em;\"}\nQuickly jump to other parts of your presentation\n:::\n\n## Chalkboard {chalkboard-buttons=\"true\"}\n\n::: {style=\"margin-bottom: 0.9em;\"}\nFree form drawing and slide annotations\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-chalkboard.png){width=\"41\"}\n\nUse the chalkboard button at the bottom left of the slide to toggle the chalkboard.\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-notes-canvas.png){width=\"41\"}\n\nUse the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide.\n:::\n\nYou can also press {{< kbd b >}} to toggle the chalkboard or {{< kbd c >}} to toggle the notes canvas.\n\n::: footer\nLearn more: [Chalkboard](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#chalkboard)\n:::\n\n## Point of View\n\npress {{< kbd o >}} to toggle overview mode:\n\n![](images/overview-mode.png){.border}\n\nHold down the {{< kbd Alt linux=Ctrl >}} and click on any element to zoom towards it---try it now on this slide.\n\n::: footer\nLearn 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)\n:::\n\n## Speaker View\n\npress {{< 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\n\n![](images/speaker-view.png){fig-align=\"center\" style=\"border: 3px solid #dee2e6;\" width=\"780\"}\n\n::: footer\nLearn more: [Speaker View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#speaker-view)\n:::\n\n## Scroll View {#scroll-view}\n\nPress {{< 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\n\nTry it now on this slide --- You'll see a scroll bar on the right and you can scroll down the presentation using your mouse.\n\nScroll view behavior can be configured using `scroll-view` configuration. \n\n::: footer\nLearn more: [Scroll View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#scroll-view)\n:::\n\n## Authoring Tools {.smaller}\n\nLive side-by-side preview for any notebook or text editor including Jupyter and VS Code\n\n::: columns\n::: {.column width=\"50%\"}\n![](images/jupyter-edit.png){.border .border-thick}\n:::\n\n::: {.column width=\"50%\"}\n![](images/jupyter-preview.png){.border .border-thick}\n:::\n:::\n\n::: footer\nLearn 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)\n:::\n\n## Authoring Tools {.smaller}\n\nRStudio includes an integrated presentation preview pane\n\n![](images/rstudio.png){.border width=\"900\"}\n\n::: footer\nLearn more: [RStudio](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/rstudio.html)\n:::\n\n## And More...\n\n- [Touch](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides)\n- [Footer & Logo](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide or hide global footer)\n- [Auto-Slide](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input)\n- [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).\n\n::: footer\nLearn more: [Quarto Presentations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/)\n:::\n", "supporting": [ "index_files" ], @@ -11,7 +11,7 @@ ], "includes": { "include-in-header": [ - "\n\n\n\n\n\n\n\n\n\n\n" + "\n\n\n\n\n\n\n\n\n\n\n" ], "include-after-body": [ "\n\n\n" From f43a6a81e06e30a25c401bfef28e746f1e619b81 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 15:48:23 +0200 Subject: [PATCH 16/17] Set default value first in table --- docs/presentations/revealjs/presenting.qmd | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index a34b993eab..e4a251ece7 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -157,13 +157,13 @@ Scroll View can be configured using the following options under `scroll-view`: +====================+===========================================================================================================================================================================================================================================================+ | `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. | +--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `snap` | When scrolling, it will automatically snap to the closest slide (`mandatory`). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | +| `snap` | `mandatory`: When scrolling, it will automatically snap to the closest slide (default). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | +--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `layout` | By default each slide will be sized to be as tall as the viewport (default `full)`. If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | +| `layout` | `full`: Each slide will be sized to be as tall as the viewport (default). If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | +--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value in pixels to automatically trigger on bigger or smaller widths. | +--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ -| `activate` | Activate scroll view by default for the presentation. Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | +| `activate` | Activate scroll view by default for the presentation (default `false`). Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | | | | | | ``` yaml | | | scroll-view: | From 312d07cab5abd83cdf1bcd2c15206926e75005ed Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Fri, 18 Oct 2024 21:56:44 +0200 Subject: [PATCH 17/17] Remove mentions of horizontal and vertical for touch navigation swipe gestures --- docs/presentations/revealjs/advanced.qmd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/presentations/revealjs/advanced.qmd b/docs/presentations/revealjs/advanced.qmd index 0236ee69dc..c3178e0e33 100644 --- a/docs/presentations/revealjs/advanced.qmd +++ b/docs/presentations/revealjs/advanced.qmd @@ -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`: