feat(sponsors): highlight latest sponsors/backers (#1628)

Author: sokra

src/components/Splash/Splash.jsx

@@ -28,6 +28,9 @@ 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>Latest Sponsors</h2>
+        <Support rank="latest" />
+
         <h2>Platinum Sponsors</h2>
         <Support rank="platinum" />
 

src/components/Support/Support.jsx

@@ -22,6 +22,9 @@ const ranks = {
   backer: {
     maximum: 200
   },
+  latest: {
+    maxAge: 14 * 24 * 60 * 60 * 1000
+  },
   bronze: {
     minimum: 200,
     maximum: 2000
@@ -52,11 +55,12 @@ export default class Support extends React.Component {
     let { rank } = this.props;
 
     let supporters = SUPPORTERS;
-    let minimum, maximum;
+    let minimum, maximum, maxAge;
 
     if (rank && ranks[rank]) {
       minimum = ranks[rank].minimum;
       maximum = ranks[rank].maximum;
+      maxAge = ranks[rank].maxAge;
     }
 
     if (typeof minimum === 'number') {
@@ -67,13 +71,20 @@ export default class Support extends React.Component {
       supporters = supporters.filter(item => item.totalDonations < maximum * 100);
     }
 
+    if (typeof maxAge === 'number') {
+      const now = Date.now();
+      supporters = supporters.filter(item => item.firstDonation && (now - new Date(item.firstDonation).getTime() < maxAge));
+    }
+
     return (
       <div className="support">
         <div className="support__description">
           { rank === 'backer' ? (
             <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.
             </p>
+          ) : rank === 'latest' ? (
+            <p>The following persons/organizations made their first donation in the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days.</p>
           ) : (
             <p>
               <b className="support__rank">{ rank } sponsors</b>

src/components/Support/Support.scss

@@ -22,6 +22,11 @@
     margin: 0 2px 2px 2px;
   }
 
+  &__latest-avatar {
+    height: 64px;
+    max-width: 192px;
+  }
+
   &__bronze-avatar {
     height: 32px;
     max-width: 96px;