If you’re a speaker, you’re probably familiar with one of the following situations:
- 4 hours left for the conference, time to prepare my presentation
- I forgot to sync the local git repository of my presentation
- Where did I save my presentation?
Sometimes I’ve been in one of the situations described above but this article isn’t about how to solve all of those issues. Four years ago I left to use LibreOffice Impress. I started using reveal.js, which is a framework for creating presentations using HTML.
Every slide in the presentation is put into a <section> tag and the whole content is betwen a <div> tag with the class slides assigned.
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 <section> elements and wrapping the content in a <textarea data-template> like the example below.
## Page title
A paragraph with some text and a [link (http://hakim.se).
If you decide to use Markdown, you can create a file with .md extension and add the data-markdown attribute as follows.
<section data-markdown="slides.md" data-charset="utf-8">
When you’re going to create a new presentation, you need to copy all files of reveal.js to another folder and edit content of slides. If you have many presentations, you need to find the folder where you saved the one you need at the moment, open index.html file in your browser and do this every time you speak at a conference.
What if you have all of your slides in one place? With this question in mind I developed a web app using Python and Flask a few weeks ago, uploaded the code to a GitHub repository and published an article on Medium. And last weekend I completed migration from Python to Rust (Mozilla’s programming language). I used Rocket which is a web framewok for Rust. The application shows a form like the following where it lists all your presentations.
After selecting the presentation and pressing the button “Open”, slides are loaded in browser.
How does it work?
The first thing to do is to create a Markdown file with the content of your presentation, assign a name that identifies it and save it in /static/slides. You can use reveal.js themes or create your own and put it in /static/css/theme. And finally you need to add the following information in /static/slides.json, which is the file that contains the list of presentations.
- id — A number assign to identify each presentation
- file — Name of the Markdown file
- title — Title of the presentation
- description — Description of the content
- style — Name of the theme file
The first version of the web app was a weekend project that I completed in 3 hours. Last week, on thursday, I started migrating the code from Python to Rust and after two days coding and reading documentation I finally completed the migration on Saturday. There’s so much work left to do. The code is available in the following GitHub repository:
presentation-manager-rs - Manager for HTML5 Presentations - Rust
The following is a list of tasks that needs to be done
- Write documentation of the app
- Add a text editor for creating and modifying presentations
- Design a new UI
- Record a webinar
I will share updates through my blog or social media profiles in the following weeks. Every comment and suggestion are welcome.