Your Kickstarter pledges in a Jekyll site

Posted on February 27, 2016 • 2 min read • 244 words
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…

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:

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)

See also

    Follow me