docs(website): filter out spam and add non-recurring donors (#4758)

* docs(website): filter out spam and add non-recurring donors

* chore: updated to remove links at lower tiers, with pending data migration

* chore: updated to have URLs in supporters

* chore: adjusted slug for todo

* chore: rename to 'Gold' Supporter

* fix: mobile responsiveness for sponsors

packages/website/src/components/FinancialContributors/Sponsor.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { SponsorData, SponsorIncludeOptions } from './types';
+
+interface SponsorProps {
+  className?: string;
+  include?: SponsorIncludeOptions;
+  sponsor: SponsorData;
+}
+
+export function Sponsor({
+  className,
+  include = {},
+  sponsor,
+}: SponsorProps): JSX.Element {
+  let children = <img alt={`${sponsor.name} logo`} src={sponsor.image} />;
+
+  if (include.name) {
+    children = (
+      <>
+        {children}
+        {sponsor.name.split(' - ')[0]}
+      </>
+    );
+  }
+
+  if (include.link) {
+    children = (
+      <a
+        className={className}
+        href={sponsor.website ?? undefined}
+        title={sponsor.name}
+        target="_blank"
+        rel="noopener sponsored"
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return children;
+}

packages/website/src/components/FinancialContributors/Sponsors/index.tsx

@@ -0,0 +1,40 @@
+import sponsors from '@site/data/sponsors.json';
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './styles.module.css';
+import { Sponsor } from '../Sponsor';
+import { SponsorIncludeOptions } from '../types';
+
+interface SponsorsProps {
+  className: string;
+  description: string;
+  include?: SponsorIncludeOptions;
+  expanded?: boolean;
+  tier?: string;
+  title: string;
+}
+
+export function Sponsors({
+  className,
+  description,
+  include,
+  tier,
+  title,
+}: SponsorsProps): JSX.Element {
+  return (
+    <div className={clsx(styles.tierArea, className)}>
+      <h3>{title}</h3>
+      <p>{description}</p>
+      <ul className={clsx(styles.sponsorsTier, styles[`tier-${tier}`])}>
+        {sponsors
+          .filter(sponsor => sponsor.tier === tier)
+          .map(sponsor => (
+            <li key={sponsor.id}>
+              <Sponsor include={include} sponsor={sponsor} />
+            </li>
+          ))}
+      </ul>
+    </div>
+  );
+}

packages/website/src/components/FinancialContributors.module.css → packages/website/src/components/FinancialContributors/Sponsors/styles.module.css

@@ -1,5 +1,6 @@
 .tierArea {
-  margin: 32px 0;
+  margin: 32px auto;
+  width: 100%;
 }
 
 .sponsorsTier {
@@ -15,6 +16,11 @@
 .sponsorsTier li {
   list-style: none;
   margin: 5px;
+  max-width: 120px;
+}
+
+.sponsorsTier img {
+  margin: auto;
 }
 
 .sponsorsTier a,
@@ -28,35 +34,32 @@
 }
 
 .tier-sponsor img {
-  max-height: 110px;
-  width: 110px;
+  display: inline-block;
+  max-height: 120px;
+  width: 120px;
 }
 
 .tier-supporter img {
-  max-height: 60px;
-  width: 60px;
+  max-height: 45px;
+  width: 45px;
 }
 
-.sponsorLink {
-  display: inline-flex;
-  flex-direction: column;
-  gap: 8px;
+.tier-contributor img {
+  max-height: 30px;
+  width: 30px;
 }
 
-.become {
-  margin: 8px 0 24px;
-  font-size: 1rem;
+@media screen and (min-width: 700px) {
+  .tierArea {
+    min-width: 500px;
+    width: 50vw;
+  }
 }
 
 @media screen and (min-width: 1150px) {
-  .sponsorsContainer {
-    display: flex;
-    gap: 32px;
-    margin: auto;
-    max-width: 75%;
-  }
-
   .tierArea {
-    width: 50%;
+    margin: 16px 0;
+    width: auto;
+    padding: 0 60px;
   }
 }

packages/website/src/components/FinancialContributors/index.tsx

@@ -0,0 +1,46 @@
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './styles.module.css';
+import { Sponsors } from './Sponsors';
+
+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
+          className={styles.tierSponsorArea}
+          description="Donors of $750 and/or a monthly amount of $100 or more."
+          include={{ link: true, name: true }}
+          tier="sponsor"
+          title="Sponsors"
+        />
+        <Sponsors
+          className={styles.tierSupporterArea}
+          description="Donors of $150 and/or a monthly amount of $10 or more."
+          include={{ link: true }}
+          tier="supporter"
+          title="Gold Supporters"
+        />
+        <Sponsors
+          className={styles.tierOtherArea}
+          description="Donors of $50 and/or a monthly amount of $3 or more."
+          tier="contributor"
+          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>
+    </>
+  );
+}

packages/website/src/components/FinancialContributors/styles.module.css

@@ -0,0 +1,37 @@
+.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: grid;
+    grid-template-columns: 55% 45%;
+    margin: auto;
+    max-width: 100%;
+  }
+
+  .tierArea {
+    margin: 16px 0;
+    width: auto;
+    padding: 0 60px;
+  }
+
+  .tierSponsorArea {
+    grid-area: 1 / 1 / 3 / 2;
+  }
+
+  .tierSupporterArea {
+    grid-area: 1 / 2 / 2 / 3;
+  }
+
+  .tierOtherArea {
+    grid-area: 2 / 2 / 3 / 3;
+  }
+}

packages/website/src/components/FinancialContributors/types.ts

@@ -0,0 +1,14 @@
+export interface SponsorData {
+  description?: string;
+  id: string;
+  image: string;
+  name: string;
+  tier?: string;
+  totalDonations: number;
+  website?: string;
+}
+
+export interface SponsorIncludeOptions {
+  link?: boolean;
+  name?: boolean;
+}