This is a template for authoring HTML5 slide decks. Based on IO 2012 Slides, but Panda-flavored.
-
Install Harp, if you don't already have it:
npm install -g harp -
Create a new slide deck:
harp init [name] -b pandastrike/panda-slidesNOTE: If
nameis omitted, slides will be created in the current directory. -
Start a server for live preview:
harp serverOpen your browser and go to http://localhost:9000/
That's it! Now you can open index.jade in your $EDITOR and start hacking away.
You can customize basic settings in slide_config.js.
This includes the presentation title, Analytics tracking ID, speaker
information (name, social urls, blog), web fonts to load, themes, and other general behavior.
The stylesheet is currently written in SASS, althought there are plans to port it to Stylus. Stylesheets are compiled on-the-fly when using the editing preview, thanks to Harp. All you have to is make some changes and reload the page in your browser. Easy peasy.
You can run the slides either by using a local server (recommended for development) or by producing a static HTML version (for uploading to your website).
Make sure you have Harp installed (see "Getting Started"), then just navigate to your slides directory and run harp server. Open your browser and go to http://localhost:9000/slides.html. Done!
Again, make sure you have Harp installed. Navigate to your slide directory and run harp compile [outputDir]. Your compiled slide deck will be found in outputDir (or ./www if you did not specify one).
The slides contain a presenter mode feature (beta) to view + control the slides from a popup window.
To enable presenter mode, add presentme=true to the URL: http://localhost:9000/?presentme=true
To disable presenter mode, hit http://localhost:9000/?presentme=false
Presenter mode is sticky, so refreshing the page will persist your settings.
Credits go to the original authors of the Google slide template, Eric Bidelman and Luke Mahé. Without their work this would not be possible.