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

_src/_assets/javascripts/bigchain/github.js

@@ -1,32 +1,34 @@
-(function() {
 
-    var s = document.createElement('script'),
+//include whatwg-fetch/fetch.js
-        t = document.createElement('script'),
-        githubApiUrl = 'https://api.github.com/repos/',
-        owner = 'bigchaindb',
-        repo = 'bigchaindb';
 
-    s.async = true;
+document.addEventListener('DOMContentLoaded', function() {
-    s.src = githubApiUrl + owner + '/' + repo + '?callback=' + owner + '.getGitHubRepoInfo';
 
-    t.async = true;
+    const url = 'https://bigchaindb-github.now.sh'
-    t.src = githubApiUrl + owner + '/' + repo + '/releases/latest?callback=' + owner + '.getGitHubReleaseInfo';
 
-    window[owner] = window[owner] || {};
+    function injectData(data) {
-    window[owner].getGitHubRepoInfo = function(response) {
+        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);
-}());

_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($) {
 

_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-block;
-        display: inline;
+        transform: translateY(-1px);
+        min-width: 34px; // approx. width with 4 numbers
+    }
+
+    .release {
+        @include text-bold;
+        min-width: 44px;
     }
 }
 

_src/_includes/hero.html

@@ -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">

package.json

@@ -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",