So, I’m about the give a short talk about Octopress at the next RUGSaar (Ruby Usergroup Saar) meeting. Since I will probably need at least a bunch of slides I thought about the way of presenting them. PowerPoint (or similar) would be the natural choice but it isn’t very hacker…ish and since Octopress is “a blogging framework for hackers” we surely can do better.
I’ve recently read about various HTML5 based web presentation frameworks and wanted to try them out but didn’t have an opportunity ‘til now. I’ll go with deck.js for no specific reason other than that it seems easy to show the slides inside an existing webpage or blog. So I’ll be giving a talk about Octopress with slides hosted inside my own Octopress blog !
I have linked most source files instead of embedding the source directly because the liquid tags in html pages won’t render correctly
The slides layout
- Loading all the css files required by deck.js in the head.
- Loading all the js files required by deck.js in the body and initializing the slidedeck. Extensions should be activatable per slidedeck.
- Loading a theme and transition effect defined by each slidedeck
Since we want to host the slides inside our blog, the slides layout should have the default octopress layout as its parent, similair to the layout for posts and pages.
Loading the CSS
A quick peek at the deck.js source shows that the author kindly included the SASS files from which
the CSS was created. This means that we can easily add those and compile them into our
instead of loading them all separately. We will start by creating a
and copying all the
deck.*.sccs files into it. We should also rename them to
match the SASS naming convention for partial files. Then we’ll create
that imports all the files from the deck.js subfolder and finally import that file at the top of
1 2 3 4 5 6 7
Loading the JS
This part will be rather easy. We will use the source/_layouts/page.html as a template for our
slides layout. We can basically keep it as is and only change the page secific stuff like
custom/slides-meta.html. I also changed the
<header/> tag to a
title slide that shows the title of the slidedeck and some other minor
stuff. Anyway, the important part is to add the deck.js stuff directly below the
tag and add a
.deck-container div as a subelement of
To support deactivation of specific extensions for each slidedeck, we will wrap the markup for each
extension with a “ Liquid block. The properties of the page
can be set in the YAML Front Matter which I’ll cover in a minute. Here’s the source of the
Support for Themes and Transition Effects
We will also use page properties for loading a specific theme on transition effect. The markup will
reside in source/_includes/custom/head.html and is quite simple. It just loads the css file for
the theme and transition effect with the name provided by
Creating the Slides
With the layout in place, we can now actually start to work on the slides. We’ll create a
source/slides folder and
demo.html inside. To keep it simple, we’ll add just two slides.
1 2 3 4 5 6 7 8 9 10 11 12
layout: slidedeck in the YAML Front Matter. This tells octoblog to load our custom
slidedeck layout. And that’s basically it. You can see the result here.
Although everything seems to work, there is still work to do. The most important thing is, that we can’t use Markdown the create write out slides because Markdown written inside HTML block tags will be ignored by the Markdown processor. This is not a bug, but working as intended. It would also be nice to have a Rake task for generating the slidedeck stub, similar to the task that generates a post stub. But this will all be part of my next post.