chore: implement supporters component

Author: bjohansebas

apps/site/components/Common/Supporters/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
+import type { FC } from 'react';
+import { use } from 'react';
+
+import type { Supporters } from '#site/types';
+
+type SupportersProps = {
+  supporters: Promise<Array<Supporters>>;
+};
+
+const SupportersList: FC<SupportersProps> = ({ supporters }) => {
+  const supportersList = use(supporters);
+
+  return (
+    <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
+      {supportersList.map(({ name, image, url }, i) => (
+        <Avatar nickname={name} image={image} url={url} key={`${name}-${i}`} />
+      ))}
+    </div>
+  );
+};
+
+export default SupportersList;

apps/site/components/withSupporters.tsx

@@ -0,0 +1,18 @@
+import type { FC, PropsWithChildren } from 'react';
+
+import { fetchOpenCollectiveData } from '#site/next-data/generators/supportersData.mjs';
+import type { Supporters } from '#site/types';
+
+import SupportersList from './Common/Supporters';
+
+const WithSupporters: FC<PropsWithChildren> = () => {
+  const supporters = fetchOpenCollectiveData() as Promise<Array<Supporters>>;
+
+  return (
+    <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
+      <SupportersList supporters={supporters} />
+    </div>
+  );
+};
+
+export default WithSupporters;

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

@@ -0,0 +1,95 @@
+// 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;
+}
+
+// TODO: implement github sponsors data fetching
+// TODO: implement ramdomizing of supporters
+
+export { fetchOpenCollectiveData };

apps/site/next.mdx.use.mjs

@@ -12,6 +12,7 @@ import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
 import WithBadgeGroup from './components/withBadgeGroup';
 import WithBanner from './components/withBanner';
 import WithNodeRelease from './components/withNodeRelease';
+import WithSupporters from './components/withSupporters';
 
 /**
  * A full list of React Components that we want to pass through to MDX
@@ -26,6 +27,8 @@ export const mdxComponents = {
   WithBanner,
   // HOC for providing Badge Data
   WithBadgeGroup,
+  // HOC for providing Backers Data
+  WithSupporters,
   // 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

@@ -37,10 +37,12 @@ Projects with their logo, name, tier, the description and a CTA button
 
 <PartnersLogoList categories="service" maxLength={null} />
 
-## Backers (Open Collective and GitHub Sponsors)
+## Supporters
 
 Show a list of lists direct individual or organizational support that can be done through OpenCollective and GitHub Sponsors
 
+<WithSupporters />
+
 ## Become a Partner
 
 this section isn't in the specification

apps/site/types/partners.ts

@@ -24,3 +24,10 @@ export type PartnerCategory =
   | 'esp'
   | 'release'
   | 'service';
+
+export interface Supporters {
+  name: string;
+  image: string;
+  url: string;
+  source: 'opencollective' | 'github';
+}