reveal.js-webpack-kit

Reveal.js powered by Webpack 4

Reveal.js webpack-based build system:

• Webpack as a versatile build system setup. Serve your presentation(s) and enjoy the Hot Module Reloading capabilities or just build your slides for production. Multiple entry points (HTML files) are accepted!
• Babel to enjoy the most up-to-date javascript syntax
• Sass because CSS preprocessors are pretty useful and Reveal.js uses that one (enabling us to easily reuse or modify variables)

Come with lots of Reveal.js goodies:

• Reveal.js-d3 for interactive figures embedding
• Reveal_external to load external files into your presentation and allow for nested slide loading
• Reveal.js-menu to have a very handy slideout menu and quickly jump to any slide by title.
• Font Awesome 5 to fully enjoy the brand new SVG-based framework (built-in option to choose between the CSS or SVG framework)
• Mathjax for beautiful math in all browsers
• Modified Reveal.js Math.js file to allow customized fragment events in your Mathjax equations (see below)

Motivation?

I needed a robust system to build several presentations sharing a common library of slides (to develop a class) without the hassle of copy-pasting. I wanted a system that was easily upgradable to the latest versions of the dependencies.

This way, everything stays separated, content (slides), tools (libraries) and configurations files (for the different tools). Just bump the version of any dependencies by doing npm update and rebuild your presentation(s). Done.

How?

Download this repository, go in it and then:

$ # Install dependencies
$ npm install
$ # Do an initial build with the Font Awesome framework of your choice
$ npm run dev-fa-svg
$ # Launch the dev server with hot module replacement
$ npm run live-fa-svg

Look at what the output tells you: There will a server be running (usually on http://localhost:9000) with your presentation. Any changes to the source files will trigger a reload of the presentation (you’ll stay on the current slide of course).

Work in the src folder!

Configuration

Font Awesome Framework

The project has been build to work with the Font Awesome 5. You can choose between:

• the new SVG with Javascript framework and enjoy the latest features (e.g.: layering or power-transform new capabilities).
• the well established Webfonts with CSS framework.

Note that when the SVG framework is selected, every html files will be scanned and only the icons used will be included in the final bundle (tree-shaking). The svg and css frameworks can be called directly using the npm run-script command (see below).

Dev-server, development-build and production-build

Unminified files will be generated for the developent builds. Minification of the files will be done in all the production build (but building time will be increased, especially if the Font Awesome SVG framework is used). All the build will be generated in the dist folder

$ # Development build, font awesome css framework
$ npm run dev-fa-css

$ # Development build, font awesome svg framework
$ npm run dev-fa-svg

$ # Production build, font awesome css framework
$ npm run build-fa-css

$ # Production build, font awesome svg framework
$ npm run build-fa-svg

$ # Launch the dev-server with hot module replacement with font awesome css framework
$ npm run live-fa-css

$ # Launch the dev-server with hot module replacement with font awesome svg framework
$ npm run live-fa-svg

Note when Hot Module Replacement is used (dev-server):

• HMR can deal with files already present in the dist (built) folder. So make a build (e.g.: npm run dev-fa-svg) before launching the dev-server to make sure all the files in your src folder have been transfered to the build folder.
• If FA svg framework is used in development mode, the tree-shaked js file created for each html entry won't be updated, so you'll need to rebuild to see the icons. (this won't happen if the css framework is used since all the icons will be accessible via the webfonts).
• The same applies if you're using the reveal-external plugin (the dev-server search the file in the dist folder, not the src). You need to make sure the files are also in the build folder, since this is where your app will look for it, so rebuild.

Programming languages supported for code presentation

At the top of the webpack.config.js file are some of the configurations that you can setup, in particular you can select the programming languages supported by highlight.js for code presention (reveal.js <pre><code> tags) in the slides. To minimize the bundle size, you have the possibility to only include the languages that you are using in your presentation(s).

Project structure

Below is an overview of the project structure:

reveal.js-webpack-kit/
├── presentation1.html                          # your different slide decks
├── presentation2.html
├── presentation3.html
├── src/
|   ├── _scripts/
|   |      ├── reveal-config.js                 # configuration for reveal
|   |      └── reveal-dependencies-config.js    # configuration for the plugins
│   ├── _styles/
|   |      └── *.scss                           # all the style files
|   └── content/                                # any content that you refer 
|                                               # in your slides (img, etc ...)
|
├── dist/                   # where your builded slides will be
|
└── webpack.config.js       # some configuration for the build can be tweaked