For our family website I wanted to create a page that contained all my pledges on Kickstarter.

Since I couldn’t find the right plugin for Jekyll I created it myself.
It was my first try with Ruby, so perhaps some things aren’t as good as they can be. If you spot things like that, please let me know.

##What it does

The plugin retrieves the information from Kickstarter, including corresponding images. The generated html looks like this:

<div class="kickstartcontainer">
   <div class="kickstart">
      <div class="kickstartimg">
         <a target="blank" href="<link to the project>">
            <img src="<location of the image on kickstarter" />
         </a>
      </div>
      <div class="kickstarttext">
         <a target="blank" href="<link to the project>">
            <b>Name of the project as it appears on Kickstarter</b>
         </a>
         <p>The description of the project as it appears on Kickstarter</p>
      </div>
   </div>
</div>

Go to famelsinga.nl to check out the resulting page.

##Styling
If you want to style the output you can use the following classes in CSS:

divpurpose
kickstartcontainerthe DIV that contains all of the generated Kickstarter information
kickstartthe DIV containing the project
kickstartimgfor styling the div that contains the image
kickstarttextIf you want to style the text you can use this class

##The Kickstarter plugin

require 'rubygems'
require 'nokogiri'
require 'open-uri'
module Jekyll
  class Kickstarter < Liquid::Tag
    def initialize(tag_name, text, tokens)
      super
      @text = text
    end
    def render(context)
      encoded_url=URI.encode("https://www.kickstarter.com/profile/" << @text)
      page = Nokogiri::HTML(open(encoded_url))
      projects=page.css('div.project-card-mini-wrap')
      tmp=projects.length-1
      a="<div class="kickstartcontainer">"
      (0..tmp).each do |count|
        a << "<div class="kickstart"><div class="kickstartimg"><a target='blank' href='https://kickstarter.com" << projects[count].css('a')[0]['href'] << "'><img src=""
        a << projects[count].css('a').css('img')[0]['src']
        a << "" /></a></div>"
        a << "<div class="kickstarttext">"
        a << "<a target='blank' href='https://kickstarter.com" << projects[count].css('a')[0]['href'] << "'><b>" << projects[count].css('div.project_name.h5.bold')[0].text.strip << "</b></a>"
        a << "<p>" << projects[count].css('a').css('p').text << "</p>"
        a << "</div>"
        a << "</div>"
      end
      a << "</div>"
      "#{a}"
    end
  end
end
Liquid::Template.register_tag('kickstarter', Jekyll::Kickstarter)