This is a banner which can display the latest commit of a Github-repo on your website.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
coffee
css
html
img
js
scss
.gitignore
LICENSE
README.markdown
TODO
index.html

README.markdown

GitHub Commit Badge

This badge/banner can be used for displaying the latest (or a specific commit) for a GitHub project on your website. It looks like this:

GitHub commit badge

It is implemented in JavaScript, meaning that it is completely client-based. I recently rewrote this whole project using CoffeeScript and SASS instead of plain JavaScript and CSS.

Dependencies

github-commit-badge uses jquery. Many websites/blogs already include it, but if you don't, then simply add this line to your website:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

Usage

To use the badge on your website, upload the 'css', 'html', 'img' and 'js' directories to your webserver. Then you can spawn badges on your website like this:

<div id="gcb-container">
	<script type="text/javascript">
		Badges = [
			{ "username": "heipei",       "repo": "github-commit-badge",  "branch": "master" },
			{ "username": "git",          "repo": "git",                  "branch": "master" },
			{ "username": "brotherbard",  "repo": "gitx",                 "branch": "experimental" },
			{ "username": "rep",          "repo": "hpfeeds" }
		];
	</script>
	<script type="text/javascript" src="js/gcb.js"></script>
	
</div>

If you want to use it on something like WordPress you'll have to put HTML quotes around the content of the first script-block

<script type="text/javascript">
	<!--
		Badges = [
		[...]
		];
	-->
</script>

Website

FAQ

Q: How does it work? Where does the data come from?
A: For each repository, the code will issue two API requests to GitHub to fetch the information.

Q: Why is it called a badge when it's really more of a banner?
A: Because I noticed that calling it banner increases the risk of it being filtered by AdBlock etc.

Developing

To make changes you should really use CoffeeScript and Sass. Simply set up watchers like this:

	sass --watch scss:css
	coffee -c --watch -o js coffee

Author

Johannes Gilger heipei@hackvalue.de