Correct syntax highlighting etc.

Gemfile

@@ -5,7 +5,7 @@ gem 'nanoc'
 gem 'haml'
 gem 'kramdown'
 
-gem 'coderay'
+gem 'pygments.rb'
 
 gem 'sass'
 gem 'compass'
@@ -13,6 +13,7 @@ gem 'compass'
 gem 'typogruby'
 gem 'nanoc-cachebuster'
 gem 'nanoc-javascript-concatenator'
+gem 'nanoc-code-classifier'
 
 gem 'uglifier'
 gem 'multi_json', '~> 1.3' # needed by uglifier

Gemfile.lock

@@ -4,7 +4,6 @@ GEM
     adsf (1.1.1)
       rack (>= 1.0.0)
     chunky_png (1.2.7)
-    coderay (1.0.9)
     colored (1.2)
     compass (0.12.2)
       chunky_png (~> 1.2)
@@ -26,9 +25,16 @@ GEM
       cri (~> 2.3)
     nanoc-cachebuster (0.3.1)
       nanoc (>= 3.3.0)
+    nanoc-code-classifier (0.1.0)
+      nanoc (~> 3.0)
+      nokogiri (~> 1.0)
     nanoc-javascript-concatenator (0.0.2)
       nanoc (>= 3.3.0)
     nokogiri (1.5.9)
+    posix-spawn (0.3.6)
+    pygments.rb (0.4.2)
+      posix-spawn (~> 0.3.6)
+      yajl-ruby (~> 1.1.0)
     rack (1.5.2)
     rake (10.0.3)
     rubypants (0.2.0)
@@ -43,13 +49,13 @@ GEM
     w3c_validators (1.2)
       json
       nokogiri
+    yajl-ruby (1.1.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   adsf
-  coderay
   compass
   haml
   i18n
@@ -58,8 +64,10 @@ DEPENDENCIES
   multi_json (~> 1.3)
   nanoc
   nanoc-cachebuster
+  nanoc-code-classifier
   nanoc-javascript-concatenator
   nokogiri
+  pygments.rb
   rack
   rake
   sass

README.md

@@ -0,0 +1,9 @@
+# Ariejan.net
+
+This repository contains all the files and data necessary to generate ariejan.net.
+
+## Prerequisites
+
+ * `sudo easy_install Pygments`
+ * `bundle install`
+ * `nanoc compile`

Rules

@@ -23,10 +23,12 @@ compile '/js/*/' do
 end
 
 compile '/posts/*' do
-  filter :kramdown, auto_ids: false, coderay_line_numbers: nil, coderay_tab_width: 2
+  filter :kramdown
+  filter :pygmentizer
   filter :typogruby
   layout 'post'
   layout 'default'
+
   filter :cache_buster
 end
 
@@ -37,7 +39,7 @@ compile '*' do
       filter :erb
       filter :kramdown
     when 'haml'
-      filter :haml, format: :html5
+      filter :haml, format: :html5, ugly: true
     else
       filter :erb
     end
@@ -84,4 +86,4 @@ route '*' do
   end
 end
 
-layout '*', :haml, :format => :html5
+layout '*', :haml, :format => :html5, ugly: true

content/css/_main.scss

@@ -1,3 +1,51 @@
 body {
   font: 14px/20px "Open Sans", Helvetica, "Nimbus Sans L", sans-serif;
+}
+
+pre, .plaincode{
+  background: none;
+  border: none;
+  border-radius: none;
+
+  font-size: 12px;
+  overflow: visible;
+
+  padding: 6px 6px;
+  margin: 0 0 11px 0;
+
+  word-break: normal;
+  word-wrap: normal;
+
+  white-space: pre;
+  display: block;
+}
+
+.plaincode {
+  background-color: #f9f9f9;
+}
+
+.code {
+  overflow: auto;
+  margin: 0 0 11px 0;
+
+  table {
+    width: 100%;
+
+    .linenodiv {
+      background-color: #f4f4f4;
+      color: #AAA;
+      padding: 0 0.5em;
+      border-right: 1px solid #DDD;
+      text-align: right;
+    }
+
+    td.code {
+      width: 100%;
+    }
+
+    .highlight {
+      background-color: #f9f9f9;
+    }
+
+  }
 }

content/css/_pygments.scss

@@ -0,0 +1,61 @@
+.hll { background-color: #ffffcc }
+.c { color: #999988; font-style: italic } /* Comment */
+.err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.k { color: #000000; font-weight: bold } /* Keyword */
+.o { color: #000000; font-weight: bold } /* Operator */
+.cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.c1 { color: #999988; font-style: italic } /* Comment.Single */
+.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.ge { color: #000000; font-style: italic } /* Generic.Emph */
+.gr { color: #aa0000 } /* Generic.Error */
+.gh { color: #999999 } /* Generic.Heading */
+.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.go { color: #888888 } /* Generic.Output */
+.gp { color: #555555 } /* Generic.Prompt */
+.gs { font-weight: bold } /* Generic.Strong */
+.gu { color: #aaaaaa } /* Generic.Subheading */
+.gt { color: #aa0000 } /* Generic.Traceback */
+.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.m { color: #009999 } /* Literal.Number */
+.s { color: #d01040 } /* Literal.String */
+.na { color: #008080 } /* Name.Attribute */
+.nb { color: #0086B3 } /* Name.Builtin */
+.nc { color: #445588; font-weight: bold } /* Name.Class */
+.no { color: #008080 } /* Name.Constant */
+.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.ni { color: #800080 } /* Name.Entity */
+.ne { color: #990000; font-weight: bold } /* Name.Exception */
+.nf { color: #990000; font-weight: bold } /* Name.Function */
+.nl { color: #990000; font-weight: bold } /* Name.Label */
+.nn { color: #555555 } /* Name.Namespace */
+.nt { color: #000080 } /* Name.Tag */
+.nv { color: #008080 } /* Name.Variable */
+.ow { color: #000000; font-weight: bold } /* Operator.Word */
+.w { color: #bbbbbb } /* Text.Whitespace */
+.mf { color: #009999 } /* Literal.Number.Float */
+.mh { color: #009999 } /* Literal.Number.Hex */
+.mi { color: #009999 } /* Literal.Number.Integer */
+.mo { color: #009999 } /* Literal.Number.Oct */
+.sb { color: #d01040 } /* Literal.String.Backtick */
+.sc { color: #d01040 } /* Literal.String.Char */
+.sd { color: #d01040 } /* Literal.String.Doc */
+.s2 { color: #d01040 } /* Literal.String.Double */
+.se { color: #d01040 } /* Literal.String.Escape */
+.sh { color: #d01040 } /* Literal.String.Heredoc */
+.si { color: #d01040 } /* Literal.String.Interpol */
+.sx { color: #d01040 } /* Literal.String.Other */
+.sr { color: #009926 } /* Literal.String.Regex */
+.s1 { color: #d01040 } /* Literal.String.Single */
+.ss { color: #990073 } /* Literal.String.Symbol */
+.bp { color: #999999 } /* Name.Builtin.Pseudo */
+.vc { color: #008080 } /* Name.Variable.Class */
+.vg { color: #008080 } /* Name.Variable.Global */
+.vi { color: #008080 } /* Name.Variable.Instance */
+.il { color: #009999 } /* Literal.Number.Integer.Long */

content/css/_willbridge.scss

@@ -1091,18 +1091,6 @@ code {
   border: 1px solid #e1e1e8;
 }
 
-pre > code {
-  border-top:3px solid #565656;
-  background:#f4f5f6;
-  color: #444;
-  display:block;
-  padding:19px 20px 18px;
-  position:relative;
-  -webkit-box-shadow:0 1px 0 #ffffff inset;
-  -moz-box-shadow:0 1px 0 #ffffff inset;
-  box-shadow:0 1px 0 #ffffff inset;
-}
-
 .cmsms_plus {
   background:#555555;
   display:block;

content/css/style.scss

@@ -1,5 +1,5 @@
 @import "willbridge";
 @import "fonts";
 @import "jquery_prettyphoto";
-
+@import "pygments";
 @import "main";

content/projects.haml

@@ -0,0 +1,31 @@
+---
+title: Projects
+---
+.headline
+  %h2 Ariejan's Projects
+.content_wrap.nobg
+  %section#middle_content
+    :markdown
+      # Focal
+
+      Focal is a utility web application that creates sexy and informative burndowns
+      for you and your team.
+
+      Hooked up to the Pivotal Tracker API, Focal will gather information about the
+      current iteration on a daily basis and provide you and the team with valuable
+      progress information.
+
+      _Focal is developed by Kabisa._
+
+      * [Github](https://github.com/kabisaict/focal)
+
+      # Firefly
+
+      At the height of 140 character limited tweets, URL shortners where the hippest
+      thing around.
+
+      Firefly provides you with a personal url shortner. It can be easily deployed to
+      Heroku and it has proven to be able to handle millions of shortened URLs.
+
+      * [Website](http://fireflyrb.com)
+      * [Github](https://github.com/ariejan/firefly)

lib/pygmentizer_filter.rb

@@ -0,0 +1,44 @@
+module Nanoc
+  class PygmentizerFilter < Nanoc::Filter
+    identifier :pygmentizer
+    type :text
+
+    def run(content, params = {})
+      doc = Nokogiri::HTML::fragment(content, 'UTF-8')
+      nodes = doc.search("pre>code")
+
+      nodes.each do |node|
+        code = node.inner_html || "[++where is the code?++]"
+        node.parent.swap(pygmentize(code))
+      end
+
+      doc.to_html
+    end
+
+    private
+    def pygmentize(string, pattern = /\A:::(\w+)\s*(\n|&#x000A;)/i)
+      refs = pattern.match(string) # extract language name
+      if refs # found a language identifier!
+        lang = refs[1]
+        str = unescape_html(string.sub(pattern, ""))
+        code = ::Pygments.highlight(str, options: {
+          encoding: 'utf-8',
+          linenos: 'table',
+          lexer: lexers.include?(lang) ? lang : nil
+        })
+        "<div class='code'>#{code}</div>"
+      else # No language identifer,
+        "<pre class='plaincode'>#{string}</pre>"
+      end
+    end
+
+    private
+    def lexers
+      @lexers ||= Pygments.lexers.map { |lex| lex[1][:aliases] }.flatten
+    end
+
+    private
+    def unescape_html(string)
+      string.to_s.gsub(/&#x000A;/i, "\n").gsub("&lt;", '<').gsub("&gt;", '>').gsub("&amp;", '&')
+    end  end
+end