rocket-preset-slide-decks

Slide Decks in HTML and Markdown for Rocket. Uses slidem web components.

Configuration

Add the preset to your rocket.config.js, and configure it with a collections object. collections is a record of collection names to tab types. For example, if you want code tabs which switch between install commands for npm, yarn, and pnpm, add the following:

import { slideDecks } from 'rocket-preset-slide-decks';

export default {
  presets: [
    slideDecks(),
  ]
}

Usage

Add an index.md page with the layout-deck layout

docs/decks/example-deck/index.md

---
layout: layout-deck
title: Test
---

Add more files in the slides subdir, and a slides.json to that same dir (IMPORTANT!)

docs/decks/example-deck/slides/slides.json

{
  "permalink": false,
  "tags": ["slide"]
}

docs/decks/example-deck/slides/00-intro.md

---
name: intro
attrs: slide-out center
---

<p center>Test Slide</p>

<small id="keys-legend" center font-size="5vw">

(Space, <kbd>H</kbd><kbd>J</kbd><kbd>K</kbd><kbd>L</kbd> or <kbd>→</kbd><kbd>←</kbd> Keys to Navigate)

(<kbd>F</kbd> for Fullscreen)

</small>

docs/decks/example-deck/slides/01-first-slide.md

---
name: first-slide
attrs: slide-out
---

<h2 fit uppercase color="--primary">First Slide</h2>

Has some content