/*
* jQuery Github - v0.2.5
* A jQuery plugin to display your Github Repositories.
* https://github.com/zenorocha/jquery-github/
* Copyright (c) 2013
* MIT License
*/
(function (e, t, n) {
function o(t, n) {
this.element = t, this.$container = e(t), this.repo = this.$container.attr("data-repo"), this.options = e.extend({}, s, n), this._defaults = s, this._name = r, this.init()
}
var r = "github",
i = t.document,
s = {
propertyName: "value"
};
o.prototype.init = function () {
var n = this,
r;
t.sessionStorage && (r = sessionStorage.getItem("gh-repos:" + this.repo)), r !== null ? n.applyTemplate(JSON.parse(r)) : e.ajax({
url: "https://api.github.com/repos/" + this.repo,
dataType: "jsonp",
success: function (e) {
if (e.meta.status >= 400 && e.data.message) {
console.warn(e.data.message);
return
}
n.applyTemplate(e.data), t.sessionStorage && sessionStorage.setItem("gh-repos:" + n.repo, JSON.stringify(e.data))
}
})
}, o.prototype.applyTemplate = function (t) {
var n = this,
r = new Date(t.pushed_at),
i = r.getFullYear() + "年" + (r.getMonth() + 1) + "月" + r.getDate() + "日",
s = e(e.parseHTML(' <div class="github-box"> <div class="github-box-header"> <h3> <a href="' + t.url.replace("api.", "").replace("repos/", "") + '">' + t.name + '</a> </h3> <div class="github-stats"> <a class="repo-watchers" href="' + t.url.replace("api.", "").replace("repos/", "") + '/watchers">' + t.watchers + '</a> <a class="repo-forks" href="' + t.url.replace("api.", "").replace("repos/", "") + '/forks">' + t.forks + '</a> </div> </div> <div class="github-box-content"> <p>' + t.description + ' — <a href="' + t.url.replace("api.", "").replace("repos/", "") + '#readme">詳細をみる</a></p> </div> <div class="github-box-download"> <p class="repo-update">' + i + 'にコミットされました</p> <a class="repo-download" href="' + t.url.replace("api.", "").replace("repos/", "") + '/zipball/master">Download as zip</a> </div> </div> '));
n.appendTemplate(s)
}, o.prototype.appendTemplate = function (e) {
var t = this;
e.appendTo(t.$container)
}, e.fn[r] = function (t) {
return this.each(function () {
e.data(this, "plugin_" + r) || e.data(this, "plugin_" + r, new o(this, t))
})
}
})(jQuery, window);
$('[data-repo]').github();
/* Github Box */
.github-box {
font-family: "Helvetica Neue", Arial, sans-serif;
background: #fafafa;
border: 1px solid #ddd;
color: #666;
border-radius: 5px;
float: left;
margin-right: 1.2em;
margin-bottom: 2em;
width: 46%;
}
.github-box a {
color: #4183C4;
border: none;
}
/* Github Box Header */
.github-box .github-box-header {
position: relative;
border-bottom: 1px solid #ddd;
border-radius: 5px 5px 0 0;
background: #fcfcfc;
background: -moz-linear-gradient(#fcfcfc, #ebebeb);
background: -webkit-linear-gradient(#fcfcfc, #ebebeb);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc',endColorstr='#ebebeb')";
}
.github-box .github-box-header h3 {
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 16px;
color: gray;
margin: 0;
padding: 10px 10px 10px 10px;
}
.github-box .github-box-header h3 a {
font-weight: bold
}
/* Github Box Header - Stats */
.github-box .github-box-header .github-stats {
position: absolute;
top: 10px;
right: 10px;
background: white;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 11px;
font-weight: bold;
line-height: 21px;
height: 21px;
}
.github-box .github-box-header .github-stats a {
display: inline-block;
height: 21px;
color: #666;
padding: 0 5px 0 18px;
background: url('http://zenorocha.github.io/jquery-github/js/assets/btn-sprite.png') no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
.github-box .github-box-header .github-stats a:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.github-box .github-box-header .github-stats .repo-watchers {
border-right: 1px solid #ddd;
background-position: 3px 4px;
}
.github-box .github-box-header .github-stats .repo-forks {
background-position: 2px -14px;
padding-left: 15px;
}
/* Github Box Content */
.github-box .github-box-content {
padding: 10px;
font-weight: 300;
font-size: 0.7em;
}
.github-box .github-box-content p {
margin: 0;
}
.github-box .github-box-content .repo-link {
font-weight: bold;
}
/* Github Box Download */
.github-box .github-box-download {
position: relative;
border-top: 1px solid #ddd;
background: white;
border-radius: 0 0 3px 3px;
padding: 10px;
height: 24px;
}
.github-box .github-box-download .repo-update {
margin: 0;
font-size: 11px;
color: #666;
line-height: 24px;
}
.github-box .github-box-download .repo-update strong {
font-size: 12px;
font-weight: bold;
color: #000;
}
.github-box .github-box-download .repo-download {
position: absolute;
display: block;
top: 10px;
right: 10px;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #666;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255,255,255,0.9);
padding: 0 10px;
border: 1px solid #ddd;
border-bottom-color: #bbb;
border-radius: 3px;
display: block;
text-indent: -9999px;
width: 24px;
padding: 0;
background: url('http://zenorocha.github.io/jquery-github/js/assets/btn-sprite.png') no-repeat 4px -31px,-webkit-linear-gradient(whiteSmoke, #E5E5E5);
background: url('http://zenorocha.github.io/jquery-github/js/assets/btn-sprite.png') no-repeat 4px -31px,-moz-linear-gradient(#f1f7fa, #dbeaf1);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
.github-box .github-box-download .repo-download:hover {
color: #527894;
border-color: #cfe3ed;
border-bottom-color: #9fc7db;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
<div class="projects">
<div data-repo="zenorocha/jquery-github"></div>
</div>