Your Kickstarter pledges in a Jekyll site

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:

div purpose
kickstartcontainer the DIV that contains all of the generated Kickstarter information
kickstart the DIV containing the project
kickstartimg for styling the div that contains the image
kickstarttext If 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)

Leave a Reply

Previous post Removing ghost e-mails from Smart Mailboxes
Next post How to disable WiFi on Sonos