Skip to content

Instantly share code, notes, and snippets.

@kaylarose

kaylarose/OctoStats.html

Created February 24, 2011 21:05
Show Gist options
  • Save kaylarose/842884 to your computer and use it in GitHub Desktop.
Save kaylarose/842884 to your computer and use it in GitHub Desktop.
Download ZIP
5-line GitHub API Client and Example of GitHub badge
Raw
OctoStats.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="WAVE Corp">
<!-- Date: 2011-02-24 -->
<style>
*{margin: 0; padding: 0; outline: none; text-decoration: none;border: none;}
#gh-badge{
margin: 10px;
border: 1px solid #ddd;
padding: 10px;
max-width: 260px;
vertical-align: top;
background: #eee;
font-family: "Lucida Grande", "Helvetica Neue", "Helvetica", "Lucida Sans", "Verdana", sans-serif;
color: #666;
font-size: 12px;
position: relative;
}
#gh-badge h1{
opacity: .3;
margin-bottom: -5px;
padding-top: 10px;
}
#gh-badge .thumb{
float: left;
margin-right: 10px;
border: 1px solid #aaa;
}
#gh-badge .contrib,
#gh-badge .fame{
display: block;
font-size: 13px;
font-weight: bold;
}
#gh-badge .contrib{
padding-top: 20px;
}
#gh-badge label{
font-size: 10px;
font-weight: lighter;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
</head>
<body>
<script>
(function($){
$.extend({
github: function( url, data, callback ) {
return $.getJSON('http://github.com/api/v2/json' + url + '?callback=?', data, callback);
}
});
function gravatar_url(id){
return 'http://www.gravatar.com/avatar/' + id;
}
$.github('/user/show/defunkt', function(data){
var $badge = $('#gh-badge');
var user = data.user;
//This would be a perfect place to use JQ-Templates
if(!data.error && user){
$badge.find('.name').text(user.name);
$badge.find('.blog').text(user.blog).attr('href', user.blog);
$badge.find('.repos').text(user.public_repo_count);
$badge.find('.gists').text(user.public_gist_count);
$badge.find('.followers').text(user.followers_count);
$badge.find('.following').text(user.following_count);
$badge.find('.thumb').attr('src', gravatar_url(user.gravatar_id));
$badge.find('.link').attr('href', 'http://github.com/'+user.login);
}else{
$badge.before(data.error);
}
});
})(jQuery);
</script>
<div id='gh-badge'>
<a class="link" href="">
<img class="thumb" src="" alt=""/>
</a>
<p class="name">Name</p>
<a href="" class="blog">Blog</a>
<span class="contrib">
<label>Repos</label>
<span class="repos">?</span>
<label>Gists</label>
<span class="gists">?</span>
</span>
<span class="fame">
<label>Followers</label>
<span class="followers">?</span>
<label>Following</label>
<span class="following">?</span>
</span>
<h1>GitHub OctoStats</h1>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment