├── .gitignore
├── LICENSE
├── README.markdown
├── TODO
├── coffee
    └── gcb.coffee
├── css
    └── style.css
├── html
    └── badge.html
├── img
    ├── commit.png
    └── public.png
├── index.html
├── js
    └── gcb.js
└── scss
    └── style.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | .sass-cache
2 | coffee/config.coffee
3 | js/config.js
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2013 Johannes Gilger
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.markdown:
--------------------------------------------------------------------------------
 1 | GitHub Commit Badge
 2 | ===================
 3 | 
 4 | This badge/banner can be used for displaying the latest (or a specific 
 5 | commit) for a GitHub project on your website. It looks like this:
 6 | 
 7 | <div><img src="http://heipei.github.com/github-commit-badge/github-commit-badge.png" alt="GitHub commit badge"></div>
 8 | 
 9 | It is implemented in JavaScript, meaning that it is completely client-based. I
10 | recently rewrote this whole project using CoffeeScript and SASS instead of
11 | plain JavaScript and CSS.
12 | 
13 | Dependencies
14 | ------------
15 | 
16 | github-commit-badge uses jquery. Many websites/blogs already include it, but if
17 | you don't, then simply add this line to your website:
18 | 
19 | 	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
20 | 
21 | 
22 | Usage
23 | -----
24 | 
25 | To use the badge on your website, upload the 'css', 'html', 'img' and 'js'
26 | directories to your webserver. Then you can spawn badges on your website like
27 | this:
28 | 
29 | ```
30 | <div id="gcb-container">
31 | 	<script type="text/javascript">
32 | 		Badges = [
33 | 			{ "username": "heipei",       "repo": "github-commit-badge",  "branch": "master" },
34 | 			{ "username": "git",          "repo": "git",                  "branch": "master" },
35 | 			{ "username": "brotherbard",  "repo": "gitx",                 "branch": "experimental" },
36 | 			{ "username": "rep",          "repo": "hpfeeds" }
37 | 		];
38 | 	</script>
39 | 	<script type="text/javascript" src="js/gcb.js"></script>
40 | 	
41 | </div>
42 | ```
43 | 
44 | If you want to use it on something like WordPress you'll have to put HTML
45 | quotes around the content of the first script-block 
46 | 
47 | ```
48 | <script type="text/javascript">
49 | 	<!--
50 | 		Badges = [
51 | 		[...]
52 | 		];
53 | 	-->
54 | </script>
55 | ```
56 | 
57 | Website
58 | -------
59 | 
60 | * http://github.com/heipei/github-commit-badge/tree has the latest version.
61 | * See a working demonstration at http://heipei.net/files/github-commit-badge/
62 | 
63 | FAQ
64 | ---
65 | 
66 | **Q**: How does it work? Where does the data come from?  
67 | **A**: For each repository, the code will issue two API requests to GitHub to fetch the information.
68 | 
69 | **Q**: Why is it called a badge when it's really more of a banner?  
70 | **A**: Because I noticed that calling it banner increases the risk of it being filtered by AdBlock etc.
71 | 
72 | 
73 | Developing
74 | ----------
75 | 
76 | To make changes you should really use [CoffeeScript](http://coffeescript.org/)
77 | and [Sass](http://sass-lang.com/). Simply set up watchers like this:
78 | ```
79 | 	sass --watch scss:css
80 | 	coffee -c --watch -o js coffee
81 | ```
82 | 	
83 | Author
84 | ------
85 | 
86 | Johannes Gilger <heipei@hackvalue.de>
87 | 


--------------------------------------------------------------------------------
/TODO:
--------------------------------------------------------------------------------
1 | - Include jquery / config.js as needed
2 | - Put everything into subdirs, use CoffeeScript and Sass
3 | - Get rid of stupid <script> stuff
4 | 
5 | 


--------------------------------------------------------------------------------
/coffee/gcb.coffee:
--------------------------------------------------------------------------------
  1 | # vim:ft=coffee:et:ts=2:sw=2:
  2 | #
  3 | # github-commit-badge.js - JavaScript banner for GitHub repositories
  4 | #
  5 | # (c) 2013 by Johannes Gilger <heipei@hackvalue.de>
  6 | #
  7 | # The source-code should be pretty self-explanatory. Also look at the
  8 | # style.css to customize the badge.
  9 | 
 10 | # Development
 11 | # In order to develop github-commit-badge, you will have to issue repeated
 12 | # unauthenticated API calls. You need to register your own GitHub OAuth
 13 | # application and insert the client_id and client_secret below. Make sure never
 14 | # to commit these values! It's best to keep these lines in a separate file
 15 | # (config.coffee) and itclude it after gcb.js
 16 | config = this
 17 | config.client_id = ""
 18 | config.client_secret = ""
 19 | config.devel = "&client_id=#{client_id}&client_secret=#{client_secret}"
 20 | 
 21 | # nuts and bolts for adjustment
 22 | DEFAULT_BRANCH_NAME = "master"
 23 | COMMIT_MSG_MAX_LENGTH = 120
 24 | COMMIT_DISPLAYED_ID_LENGTH = 8
 25 | SHOW_FILES_TXT = 'Click to show more'
 26 | HIDE_FILES_TXT = 'Click to show less'
 27 | 
 28 | # for truncating the commit-id and commit-message in place
 29 | truncate = (string, length = 30, truncation = "...") ->
 30 |   string[0..length]
 31 | 
 32 | # format the commit message
 33 | commit_msg = (string) ->
 34 |   s = truncate(string.replace(/\n/, "").replace(/\r/, ""),COMMIT_MSG_MAX_LENGTH)
 35 |   console.log s
 36 |   return s
 37 | 
 38 | # shorten the date
 39 | parseDate = (dateTime) ->
 40 |   dateTime.replace(/T.*/, "")
 41 | 
 42 | # the actual badge class
 43 | class Badge
 44 |   selector = api_commit = api_repo = name = commit_url = ""
 45 | 
 46 |   constructor: (@username, @repo, @branch = DEFAULT_BRANCH_NAME) ->
 47 |     @api_commit = "https://api.github.com/repos/#{@username}/#{@repo}/commits/#{@branch}?callback=?#{devel}"
 48 |     @api_repo = "https://api.github.com/repos/#{@username}/#{@repo}?callback=?#{devel}"
 49 |     @name = "#{username}_#{repo.replace(/\./g, '-')}"
 50 |     @selector = "##{@name}"
 51 |     $("#gcb-template").clone().appendTo("#gcb-container").attr("id", @name)
 52 |     $(@selector).appendTo("#gcb-container").show()
 53 | 
 54 |     @parse_commit()
 55 |     @parse_repo()
 56 | 
 57 |   parse_commit: ->
 58 |     $.getJSON @api_commit, (data) =>
 59 |       if data.meta and data.meta.status is 403
 60 |         console.log "Something went wrong requesting the commits for #{@api_commit}: #{data.data.message}"
 61 |         $(selector).text("Error: #{data.data.message}")
 62 |         return
 63 | 
 64 |       # Request the avatar first
 65 |       $("div.diffline img.gravatar", @selector).attr({"src": data.data.committer.avatar_url + "&s=120", alt: "" })
 66 | 
 67 |       # GitHub URL for the last commit
 68 |       @commit_url = "https://github.com/#{@username}/#{@repo}/commit/#{data.data.sha}"
 69 | 
 70 |       # Split files into added/removed/modified
 71 |       added = removed = modified = 0
 72 | 
 73 |       for file in data.data.files
 74 |         switch file.status
 75 |           when "modified"
 76 |             modified++
 77 |             $("ul.difflist", @selector).append($("<li/>").text(file.filename).
 78 |               prepend($("<span class='octicon octicon-diff-modified'/>")).
 79 |               append($("<span class='diffmodified'/>").text(" (#{file.changes})")))
 80 |           when "added"
 81 |             added++
 82 |             $("ul.difflist", @selector).append($("<li/>").text(file.filename).
 83 |               prepend($("<span class='octicon octicon-diff-added'/>")).
 84 |               append($("<span class='diffadded'/>").text(" (#{file.changes})")))
 85 |           else
 86 |             removed++
 87 |             $("ul.difflist", @selector).append($("<li/>").text(file.filename).
 88 |               prepend($("<span class='octicon octicon-diff-removed'/>")).
 89 |               append($("<span class='diffremoved'/>").text(" (#{file.changes})")))
 90 | 
 91 |       # Insert data into the DOM badge
 92 |       $("span.branch", @selector).html " (branch: <b>#{@branch}</b>)"
 93 |       $("div.diffline a.badge", @selector).attr({"href": @commit_url}).
 94 |         text(truncate(data.data.sha,COMMIT_DISPLAYED_ID_LENGTH,""))
 95 |       $("span.text-date", @selector).text(" #{parseDate(data.data.commit.committer.date)}")
 96 |       $("span.committer", @selector).text(data.data.commit.committer.name)
 97 |       $("span.email", @selector).text(" <#{data.data.commit.committer.email}>")
 98 |       $("div.commitmessage", @selector).text(data.data.commit.message)
 99 | 
100 |       $("a.showMoreLink", @selector).attr("id", "showMoreLink_#{@name}")
101 | 
102 |       $("div.diffstat span.diffadded", @selector).before(added)
103 |       $("div.diffstat span.diffremoved", @selector).before(removed)
104 |       $("div.diffstat span.diffmodified", @selector).before(modified)
105 | 
106 |       $("div.filelist", @selector).attr({id: "files_#{@name}" })
107 | 
108 | 
109 |       # Behaviour of the show-more/show-less link
110 |       $("#showMoreLink_#{@name}").click =>
111 |         if $("#showMoreLink_#{@name}").text() is SHOW_FILES_TXT
112 |           $("#showMoreLink_#{@name}").text(HIDE_FILES_TXT)
113 |           $("#{@selector} > .commitmessage").css("max-height", "1000px")
114 |         else
115 |           $("#showMoreLink_#{@name}").text(SHOW_FILES_TXT)
116 |           $("#{@selector} > .commitmessage").css("max-height", "1.2em")
117 |         $("#files_#{@name}").toggle(400)
118 |         return false
119 | 
120 |       $(@selector).click => 
121 |         $("#showMoreLink_#{@name}").click()
122 | 
123 |   parse_repo: ->
124 |     $.getJSON @api_repo, (data) =>
125 |       $("div.username a", @selector).text("#{@username}/#{@repo}").attr("href", data.data.html_url)
126 |       $("span.followers", @selector).text(data.data.subscribers_count)
127 |       $("span.stars", @selector).text(data.data.stargazers_count)
128 |       $("span.forks", @selector).text(data.data.forks)
129 | 
130 | # onload function
131 | mainpage = ->
132 |   $("#gcb-container").load "html/badge.html" , ->
133 |     for badgeData in Badges
134 |       new Badge(badgeData.username, badgeData.repo, badgeData.branch)
135 | 
136 | $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'css/style.css'))
137 | #$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'https://cdn.jsdelivr.net/g/primer'))
138 | $('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'https://assets-cdn.github.com/assets/github-4fb2951910292e447b02038004afc1cb52066737eae7585406ec7f5d507810af.css'))
139 | $ -> mainpage() # document.ready
140 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | #gcb-container {
 2 |   width: 580px;
 3 |   color: #333;
 4 |   font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; }
 5 |   #gcb-container .outline {
 6 |     border: 1px solid #AAAAAA;
 7 |     overflow: auto;
 8 |     margin: 8px;
 9 |     padding: 5px;
10 |     padding-top: 2px;
11 |     border-radius: 4px;
12 |     background-color: whitesmoke;
13 |     border-bottom-style: solid;
14 |     border-bottom-width: 1px;
15 |     box-sizing: border-box;
16 |     color: #333333; }
17 |   #gcb-container .username {
18 |     margin: 1px 0px 4px 0px;
19 |     height: 17px;
20 |     color: gray; }
21 |   #gcb-container .diffline {
22 |     font-weight: normal;
23 |     font-size: 14px; }
24 |   #gcb-container .commitmessage {
25 |     font-style: italic;
26 |     margin-top: 5px;
27 |     margin-bottom: 5px;
28 |     line-height: 1.2em;
29 |     max-height: 1.2em;
30 |     -webkit-transition: max-height 1s ease;
31 |     -moz-transition: max-height 1s ease;
32 |     transition: max-height 1s ease;
33 |     overflow: hidden;
34 |     white-space: pre; }
35 |     #gcb-container .commitmessage .octicon {
36 |       margin-right: 5px;
37 |       opacity: 0.5; }
38 |   #gcb-container .quote {
39 |     margin: 0px 5px 0px 5px;
40 |     float: left; }
41 |   #gcb-container .diffstat {
42 |     font-weight: normal; }
43 |   #gcb-container .badge {
44 |     color: gray;
45 |     font: 13px normal 'Droid Sans Mono', 'Consolas', 'Lucida Console', 'Courier New', monospace; }
46 |   #gcb-container .username a {
47 |     color: #4183C4;
48 |     text-decoration: none; }
49 |   #gcb-container .text-date {
50 |     color: #C44040; }
51 |   #gcb-container .committer {
52 |     color: #43651F; }
53 |   #gcb-container .email {
54 |     color: #69A031;
55 |     font-weight: normal; }
56 |   #gcb-container span.diffadded {
57 |     color: #6CC644; }
58 |   #gcb-container span.diffremoved {
59 |     color: #BD2C00; }
60 |   #gcb-container span.diffmodified {
61 |     color: #d0b44c; }
62 |   #gcb-container .gravatar {
63 |     border: 1px solid #aaaaaa;
64 |     border-radius: 6px;
65 |     float: left;
66 |     margin: 2px 5px 2px 2px;
67 |     width: 60px; }
68 |   #gcb-container .filelist {
69 |     margin-top: 15px; }
70 |     #gcb-container .filelist ul {
71 |       list-style: none;
72 |       margin: 0; }
73 |       #gcb-container .filelist ul li {
74 |         margin-left: 5px; }
75 |         #gcb-container .filelist ul li span {
76 |           margin-right: 5px; }
77 |           #gcb-container .filelist ul li span.octicon-diff-added {
78 |             color: #6CC644; }
79 |           #gcb-container .filelist ul li span.octicon-diff-removed {
80 |             color: #BD2C00; }
81 |           #gcb-container .filelist ul li span.octicon-diff-modified {
82 |             color: #d0b44c; }
83 |   #gcb-container .showMore {
84 |     display: inline;
85 |     float: right;
86 |     margin-top: -18px;
87 |     opacity: 0.5; }
88 |   #gcb-container div.outline:hover .showMore {
89 |     display: inline; }
90 |   #gcb-container a {
91 |     font-weight: bold; }
92 |   #gcb-container .username a:hover,
93 |   #gcb-container .badge:hover,
94 |   #gcb-container .showMoreLink:hover {
95 |     text-decoration: none; }
96 | 
97 | /*# sourceMappingURL=style.css.map */
98 | 


--------------------------------------------------------------------------------
/html/badge.html:
--------------------------------------------------------------------------------
 1 | <div id="gcb-template" class="outline" style="display: none;">
 2 |   <div class="username">
 3 |     <span class="octicon octicon-repo"></span> 
 4 |     <a href=""></a>
 5 |     <span class="branch"></span>
 6 |     <span style="float: right">
 7 |       <span class="octicon octicon-eye"></span>
 8 |       <span class="followers"></span>
 9 |       <span class="octicon octicon-star"></span>
10 |       <span class="stars"></span>
11 |       <span class="octicon octicon-repo-forked"></span>
12 |       <span class="forks"></span>
13 |     </span>
14 |   </div>
15 | 
16 |   <div class="diffline">
17 |     <img src="" class="gravatar" alt="">
18 |     <a href="" class="badge"></a>
19 |     <span class="text-date"></span>
20 |     <span class="committer"></span>
21 |     <span class="email"></span>
22 |   </div>
23 | 
24 |   <span class="octicon octicon-quote quote"></span>
25 |   <div class="commitmessage">
26 |   </div>
27 |   
28 |   
29 |   
30 |   <div class="diffstat">
31 |     (Files: <span class="diffadded"> added</span>, <span class="diffremoved"> removed</span>,
32 |     <span class="diffmodified"> modified</span>)
33 |   </div>
34 | 
35 |   <div class="filelist" id="" style="display: none; ">
36 |     <ul class="difflist"></ul>
37 |   </div>
38 |   <div class="showMore">
39 |   <a href="" class="showMoreLink" id="">Click to show more</a>
40 |   </div>
41 | </div>
42 | 


--------------------------------------------------------------------------------
/img/commit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/heipei/github-commit-badge/3db8e813eb6b6cce5e16de5ce47ee6fbc7667401/img/commit.png


--------------------------------------------------------------------------------
/img/public.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/heipei/github-commit-badge/3db8e813eb6b6cce5e16de5ce47ee6fbc7667401/img/public.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<title>GitHub commit badge</title>
 5 | </head>
 6 | <body>
 7 | 	<script type="text/javascript">
 8 | 		Badges = [
 9 | 			{ "username": "heipei",       "repo": "github-commit-badge",  "branch": "master" },
10 | 			{ "username": "git",          "repo": "git",                  "branch": "master" },
11 | 			{ "username": "brotherbard",  "repo": "gitx",                 "branch": "experimental" },
12 | 			{ "username": "rep",          "repo": "hpfeeds" }
13 | 		];
14 | 	</script>
15 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
16 | 	<script type="text/javascript" src="js/gcb.js"></script>	
17 | 	<script type="text/javascript" src="js/config.js"></script>
18 | 
19 | 	<div id="gcb-container">
20 | 	</div>
21 | 
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/js/gcb.js:
--------------------------------------------------------------------------------
  1 | // Generated by CoffeeScript 1.8.0
  2 | (function() {
  3 |   var Badge, COMMIT_DISPLAYED_ID_LENGTH, COMMIT_MSG_MAX_LENGTH, DEFAULT_BRANCH_NAME, HIDE_FILES_TXT, SHOW_FILES_TXT, commit_msg, config, mainpage, parseDate, truncate;
  4 | 
  5 |   config = this;
  6 | 
  7 |   config.client_id = "";
  8 | 
  9 |   config.client_secret = "";
 10 | 
 11 |   config.devel = "&client_id=" + client_id + "&client_secret=" + client_secret;
 12 | 
 13 |   DEFAULT_BRANCH_NAME = "master";
 14 | 
 15 |   COMMIT_MSG_MAX_LENGTH = 120;
 16 | 
 17 |   COMMIT_DISPLAYED_ID_LENGTH = 8;
 18 | 
 19 |   SHOW_FILES_TXT = 'Click to show more';
 20 | 
 21 |   HIDE_FILES_TXT = 'Click to show less';
 22 | 
 23 |   truncate = function(string, length, truncation) {
 24 |     if (length == null) {
 25 |       length = 30;
 26 |     }
 27 |     if (truncation == null) {
 28 |       truncation = "...";
 29 |     }
 30 |     return string.slice(0, +length + 1 || 9e9);
 31 |   };
 32 | 
 33 |   commit_msg = function(string) {
 34 |     var s;
 35 |     s = truncate(string.replace(/\n/, "").replace(/\r/, ""), COMMIT_MSG_MAX_LENGTH);
 36 |     console.log(s);
 37 |     return s;
 38 |   };
 39 | 
 40 |   parseDate = function(dateTime) {
 41 |     return dateTime.replace(/T.*/, "");
 42 |   };
 43 | 
 44 |   Badge = (function() {
 45 |     var api_commit, api_repo, commit_url, name, selector;
 46 | 
 47 |     selector = api_commit = api_repo = name = commit_url = "";
 48 | 
 49 |     function Badge(username, repo, branch) {
 50 |       this.username = username;
 51 |       this.repo = repo;
 52 |       this.branch = branch != null ? branch : DEFAULT_BRANCH_NAME;
 53 |       this.api_commit = "https://api.github.com/repos/" + this.username + "/" + this.repo + "/commits/" + this.branch + "?callback=?" + devel;
 54 |       this.api_repo = "https://api.github.com/repos/" + this.username + "/" + this.repo + "?callback=?" + devel;
 55 |       this.name = "" + username + "_" + (repo.replace(/\./g, '-'));
 56 |       this.selector = "#" + this.name;
 57 |       $("#gcb-template").clone().appendTo("#gcb-container").attr("id", this.name);
 58 |       $(this.selector).appendTo("#gcb-container").show();
 59 |       this.parse_commit();
 60 |       this.parse_repo();
 61 |     }
 62 | 
 63 |     Badge.prototype.parse_commit = function() {
 64 |       return $.getJSON(this.api_commit, (function(_this) {
 65 |         return function(data) {
 66 |           var added, file, modified, removed, _i, _len, _ref;
 67 |           if (data.meta && data.meta.status === 403) {
 68 |             console.log("Something went wrong requesting the commits for " + _this.api_commit + ": " + data.data.message);
 69 |             $(selector).text("Error: " + data.data.message);
 70 |             return;
 71 |           }
 72 |           $("div.diffline img.gravatar", _this.selector).attr({
 73 |             "src": data.data.committer.avatar_url + "&s=120",
 74 |             alt: ""
 75 |           });
 76 |           _this.commit_url = "https://github.com/" + _this.username + "/" + _this.repo + "/commit/" + data.data.sha;
 77 |           added = removed = modified = 0;
 78 |           _ref = data.data.files;
 79 |           for (_i = 0, _len = _ref.length; _i < _len; _i++) {
 80 |             file = _ref[_i];
 81 |             switch (file.status) {
 82 |               case "modified":
 83 |                 modified++;
 84 |                 $("ul.difflist", _this.selector).append($("<li/>").text(file.filename).prepend($("<span class='octicon octicon-diff-modified'/>")).append($("<span class='diffmodified'/>").text(" (" + file.changes + ")")));
 85 |                 break;
 86 |               case "added":
 87 |                 added++;
 88 |                 $("ul.difflist", _this.selector).append($("<li/>").text(file.filename).prepend($("<span class='octicon octicon-diff-added'/>")).append($("<span class='diffadded'/>").text(" (" + file.changes + ")")));
 89 |                 break;
 90 |               default:
 91 |                 removed++;
 92 |                 $("ul.difflist", _this.selector).append($("<li/>").text(file.filename).prepend($("<span class='octicon octicon-diff-removed'/>")).append($("<span class='diffremoved'/>").text(" (" + file.changes + ")")));
 93 |             }
 94 |           }
 95 |           $("span.branch", _this.selector).html(" (branch: <b>" + _this.branch + "</b>)");
 96 |           $("div.diffline a.badge", _this.selector).attr({
 97 |             "href": _this.commit_url
 98 |           }).text(truncate(data.data.sha, COMMIT_DISPLAYED_ID_LENGTH, ""));
 99 |           $("span.text-date", _this.selector).text(" " + (parseDate(data.data.commit.committer.date)));
100 |           $("span.committer", _this.selector).text(data.data.commit.committer.name);
101 |           $("span.email", _this.selector).text(" <" + data.data.commit.committer.email + ">");
102 |           $("div.commitmessage", _this.selector).text(data.data.commit.message);
103 |           $("a.showMoreLink", _this.selector).attr("id", "showMoreLink_" + _this.name);
104 |           $("div.diffstat span.diffadded", _this.selector).before(added);
105 |           $("div.diffstat span.diffremoved", _this.selector).before(removed);
106 |           $("div.diffstat span.diffmodified", _this.selector).before(modified);
107 |           $("div.filelist", _this.selector).attr({
108 |             id: "files_" + _this.name
109 |           });
110 |           $("#showMoreLink_" + _this.name).click(function() {
111 |             if ($("#showMoreLink_" + _this.name).text() === SHOW_FILES_TXT) {
112 |               $("#showMoreLink_" + _this.name).text(HIDE_FILES_TXT);
113 |               $("" + _this.selector + " > .commitmessage").css("max-height", "1000px");
114 |             } else {
115 |               $("#showMoreLink_" + _this.name).text(SHOW_FILES_TXT);
116 |               $("" + _this.selector + " > .commitmessage").css("max-height", "1.2em");
117 |             }
118 |             $("#files_" + _this.name).toggle(400);
119 |             return false;
120 |           });
121 |           return $(_this.selector).click(function() {
122 |             return $("#showMoreLink_" + _this.name).click();
123 |           });
124 |         };
125 |       })(this));
126 |     };
127 | 
128 |     Badge.prototype.parse_repo = function() {
129 |       return $.getJSON(this.api_repo, (function(_this) {
130 |         return function(data) {
131 |           $("div.username a", _this.selector).text("" + _this.username + "/" + _this.repo).attr("href", data.data.html_url);
132 |           $("span.followers", _this.selector).text(data.data.subscribers_count);
133 |           $("span.stars", _this.selector).text(data.data.stargazers_count);
134 |           return $("span.forks", _this.selector).text(data.data.forks);
135 |         };
136 |       })(this));
137 |     };
138 | 
139 |     return Badge;
140 | 
141 |   })();
142 | 
143 |   mainpage = function() {
144 |     return $("#gcb-container").load("html/badge.html", function() {
145 |       var badgeData, _i, _len, _results;
146 |       _results = [];
147 |       for (_i = 0, _len = Badges.length; _i < _len; _i++) {
148 |         badgeData = Badges[_i];
149 |         _results.push(new Badge(badgeData.username, badgeData.repo, badgeData.branch));
150 |       }
151 |       return _results;
152 |     });
153 |   };
154 | 
155 |   $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'css/style.css'));
156 | 
157 |   $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'https://assets-cdn.github.com/assets/github-4fb2951910292e447b02038004afc1cb52066737eae7585406ec7f5d507810af.css'));
158 | 
159 |   $(function() {
160 |     return mainpage();
161 |   });
162 | 
163 | }).call(this);
164 | 


--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
  1 | // vim:ft=sass:et:sw=2:ts=2
  2 | $color-modified: #d0b44c;
  3 | $color-added: #6CC644;
  4 | $color-removed: #BD2C00;
  5 | 
  6 | #gcb-container {
  7 | 	width: 580px;
  8 | 	color: #333;
  9 | 
 10 |   font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
 11 | 
 12 | 
 13 |   // outline == container itself
 14 | 	.outline {
 15 | 		border: 1px solid #AAAAAA;
 16 | 		overflow: auto;
 17 | 		margin: 8px;
 18 | 		padding: 5px;
 19 | 		padding-top: 2px;
 20 | 		border-radius: 4px;
 21 |     background-color: rgb(245, 245, 245);
 22 |     border-bottom-style: solid;
 23 |     border-bottom-width: 1px;
 24 |     box-sizing: border-box;
 25 |     color: rgb(51, 51, 51);
 26 | 	}
 27 |   
 28 |   .username {
 29 |     margin: 1px 0px 4px 0px;
 30 |     height: 17px;
 31 |     color: gray;
 32 |   }
 33 | 
 34 |   .diffline {
 35 |     font-weight: normal;
 36 |     font-size: 14px;
 37 |   }
 38 | 
 39 |   .commitmessage {
 40 |     font-style: italic;
 41 |     margin-top: 5px;
 42 |     margin-bottom: 5px;
 43 |     line-height: 1.2em;
 44 |     max-height: 1.2em;
 45 |     -webkit-transition: max-height 1s ease;
 46 |     -moz-transition: max-height 1s ease;
 47 |     transition: max-height 1s ease;
 48 |     overflow: hidden;
 49 |     white-space: pre;
 50 |     .octicon {
 51 |       margin-right: 5px;
 52 |       opacity: 0.5;
 53 |     }
 54 |   }
 55 | 
 56 |   .quote {
 57 |     margin: 0px 5px 0px 5px;
 58 |     float: left;
 59 |   }
 60 | 
 61 | 
 62 |   .diffstat {
 63 |     font-weight: normal;
 64 |   }
 65 | 
 66 |   .badge {
 67 |     color: gray;
 68 |     font: 13px normal 'Droid Sans Mono', 'Consolas', 'Lucida Console', 'Courier New', monospace;
 69 |   }
 70 | 
 71 |   .username a {
 72 |     color: #4183C4;
 73 |     text-decoration: none;
 74 |   }
 75 | 
 76 |   .text-date {
 77 |     color: #C44040;
 78 |   }
 79 | 
 80 |   .committer {
 81 |     color: #43651F;
 82 |   }
 83 | 
 84 |   .email {
 85 |     color: #69A031;
 86 |     font-weight: normal;
 87 |   }
 88 | 
 89 |   span.diffadded {
 90 |     color: $color-added;
 91 |   }
 92 |   span.diffremoved {
 93 |     color: $color-removed;
 94 |   }
 95 |   span.diffmodified {
 96 |     color: $color-modified;
 97 |   }
 98 | 
 99 |   .gravatar {
100 |     border: 1px solid #aaaaaa;
101 | 		border-radius: 6px;
102 |     float: left;
103 |     margin: 2px 5px 2px 2px;
104 |     width: 60px;
105 |   }
106 | 
107 |   .filelist {
108 |     margin-top: 15px;
109 |     ul {
110 |       li {
111 |         margin-left: 5px;
112 |         span {
113 |           margin-right: 5px;
114 |           &.octicon-diff-added {
115 |             color: $color-added;
116 |           }
117 |           &.octicon-diff-removed {
118 |             color: $color-removed;
119 |           }
120 |           &.octicon-diff-modified {
121 |             color: $color-modified;
122 |           }
123 |         }
124 |       }
125 |       list-style: none;
126 |       margin: 0;
127 |     }
128 |   }
129 |     
130 |   .showMore {
131 |     display: inline;
132 |     float: right;
133 |     margin-top: -18px;
134 |     opacity: 0.5;
135 |   }
136 | 
137 |   div.outline:hover .showMore {
138 |     display: inline;
139 |   }
140 | 
141 |   a {
142 |     font-weight: bold;
143 |   }
144 | 
145 |   .username a:hover,
146 |   .badge:hover,
147 |   .showMoreLink:hover {
148 |     text-decoration: none;
149 |   }
150 | }
151 | 


--------------------------------------------------------------------------------