1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00

Get GitHub data from microservice (#118)

* grab data from github-projects microservice bigchaindb/github-projects
* complete rewrite to get everything via Fetch API 🎉, polyfilled with github/fetch
* nicer experience for loading state
* style tweaks for hero community bar
This commit is contained in:
Matthias Kretschmann 2017-05-10 00:10:27 +02:00 committed by GitHub
parent 3bb0e8e129
commit f3307082d1
5 changed files with 52 additions and 33 deletions

View File

@ -1,32 +1,34 @@
(function() {
var s = document.createElement('script'),
t = document.createElement('script'),
githubApiUrl = 'https://api.github.com/repos/',
owner = 'bigchaindb',
repo = 'bigchaindb';
//include whatwg-fetch/fetch.js
s.async = true;
s.src = githubApiUrl + owner + '/' + repo + '?callback=' + owner + '.getGitHubRepoInfo';
document.addEventListener('DOMContentLoaded', function() {
t.async = true;
t.src = githubApiUrl + owner + '/' + repo + '/releases/latest?callback=' + owner + '.getGitHubReleaseInfo';
const url = 'https://bigchaindb-github.now.sh'
window[owner] = window[owner] || {};
window[owner].getGitHubRepoInfo = function(response) {
function injectData(data) {
const repos = data
var stargazers = response.data.stargazers_count;
// just grab the first item of array
// should always be bigchaindb/bigchaindb cause of ordering by most stars
const repo = repos[0]
const stars = repo.stars
const release = repo.release
document.getElementById('stargazers').innerText = stargazers;
};
document.getElementById('stars').innerText = stars
document.getElementById('stars').style.opacity = 1
document.getElementById('release').innerText = release
document.getElementById('release').style.opacity = 1
}
window[owner].getGitHubReleaseInfo = function(response) {
fetch(url)
.then(function(response) {
return response.json()
})
.then(function(data) {
injectData(data)
})
.catch(function(error) {
console.log(error)
})
var version = response.data.tag_name;
document.getElementById('version').innerText = version;
};
document.getElementsByTagName('HEAD')[0].appendChild(s);
document.getElementsByTagName('HEAD')[0].appendChild(t);
}());
})

View File

@ -1,7 +1,7 @@
//=include bigchain/github.js
//=include bigchain/testimonials.js
//=include bigchain/smoothscroll.js
//=include bigchain/github.js
jQuery(function($) {

View File

@ -99,7 +99,7 @@ $menu-height-md: 66px;
font-weight: $font-weight-normal;
box-shadow: none;
background: none;
opacity: .8;
opacity: .95;
&:hover,
&:focus {
@ -113,16 +113,32 @@ $menu-height-md: 66px;
display: inline-block;
}
}
.icon {
transform: translateY(1px);
}
}
.stargazers {
.stars,
.release {
display: inline-block;
opacity: 0;
transition: opacity .2s ease-out;
}
.stars {
font-size: .6rem;
line-height: 1;
background: rgba($brand-main-gray-lighter, .15);
padding: .1rem .3rem;
border-radius: 1rem;
margin-top: -.1rem;
display: inline;
display: inline-block;
transform: translateY(-1px);
min-width: 34px; // approx. width with 4 numbers
}
.release {
@include text-bold;
min-width: 44px;
}
}

View File

@ -11,13 +11,13 @@
<aside class="hero__community">
<div class="row">
<a class="btn btn-text btn-sm" href="https://github.com/{{ site.github.org }}/{{ site.github.repo }}/releases/latest" rel="external">Latest release: <span id="version"></span></a>
<a class="btn btn-text btn-sm" href="https://github.com/{{ site.github.org }}/{{ site.github.repo }}/releases/latest" rel="external">Latest release: <span class="release" id="release"></span></a>
<a class="social-link btn btn-text btn-sm js-social-link" href="https://github.com/{{ site.github.org }}/{{ site.github.repo }}" title="Star {{ site.github.org }}/{{ site.github.repo }} on GitHub">
<svg class="icon icon--social icon--github" aria-labelledby="title">
<title>GitHub</title>
<use xlink:href="/assets/img/sprite.svg#github"></use>
</svg> Star <span class="stargazers" id="stargazers"></span>
</svg> Star <span class="stars" id="stars"></span>
</a>
<a class="social-link btn btn-text btn-sm js-social-link" href="https://twitter.com/{{ site.twitter }}" title="Follow {{ site.twitter }} on Twitter">

View File

@ -20,7 +20,8 @@
"normalize-opentype.css": ">=0.2.4",
"parsleyjs": "^2.0.7",
"svg4everybody": "^2.0.0",
"vivus": "^0.4.0"
"vivus": "^0.4.0",
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"babel-core": "^6.24.0",