In my last post I demonstrated how to create HTML presentations with deck.js and hosting them inside your Octopress blog. While the ‘client-side’ is basically finished, the ‘backend’ still needs some work because
- we can’t use markdown to write the slides
- we must create a new slidedeck by hand
The first problem can be solved by creating a custom Liquid::Block
for slides and the second
problem can be solved by creating a small rake task that basically works the same as the new_post
task.
A Liquid::Block for Slides
Currently, when writing slides, we have to use HTML because Markdown inside HTML block tags like
<div></div>
will be ignored by the Markdown processor. To fix this problem we will create a custom
Liquid::Block
that wraps its content inside a slide div. With the help of the Liquid::Block
we
can write a slide like this:
1 2 3 4 |
|
This will then compile to the following HTML:
1 2 3 4 |
|
Implementation
Implementing the Liquid::Block
is actually quite easy. First, we create a file slide.rb
in ./plugins
with the following content:
1 2 3 4 5 6 |
|
This creates a class for our custom Liquid::Block
and registers it as a tag in the Liquid engine. This is enough to use
the tag but nothing will be generated yet. Next we will override the initialize
method and parse the id of the slide.
1 2 3 4 5 6 7 8 9 10 11 |
|
Since we only have to parse one argument, the id, this is fairly simple. The markup
variable contains everything that comes
after slide
in the opening brackets, i.e. <div class='slide' id='markup'></div>
. The regex we use to parse the id matches the
first word and ignores everything thereafter.
The next step is to override the render
method that converts everything inside our slide block
from Markdown to HTML and wraps it with a slide div.
1 2 3 4 5 6 7 8 9 10 11 12 |
|
The only interesting part here is the usage of super
. We call super
here to get the content of
our block tag and run it through RDiscount to convert it to HTML.
And that is all we need for our custom slide block !
A Rake task for Slides
The will be even easier than creating the Liquid::Block
. First we define two new variables in the
Rakefile
which are pretty self-explanatory
1 2 |
|
For the task itself we copy the existing :new_post
task and replace the posts_dir
with
slides_dir
, new_post_ext
with new_slides_ext
and adjust all the messages. We will also add all
the deck.js options to the YAML Front Matter and change the layout from post
to slides
. The
complete slides task looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|