From f3307082d18eec9fa9ea920f94f95ffa2c2042b7 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 10 May 2017 00:10:27 +0200 Subject: [PATCH] Get GitHub data from microservice (#118) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- _src/_assets/javascripts/bigchain/github.js | 50 +++++++++++---------- _src/_assets/javascripts/page-front.js | 2 +- _src/_assets/styles/bigchain/_hero.scss | 26 ++++++++--- _src/_includes/hero.html | 4 +- package.json | 3 +- 5 files changed, 52 insertions(+), 33 deletions(-) diff --git a/_src/_assets/javascripts/bigchain/github.js b/_src/_assets/javascripts/bigchain/github.js index 3f7496d..36d4ecf 100644 --- a/_src/_assets/javascripts/bigchain/github.js +++ b/_src/_assets/javascripts/bigchain/github.js @@ -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); -}()); +}) diff --git a/_src/_assets/javascripts/page-front.js b/_src/_assets/javascripts/page-front.js index a1a4fa9..69862c9 100644 --- a/_src/_assets/javascripts/page-front.js +++ b/_src/_assets/javascripts/page-front.js @@ -1,7 +1,7 @@ -//=include bigchain/github.js //=include bigchain/testimonials.js //=include bigchain/smoothscroll.js +//=include bigchain/github.js jQuery(function($) { diff --git a/_src/_assets/styles/bigchain/_hero.scss b/_src/_assets/styles/bigchain/_hero.scss index c642cc8..0945fe1 100644 --- a/_src/_assets/styles/bigchain/_hero.scss +++ b/_src/_assets/styles/bigchain/_hero.scss @@ -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; } } diff --git a/_src/_includes/hero.html b/_src/_includes/hero.html index 67ccbc6..cb02195 100644 --- a/_src/_includes/hero.html +++ b/_src/_includes/hero.html @@ -11,13 +11,13 @@