A gallery for your reveal.js presentations

I started using reveal.js 5 years ago. It's a framework for creating presentations using HTML. It's an alternative to Microsoft PowerPoint or LibreOffice Impress but using a text editor and a browser.

Every slide in the presentation is put into a <section> tag and the whole content is between a <div> tag with the class slides assigned.

<div class="slides">
  <section>
    Slide 1
  </section>
  <section>
    Slide 2
  </section>
</div>

According to the GitHub repository of reveal.js, you can use Markdown to format the content of the presentation by adding the data-markdown attribute to your elements and wrapping the content in a <textarea data-template> like the example below.

<section data-markdown>
  <textarea data-template>
    ## Page title
    A paragraph with some text and a [link (http://hakim.se).
  </textarea>
</section>

If you decide to use Markdown, you can create a file with .md extension and add the data-markdown attribute as follows.

<div class=”slides”>
  <section data-markdown="slides.md" data-charset="utf-8">
  </section>
</div>

When you’re going to create a new presentation, you need to copy all files of reveal.js to another folder, create a Markdown file and add the content of the slides. Every time you give a talk or a workshop you need to find the folder where you saved your presentation and open the index.html file in your favorite browser.

What if you have all of your slides in one place? With this question in mind I started working on a web app in January 2018. Originally developed with Python and Flask for the backend, and UIKit for the frontend.

reveal.js Gallery exists as a way to better organize and access all of your presentations from one place.

It was a weekend project and the first version of the application showed a form like the following where it lists all of your presentations.

After selecting the presentation and pressing the button “Open”, slides were loaded in browser.

Then in March 2018, after working on it for 2 days, I completed the migration from Python to Rust (Mozilla's programming language). I used Rocket, which is a web framework for Rust

I published an article on Medium that month where I listed a few of the tasks that needed to be done like:

• Design a new UI
• Write documentation

On December 25th 2018 I sent changes to the repository on GitHub, a new version of the app with a new UI, a new license, code of conduct, contributing guidelines and a README with general information about the project.

Changes

Between the first version, developed with Python and Flask, and recent version, built with Rust and Rocket, some important changes have been made to the project.

• The license chosen at the beginning was GNU General Public License v3.0, then it was changed to MIT License, which I considered to be more appropriate for the project, as reveal.js and UIKit are published under the same license.

• Contributing guidelines. Information about how to contribute to the project is available in the CONTRIBUTING.md file on the GitHub repository.

• Code of conduct. Adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html.

• New UI based on a UIKit template.

• .gitignore file was added.

• reveal.js and UIKit files were remove from the css and js directories in /static. A bash script was created for getting the latest released versions of both framework.

• Compatibility with Rust 2018 and improvements to the code. Modifications made in the Cargo.toml file.

• Support for Speaker Notes and Multiplexing.

• Individual URL assigned to every presentation and access by writing the full path in the address bar.

New UI

The new user interface (UI) is based on the Dashboard template by KickOff for UIKit. The left sidebar displays links to social networks, a profile picture and name.

Configuration

Social media profiles can be updated by editing the social.json file in /static/data/, writing the username not the completed URL (e.g. "twitter": twitter).

[
        {
            "facebook": "#",
            "twitter": "#",
            "linkedin": "#",
            "github": "#"
        }
]

Name can be changed in the main.rs file in /src by modifying the line 29.

  ...
      let name = "John Doe";
  ...

Profile picture (avatar.svg) is located in /static/img. Edit this file with a tool like Inkscape.

Features

I. Individual URL. You can access a presentation by writing its URL in the address bar on your favorite browser (e.g. http://localhost:8000/presentation/slide1).

II. Individual theme. Use a different theme for every presentation in your gallery.

III. Speaker notes. Support for speaker notes was added. Press 's' on your keyboard to open speaker notes window.

IV. Multiplexing. It's one of the plugins I like the most from reveal.js and it was tested within the gallery app. Instructions will be added soon to the README.

Getting started

These instructions will get you a copy of the project up and running on your local machine.

Prerequisites

I. Install Rust, on GNU/Linux or Mac:

curl https://sh.rustup.rs -sSf | sh

for any other operating system go to rustup.rs.

This project was build using Rocket which is a web framework written in Rust and it uses the nightly version of the language.

II. Install Rust Nightly:

$ rustup install nightly

III. Clone the repository of reveal.js Gallery

$ git clone https://github.com/mattdark/reveal.js-gallery.git

IV. Set nightly as default

$ cd reveal.js-gallery
$ rustup override set nightly

V. Copy UIKit and reveal.js to the static directory:

$ sh installer.sh

New Presentation

I. Create a Markdown file with the content of your presentation, assign a name that identifies it and save it in /static/slides. There are two examples in that directory. And you can check the documentation of reveal.js on revealjs.com and its repository on GitHub.

• Note: --- is used as horizontal separator and ---- as vertical. To add notes just put them after Notes: . You can also use Markdown for your notes.

Slide 1

Note:
This is the first slide

---

Slide 2

Note:
- This is the second slide

II. Use reveal.js themes or create your own and put it in /static/reveal.js/css/theme.

III. Take a screenshot of the first slide of every presentation and save it in /static/img/screenshot. I recommend the 'Take a screenshot' option in Firefox.

IV. Add the following information to slides.json in /static/data. There is a slides.json example file.

• id - A number assigned to identify each presentation
• file - Name of the Markdown file
• title - Title of the presentation
• description - Description of the presentation
• style - Name of the theme file
• url - Path for your presentation (e.g. slide1)
• screenshot - A screen capture of your presentation

Running

In debug mode:

$ cargo run

In release mode:

$ cargo run --release

Now open https://localhost:8000 in your favorite browser (I recommend Firefox) and select your presentation.

You can also access your presentation by writing the full path in the address bar (e.g. https://localhost:8000/presentation/slide1).