From 070c315a79cd16d1f447f3e61161932dea439ba1 Mon Sep 17 00:00:00 2001
From: Tobias Koppers <tobias.koppers@googlemail.com>
Date: Mon, 31 Jul 2017 13:07:11 +0200
Subject: [PATCH 1/3] Display sponsors in categories

Platinum, Gold, Silver, Bronze
Logos have different sizes
Size of Backer logos reduced
---
 components/splash/splash.jsx          | 16 ++++++++---
 components/support/support-style.scss | 31 ++++++++++++++-------
 components/support/support.jsx        | 39 ++++++++++++++++++++++++---
 3 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/components/splash/splash.jsx b/components/splash/splash.jsx
index 3b1e46c7c0b8..b230adf85412 100644
--- a/components/splash/splash.jsx
+++ b/components/splash/splash.jsx
@@ -31,11 +31,21 @@ export default props => {
 
           <p>Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material!</p>
 
-          <h2>Sponsors</h2>
-          <Support number={ 100 } type="sponsors" />
+          <h2>Platinum Sponsors</h2>
+          <Support type="sponsors" rank="platinum" />
+
+          <h2>Gold Sponsors</h2>
+          <Support type="sponsors" rank="gold" />
+
+          <h2>Silver Sponsors</h2>
+          <Support type="sponsors" rank="silver" />
+
+          <h2>Bronze Sponsors</h2>
+          <Support type="sponsors" rank="bronze" />
 
           <h2>Backers</h2>
-          <Support number={ 130 } type="backers" />
+          <Support type="backers" />
+
         </Container>
       </div>
     </div>
diff --git a/components/support/support-style.scss b/components/support/support-style.scss
index b08b3b460619..b71d2cf9ad6f 100644
--- a/components/support/support-style.scss
+++ b/components/support/support-style.scss
@@ -8,29 +8,40 @@
 
   &__item {
     position: relative;
-    margin: 0 5px 5px 5px;
+    margin: 0 2px 2px 2px;
   }
 
   &__sponsors-avatar {
-    height: 64px;
+    &-bronze, &-normal {
+      height: 32px;
+    }
+    &-silver {
+      height: 64px;
+    }
+    &-gold {
+      height: 96px;
+    }
+    &-platinum {
+      height: 128px;
+    }
   }
 
-  &__backers-avatar {
-    width: 62px;
-    height: 62px;
+  &__backers-avatar-normal {
+    width: 31px;
+    height: 31px;
     border-radius: 50%;
-    border: 2px solid white;
+    border: 1px solid white;
     overflow: hidden;
   }
 
   &__outline {
     position: absolute;
     top: 0;
-    margin: -2px;
-    width: calc(100% + 4px);
-    height: calc(100% - 2px);
+    margin: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% - 4px);
     border-radius: 50%;
-    border: 2px solid rgb(112, 202, 10);
+    border: 1px solid rgb(112, 202, 10);
   }
 
   &__bottom {
diff --git a/components/support/support.jsx b/components/support/support.jsx
index ef2d0afaad58..2d3be767c825 100644
--- a/components/support/support.jsx
+++ b/components/support/support.jsx
@@ -2,27 +2,60 @@ import React from 'react';
 import Additional from './support-additional.json';
 import './support-style';
 
+const ranks = {
+  bronze: {
+    maximum: 2000
+  },
+  silver: {
+    minimum: 2000,
+    maximum: 10000
+  },
+  gold: {
+    minimum: 10000,
+    maximum: 50000
+  },
+  platinum: {
+    minimum: 50000
+  }
+};
+
 export default class Support extends React.Component {
   render() {
-    let { number, type } = this.props;
+    let { rank, type } = this.props;
     let supporters = require(`./support-${type}.json`);
 
     if (type === 'sponsors') {
+      supporters = supporters.slice();
       supporters.push(...Additional);
       supporters.sort((a, b) => b.totalDonations - a.totalDonations);
     }
 
+    let minimum, maximum;
+
+    if (rank && ranks[rank]) {
+      minimum = ranks[rank].minimum;
+      maximum = ranks[rank].maximum;
+    }
+
+    if (typeof minimum === 'number') {
+      supporters = supporters.filter(item => item.totalDonations >= minimum * 100);
+    }
+
+    if (typeof maximum === 'number') {
+      supporters = supporters.filter(item => item.totalDonations < maximum * 100);
+    }
+
     return (
       <div className="support">
         {
-          supporters.slice(0, number).map((supporter, index) => (
+          supporters.map((supporter, index) => (
             <a key={ supporter.id || supporter.username || index }
                className="support__item"
                title={ `$${supporter.totalDonations / 100} by ${supporter.name || supporter.username}` }
                target="_blank"
                href={ supporter.website || `https://opencollective.com/${supporter.username}` }>
               { supporter.avatar ? <img
-                className={ `support__${type}-avatar` }
+                className={ `support__${type}-avatar-${rank || 'normal'}` }
                 src={ supporter.avatar }
                 alt={ supporter.username ? `${supporter.username}'s avatar` : 'avatar' } /> :
                 supporter.name }

From 7005fdfe217049a0927f2e5ca4e3b824422b1c71 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Tue, 1 Aug 2017 23:04:16 -0400
Subject: [PATCH 2/3] refactor(tests): ignore all `support.jsx` element urls

---
 scripts/check-links.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/scripts/check-links.js b/scripts/check-links.js
index cddaa143103c..4882e61dd4a0 100755
--- a/scripts/check-links.js
+++ b/scripts/check-links.js
@@ -22,8 +22,13 @@ function checkLinks(args) {
   var name = null;
 
   tap.on('complete', function(res) {
-    const failures = res.failures.filter(failure => !failure.diag || !failure.diag.at ||
-        !failure.diag.at.match(/class="(support__item|support__backers-avatar|support__sponsors-avatar)"/));
+    const failures = res.failures.filter(failure => {
+      return (
+        !failure.diag ||
+        !failure.diag.at ||
+        !failure.diag.at.match(/class="support__[^"]*"/)
+      )
+    });
 
     if (failures.length > 0) {
       console.log(formatFailures(failures));

From e5774b246f1df7a86487df10c1a240e9ced12f5c Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Tue, 1 Aug 2017 23:27:15 -0400
Subject: [PATCH 3/3] refactor(tests): add missing semicolon

---
 scripts/check-links.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/check-links.js b/scripts/check-links.js
index 4882e61dd4a0..5ef662793315 100755
--- a/scripts/check-links.js
+++ b/scripts/check-links.js
@@ -27,7 +27,7 @@ function checkLinks(args) {
         !failure.diag ||
         !failure.diag.at ||
         !failure.diag.at.match(/class="support__[^"]*"/)
-      )
+      );
     });
 
     if (failures.length > 0) {