Use JavaScript to put GitHub info on your site

In case you missed it, Adam and I launched a new blog and are six episodes into a new podcast where we bring you what's fresh and new in open source software. Our goal is to scour the depths of GitHub (and other sources) to highlight the cool new and newly released open source projects. As the good folks at Github recently highlighted, one of my favorite features of the blog is the GitHub integration. Here's how to use JavaScript to put GitHub info on your site.

For The Changelog, when we link to a GitHub repo, we wanted to display the number of times the repo has been forked or watched:

To do this, we call Version 2 of the GitHub API, which provides a great deal of info about GitHub users and repositories. To retrieve repo info, we call repos/show method:

http://github.com/api/v2/xml/repos/show/pengwynn/linkedin

The API supports JSON, YAML, and XML return types. From JavaScript, JSON is the simplest data format to work with. Simply replace the xml segment with json:

http://github.com/api/v2/json/repos/show/pengwynn/linkedin

Most likely, hitting this URL from your browser will download the file. Open that up in your favorite text editor and you should see a JavaScript Object Notation representation of the same repo info:

{
    "repository": {
        "url": "http://github.com/pengwynn/linkedin",
        "description": "Ruby wrapper for the LinkedIn API",
        "watchers": 43,
        "homepage": "http://bit.ly/ruby-linkedin",
        "fork": false,
        "forks": 1,
        "private": false,
        "name": "linkedin",
        "owner": "pengwynn",
        "open_issues": 1
    }
}

To put this info on the page, in our example, we'll use jQuery, but you can of course use another framework or plain vanilla JavaScript.

jQuery(document).ready(function($){

  $.each($('.post.link.github h3 a'), function() {
    var post = $(this).parents(".post");
    var url = $(this).attr('href');
    var segments = url.split('/');
    var repo = segments.pop();
    var username = segments.pop();
    $.getJSON("http://github.com/api/v2/json/repos/show/"+username+"/"+repo+"?callback=?", function(data){
      var repo_data = data.repository;
      if(repo_data) {
        var watchers_link = $('<a>').addClass('watchers').attr('href', url+'/watchers').text(repo_data.watchers);
        var forks_link = $('<a>').addClass('forks').attr('href', url+'/network').text(repo_data.forks);
        var comment_link = post.find('.meta .comment-count');
        comment_link.after(watchers_link);
        comment_link.after(forks_link);
      }
    });
  });
});

This code looks for any entries that have CSS classes of link and github (which come from the post's tags), and find the href for the link. We then lop off the last two URL segments to get the repo name and user to pass to our API call.

Note the callback=? which is required for the dynamic JSONP callback which jQuery wires up to our inline callback function. In this function, the data parameter is that JSON we looked at earlier. In this case we just create a couple of links that point back to GitHub and append them to the .meta div for the post.

Easy peasy!