From 49a00e7bd0d792ddc9b105b36fd8661d83302c16 Mon Sep 17 00:00:00 2001
From: Tobias Koppers <tobias.koppers@googlemail.com>
Date: Wed, 11 Oct 2017 11:37:22 +0200
Subject: [PATCH 1/2] feature(sponsors): highlight latest sponsors/backers

---
 src/components/Splash/Splash.jsx    |  3 +++
 src/components/Support/Support.jsx  | 13 ++++++++++++-
 src/components/Support/Support.scss |  5 +++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx
index f41e2ec30dbc..7125e65f3592 100644
--- a/src/components/Splash/Splash.jsx
+++ b/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" />
 
diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index eff78ab86a22..55c4884f89d8 100644
--- a/src/components/Support/Support.jsx
+++ b/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,6 +71,11 @@ 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">
@@ -74,6 +83,8 @@ export default class Support extends React.Component {
             <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 did their first donation in the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days.</p>
           ) : (
             <p>
               <b className="support__rank">{ rank } sponsors</b>
diff --git a/src/components/Support/Support.scss b/src/components/Support/Support.scss
index f169e4942e6b..819046df97ac 100644
--- a/src/components/Support/Support.scss
+++ 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;

From 92a3f77030002864b78b1cbed6f407d7218df0b2 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Wed, 11 Oct 2017 18:13:37 -0400
Subject: [PATCH 2/2] refactor(support): minor grammar fix

---
 src/components/Support/Support.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index 55c4884f89d8..0d59c282fc1d 100644
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -84,7 +84,7 @@ export default class Support extends React.Component {
               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 did their first donation in the last {Math.round(maxAge / (1000 * 60 * 60 * 24))} days.</p>
+            <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>