Revelry is a project builder for Reveal.js.
If you make a lot of presentations with Reveal, you will find yourself unnecessarily duplicating huge chunks of boilerplate. With Revelry you can concentrate on your presentation content and let Revelry take care of the rest.
This is an alpha release. See the issues tracker for the list of planned features and known issues.
$ npm install -g revelry
Note: if you are cloning this repo and installing locally, you will need to
specify the --unsafe-perm
option to npm install
. This is because the
postinstall needs access to the reveal.js dependency.
If you have Docker installed, you can use Revelry without needing to install anything. For example:
$ docker run -v $(pwd):/work -u $(id -u) fishpercolator/revelry new myproject
Or create an alias:
$ alias revelry='docker run -v $(pwd):/work -u $(id -u) fishpercolator/revelry'
$ revelry new myproject
$ revelry new myproject -t "My amazing presentation" -d "A short description of my presentation"
myproject/
Revfile.json
slides.html
img/
custom/
custom.css
header.html
Revfile.json is where all the configuration for your presentation goes. In here you can specify the title and description as well as Reveal options such as theme and plugins. (Note: Revfile.json is really JavaScript code, rather than JSON, so you can include functions and other complex types in here. The usual warnings about editing executable code apply.)
slides.html is a Handlebars-enabled
HTML file containing your slides. Each slide is given an HTML
<section>
. The contents of Revfile.json
are used as the
Handlebars context.
img/ is a directory where you can put images you need for your
presentation. Its contents will be copied to the built site's img/
dir when your project is built.
custom/ contains files that can be used to override some of the default HTML and CSS provided by Reveal. (See below.)
<section>
<h1>{{title}}</h1>
<h2>{{description}}</h2>
</section>
<section>
<h2>My first slide</h2>
<ul>
<li class="fragment">Bullet one</li>
<li class="fragment" style="color:red">Bullet two</li>
</ul>
</section>
You can break your presentation into multiple files, which can be a mixture of Handlebars and Pug. Then you can include them in each other using each language's native include syntax. For example:
<section>
<h1>Handlebars example</h1>
</section>
{{! Include intro.html or intro.pug}}
{{> intro}}
section
h1 Pug example
//- Include another Pug file
include intro.pug
//- Include a Handlebars file
include:handlebars intro.html
Once you have filled out the contents of Revfile.json
and slides.html
,
you can build your project.
$ cd myproject/
$ revelry build
By default this will create the project in a .gitignored subdirectory
www
of the project directory, but you can specify any target
directory:
$ revelry build /var/www/myproject
Most of the configuration of a Revelry project happens in the
Revfile.json
. Some of the supported keys are:
Including a plugin name in the plugins array of Revfile.json
will
cause the appropriate files to be copied to the built project from
Reveal.js and the necessary JavaScript files loaded as dependencies.
If you want to configure the plugin further, you'll need to add the config separately to options. See the Reveal.js documentation for more details.
Currently supported plugins are:
npm install
so it
can be used)The multiplex plugin is not supported because its configuration is too complicated to automatically guess.
Revelry currently doesn't support any plugins other than the standard ones. Watch out for 3rd-party plugin support in a future release.
Add CSS to the custom.scss
file if you want to override the theme's
default CSS or add classes of your own.
The file is preprocessed with Sass, so you can use variables, nested selectors, etc. if you wish.
Note that you'll need to put all your overrides inside the .reveal
class, like this:
.reveal {
h1 {
color: black;
}
}
If you need to insert any additional info into the HTML header (such
as meta tags or links to CSS or RSS), you can edit the header.html
file. The contents of this file will be inserted into the
<head>
of the presentation.
You can also set any of the <meta>
tags using the meta
object in
Revfile.json
. If you don't have one because your project was created by an
older version, run revelry upgrade
on your project to bring it up to date.
Added in 2.0.0. This contains the code to initialize Reveal.js and any custom JavaScript you want to add to your presentation.
If you have a project that was created before 2.0.0, you'll need to run
revelry upgrade
to create this file before you can build.
Revelry also supports templates in Pug format, which is a more concise language than HTML and lends itself quite well to writing presentations.
If you have a slides.pug
instead of slides.html
, it will be
parsed as a Pug file.
You can also create a new Pug project outright, e.g.:
$ revelry new myproject --pug
The Revfile context will be passed to Pug as locals, so you can use its values the same way you would in Handlebars.
The earlier example, expressed as Pug, is:
section
h1= title
h2= description
section
h2 My first slide
ul
li.fragment Bullet one
li.fragment(style='color:red') Bullet two
Note: The resulting HTML is still processed by Handlebars.
Copyright 2014-2015, Fish Percolator.
Released under a BSD-style license.
Fork me on Github: https://github.com/fishpercolator/revelry
Issue tracker: https://github.com/fishpercolator/revelry/issues