feat(support): display supporters in categories (#1466)

Add `platinum`, `gold`, `silver`, and `bronze` rankings. Change
logo size based on `rank`. Ignore all `support.jsx` element urls as
some class changes broke the current ignore rules.

Author: sokra

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>

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 {

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 }

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));