Install via rubygems:
$ sudo gem install shining
Creating a new presentation:
$ shine mypresentationdir
Shining will then copy all necessary files to run a presentation to the mypresentationdir directory. To run the presentation, from inside the presentation's directory, run:
$ shine go
To view it, point your browser to http://localhost:4567.
BONUS: Host it on Heroku by running:
$ shine deploy
Win!
Shining consists of a generator, the command shine, and a basic set of JavaScripts and CSS. That alone will give you a working system for creating and showing slides from inside a web browser. From there, you can use a theme (the default theme is there by, err, default), customize it, or even modify Shining so it does what you'd like.
Shining also features brain-dead easy deployments to Heroku, so you can host your presentations as an application for free, provided you have an account.
A presentation is composed of:
The presentation's config file is a valid JSON file that looks like this. The following attributes and values are valid:
Change the directory to the presentation's directory, then run:
$ shine slide mynewslide
Where mynewslide is the name of the slide. A new slide will be created in slides/mynewslide.html. This will also automatically updated the config.json file, adding a reference to the new slide.
You can also create slides manually by adding an HTML file to slides, and then adding the file name to config.json. Though really, just use the damn generator.
Shining supports Markdown apart from HTML. To create a new slide using Markdown, run the same command as above, passing "markdown" as a parameter, like so:
$ shine slide mynewslide markdown
You may want to progressively show the contents of a slide. Shining addresses that as "steps". A step is, by default, hidden. Trying to advance to the next slide will show the next step in the order the slide is written. That is, it follows the order in the DOM.
Any element can be a step. Just add a CSS class named step to it and you're set.
Content that is tangential, though related, to the point presented in a slide can be added to it as a note. That is appropriate, say, for adding links which you believe might help reinforcing the argument being presented
To add a note to a slide, you need to add a <aside> tag. The contents of this tag will be shown in a balloon at the bottom right hand corner of the screen.
Like so:
Slides can have an associated script which you can use to trigger certain actions (for example: effects, hiding or showing things) at a predetermined point in time from when a slide plays. Slide scripts are kept in the slide/ directory along with the actual slides, and have the same file name, except that the extension should be .js.
So assuming we have a slide named mynewslide.html sitting in the slides folder, to create a slide script for it, create a file named mynewslide.js in that same folder. Put this in:
Not particularly useful, but what this script does it it schedules 2 alerts: one will fire 2 seconds after the slide appeared, and the second alert will be fired at 8 seconds. This should give you an idea of the syntax for slide scripts.
You can also pass multiple instructions to a single instant in multiple lines, like this:
Like slide scripts, creating a file with the same name as a slide, but using a .css file extension (following the previous example, it would be mynewslide.css), will ensure that the stylesheets gets included in the page as that slide loads. This is handy for when you want a set of rules to only apply when a certain slide plays.
Transitions kick in as you switch from one slide to another. Available transitions are:
Plugins help Shining go a bit further by adding to the core set of functionalities. They consist simply of a Javascript file that gets loaded according to the name specified in a presentation's configuration file (e.g.: resize loads plugins/resize.js).
Plugins available by default:
Shining comes with 2 themes: default and slidedown (vaguely mimics the looks of slidedown, another HTML presentation framework).
You can find examples of both by clicking the slider at the top of this page. The one that's predominantly white is slidedown.
A third custom theme named rain was built specifically for my presentation on CSS Progressive Enhancement, at RORO Sydney on September 2010. It suits as a good example of how easy it is to build a custom theme for Shining. Source for it can be found here.
Deploying a Shining presentation to Heroku allows you to quickly host a presentation online. This can be handy if for any reason you don't have a web server handy to host it.
In a presentation's directory, run:
$ shine deploy
Shining will create a URL friendly name based on the name of your presentation. You can override that by passing an argument to be used as the app name, as in:
$ shine deploy "peanut butter jelly time"
Check the console output for the URL where your presentation is hosted.
Shining is licensed under the MIT License. The code is hosted on GitHub. Please report issues using GitHub's issue tracker.