typescript-eslint · bradzacher · Jan 11, 2022 · Dec 30, 2021 · Dec 30, 2021
diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
     "make-dir": "^3.1.0",
     "markdownlint-cli": "^0.29.0",
     "ncp": "^2.0.0",
-    "node-fetch": "^3.0.0",
+    "cross-fetch": "^3.1.4",
     "prettier": "^2.5.0",
     "pretty-format": "^27.3.1",
     "rimraf": "^3.0.2",

diff --git a/packages/website/data/sponsors.json b/packages/website/data/sponsors.json
@@ -1,82 +1,137 @@
 [
   {
-    "tier": "sponsor",
-    "name": "Nx (by Nrwl)",
-    "slug": "nx",
-    "website": "https://nx.dev",
-    "image": "https://images.opencollective.com/nx/0efbe42/logo.png",
-    "description": "Nx is an extensible development toolkit that helps teams of all sizes easily create and scale their Web applications using modern tools."
+    "description": "Accelerate your development work on iOS, Android and beyond with the power of ARM-based virtual devices.",
+    "id": "gm9bnk80-437xqryv-89jpvzeo-ljdayw5r",
+    "image": "https://images.opencollective.com/corellium/aa8c228/logo.png",
+    "name": "Corellium",
+    "slug": "corellium",
+    "tier": "supporter",
+    "website": "https://www.corellium.com"
   },
   {
+    "description": "Penalty.com is your number one source of football live scores, results and stats.",
+    "id": "3z8arxve-ymko60ya-xgbqgl5n-bj9w704d",
+    "image": "https://images.opencollective.com/penalty/56b629e/avatar.png",
+    "name": "Penalty.com",
+    "slug": "penalty",
     "tier": "supporter",
-    "name": "n8n.io - n8n GmbH",
-    "slug": "n8n",
-    "website": "https://n8n.io",
-    "image": "https://images.opencollective.com/n8n/dca2f0c/logo.png",
-    "description": "Free and open Workflow Automation tool which can be self-hosted and easily extended"
+    "website": "https://penalty.com"
   },
   {
+    "description": null,
+    "id": "ov349mrw-gz75lpyx-elzqa08d-jeybknox",
+    "image": "https://images.opencollective.com/gaetan-bloch/c5cfcb2/avatar.png",
+    "name": "Gaëtan Bloch",
+    "slug": "gaetan-bloch",
     "tier": "supporter",
-    "name": "Florian Studio",
-    "slug": "florian-studio",
-    "website": "https://www.ceodata.com",
-    "image": "https://images.opencollective.com/florian-studio/ee9d649/logo.png",
-    "description": null
+    "website": null
   },
   {
+    "description": "The pluggable linting utility for JavaScript and JSX",
+    "id": "k3z8arxv-eymko60y-73wqgl5n-bj9w704d",
+    "image": "https://images.opencollective.com/eslint/96b09dc/logo.png",
+    "name": "ESLint",
+    "slug": "eslint",
+    "tier": "sponsor",
+    "website": "https://eslint.org/"
+  },
+  {
+    "description": "Our mission is to create an open financial system for the world. ",
+    "id": "7ywz9j4a-vgod8pgn-996mr35n-xklb0e7a",
+    "image": "https://images.opencollective.com/coinbase/a202856/logo.png",
+    "name": "Coinbase",
+    "slug": "coinbase",
+    "tier": "sponsor",
+    "website": "https://blog.coinbase.com/engineering-and-security/home"
+  },
+  {
+    "description": null,
+    "id": "vjrkx5lm-nv904qjv-k0bq8bwa-7zdygoe3",
+    "image": "https://images.opencollective.com/jeffrey-rennie/avatar.png",
+    "name": "Jeffrey Rennie",
+    "slug": "jeffrey-rennie",
     "tier": "supporter",
-    "name": "Andrey Sitnik",
-    "slug": "andrey-sitnik",
-    "website": "https://sitnik.ru",
-    "image": "https://images.opencollective.com/andrey-sitnik/11aeb28/avatar.png",
-    "description": "The creator of Autoprefixer, PostCSS, and Logux"
+    "website": null
   },
   {
+    "description": "We're Balsa, and we're building tools for builders.",
+    "id": "nmlo94zn-7x08dpov-y0e6ewga-3vjbrky5",
+    "image": "https://images.opencollective.com/balsa/77de498/logo.png",
+    "name": "Balsa",
+    "slug": "balsa",
     "tier": "supporter",
-    "name": "Loyalty Leo",
-    "slug": "loyalty-leo",
-    "website": "https://www.loyaltyleo.com",
-    "image": "https://images.opencollective.com/loyalty-leo/22d6ea0/logo.png",
-    "description": null
+    "website": "https://balsa.com"
   },
   {
+    "description": "Evil Martians is a distributed product development consultancy that works with startups and established businesses, and creates open source-based products and services.",
+    "id": "53kzxy4v-07wlr6md-7ve6mj9n-o8agdbe5",
+    "image": "https://images.opencollective.com/evilmartians/707ab4d/logo.png",
+    "name": "Evil Martians",
+    "slug": "evilmartians",
     "tier": "supporter",
-    "name": "David Johnston",
-    "slug": "blacksheepcode",
-    "website": "https://blacksheepcode.com",
-    "image": "https://images.opencollective.com/blacksheepcode/976d69a/avatar.png",
-    "description": "Full Stack JavaScript Developer"
+    "website": "https://evilmartians.com/"
   },
   {
+    "description": null,
+    "id": "nmlo94zn-7x08dpo5-nyoqewga-3vjbrky5",
+    "image": "https://images.opencollective.com/tripwire/7599e30/logo.png",
+    "name": "Tripwire, Inc.",
+    "slug": "tripwire",
     "tier": "supporter",
-    "name": "Airbnb",
-    "slug": "airbnb",
-    "website": "https://www.airbnb.com/",
-    "image": "https://images.opencollective.com/airbnb/d327d66/logo.png",
-    "description": "Book unique homes and experience a city like a local."
+    "website": "https://tripwire.com"
   },
   {
+    "description": "Nx is an extensible development toolkit that helps teams of all sizes easily create and scale their Web applications using modern tools.",
+    "id": "bvrgbk35-7l4x96e0-nlaqomew-a0jdyzn8",
+    "image": "https://images.opencollective.com/nx/0efbe42/logo.png",
+    "name": "Nx (by Nrwl)",
+    "slug": "nx",
+    "tier": "sponsor",
+    "website": "https://nx.dev"
+  },
+  {
+    "description": "Free and open Workflow Automation tool which can be self-hosted and easily extended",
+    "id": "7ywz9j4a-vgod8pgv-d8ypmr35-nxklb0e7",
+    "image": "https://images.opencollective.com/n8n/dca2f0c/logo.png",
+    "name": "n8n.io - n8n GmbH",
+    "slug": "n8n",
+    "tier": "supporter",
+    "website": "https://n8n.io"
+  },
+  {
+    "description": null,
+    "id": "ov349mrw-gz75lpyz-0l86a08d-jeybknox",
+    "image": "https://images.opencollective.com/florian-studio/ee9d649/logo.png",
+    "name": "Florian Studio",
+    "slug": "florian-studio",
     "tier": "supporter",
-    "name": "Joe Alden",
-    "slug": "joealden",
-    "website": "https://joealden.com",
-    "image": "https://images.opencollective.com/joealden/44a6738/avatar.png",
-    "description": "Software Developer"
+    "website": "https://www.ceodata.com"
   },
   {
+    "description": "Full Stack JavaScript Developer",
+    "id": "03k0exgz-nm8yj64r-wjjp5wao-9r7b4dlv",
+    "image": "https://images.opencollective.com/blacksheepcode/976d69a/avatar.png",
+    "name": "David Johnston",
+    "slug": "blacksheepcode",
     "tier": "supporter",
-    "name": "Josh Goldberg",
-    "slug": "joshuakgoldberg",
-    "website": "https://joshuakgoldberg.com",
-    "image": "https://images.opencollective.com/joshuakgoldberg/9ad1bcb/avatar.png",
-    "description": null
+    "website": "https://blacksheepcode.com"
   },
   {
+    "description": "Book unique homes and experience a city like a local.",
+    "id": "88rzownx-l9e50pxw-rwqymvbd-gk7j43a9",
+    "image": "https://images.opencollective.com/airbnb/d327d66/logo.png",
+    "name": "Airbnb",
+    "slug": "airbnb",
     "tier": "supporter",
+    "website": "https://www.airbnb.com/"
+  },
+  {
+    "description": "I write code sometimes and support stuff I like on here.",
+    "id": "53kzxy4v-07wlr6mv-wob6mj9n-o8agdbe5",
+    "image": "https://images.opencollective.com/michael-ranciglio/avatar.png",
     "name": "Michael Ranciglio",
     "slug": "michael-ranciglio",
-    "website": null,
-    "image": "https://images.opencollective.com/michael-ranciglio/avatar.png",
-    "description": "I write code sometimes and support stuff I like on here."
+    "tier": "supporter",
+    "website": null
   }
 ]
diff --git a/packages/website/src/components/FinancialContributors.module.css b/packages/website/src/components/FinancialContributors.module.css
@@ -0,0 +1,62 @@
+.tierArea {
+  margin: 32px 0;
+}
+
+.sponsorsTier {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: end;
+  max-width: 800px;
+  margin: 10px auto;
+  padding: 0;
+}
+
+.sponsorsTier li {
+  list-style: none;
+  margin: 5px;
+}
+
+.sponsorsTier a,
+.sponsorsTier a:hover {
+  background: none;
+  border: none;
+}
+
+.tier-sponsor {
+  gap: 16px;
+}
+
+.tier-sponsor img {
+  max-height: 110px;
+  width: 110px;
+}
+
+.tier-supporter img {
+  max-height: 60px;
+  width: 60px;
+}
+
+.sponsorLink {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.become {
+  margin: 8px 0 24px;
+  font-size: 1rem;
+}
+
+@media screen and (min-width: 1150px) {
+  .sponsorsContainer {
+    display: flex;
+    gap: 32px;
+    margin: auto;
+    max-width: 75%;
+  }
+
+  .tierArea {
+    width: 50%;
+  }
+}
diff --git a/packages/website/src/components/FinancialContributors.tsx b/packages/website/src/components/FinancialContributors.tsx
@@ -0,0 +1,68 @@
+import Link from '@docusaurus/Link';
+import sponsors from '@site/data/sponsors.json';
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './FinancialContributors.module.css';
+
+function Sponsors(props: {
+  description: string;
+  showName?: boolean;
+  tier: string;
+  title: string;
+}): JSX.Element {
+  const tierSponsors = sponsors.filter(sponsor => sponsor.tier === props.tier);
+  return (
+    <div className={styles.tierArea}>
+      <h3>{props.title}</h3>
+      <p>{props.description}</p>
+      <ul className={clsx(styles[`tier-${props.tier}`], styles.sponsorsTier)}>
+        {tierSponsors.map(sponsor => (
+          <li key={sponsor.id}>
+            <a
+              className={styles.sponsorLink}
+              href={sponsor.website ?? undefined}
+              title={sponsor.name}
+              target="_blank"
+              rel="noopener sponsored"
+            >
+              <img src={sponsor.image} alt={`${sponsor.name} logo`} />
+              {props.showName && sponsor.name}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function FinancialContributors(): JSX.Element {
+  return (
+    <>
+      <p>
+        The TypeScript ESLint project would not be possible without the generous
+        support of our financial contributors.
+      </p>
+      <div className={styles.sponsorsContainer}>
+        <Sponsors
+          description="Contributors of a monthly amount of $100 or more."
+          showName
+          tier="sponsor"
+          title="Sponsors"
+        />
+        <Sponsors
+          description="Contributors of a monthly amount of $3 or more."
+          tier="supporter"
+          title="Supporters"
+        />
+      </div>
+      <Link
+        className={clsx('button button--info button--outline', styles.become)}
+        to="https://opencollective.com/typescript-eslint/contribute"
+        target="_blank"
+      >
+        Become a financial contributor
+      </Link>
+    </>
+  );
+}
diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx
@@ -4,10 +4,9 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import { FinancialContributors } from '../components/FinancialContributors';
 import styles from './styles.module.css';
 
-import sponsors from '@site/data/sponsors.json';
-
 interface FeatureItem {
   title: string;
   description: JSX.Element;
@@ -121,32 +120,6 @@ function Feature({ title, description }: FeatureItem): JSX.Element {
   );
 }
 
-function Sponsors(props: {
-  tier: string;
-  title: string;
-  className?: string;
-}): JSX.Element {
-  const tierSponsors = sponsors.filter(sponsor => sponsor.tier === props.tier);
-  return (
-    <div className={props.className}>
-      <ul className={clsx(styles[`tier-${props.tier}`], styles.sponsorsTier)}>
-        {tierSponsors.map((sponsor, i) => (
-          <li key={i}>
-            <a
-              href={sponsor.website ?? undefined}
-              title={sponsor.name}
-              target="_blank"
-              rel="noopener sponsored"
-            >
-              <img src={sponsor.image} alt={`Sponsored by ${sponsor.name}`} />
-            </a>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
 function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
@@ -187,15 +160,7 @@ function Home(): JSX.Element {
         <section className={styles.sponsors}>
           <div className="container text--center padding-vert--lg">
             <h2>Financial Contributors</h2>
-            <Sponsors title="Sponsors" tier="sponsor" />
-            <Sponsors title="Supporter" tier="supporter" />
-            <Link
-              className="button button--info button--outline"
-              to="https://opencollective.com/typescript-eslint/contribute"
-              target="_blank"
-            >
-              Become a sponsor
-            </Link>
+            <FinancialContributors />
           </div>
         </section>
       </main>