A Beautiful jQuery GitHub Widget
At New Media Campaigns, we love GitHub. For those that aren't familiar, Git is version control software for programmers. GitHub is a service that provides Git hosting and related services. The developers here all use GitHub for their personal and open source projects and as a company we use it for our custom development projects.
Since we are website builders, we tend to build separate websites or write blog posts about our projects. (An example is Josh's Slim PHP Framework). We thought it would be great to be able to embed a snapshot of the project using GitHub's API, much like it is possible to pull in latest tweets from Twitter's API.
We couldn't find a good widget that we liked, so we built our own. It's really easy to use. You just add the following html anywhere you want it to appear:
<div class="github-widget" data-repo="JoelSutherland/GitHub-jQuery-Repo-Widget"></div>
Then you include the script file somewhere after you've included jQuery:
This automatically handles the CSS styling as well by adding a script tag into the head of the document. This makes it really easy to add to page since there are no other dependencies. Also, the container is fluid so it fills whatever width is available.
Feel free to use and improve it! At the top of the post is a screenshot of the widget, but here at the bottom is the real thing. Click through to get to the GitHub project.