fix(sponsors): update to reflect opencollective change (#1588)

OpenCollective's structure changed a bit. This address that
and makes a few other notable changes:

- add additional sponsors
- allow to merge additional sponsors to existing sponsors
- limit width of logos to 3 x height to disallow very wide logos
- format money values with commas

.gitignore

@@ -2,7 +2,6 @@ node_modules
 npm-debug.log
 build
 generated
-support-backers.json
-support-sponsors.json
+support-*.json
 starter-kits-data.json
 .antwar

src/components/Splash/Splash.jsx

@@ -29,19 +29,19 @@ const Splash = () => (
         <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>Platinum Sponsors</h2>
-        <Support type="sponsors" rank="platinum" />
+        <Support rank="platinum" />
 
         <h2>Gold Sponsors</h2>
-        <Support type="sponsors" rank="gold" />
+        <Support rank="gold" />
 
         <h2>Silver Sponsors</h2>
-        <Support type="sponsors" rank="silver" />
+        <Support rank="silver" />
 
         <h2>Bronze Sponsors</h2>
-        <Support type="sponsors" rank="bronze" />
+        <Support rank="bronze" />
 
         <h2>Backers</h2>
-        <Support type="backers" />
+        <Support rank="backer" />
       </Container>
     </div>
   </div>

src/components/Support/Support.jsx

@@ -1,9 +1,17 @@
 import React from 'react';
-import Additional from './support-additional.json';
+import GoldSponsors from './support-goldsponsors.json';
+import SilverSponsors from './support-silversponsors.json';
+import Sponsors from './support-sponsors.json';
+import Backers from './support-backers.json';
+import Additional from './support-additional.js';
 import './Support.scss';
 
 const ranks = {
+  backer: {
+    maximum: 200
+  },
   bronze: {
+    minimum: 200,
     maximum: 2000
   },
   silver: {
@@ -19,17 +27,37 @@ const ranks = {
   }
 };
 
+function formatMoney(number) {
+  let str = Math.round(number) + '';
+  if (str.length > 3) {
+    str = str.substr(0, str.length - 3) + ',' + str.substr(-3);
+  }
+  return str;
+}
+
 export default class Support extends React.Component {
   render() {
-    let { rank, type } = this.props;
-    let supporters = require(`./support-${type}.json`);
+    let { rank } = this.props;
+    let supporters = [
+      ...GoldSponsors,
+      ...SilverSponsors,
+      ...Sponsors,
+      ...Backers,
+    ];
 
-    if (type === 'sponsors') {
-      supporters = supporters.slice();
-      supporters.push(...Additional);
-      supporters.sort((a, b) => b.totalDonations - a.totalDonations);
+    // merge or add additional backers/sponsors
+    for(const additional of Additional) {
+      const existing = supporters.find(supporter => supporter.username && supporter.username === additional.username);
+      if (existing) {
+        existing.totalDonations += additional.totalDonations;
+      } else {
+        supporters.push(additional);
+      }
     }
 
+    // resort list
+    supporters.sort((a, b) => b.totalDonations - a.totalDonations);
+
     let minimum, maximum;
 
     if (rank && ranks[rank]) {
@@ -48,14 +76,14 @@ export default class Support extends React.Component {
     return (
       <div className="support">
         <div className="support__description">
-          { type === 'sponsors' ? (
+          { rank === 'backer' ? (
             <p>
-              <b className="support__rank">{ rank } sponsors</b>
-              <span>are those who have pledged { minimum ? `$${minimum}` : 'up' } { maximum ? `to $${maximum}` : 'or more' } to webpack.</span>
+              The following <b>Backers</b> are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions.
             </p>
           ) : (
             <p>
-              The following <b>Backers</b> are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions.
+              <b className="support__rank">{ rank } sponsors</b>
+              <span>are those who have pledged { minimum ? `$${formatMoney(minimum)}` : 'up' } { maximum ? `to $${formatMoney(maximum)}` : 'or more' } to webpack.</span>
             </p>
           )}
         </div>
@@ -64,22 +92,22 @@ export default class Support extends React.Component {
           supporters.map((supporter, index) => (
             <a key={ supporter.id || supporter.username || index }
                className="support__item"
-               title={ `$${supporter.totalDonations / 100} by ${supporter.name || supporter.username}` }
+               title={ `$${formatMoney(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-${rank || 'normal'}` }
+                className={ `support__${rank}-avatar` }
                 src={ supporter.avatar }
                 alt={ supporter.username ? `${supporter.username}'s avatar` : 'avatar' } /> :
                 supporter.name }
-              { type === 'backers' ? <figure className="support__outline" /> : null }
+              { rank === 'backer' ? <figure className="support__outline" /> : null }
             </a>
           ))
         }
 
         <div className="support__bottom">
           <a className="support__button" href="https://opencollective.com/webpack#support">
-            Become a { type.replace(/s$/, '') }
+            Become a { rank === 'backer' ? 'backer' : 'sponsor' }
           </a>
         </div>
       </div>

src/components/Support/Support.scss

@@ -22,22 +22,25 @@
     margin: 0 2px 2px 2px;
   }
 
-  &__sponsors-avatar {
-    &-bronze, &-normal {
-      height: 32px;
-    }
-    &-silver {
-      height: 64px;
-    }
-    &-gold {
-      height: 96px;
-    }
-    &-platinum {
-      height: 128px;
-    }
+  &__bronze-avatar {
+    height: 32px;
+    max-width: 96px;
+  }
+
+  &__silver-avatar {
+    height: 64px;
+    max-width: 192px;
+  }
+
+  &__gold-avatar {
+    height: 96px;
+  }
+
+  &__platinum-avatar {
+    height: 128px;
   }
 
-  &__backers-avatar-normal {
+  &__backer-avatar {
     width: 31px;
     height: 31px;
     border-radius: 50%;

src/components/Support/support-additional.js

@@ -0,0 +1,38 @@
+export default [
+  {
+    name: "MoonMail",
+    avatar: "https://static.moonmail.io/moonmail-logo.svg",
+    website: "https://moonmail.io/?utm_source=webpack.js.org",
+    totalDonations: 11000,
+    reason: "Paypal"
+  },
+  {
+    name: "Google Angular",
+    avatar: "https://res.cloudinary.com/opencollective/image/upload/v1485288529/angular_uxllte.png",
+    website: "https://angular.io/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship",
+    totalDonations: 250000,
+    reason: "Paypal"
+  },
+  {
+    name: "Architects.io",
+    avatar: null,
+    website: "http://architects.io/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship",
+    totalDonations: 30000,
+    reason: "Paypal"
+  },
+  {
+    username: "peerigon",
+    name: "Peerigon",
+    avatar: "https://opencollective-production.s3-us-west-1.amazonaws.com/e8a1de10-99c8-11e6-8650-f92e594d5de8.png",
+    website: "https://peerigon.com/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship",
+    totalDonations: 144139,
+    reason: "webpack meetup 2017-07"
+  },
+  {
+    name: "Segment",
+    avatar: require("./assets/segment-logo.png"),
+    website: "https://segment.com/?utm_source=webpack&utm_medium=documentation&utm_campaign=sponsorship",
+    totalDonations: 1200000,
+    reason: "Sponsorship 2017-07 - 2017-09"
+  }
+];

src/scripts/fetch_supporters.js

@@ -2,6 +2,30 @@
 const fs = require('fs');
 const request = require('request');
 
+request('https://opencollective.com/webpack/goldsponsors.json?requireActive=false', (err, response, body) => {
+  if (err) {
+    console.error('Failed to fetch goldsponsors: ', err);
+
+  } fs.writeFile('./src/components/Support/support-goldsponsors.json', body, err => {
+    if (err) {
+      console.error('Failed to write goldsponsors file: ', err);
+
+    } else console.log('Fetched 1 file: support-goldsponsors.json');
+  });
+});
+
+request('https://opencollective.com/webpack/silversponsors.json?requireActive=false', (err, response, body) => {
+  if (err) {
+    console.error('Failed to fetch silversponsors: ', err);
+
+  } fs.writeFile('./src/components/Support/support-silversponsors.json', body, err => {
+    if (err) {
+      console.error('Failed to write silversponsors file: ', err);
+
+    } else console.log('Fetched 1 file: support-silversponsors.json');
+  });
+});
+
 request('https://opencollective.com/webpack/sponsors.json?requireActive=false', (err, response, body) => {
   if (err) {
     console.error('Failed to fetch sponsors: ', err);