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.
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_reveal
Run this command to add this plugin to your site's Gemfile.
bundle add bridgetown_reveal
And then run the automation locally:
./bin/bridgetown apply $(bundle show bridgetown_reveal)/bridgetown.automation.rb
If 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.rb
init :bridgetown_reveal
- Add
reveal.js
to your yarn package:yarn add reveal.js
- Install the javascript for bootstrapping reveal.js and import it
- Update the
bridgetown.config.yml
to add theslides
collection. - Install a sample presentation
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: Slidey
Create 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.
- Run
bundle exec rake test
to run the test suite - Or run
script/cibuild
to validate with Rubocop and Minitest together.