Add backers and sponsors to homepage (jestjs#6537)

.gitignore

@@ -19,6 +19,7 @@
 /packages/*/package-lock.json
 
 /website/build
+/website/backers.json
 /website/node_modules
 /website/yarn.lock
 /website/translated_docs

website/fetchSuporters.js

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const request = require('request');
+const path = require('path');
+
+const REQUIRED_KEYS = ['id'];
+
+request(
+  'https://opencollective.com/api/groups/jest/backers',
+  (err, response, body) => {
+    if (err) console.error('Failed to fetch backers: ', err);
+
+    // Basic validation
+    const content = JSON.parse(body);
+
+    if (!Array.isArray(content)) throw new Error('backer info is not an array');
+
+    for (const item of content) {
+      for (const key of REQUIRED_KEYS) {
+        if (!item || typeof item !== 'object')
+          throw new Error(
+            `backer info item (${JSON.stringify(item)} is not an object`,
+          );
+        if (!(key in item))
+          throw new Error(
+            `backer info item (${JSON.stringify(item)} doesn't include ${key}`,
+          );
+      }
+    }
+
+    fs.writeFile(path.resolve(__dirname, 'backers.json'), body, err => {
+      if (err) {
+        console.error('Failed to write backers file: ', err);
+      } else console.log('Fetched 1 file: backers.json');
+    });
+  },
+);

website/i18n/en.json

@@ -52,6 +52,12 @@
     "Stay up to date|no description given": "Stay up to date",
     "Need help?|no description given": "Need help?",
     "Jest is worked on full-time by Facebook's JavaScript Foundation team. Team members are often around and available for questions.|no description given": "Jest is worked on full-time by Facebook's JavaScript Foundation team. Team members are often around and available for questions.",
+    "Sponsors|no description given": "Sponsors",
+    "Sponsors are those who contribute $100 or more per month to Jest|no description given": "Sponsors are those who contribute $100 or more per month to Jest",
+    "Become a sponsor|no description given": "Become a sponsor",
+    "Backers|no description given": "Backers",
+    "Backers are those who contribute $2 or more per month to Jest|no description given": "Backers are those who contribute $2 or more per month to Jest",
+    "Become a backer|no description given": "Become a backer",
     "Try Out Jest|no description given": "Try Out Jest",
     "Get Started|no description given": "Get Started",
     "Watch Talks|no description given": "Watch Talks",

website/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "postinstall": "node fetchSuporters.js",
     "start": "docusaurus-start",
     "build": "docusaurus-build",
     "gh-pages": "docusaurus-publish",

website/pages/en/index.js

@@ -14,6 +14,7 @@ const GridBlock = CompLibrary.GridBlock;
 
 const translate = require('../../server/translate.js').translate;
 const translation = require('../../server/translation.js');
+const backers = require(process.cwd() + '/backers.json');
 
 const siteConfig = require(process.cwd() + '/siteConfig.js');
 
@@ -33,6 +34,89 @@ Button.defaultProps = {
   target: '_self',
 };
 
+class Contributors extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2>
+          <translate>Sponsors</translate>
+        </h2>
+        <p>
+          <translate>
+            Sponsors are those who contribute $100 or more per month to Jest
+          </translate>
+        </p>
+        <div>
+          {backers.filter(b => b.tier === 'sponsor').map(b => (
+            <a
+              key={b.id}
+              className="sponsor-item"
+              title={`$${b.totalDonations / 100} by ${b.name || b.slug}`}
+              target="_blank"
+              href={b.website || `https://opencollective.com/${b.slug}`}
+            >
+              {
+                <img
+                  className="sponsor-avatar"
+                  src={b.avatar}
+                  alt={
+                    b.name || b.slug ? `${b.name || b.slug}'s avatar` : 'avatar'
+                  }
+                />
+              }
+            </a>
+          ))}
+        </div>
+        <div className="support">
+          <a
+            className="support-button"
+            href="https://opencollective.com/webpack#support"
+          >
+            <translate>Become a sponsor</translate>
+          </a>
+        </div>
+        <h2>
+          <translate>Backers</translate>
+        </h2>
+        <p>
+          <translate>
+            Backers are those who contribute $2 or more per month to Jest
+          </translate>
+        </p>
+        <div>
+          {backers.filter(b => b.tier === 'backer').map(b => (
+            <a
+              key={b.id}
+              className="backer-item"
+              title={`$${b.totalDonations / 100} by ${b.name || b.slug}`}
+              target="_blank"
+              href={b.website || `https://opencollective.com/${b.slug}`}
+            >
+              {
+                <img
+                  className="backer-avatar"
+                  src={b.avatar}
+                  alt={
+                    b.name || b.slug ? `${b.name || b.slug}'s avatar` : 'avatar'
+                  }
+                />
+              }
+            </a>
+          ))}
+          <div>
+            <a
+              className="support-button"
+              href="https://opencollective.com/webpack#support"
+            >
+              <translate>Become a backer</translate>
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
 class HomeSplash extends React.Component {
   render() {
     return (
@@ -367,6 +451,7 @@ class Index extends React.Component {
               </translate>
             </p>
             <div className="logos">{showcase}</div>
+            <Contributors />
           </div>
         </div>
       </div>

website/static/css/jest.css

@@ -1,3 +1,46 @@
 .mainContainer {
   flex: initial;
 }
+
+.sponsor-item {
+  margin: 10px;
+}
+
+.sponsor-avatar {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 1px solid white;
+  overflow: hidden;
+}
+
+.backer-item {
+  margin: 2px;
+}
+
+.backer-avatar {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 1px solid white;
+  overflow: hidden;
+}
+
+.support-button {
+  margin-top: 10px;
+  display: inline-block;
+  padding: 0.4em 1em;
+  text-transform: uppercase;
+  color: #99424f;
+  border: 1px solid #99424f;
+  border-radius: 1.25em;
+  -webkit-transition: all 250ms;
+  transition: all 250ms;
+}
+
+.support-button:hover {
+  background: #99424f;
+  color: #ffffff;
+}