chore: implement backers component

Author: bjohansebas

apps/site/components/withBackers.tsx

@@ -0,0 +1,18 @@
+import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
+import type { FC, PropsWithChildren } from 'react';
+
+import provideBackers from '#site/next-data/providers/backersData';
+
+const WithBackers: FC<PropsWithChildren> = () => {
+  const backers = provideBackers();
+
+  return (
+    <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
+      {backers.map(({ name, image, url }, i) => (
+        <Avatar nickname={name} image={image} url={url} key={`${name}-${i}`} />
+      ))}
+    </div>
+  );
+};
+
+export default WithBackers;

apps/site/next-data/generators/backersData.mjs

@@ -0,0 +1,92 @@
+// This is used to ensure that URLs are always in the correct format
+function fixUrl(url) {
+  if (!url) {
+    return null;
+  }
+
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    return `https://${url}`;
+  }
+
+  return url;
+}
+
+async function fetchOpenCollectiveData() {
+  const endpoint = 'https://api.opencollective.com/graphql/v2';
+
+  const query = `{
+        account(slug: "nodejs") {
+          orders(status: ACTIVE, filter: INCOMING) {
+            totalCount
+            nodes {
+              fromAccount {
+                name
+                website
+                imageUrl
+              }
+              amount {
+                value
+              }
+              tier {
+                slug
+              }
+              frequency
+              totalDonations {
+                value
+              }
+            }
+          }
+        }
+        donations: orders(
+            account: { slug: "nodejs" }
+            frequency: ONETIME
+            status: PAID
+            filter: INCOMING
+          ) {
+            totalCount
+            nodes {
+              id
+              updatedAt
+              frequency
+              status
+              amount {
+                value
+                currency
+              }
+              fromAccount {
+                name
+                website
+                imageUrl
+              }
+            }
+          }
+      }`;
+
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query }),
+  });
+
+  const payload = await response.json();
+
+  const sponsors = payload.data.account.orders.nodes.map(order => ({
+    name: order.fromAccount.name,
+    url: fixUrl(order.fromAccount.website),
+    image: order.fromAccount.imageUrl,
+    source: 'opencollective',
+  }));
+
+  const donations = payload.data.donations.nodes.map(transaction => ({
+    name: transaction.fromAccount.name,
+    url: fixUrl(transaction.fromAccount.website),
+    image: transaction.fromAccount.imageUrl,
+    source: 'opencollective',
+  }));
+
+  sponsors.push(...donations);
+
+  return sponsors;
+}
+
+export { fetchOpenCollectiveData };

apps/site/next-data/providers/backersData.ts

@@ -0,0 +1,9 @@
+import { cache } from 'react';
+
+import { fetchOpenCollectiveData } from '#site/next-data/generators/backersData.mjs';
+
+const github = await fetchOpenCollectiveData();
+
+const provideBackers = cache(() => [...github]);
+
+export default provideBackers;

apps/site/next.mdx.use.mjs

@@ -6,6 +6,7 @@ import PartnersIconList from './components/Common/Partners/PartnersIconList';
 import PartnersLogoList from './components/Common/Partners/PartnersLogoList';
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
+import WithBackers from './components/withBackers';
 import WithBadgeGroup from './components/withBadgeGroup';
 import WithBanner from './components/withBanner';
 import WithNodeRelease from './components/withNodeRelease';
@@ -23,6 +24,8 @@ export const mdxComponents = {
   WithBanner,
   // HOC for providing Badge Data
   WithBadgeGroup,
+  // HOC for providing Backers Data
+  WithBackers,
   // Shows a list of Node.js Partners with Icons
   PartnersIconList,
   // Shows a list of Node.js Partners with Logos

apps/site/pages/en/about/partners.mdx

@@ -41,6 +41,8 @@ Projects with their logo, name, tier, the description and a CTA button
 
 Show a list of lists direct individual or organizational support that can be done through OpenCollective and GitHub Sponsors
 
+<WithBackers />
+
 ## Become a Partner
 
 this section isn't in the specification