Bridgetown reveal.js Plugin
Bridgetown is a ruby powered static site generation. Reveal.js is an open source HTML presentation framework.
This plugin wires the two together so that you can use bridgetown to host a reveal.js presentation as a section of your site.
Installation
Using an Automation
The preferred method to install this plugin is to run the automation. There are files to add / update to your site that uses this plugin and it is most easily done through the automation.
bin/bridgetown apply https://github.com/copiousfreetime/bridgetown_revealManual Installation
Run this command to add this plugin to your site's Gemfile.
bundle add bridgetown_revealAnd then run the automation locally:
./bin/bridgetown apply $(bundle show bridgetown_reveal)/bridgetown.automation.rbIf you prefer NOT to run the automation, then look at the the automation file and apply the updates manually:
https://github.com/copiousfreetime/bridgetown_reveal/blob/main/bridgetown.automation.rb
The steps are:
- Add the initializer to your configuraiton in
config/initializers.rbinit :bridgetown_reveal
- Add
reveal.jsto your yarn package:yarn add reveal.js - Install the javascript for bootstrapping reveal.js and import it
- Update the
bridgetown.config.ymlto add theslidescollection. - Install a sample presentation
Usage
The plugin will add a new layout type of bridgetown_reveal/deck and an
associated component of ::BridgetownReveal::Deck.
Integrating a reveal.js presentation into your site involves 3 items:
- Setting a collection for the slides in the top level
bridgetown.config.yml. - Create the single presentation page.
- Creating all the slide content.
For example, if to make a new presentation at output location /slidey you
would do the following:
Add the slidey collection to the bridgetown.config.yml file:
collections:
slidey:
sort_by: order
name: SlideyCreate the page for the presentation at src/slidey.erb
---
layout: bridgetown_reveal/deck
---
<%= render ::BridgetownReveal::Deck.new(site: site, collection: 'slidey') %>Put all the slidey content pages themselves in src/_slidey/. The pages will all be
combinded together and sorted based upon the order value in the frontmatter.
src/_slidey/intro.html
---
order: 1
---
<section>
<h1>The first slide of the Intro</h1>
</section>
<section>
<h1>The 2nd slide of the Intro</h1>
</section>src/_slidey/outro.html
---
order: 100
---
<section>
<h1>The penultimate slide of the talk.</h1>
</section>
<section>
<h1>Thank you, and goodnight</h1>
</section>All of the content is reveal.js <section> content. The
top level wrapper for reveal.js is inside the bridgetown_reveal/deck layout.
Testing
- Run
bundle exec rake testto run the test suite - Or run
script/cibuildto validate with Rubocop and Minitest together.