Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions DESCRIPTION
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
Package: deckroadmap
Title: Roadmap Footers for 'Reveal.js' Slides in 'Quarto' and 'R Markdown'
Version: 0.1.4.9000
Version: 0.1.5.9000
Authors@R:
person("Tiger", "Tang", email = "tigerloveslobsters@gmail.com", role = c("aut", "cre"))
Description: Adds section-aware roadmap footers to 'Reveal.js' slide decks
created with 'Quarto' or 'R Markdown'. The footer highlights completed,
current, and upcoming sections as slides advance. Supports multiple
visual styles with configurable colors, size, and positioning options.
visual styles, inherited section tags, roadmap-free slides, and
configurable colors, size, and positioning options.
License: MIT + file LICENSE
Encoding: UTF-8
Roxygen: list(markdown = TRUE)
Expand Down
7 changes: 7 additions & 0 deletions NEWS.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# deckroadmap news

## deckroadmap 0.1.5.9000

- Added support for inherited `data-roadmap` tags so untagged slides can inherit the most recent section by default.
- Added support for `data-roadmap="none"` to hide the roadmap on a specific slide.
- Updated README, examples, and vignette to reflect the new slide-tagging behavior.
- Improved documentation around section tagging and roadmap-free slides.

# deckroadmap 0.1.4

- Initial CRAN release.
Expand Down
8 changes: 7 additions & 1 deletion R/use_roadmap.R
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
#' progress style.
#' @param todo_bg_color CSS background color for upcoming sections in
#' progress style.
#' @param inherit_tags Logical; if `TRUE`, untagged slides inherit the most
#' recent `data-roadmap` value. Use `data-roadmap="none"` on a slide to hide
#' the roadmap entirely for that slide.
#'
#' @return An HTML tag with attached dependencies.
#'
Expand Down Expand Up @@ -49,16 +52,19 @@ use_roadmap <- function(
todo_color = NULL,
active_bg_color = NULL,
done_bg_color = NULL,
todo_bg_color = NULL
todo_bg_color = NULL,
inherit_tags = TRUE
Comment thread
CodingTigerTang marked this conversation as resolved.
) {
stopifnot(is.character(sections), length(sections) >= 2)
stopifnot(is.logical(inherit_tags), length(inherit_tags) == 1, !is.na(inherit_tags))

style <- match.arg(style)

tag <- htmltools::tags$div(
id = id,
`data-sections` = paste(sections, collapse = "|"),
`data-style` = style,
`data-inherit-tags` = tolower(as.character(inherit_tags)),
style = paste0(
"display:none;",
"--deckroadmap-font-size:", font_size, ";",
Expand Down
46 changes: 40 additions & 6 deletions README.Rmd
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ It helps audiences see what has been covered, what section they are currently in

![](man/figures/preview-all.png)
Read the background story and design notes in the [blog post](https://tigertang.org/deckroadmap/).
Documentation: [codingtigertang.github.io/deckroadmap](https://codingtigertang.github.io/deckroadmap/)

## Installation

Expand All @@ -37,24 +38,26 @@ Many business, teaching, and conference presentations use a roadmap bar to help
With one function call, you can add a persistent footer that marks:

- completed sections

- the current section

- upcoming sections

## Why not just use the Reveal.js progress bar?

The built-in Reveal.js progress bar shows how far you are through the slide deck.
`deckroadmap` answers a different question: where are you in the structure of the talk?

## Supported formats

`deckroadmap` currently supports:

- Quarto Revealjs presentations

- R Markdown Revealjs presentations

It is designed for Reveal.js-based HTML slides.

## Basic usage

Add `use_roadmap()` near the top of your document, then tag each slide with a section name using data-roadmap.
Add `use_roadmap()` near the top of your document, then tag slides with `data-roadmap` section names. Untagged slides inherit the most recent section by default.

```{r eval=FALSE}
library(deckroadmap)
Expand All @@ -78,13 +81,36 @@ Then use matching section labels on your slides, for example:

## Next steps {data-roadmap="Next Steps"}
```
## Inheriting section tags

By default, untagged slides inherit the most recent `data-roadmap` value. This makes it easier to tag only the first slide of each section.

``` markdown
## Intro {data-roadmap="Intro"}

## More intro content

## Problem {data-roadmap="Problem"}

## More problem detail
```
In this example, the second slide inherits Intro, and the fourth slide inherits Problem.

## Roadmap-free slides

To hide the roadmap on a specific slide, use:

``` markdown
## Break slide {data-roadmap="none"}
```
This is useful for title slides, divider slides, or transitions where you do not want the roadmap to appear.

## Full examples

Full working examples are included in the `examples/` folder:

- `examples/quarto-demo.qmd`
- `examples/rmarkdown-demo.Rmd`
- [Quarto demo](examples/quarto-demo.qmd)
- [R Markdown demo](examples/rmarkdown-demo.Rmd)

These show complete Reveal.js slide documents for Quarto and R Markdown.

Expand Down Expand Up @@ -177,3 +203,11 @@ use_roadmap(
```

![](man/figures/preview-text-styling2.png)

## Notes

* Section names in sections should match the `data-roadmap` values used on slides.
* Untagged slides inherit the most recent section by default.
* Use `data-roadmap="none"` to hide the roadmap on a specific slide.
* `deckroadmap` is designed for Reveal.js slide decks, not PowerPoint output.
* For best results, keep the section list short and readable.
59 changes: 52 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ options for colors, size, and positioning.

![](man/figures/preview-all.png) Read the background story and design
notes in the [blog post](https://tigertang.org/deckroadmap/).
Documentation:
[codingtigertang.github.io/deckroadmap](https://codingtigertang.github.io/deckroadmap/)

## Installation

Expand All @@ -42,25 +44,29 @@ pattern to Reveal.js slides in a simple R-friendly way.
With one function call, you can add a persistent footer that marks:

- completed sections

- the current section

- upcoming sections

## Why not just use the Reveal.js progress bar?

The built-in Reveal.js progress bar shows how far you are through the
slide deck. `deckroadmap` answers a different question: where are you in
the structure of the talk?

## Supported formats

`deckroadmap` currently supports:

- Quarto Revealjs presentations

- R Markdown Revealjs presentations

It is designed for Reveal.js-based HTML slides.

## Basic usage

Add `use_roadmap()` near the top of your document, then tag each slide
with a section name using data-roadmap.
Add `use_roadmap()` near the top of your document, then tag slides with
`data-roadmap` section names. Untagged slides inherit the most recent
section by default.

``` r
library(deckroadmap)
Expand All @@ -85,12 +91,41 @@ Then use matching section labels on your slides, for example:
## Next steps {data-roadmap="Next Steps"}
```

## Inheriting section tags

By default, untagged slides inherit the most recent `data-roadmap`
value. This makes it easier to tag only the first slide of each section.

``` markdown
## Intro {data-roadmap="Intro"}

## More intro content

## Problem {data-roadmap="Problem"}

## More problem detail
```

In this example, the second slide inherits Intro, and the fourth slide
inherits Problem.

## Roadmap-free slides

To hide the roadmap on a specific slide, use:

``` markdown
## Break slide {data-roadmap="none"}
```

This is useful for title slides, divider slides, or transitions where
you do not want the roadmap to appear.

## Full examples

Full working examples are included in the `examples/` folder:

- `examples/quarto-demo.qmd`
- `examples/rmarkdown-demo.Rmd`
- [Quarto demo](examples/quarto-demo.qmd)
- [R Markdown demo](examples/rmarkdown-demo.Rmd)

These show complete Reveal.js slide documents for Quarto and R Markdown.

Expand Down Expand Up @@ -191,3 +226,13 @@ use_roadmap(
```

![](man/figures/preview-text-styling2.png)

## Notes

- Section names in sections should match the `data-roadmap` values used
on slides.
- Untagged slides inherit the most recent section by default.
- Use `data-roadmap="none"` to hide the roadmap on a specific slide.
- `deckroadmap` is designed for Reveal.js slide decks, not PowerPoint
output.
- For best results, keep the section list short and readable.
8 changes: 4 additions & 4 deletions examples/quarto-demo.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,23 @@ use_roadmap(

This is the opening slide.

## Why this matters {data-roadmap="Intro"}
## Why this matters

Some framing content.

## The problem {data-roadmap="Problem"}

Describe the challenge here.

## What changed {data-roadmap="Problem"}
## What changed

More problem context.

## Analysis overview {data-roadmap="Analysis"}

Start the analysis section.

## Key findings {data-roadmap="Analysis"}
## Key findings

Show results here.

Expand All @@ -50,6 +50,6 @@ Discuss caveats and decisions.

End with the action plan.

## Q&A {data-roadmap="Next Steps"}
## Q&A {data-roadmap="none"}

Questions.
10 changes: 5 additions & 5 deletions examples/rmarkdown-demo.rmd
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,38 @@ use_roadmap(

This is the opening slide.

## Why this matters {data-roadmap="Intro"}
## Why this matters

Some framing content.

## The problem {data-roadmap="Problem"}

Describe the challenge here.

## What changed {data-roadmap="Problem"}
## What changed

More problem context.

## Analysis overview {data-roadmap="Analysis"}

Start the analysis section.

## Key findings {data-roadmap="Analysis"}
## Key findings

Show results here.

## Recommendation {data-roadmap="Recommendation"}

Explain the recommendation.

## Tradeoffs {data-roadmap="Recommendation"}
## Tradeoffs {data-roadmap="none"}

Discuss caveats and decisions.

## Next steps {data-roadmap="Next Steps"}

End with the action plan.

## Q&A {data-roadmap="Next Steps"}
## Q&A {data-roadmap="none"}

Questions.
Loading
Loading