jawj / github-widget

Simple script to display own GitHub projects on a webpage, ordered by number of watchers

Home Page:http://mackerron.com/webdev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Demo

See http://mackerron.com/webdev/ for an example of the widget in action.

What does it do?

It lets you show an up-to-date list of one or more users' GitHub repositories on another webpage.

It pulls the data from the GitHub JSON-P API, builds some simple HTML from it, and styles this with CSS.

It ignores: forks; any GitHub home page repo (username.github.com); and any repo with no description. It sorts what's left by descending number of watchers (now 'stars').

It works back to IE6 (though some of the styling is ugly there, and it's not super-relevant, given that GitHub doesn't).

It's less than 3KB minified, and has no dependencies.

How do I use it?

Get the code

If you have git installed, go to your website's root folder and paste in:

git clone https://github.com/jawj/github-widget.git

Alternatively, you can download an up-to-date ZIP file from https://github.com/jawj/github-widget/zipball/master.

Set it up

To the <head> of the page, add:

<link href="github-widget/github-widget.css" rel="stylesheet" type="text/css" />

At any page location where you want to show a GitHub repository, paste in:

<div class="github-widget" data-user="some-github-username"></div>

Replacing the value of the data-user attribute with an actual GitHub username.

You may include additional options in the form of a JSON hash in an attribute called data-options and the following options are currently supported: sortBy, limit, and forks.

<div class="github-widget" data-user="some-github-username" data-options='{"sortBy":"stargazers_count", "limit":6}'></div>

Finally, immediately before the closing </body> tag, add:

<script src="github-widget/github-widget.min.js"></script>

Customise it

Edit the CSS file as you desire.

About

Simple script to display own GitHub projects on a webpage, ordered by number of watchers

http://mackerron.com/webdev/

License:MIT License


Languages

Language:CoffeeScript 75.7%Language:CSS 14.2%Language:HTML 10.1%