Package 'deckroadmap'

Title: Roadmap Footers for 'Reveal.js' Slides in 'Quarto' and 'R Markdown'
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, inherited section tags, roadmap-free slides, and configurable colors, size, and positioning options.
Authors: Tiger Tang [aut, cre]
Maintainer: Tiger Tang <[email protected]>
License: MIT + file LICENSE
Version: 0.1.5.9000
Built: 2026-06-05 20:30:51 UTC
Source: https://github.com/CodingTigerTang/deckroadmap

Help Index

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,
  inherit_tags = TRUE
)

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.
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.

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"
)