A gallery for your reveal.js presentations
Tags: rust, opensource
Published: 2019-01-26 01:30:05

I started using **[reveal.js](https://revealjs.com)** 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.

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

According to the **[GitHub](https://github.com/)** repository of [reveal.js](https://github.com/hakimel/reveal.js), you can use **Markdown** to format the content of the presentation by adding the **data-markdown** attribute to your **<section>** elements and wrapping the content in a **`<textarea data-template>`** like the example below.

```html
<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.

```html
<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](https://python.org/)** and **[Flask](http://flask.pocoo.org/)** for the backend, and **[UIKit](https://getuikit.com/)** for the frontend.

**[reveal.js Gallery](https://github.com/mattdark/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.

![reveal.js gallery](https://cdn-images-1.medium.com/max/800/1*9S3kjNaHi2PSz9jgGgjsEw.png)

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

![reveal.js slides](https://cdn-images-1.medium.com/max/800/1*S0o1_3d7_qL7B1huOhStTQ.png)

Then in March 2018, after working on it for 2 days, I completed the migration from **Python** to **[Rust](https://rust-lang.org/)** (Mozilla's programming language). I used **[Rocket](https://rocket.rs/)**, which is a web framework for **Rust**

I published an article on **[Medium](https://medium.com/@mattdark/presentation-manager-written-in-rustlang-f36b73bb8dd2)** 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](https://www.contributor-covenant.org/)**, 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](https://zzseba78.github.io/Kick-Off/dashboard.html)** template by **[KickOff](https://github.com/zzseba78/Kick-Off)** for **UIKit**. The left sidebar displays links to social networks, a profile picture and name. 

![reveal.js gallery UI](https://raw.githubusercontent.com/mattdark/reveal.js-gallery/screenshots/screenshot/reveal.js-gallery.png)

### 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).


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

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

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

Profile picture (**avatar.svg**) is located in **/static/img**. Edit this file with a tool like **[Inkscape](https://inkscape.org/)**.

## 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:

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

for any other operating system go to **[rustup.rs](https://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:

```bash
$ rustup install nightly
```

III. Clone the repository of **reveal.js Gallery**

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

IV. Set nightly as default

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

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

```bash
$ 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](https://revealjs.com/) and its repository on [GitHub](https://github.com/hakimel/reveal.js).

- 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.

```markdown
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).