| Title: | Roadmap Footers for 'Reveal.js' Slides in 'Quarto' and 'R Markdown' |
| Version: | 0.1.4 |
| 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. |
| License: | MIT + file LICENSE |
| Encoding: | UTF-8 |
| RoxygenNote: | 7.3.2 |
| Imports: | htmltools |
| Suggests: | knitr, rmarkdown, revealjs, quarto, testthat, spelling |
| URL: | https://github.com/CodingTigerTang/deckroadmap, https://codingtigertang.github.io/deckroadmap/ |
| BugReports: | https://github.com/CodingTigerTang/deckroadmap/issues |
| VignetteBuilder: | knitr |
| Language: | en-US |
| NeedsCompilation: | no |
| Packaged: | 2026-04-17 02:31:10 UTC; tigertang |
| Author: | Tiger Tang [aut, cre] |
| Maintainer: | Tiger Tang <tigerloveslobsters@gmail.com> |
| Repository: | CRAN |
| Date/Publication: | 2026-04-21 19:12:18 UTC |
Preview a roadmap footer style
Description
Preview a roadmap footer style
Usage
preview_roadmap(
sections,
current = sections[1],
style = c("pill", "minimal", "progress"),
font_size = "16px",
bottom = "16px",
active_color = NULL,
done_color = NULL,
todo_color = NULL,
active_bg_color = NULL,
done_bg_color = NULL,
todo_bg_color = NULL
)
Arguments
sections |
Character vector of section names in order. |
current |
The current section name to highlight. |
style |
Roadmap style. One of "pill", "minimal", or "progress". |
font_size |
CSS font size for the roadmap footer. |
bottom |
CSS bottom offset for the roadmap footer. |
active_color |
CSS text color for the active section. |
done_color |
CSS text color for completed sections. |
todo_color |
CSS text color for upcoming sections. |
active_bg_color |
CSS background color for the active section in progress style. |
done_bg_color |
CSS background color for completed sections in progress style. |
todo_bg_color |
CSS background color for upcoming sections in progress style. |
Value
A browsable HTML preview.
Examples
# Preview the default pill style
if (interactive()) {
preview_roadmap(
sections = c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
current = "Analysis"
)
# Preview the progress style with custom colors
preview_roadmap(
sections = c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
current = "Analysis",
style = "progress",
active_color = "#ffffff",
done_color = "#ffffff",
todo_color = "#334155",
active_bg_color = "#2563eb",
done_bg_color = "#475569",
todo_bg_color = "#e2e8f0"
)
}
Add a roadmap footer to Reveal.js slides
Description
Add a roadmap footer to Reveal.js slides
Usage
use_roadmap(
sections,
id = "roadmap-config",
style = c("pill", "minimal", "progress"),
font_size = "16px",
bottom = "16px",
active_color = NULL,
done_color = NULL,
todo_color = NULL,
active_bg_color = NULL,
done_bg_color = NULL,
todo_bg_color = NULL
)
Arguments
sections |
Character vector of section names in order. |
id |
HTML id for the hidden config node. |
style |
Roadmap style. One of "pill", "minimal", or "progress". |
font_size |
CSS font size for the roadmap footer. |
bottom |
CSS bottom offset for the roadmap footer. |
active_color |
CSS text color for the active section. |
done_color |
CSS text color for completed sections. |
todo_color |
CSS text color for upcoming sections. |
active_bg_color |
CSS background color for the active section in progress style. |
done_bg_color |
CSS background color for completed sections in progress style. |
todo_bg_color |
CSS background color for upcoming sections in progress style. |
Value
An HTML tag with attached dependencies.
Examples
# Add a simple roadmap footer
use_roadmap(
sections = c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps")
)
# Customize the progress style
use_roadmap(
sections = c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
style = "progress",
active_color = "#ffffff",
done_color = "#ffffff",
todo_color = "#334155",
active_bg_color = "#2563eb",
done_bg_color = "#475569",
todo_bg_color = "#e2e8f0"
)