JSFiddle - React, Tailwind, and code Playground
HTML
<div class="projects">
<div data-repo="zenorocha/jquery-github"></div>
</div>
CSS
/* 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:...
JavaScript
/*
* 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...