Pimping your Github Commits JS-styley

If you, like me, have developed strong feelings towards the geeky hotness that is Git sometime in the last 12 or so months, then you’ve probably also got pretty excited about the convivial oldskool swap meet for Git repos known as Github. If not, please do try to keep up. The first day of the rest of your life begins here.

For a long list of dumb reasons beginning with the fact I’ve not yet written my own roughly passable blogging engine to replace this shopworn and shabby edifice constructed with Simplelog 2, I am unable to write server-side shenanigans for my homepage and so have taken to Frankensteining it experimentally with concoctions made of HTML5 and jQuery. One of these little monsters shows glimmers of potential and thus is being released into the world to find its destiny.

You want to brag about your Github commits?

Wouldn't you love a JavaScript badge that looks just like this ?! Me too! Boy, have you come to the right place!

I assumed such a badge would already exist. I knew, of course, of Dr Nic’s project-based badge and I quickly discovered the commit badge by Johannes Gilger . The former doesn’t show commits and the latter is targeted at the latest commit of a specific project. Neither of these met my needs in terms of function or code, thus my own Github commit badge project was born!

How does it work?

One of the current limitations of the Github API is that it doesn’t provide any methods to gain details about other people’s projects you might be committing to. Given a project, you can check that. But given a user, you can’t see what projects belonging to other users they’ve contributed to. Which is at least two thirds of the fun of Github! Luckily, they publish that kind of data in your public activity feed.

So, given a username, the script calls a specially crafted Yahoo! Pipe that converts Github’s Atom into delicious usable JSONP for processing into a badass little badge for your blog.

How do I set it up?

Here’s the juicy bit. Be sure to follow along at home for maximum enjoyment. You can download the files from Github.

Dependencies

jQuery 1.2.6 - as you’ll see in the example file , I just point to those nice folks at Google who are hosting jQuery for me.

JavaScript Pretty Date - I also grabbed a copy of John Resig’s Pretty Date to save myself long hours in front of the mirror getting ready.

The Action

github-activity.js is where the main action goes down. You’ll need that one.

Then you need to add a div with an id of ‘github’, containing a p , somewhere on your page. There’s a nice sample in the example file.

After that, you just need to call the function githubActivity(); onDOMready. I have a Go file for that, but you can do it directly in your document if you like.

I’ve included some sample CSS to get you started on prettifying the whole shebang. It includes blank selectors for every element created, just in case you want to go buck wild in Style Town.

All things being equal, you should end up with something that looks pretty much like this one I prepared earlier .

What next?

You’ll have noticed that I keep calling my commit badge an ‘activity badge’. That’s because it feels like such a waste to pull down all that other data and not use it. There’s no reason we can’t publish Follow, Gist, Wiki and Member events too. And any others Github may have up their sleeves. I plan on setting it up with defaults and options to make it easily customisable.

The glaringly ugly bit of code (to my eyes, but please point out any you see) is the parseDate() function . It’s ugly, dumb, badly written, and inaccurate. Kindly suggest replacements or write them yourselves and let me know.

I’m going to keep working on functionality, but in the interest of Just Fucking Shipping , here it is, a Github Commit Badge that’s still got some room to grow. Feel free to use it, change it, fix it, share it and abuse it.

Let me know what you think!