chore(opencollective): put sponsors on an api route

scripts/data/sponsors.mjs → api/sponsors.mjs

@@ -1,12 +1,5 @@
-// Builds the data file consumed by the Sponsors layout (`#theme/sponsors`)
-
-import { mkdir, writeFile } from 'node:fs/promises';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { fetchWithRetry } from '../utils/fetch.mjs';
-
-const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..', '..');
-const OUTPUT = join(ROOT, 'generated', 'sponsors.json');
+import { getCache } from '@vercel/functions';
+import { fetchWithRetry } from '../scripts/utils/fetch.mjs';
 
 const COLLECTIVE = 'webpack';
 const API = 'https://api.opencollective.com/graphql/v2';
@@ -102,7 +95,7 @@ const fetchAllOrders = async () => {
   return all;
 };
 
-const fromApi = async () => {
+export const getOpenCollectiveSponsors = async () => {
   const nodes = await fetchAllOrders();
   if (!nodes.length) throw new Error('No orders returned');
 
@@ -169,7 +162,18 @@ const fromApi = async () => {
   return { sponsors, backers };
 };
 
-const data = await fromApi();
-await mkdir(dirname(OUTPUT), { recursive: true });
-await writeFile(OUTPUT, `${JSON.stringify(data, null, 2)}\n`);
-console.log(`[sponsors] wrote ${OUTPUT}`);
+export async function GET() {
+  const cache = getCache();
+
+  // https://vercel.com/docs/caching/runtime-cache?framework=other#using-runtime-cache
+  let value = await cache.get('sponsors');
+
+  if (!value) {
+    value = await getOpenCollectiveSponsors();
+    await cache.set('sponsors', value, {
+      ttl: 3600, // 1 hour in seconds
+    });
+  }
+
+  return Response.json(value);
+}

components/HomePage/HomeSponsorSection/index.jsx

@@ -4,10 +4,10 @@ import BaseButton from '@node-core/ui-components/Common/BaseButton';
 
 import SectionHeader from '../../SectionHeader/index.jsx';
 import SponsorTier from '../../Sponsors/Tier/index.jsx';
-import data from '#theme/sponsors' with { type: 'json' };
 
 import styles from './index.module.css';
 import BackerWall from '../../Sponsors/BackerWall/index.jsx';
+import useSponsors from '../../../hooks/useSponsors.mjs';
 
 import {
   TIERS as BASE_TIERS,
@@ -44,7 +44,11 @@ function SeeMore({ count, href, className }) {
 }
 
 export default () => {
-  const buckets = useMemo(() => bucketSponsors(data.sponsors, METRIC), []);
+  const data = useSponsors();
+  const buckets = useMemo(
+    () => bucketSponsors(data.sponsors, METRIC),
+    [data.sponsors]
+  );
   const hasAnySponsor = TIERS.some(({ tier }) => buckets[tier].length > 0);
 
   if (!hasAnySponsor) return null;

components/MetaBar/index.jsx

@@ -2,22 +2,20 @@ import MetaBar from '@node-core/ui-components/Containers/MetaBar';
 import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
 import BaseButton from '@node-core/ui-components/Common/BaseButton';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
-
+import useSponsors from '../../hooks/useSponsors.mjs';
 import { editURL } from '#theme/config';
-import sponsors from '#theme/sponsors' with { type: 'json' };
 import SponsorCard from '../Sponsors/Card/index.jsx';
 
 import styles from './index.module.css';
 
 const OC_URL = 'https://opencollective.com/webpack';
 
-// Active recurring platinum-tier sponsors, ranked by monthly amount. There are
-// only ever a handful, so the MetaBar features them as full expanded cards.
-const platinumSponsors = sponsors.sponsors
-  .filter(sponsor => sponsor.monthly.tier === 'platinum')
-  .sort((a, b) => b.monthly.value - a.monthly.value);
-
 export default ({ metadata, headings = [], readingTime }) => {
+  const { sponsors } = useSponsors();
+  const platinumSponsors = sponsors
+    .filter(sponsor => sponsor.monthly.tier === 'platinum')
+    .sort((a, b) => b.monthly.value - a.monthly.value);
+
   const editThisPage =
     metadata.source ?? editURL.replace('{path}', metadata.path);
   const authors = metadata.authors?.split(',').map(id => ({

hooks/useSponsors.mjs

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+const EMPTY_DATA = { sponsors: [], backers: [] };
+
+/** @returns {Awaited<ReturnType<typeof import('../api/sponsors.mjs').getOpenCollectiveSponsors>>} */
+export default function useSponsors() {
+  const [data, setData] = useState(EMPTY_DATA);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    const loadSponsors = async () => {
+      try {
+        const response = await fetch('/api/sponsors', {
+          signal: controller.signal,
+        });
+        if (!response.ok) {
+          throw new Error(`Sponsor API responded ${response.status}`);
+        }
+
+        const value = await response.json();
+        if (!controller.signal.aborted) setData(value);
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.error('Failed to load sponsors', error);
+        }
+      }
+    };
+
+    loadSponsors();
+    return () => controller.abort();
+  }, []);
+
+  return data;
+}

layouts/Sponsors/index.jsx

@@ -7,7 +7,7 @@ import SectionHeader from '../../components/SectionHeader/index.jsx';
 import SponsorTier from '../../components/Sponsors/Tier/index.jsx';
 import BackerWall from '../../components/Sponsors/BackerWall/index.jsx';
 import SortToggle from '../../components/Sponsors/SortToggle/index.jsx';
-import data from '#theme/sponsors' with { type: 'json' };
+import useSponsors from '../../hooks/useSponsors.mjs';
 
 import styles from './index.module.css';
 
@@ -65,6 +65,7 @@ export const bucketSponsors = (sponsors, metric) => {
  */
 export default function SponsorsLayout({ metadata }) {
   const [metric, setMetric] = useState('monthly');
+  const data = useSponsors();
 
   const buckets = bucketSponsors(data.sponsors, metric);