GitHub Badge

A widget to show-off your Github Repositories.

Takes the best of ricardobeat/github-repos and zenorocha/jquery-github and adds:

Option to display the number of watchers
Official GitHub font for icons
Configurable date format

NOW, no longer requires jQuery or Zepto!

Browser Support

We do care about it.


IE 8+ ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Getting started

Three quick start options are available:

Download latest release
Clone the repo: git@github.com:joelself/github-badge.git
Install with Bower: bower install github-badge

Setup

Use Bower to fetch all dependencies:

$ bower install

Now you're ready to go!

Usage

Create an attribute called data-repo:

<div data-repo="jquery-boilerplate/jquery-boilerplate"></div>

Include widget's CSS and JS:

<link rel="stylesheet" href="assets/base.css">
<script src="github-badge.min.js"></script>

Make sure the font is in the same directory as the base.css (or change base.css to reference the correct directory):

Call the plugin:

GHBadges.create("[data-repo]");

Or call it with options

GHBadges.create("[data-repo]", {iconStars: true,
								iconWatchers: true,
								iconForks: true,
								iconIssues: true,
								dateFormat: "M/D/Y"});

And that's it.

Check full example's source code.

Options

Here's a list of available settings.

GHBadges.create("[data-repo]", {
	iconStars:  false,
	iconWatchers: true,
	iconForks:  true,
	iconIssues: false,
	dateFormat: "D/M/Y"
});

Attribute	Type	Default	Description
`iconStars`	Boolean	`false`	Displays the number of stars in a repository.
`iconWatchers`	Boolean	`true`	Displays the number of watchers in a repository.
`iconForks`	Boolean	`true`	Displays the number of forks in a repository.
`iconIssues`	Boolean	`false`	Displays the number of issues in a repository.
`dateFormat`	String	`"D/M/Y"`	Specifies what format the date should be display as.

Structure

The basic structure of the project is given in the following way:

.
|-- assets/
|-- demo/
|   |-- index.html
|   |-- index-zepto.html
|-- dist/
|   |-- github-badge.js
|   |-- github-badge.min.js
|-- src/
|   |-- github-badge.js
|   |-- github-badge.template.js
|   |-- template.html
|-- .editorconfig
|-- .gitignore
|-- .jshintrc
|-- .travis.yml
|-- bower.json
|-- github-badge.json
|-- Gruntfile.js
`-- package.json