Bespoke.js is a module to create HTML 5 slideshows. It's design is extremely modular, and functionality is usually achieved via plugins. There is an official generator for Yeoman, but I'm not very happy with its setup, so I decided to roll out my own.
Yeoman is a scaffolding tool. It will produce templates for different types of projects, which you can configure.
The slideshow template that is generated features the following:
Install Yeoman if you don't have it in your system. The generated template uses Gulp to run tasks (build Browserify, publish the slideshow in Github pages) so you will need to install it as well.
npm -g install yo gulp
Install the generator:
npm install generator-simple-bespoke
To build the slideshow, publish it on Github, etc. you will need Gulp as a task runner:
npm install -g gulp
Generate the template
Now create an empty directory for your slideshow project, and run Yeoman inside it:
mkdir slides cd slides yo simple-bespoke
You will be asked the title of your talk, whether you need syntax highlighting code, etc.
Making the slideshow
You can create a release in a
dist directory, ready to be consumed (or deployed via
rsync to a server):
While you are writing the presentation, it is usually more convenient to have Gulp automatically rebuild the assets as you are modifying them. You can use the
dev task to do this. This will also reload your browser automatically.
To clean up the
dist folder and development build files, run:
Deploying to Github Pages
If you want to deploy to Github Pages, you will need to answer
Y when prompted and setup a Github repository for this project. Then run:
This has several disadvantages, such as ruining the CSS cascade and making the theme extremely hard to customise.
This generator does not use that theme system. Instead, a simple stylesheet is provided with barebones functionality (so you can have an actual slideshow). You can add your own styles to this stylesheet.
- First version
generator-simple-bespoke is released under the MIT license. Read
LICENSE for details.