Patching Octopress Plugins

Attention !
  1. Patching plugins can make upgrades difficult (if you want to to upgrade Octopress at all). It is not required and you can skip this step and go straight to the next part of this guide.
  2. If you don't know how diff(1) and patch(1) works, it is probably better that you avoid patching at all.

Introduction

There are a few parts where we can improve Bootstrap’s integration into Octopress. I wish there was another way than patching the plugins, but it is the only way as long as they output markup and don’t delegate formatting to the theme.

Theses patches were tested against the latest version of Octopress master's branch at the time of writting (23 Jan 2015):
commit 5080107cb9e4c7bad8feb719f7e57c1da3b20c65

Use Bootstrap's panels for code

Both the codeblock and include_code liquid tags have been styled in this theme so their header looks a lot like Bootstrap’s panels. However, they don’t actually output Bootstrap’s classes. The default is fine as long as you’re using the default Bootstrap theme (as this blog) or no theme at all. Here are the two versions (check the markup):

not patched:

fancy title 
1
10.times { print "Hello World !" }

patched:

fancy title 

1

10.times { print "Hello World !" }

If you want to use another boostrap theme than the default theme, it would be better to have theses plugins output the Bootstrap’s panel classes so they can be style by your theme. Here are two patches, the first is for the code_block plugin and the second for the include_code plugin.

(code-block-with-bs-panel.patch)

download
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

diff --git a/plugins/code_block.rb b/plugins/code_block.rb
index 539a347..733bea2 100644
--- a/plugins/code_block.rb
+++ b/plugins/code_block.rb
@@ -60,10 +60,10 @@ module Jekyll
       end
       if markup =~ CaptionUrlTitle
         @file = $1
-        @caption = "<figcaption><span>#{$1}</span><a href='#{$2}'>#{$3 || 'link'}</a></figcaption>"
+        @caption = "<figcaption class='panel-heading'><h3 class='panel-title'>#{$1}</h3><a href='#{$2}'>#{$3 || 'link'}</a></figcaption>"
       elsif markup =~ Caption
         @file = $1
-        @caption = "<figcaption><span>#{$1}</span></figcaption>\n"
+        @caption = "<figcaption class='panel-heading'><h3 class='panel-title'>#{$1}</h3></figcaption>\n"
       end
       if @file =~ /\S[\S\s]*\w+\.(\w+)/ && @filetype.nil?
         @filetype = $1
@@ -74,7 +74,7 @@ module Jekyll
     def render(context)
       output = super
       code = super
-      source = "<figure class='code'>"
+      source = "<figure class='code panel panel-default'>"
       source += @caption if @caption
       if @filetype
         source += "#{HighlightCode::highlight(code, @filetype)}</figure>"

(include-code-with-bs-panel.patch)

download
1
2
3
4
5
6
7
8
9
10
11
12
13

diff --git a/plugins/include_code.rb b/plugins/include_code.rb
index a61d06c..1c77426 100644
--- a/plugins/include_code.rb
+++ b/plugins/include_code.rb
@@ -59,7 +59,7 @@ module Jekyll
         @filetype = file.extname.sub('.','') if @filetype.nil?
         title = @title ? "#{@title} (#{file.basename})" : file.basename
         url = "/#{code_dir}/#{@file}"
-        source = "<figure class='code'><figcaption><span>#{title}</span> <a href='#{url}'>download</a></figcaption>\n"
+        source = "<figure class='code panel panel-default'><figcaption class='panel-heading'><h3 class='panel-title'>#{title}</h3> <a href='#{url}'>download</a></figcaption>\n"
         source += "#{HighlightCode::highlight(code, @filetype)}</figure>"
         TemplateWrapper::safe_wrap(source)
       end

Use Bootstrap's labels for categories

This patch will improve how categories are displayed (at the end of a post and in the Archives page). By default, Octopress output the categories as a list of links separated by commas, for example:

fruits, vegetables, mushrooms

One of Bootstrap’s components are labels and they’re perfect for the job. The patch will turn them into this:

fruits vegetables mushrooms

And here it is:

(category-with-bs-label.patch)

download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

diff --git a/plugins/category_generator.rb b/plugins/category_generator.rb
index 769a55b..79db41b 100644
--- a/plugins/category_generator.rb
+++ b/plugins/category_generator.rb
@@ -153,7 +153,7 @@ ERR
     # Returns string
     #
     def category_links(categories)
-      categories.sort.map { |c| category_link c }.join(', ')
+      categories.sort.map { |c| category_link c }.join(' ')
     end

     # Outputs a single category as an <a> link.
@@ -164,7 +164,7 @@ ERR
     #
     def category_link(category)
       dir = @context.registers[:site].config['category_dir']
-      "<a class='category' href='/#{dir}/#{category.to_url}/'>#{category}</a>"
+      "<a class='category label label-primary' href='/#{dir}/#{category.to_url}/'>#{category}</a>"
     end

     # Outputs the post.date as formatted html, with hooks for CSS styling.

Comments