See http://nateshoffner.github.io/github-widget/ for an example of the widget in action.
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.
By default, it ignores forks and GitHub Pages repos (user/orginization/project). 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.
If you have git
installed, go to your website’s root folder and paste in:
git clone https://github.com/NateShoffner/github-widget.git
Alternatively, you can download an up-to-date ZIP file from https://github.com/NateShoffner/github-widget/zipball/master.
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>
Replace the value of the data-user
attribute with an actual GitHub username or usernames, separated by commas.
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
, forks
, pages
, and websiteLinks
.
<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>
<script type="text/javascript">initialize_github_widgets();</script>
Edit the CSS file as you desire.