Created
February 24, 2011 21:05
-
-
Save kaylarose/842884 to your computer and use it in GitHub Desktop.
5-line GitHub API Client and Example of GitHub badge
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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