Reveal.js CDN Template

# Reveal.js CDN Template

### A single-file starter deck

<p class="kicker">Press <strong>S</strong> for speaker notes, <strong>?</strong> for help</p>

Note: Speaker notes go here. They are visible in the speaker view.

-----
## What this template shows

- Markdown slides and separators 
- Fragments and fragment ordering 
- Backgrounds and transitions 
- Auto-animate and layout helpers 
- Code highlighting and tables

-----

## Slide attributes in Markdown

Use an HTML comment to set slide attributes:

```html

```

Note: This slide sets a background gradient and a custom transition.

-----
## Fragments with order

- First point 
- Second point 
- Emphasized point 
- Final point

-----

## Auto-animate

<div class="auto-flow" data-id="flow">
  <div class="panel" data-id="card-a">Draft</div>
  <div class="panel" data-id="card-b">Review</div>
  <div class="panel" data-id="card-c">Ship</div>
</div>

---

## Auto-animate

<div class="auto-flow stacked" data-id="flow">
  <div class="panel" data-id="card-a" style="width: 60%;">Draft</div>
  <div class="panel" data-id="card-b" style="width: 60%;">Review</div>
  <div class="panel" data-id="card-c" style="width: 60%;">Ship</div>
</div>

-----
## Vertical slides

Use `---` to create vertical stacks under a single topic.

---
### Vertical slide A

- Part 1 
- Part 2

---
### Vertical slide B

A good place for examples or a mini-deep dive.

-----
## Code highlighting

```js
import Reveal from "reveal.js";
import RevealMarkdown from "reveal.js/plugin/markdown/markdown.esm.js";

Reveal.initialize({
  hash: true,
  plugins: [RevealMarkdown]
});
```

-----
## Tables and layout helpers

<div class="r-hstack" style="gap: 1.2em; align-items: flex-start;">
  <table>
    <thead>
      <tr>
        <th>Stage</th>
        <th>Goal</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Draft</td>
        <td>Clarify</td>
      </tr>
      <tr>
        <td>Review</td>
        <td>Refine</td>
      </tr>
      <tr>
        <td>Ship</td>
        <td>Share</td>
      </tr>
    </tbody>
  </table>
  <div class="panel small">
    <p class="muted">Built-in layout helpers:</p>
    <p><code>r-hstack</code>, <code>r-vstack</code>, <code>r-stack</code>, <code>r-fit-text</code></p>
    <p class="muted">Custom CSS classes are fine too.</p>
  </div>
</div>

-----

## Background color

Set a solid background color with:

```html
<section data-background-color="#111827">...</section>
```

-----
## Speaker notes

Press <strong>S</strong> to open speaker view.

Note: You can put cue words, timings, or links here.

-----
## Quick start checklist

1. Replace title, subtitle, and author
2. Delete the demo slides you do not need
3. Keep the CDN links (or pin a version)
4. Add your content in Markdown

-----
## Local helper scripts

- `s/serve` runs a local web server (uses `live-server`, installs it if missing)
- `s/pdf` exports `slides.pdf` via DeckTape (requires Docker)

-----
## Updating Reveal.js

Pin a CDN version by adding `@x.y.z` to the URLs, for example:

```
https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/reveal.css
```

To update, change the version number.

-----
## Resources

- revealjs.com
- github.com/hakimel/reveal.js

-----
## Agent guide

`AGENTS.md` documents how to create a new presentation from this template, including the questions to ask and the edits to make.