chore: add github sponsors on supporters

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

@@ -4,18 +4,13 @@ import type { Supporter } from '#site/types';
 import type { FC } from 'react';
 
 type SupportersListProps = {
-  supporters: Array<Supporter<'opencollective'>>;
+  supporters: Array<Supporter<'opencollective' | 'github'>>;
 };
 
 const SupportersList: FC<SupportersListProps> = ({ supporters }) => (
   <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
-    {supporters.map(({ name, image, profile }, i) => (
-      <Avatar
-        nickname={name}
-        image={image}
-        key={`${name}-${i}`}
-        url={profile}
-      />
+    {supporters.map(({ name, image, url }, i) => (
+      <Avatar nickname={name} image={image} key={`${name}-${i}`} url={url} />
     ))}
   </div>
 );

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

@@ -1,4 +1,9 @@
-import { OPENCOLLECTIVE_MEMBERS_URL } from '#site/next.constants.mjs';
+import {
+  OPENCOLLECTIVE_MEMBERS_URL,
+  GITHUB_GRAPHQL_URL,
+  GITHUB_API_KEY,
+} from '#site/next.constants.mjs';
+import { shuffle } from '#site/util/array';
 import { fetchWithRetry } from '#site/util/fetch';
 
 /**
@@ -15,15 +20,201 @@ async function fetchOpenCollectiveData() {
   const members = payload
     .filter(({ role, isActive }) => role === 'BACKER' && isActive)
     .sort((a, b) => b.totalAmountDonated - a.totalAmountDonated)
-    .map(({ name, website, image, profile }) => ({
+    .map(({ name, image, profile }) => ({
       name,
       image,
-      url: website,
-      profile,
+      url: profile,
       source: 'opencollective',
     }));
 
   return members;
 }
 
-export default fetchOpenCollectiveData;
+/**
+ * Fetches supporters data from Github API, filters active backers,
+ * and maps it to the Supporters type.
+ *
+ * @returns {Promise<Array<import('#site/types/supporters').GithubSponsorSupporter>>} Array of supporters
+ */
+async function fetchGithubSponsorsData() {
+  if (!GITHUB_API_KEY) {
+    return [];
+  }
+
+  const sponsors = [];
+
+  // Fetch sponsorship pages
+  let cursor = null;
+
+  while (true) {
+    const query = sponsorshipsQuery(cursor);
+    const data = await graphql(query);
+
+    if (data.errors) {
+      throw new Error(JSON.stringify(data.errors));
+    }
+
+    const nodeRes = data.data.organization?.sponsorshipsAsMaintainer;
+    if (!nodeRes) {
+      break;
+    }
+
+    const { nodes, pageInfo } = nodeRes;
+    const mapped = nodes.map(n => {
+      const s = n.sponsor || n.sponsorEntity || n.sponsorEntity; // support different field names
+      return {
+        name: s?.name || s?.login || null,
+        image: s?.avatarUrl || null,
+        url: s?.url || null,
+        source: 'github',
+      };
+    });
+
+    sponsors.push(...mapped);
+
+    if (!pageInfo.hasNextPage) {
+      break;
+    }
+
+    cursor = pageInfo.endCursor;
+  }
+
+  const query = donationsQuery();
+  const data = await graphql(query);
+
+  if (data.errors) {
+    throw new Error(JSON.stringify(data.errors));
+  }
+
+  const nodeRes = data.data.organization?.sponsorsActivities;
+  if (!nodeRes) {
+    return sponsors;
+  }
+
+  const { nodes } = nodeRes;
+  const mapped = nodes.map(n => {
+    const s = n.sponsor || n.sponsorEntity || n.sponsorEntity; // support different field names
+    return {
+      name: s?.name || s?.login || null,
+      image: s?.avatarUrl || null,
+      url: s?.url || null,
+      source: 'github',
+    };
+  });
+
+  sponsors.push(...mapped);
+
+  return sponsors;
+}
+
+function sponsorshipsQuery(cursor = null) {
+  return `
+    query {
+        organization(login: "nodejs") {
+            sponsorshipsAsMaintainer (first: 100, includePrivate: false, after: "${cursor}", activeOnly: false) {
+                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
+                }
+            }
+        }
+    }`;
+}
+
+function donationsQuery() {
+  return `
+       query {
+            organization(login: "nodejs") {
+                sponsorsActivities (first: 100, includePrivate: false) {
+                    nodes {
+                        id
+                        sponsor {
+                            ...on User {
+                                id: databaseId,
+                                name,
+                                login,
+                                avatarUrl,
+                                url,
+                                websiteUrl
+                            }
+                            ...on Organization {
+                                id: databaseId,
+                                name,
+                                login,
+                                avatarUrl,
+                                url,
+                                websiteUrl
+                            }
+                        },
+                        timestamp
+                        tier: sponsorsTier {
+                            monthlyPriceInDollars,
+                            isOneTime
+                        }
+                    }
+                }
+            }
+        }`;
+}
+
+const graphql = async (query, variables = {}) => {
+  const res = await fetch(GITHUB_GRAPHQL_URL, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${GITHUB_API_KEY}`,
+    },
+    body: JSON.stringify({ query, variables }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`GitHub API error: ${res.status} ${text}`);
+  }
+
+  return res.json();
+};
+
+/**
+ * Fetches supporters data from Open Collective API and GitHub Sponsors, filters active backers,
+ * and maps it to the Supporters type.
+ *
+ * @returns {Promise<Array<import('#site/types/supporters').OpenCollectiveSupporter | import('#site/types/supporters').GithubSponsorSupporter>>} Array of supporters
+ */
+async function sponsorsData() {
+  const seconds = 300; // Change every 5 minutes
+  const seed = Math.floor(Date.now() / (seconds * 1000));
+
+  const sponsors = await Promise.all([
+    fetchGithubSponsorsData(),
+    fetchOpenCollectiveData(),
+  ]);
+
+  const shuffled = await shuffle(sponsors.flat(), seed);
+
+  return shuffled;
+}
+
+export default sponsorsData;

apps/site/next.constants.mjs

@@ -219,3 +219,8 @@ export const VULNERABILITIES_URL =
  */
 export const OPENCOLLECTIVE_MEMBERS_URL =
   'https://opencollective.com/nodejs/members/all.json';
+
+/**
+ * The location of Github Graphql API
+ */
+export const GITHUB_GRAPHQL_URL = 'https://api.github.com/graphql';

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

@@ -23,7 +23,7 @@ without we can't test and release new versions of Node.js.
 ## Supporters
 
 Supporters are individuals and organizations that provide financial support through
-[OpenCollective](https://opencollective.com/nodejs) of the Node.js project.
+[OpenCollective](https://opencollective.com/nodejs) and [GitHub Sponsors](https://github.com/sponsors/nodejs) of the Node.js project.
 
 <WithSupporters />
 

apps/site/types/supporters.ts

@@ -7,3 +7,4 @@ export type Supporter<T extends string> = {
 };
 
 export type OpenCollectiveSupporter = Supporter<'opencollective'>;
+export type GithubSponsorSupporter = Supporter<'github'>;