Blogging Like a Hacker: Part Two

29 Mar 2010

The main motivation of migrating everything to bleything.net has been to ease maintenance on my web presence. I also wanted an excuse to simplify, paring down to only the things that I felt were truly relevant. In addition to the blog content, I wanted to have some information about the projects I maintain.

Take a peek at the plist project page. Now check out the entire source of the page:

---
title:   plist
tagline: All-purpose Property List manipulation library
layout:  project

github: bleything/plist
gem: plist
---

Plist is a library to manipulate [Property List][1] files, also known
as plists. It can parse plist files into native Ruby data structures as
dwell as generating new plist files from your Ruby objects.

[1]: http://en.wikipedia.org/wiki/Property_list

The magic is in the github and gem keywords in the frontmatter. Their presence causes the “Get The Code” and “Recent Activity” sections to appear on the rendered page.

The title is matched to a project keyword in blog posts, and if any are present, the related posts are linked to. That means that if I ever write about plist in the future, those posts will be linked on the project page.

jQuery is ♥

My Javascript library of choice is jQuery. I’ve played with Prototype, ExtJS (admittedly using jQuery under the covers), MooTools, and a few others, but jQuery just feels good.

For the Recent Activity function of my project pages, I’m actually making a call to the GitHub Commits API to fetch the latest commits on the project and stick them into the page. It turns out to be only about 25 lines of code:

function fetch_recent_github_activity( repo ) {
    var url = "http://github.com/api/v2/json/commits/list/" +
        repo +
        "/master?callback=?";

    $.getJSON( url, function(data) {
        var commits = data.commits.slice( 0, 5 );
        var list = '';

        $.each( commits, function(i,e) {
            hash = e.id.slice( 0, 7 );
            commit_date = format_date( e.committed_date );
            github_link = "<a href=\"http://github.com/" +
                repo +
                "/commit/" + e.id + "\">" + hash + "</a>";

            list += "<li>";
            list += "<h3 class=\"date\">" + commit_date + "</h3>";
            list += "<p>[" + github_link + "] " + e.message + "</p>";
            list += "</li>";
        });

        $("ul#recent_activity").html(list);
    });
}

That can probably be improved, but it does work, and very well. I forgot how awesome jQuery is.