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,176 @@
+import { graphql as githubGraphQL } from '@octokit/graphql';
+
+import { GITHUB_API_KEY } from '#site/next.constants.mjs';
+
+// 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;
+}
+
+async function fetchGitHubSponsors() {
+  if (GITHUB_API_KEY === null) {
+    return [];
+  }
+
+  function sponsorshipsQuery(cursor = null) {
+    return `
+            query {
+                organization(login: "nodejs") {
+                    sponsorshipsAsMaintainer (first:100, includePrivate: false, after: "${cursor}") {
+                        nodes {
+                            sponsor: sponsorEntity {
+                                ...on User {
+                                    id: databaseId,
+                                    name,
+                                    login,
+                                    avatarUrl,
+                                    url,
+                                    websiteUrl
+                                }
+                                ...on Organization {
+                                    id: databaseId,
+                                    name,
+                                    login,
+                                    avatarUrl,
+                                    url,
+                                    websiteUrl
+                                }
+                            },
+                        }
+                        pageInfo {
+                            endCursor
+                            startCursor
+                            hasNextPage
+                            hasPreviousPage
+                        }
+                    }
+                }
+            }
+        `;
+  }
+
+  const sponsorshipsResponse = await githubGraphQL(sponsorshipsQuery(), {
+    headers: {
+      authorization: `token ${GITHUB_API_KEY}`,
+    },
+  });
+
+  let pageInfo =
+    sponsorshipsResponse.organization.sponsorshipsAsMaintainer.pageInfo;
+  const sponsorships =
+    sponsorshipsResponse.organization.sponsorshipsAsMaintainer.nodes;
+
+  while (pageInfo.hasNextPage) {
+    const cursor = pageInfo.endCursor;
+
+    const pagedResponse = await githubGraphQL(sponsorshipsQuery(cursor), {
+      headers: {
+        authorization: `token ${GITHUB_API_KEY}`,
+      },
+    });
+
+    pageInfo = pagedResponse.organization.sponsorshipsAsMaintainer.pageInfo;
+    sponsorships.push(
+      ...pagedResponse.organization.sponsorshipsAsMaintainer.nodes
+    );
+  }
+
+  const sponsors = sponsorships
+    // return an array in the same format as Open Collective
+    .map(({ sponsor }) => ({
+      name: sponsor.name || sponsor.login,
+      image: `https://avatars.githubusercontent.com/u/${sponsor.id}`,
+      url: fixUrl(sponsor.websiteUrl || sponsor.url),
+      source: 'github',
+    }));
+
+  return sponsors;
+}
+
+export { fetchOpenCollectiveData, fetchGitHubSponsors };

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

@@ -0,0 +1,15 @@
+import { cache } from 'react';
+
+import {
+  fetchGitHubSponsors,
+  fetchOpenCollectiveData,
+} from '#site/next-data/generators/backersData.mjs';
+
+const [github, openCollective] = await Promise.all([
+  fetchGitHubSponsors(),
+  fetchOpenCollectiveData(),
+]);
+
+const provideBackers = cache(() => [...github, ...openCollective]);
+
+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/package.json

@@ -36,6 +36,7 @@
     "@node-core/ui-components": "workspace:*",
     "@node-core/website-i18n": "workspace:*",
     "@nodevu/core": "0.3.0",
+    "@octokit/graphql": "9.0.1",
     "@opentelemetry/api-logs": "~0.202.0",
     "@opentelemetry/instrumentation": "~0.202.0",
     "@opentelemetry/resources": "~1.30.1",

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