Add basic supporter list

Saturate · Saturate · commit 079af350a696 · 2017-04-19T10:56:53.000+02:00
This adds a basic supporter list. It might need to be right aligned and
the CTA left aligned.

This supports:
- Skeleton templates, for showing content when data is not loaded. This
could need some animations for even more awesomeness.
- Transparent logos
- Strange format logos, that are not a square

Issues:
- Provided avatars are too big.. we only need them in a 112px format
however they are not limited and some of them are above 1000px.
- ES6 Features used, we need to transpile this, or downgrade the code.
diff --git a/css/main.css b/css/main.css
@@ -511,3 +511,22 @@ p.paragraph {
         margin-top: 30px;
     }
 }
+
+.supporters {
+  padding: 10px 0;
+}
+.supporter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  margin: 10px;
+  float: left;
+  width: 112px;
+  height: 112px;
+  box-sizing: content-box;
+  background: #fff;
+}
+.supporter img {
+  border-radius: 3px;
+}
diff --git a/index.html b/index.html
@@ -139,7 +139,20 @@ <h4 class="subheading">
     <div class="container-sml">
       <div class="col-12 text-center">
         <div class="contribute-copy center vertical text-center">
-          <h3 class="subheading">Become a backer</h1>
+          <h3 class="subheading">Backers &amp; Sponsors</h3>
+          <div class="supporters" id="supporters">
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+            <div class="supporter supporter--skeleton"></div>
+          </div>
+          <h3 class="subheading">Become a backer</h3>
           <p class="paragraph">
             Support the community and keep development going strong.
           </p>
@@ -148,5 +161,7 @@ <h3 class="subheading">Become a backer</h1>
       </div>
     </div>
   </div>
+
+  <script async src="/js/script.js"></script>
 </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,15 @@
+Promise.all(['https://opencollective.com/gulpjs/sponsor.json','https://opencollective.com/gulpjs/backer.json'].map(url =>
+  fetch(url).then(resp => resp.json())
+)).then(entries => {
+  let html = '';
+	const supporters = [].concat.apply([], entries);
+	const supportersToDisplay = supporters
+    .sort( (first, second) => {return (second.totalDonations - first.totalDonations)} )
+    .slice(0, 10);
+
+	supportersToDisplay.forEach((supporter) => {
+    html += `<a class="supporter" href="${supporter.website}"><img alt="${supporter.name}" src="${supporter.avatar}" width="112"></a>`
+	});
+
+  document.getElementById('supporters').innerHTML = html;
+});
