[WIP]

Author: bjohansebas

apps/site/app/[locale]/next-data/partner-data/route.ts

@@ -0,0 +1,20 @@
+import partners from '#site/util/partners/constants.json' with { type: 'json' };
+
+export const GET = async () => {
+  const list = partners
+    .sort(() => 0.5 - Math.random())
+    .slice(0, 4)
+    .sort((a, b) => b.threshold - a.threshold);
+
+  return Response.json(list);
+};
+
+// Enforces that this route is used as static rendering
+// Except whenever on the Development mode as we want instant-refresh when making changes
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
+export const dynamic = 'force-static';
+
+// Ensures that this endpoint is invalidated and re-executed every X minutes
+// so that when new deployments happen, the data is refreshed
+// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
+export const revalidate = 5000;

apps/site/components/Common/Partners/PartnerIcon/index.tsx

@@ -0,0 +1,16 @@
+import type { FC, ReactElement } from 'react';
+import { cloneElement } from 'react';
+
+import type { Partners } from '#site/types';
+
+import Button from '../../Button';
+
+const PartnersIcon: FC<Partners> = ({ href, logo }) => {
+  return (
+    <Button href={href} kind="secondary">
+      {cloneElement(logo as ReactElement)}
+    </Button>
+  );
+};
+
+export default PartnersIcon;

apps/site/components/Common/Partners/PartnersIconList/index.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { use, type FC } from 'react';
+
+import type { Partners } from '#site/types';
+import { partnersList } from '#site/util/partners';
+
+import PartnerIcon from '../PartnerIcon';
+
+type PartnersIconListProps = {
+  partners: Promise<Array<Partners>>;
+  maxLength?: number;
+};
+
+const PartnersIconList: FC<PartnersIconListProps> = ({ partners }) => {
+  const allPartners = use(partners);
+
+  return (
+    <div>
+      {partnersList(allPartners).map((supporter, index) => (
+        <PartnerIcon {...supporter} key={index} />
+      ))}
+    </div>
+  );
+};
+
+export default PartnersIconList;

apps/site/components/withPartnerIconList.tsx

@@ -0,0 +1,16 @@
+import { Suspense, type FC } from 'react';
+
+import getPartners from '#site/next-data/partners';
+
+import PartnersIconList from './Common/Partners/PartnersIconList';
+
+const withPartnerIconList: FC = () => {
+  const partners = getPartners();
+  return (
+    <Suspense fallback={<div>Loading partners...</div>}>
+      <PartnersIconList partners={partners} />
+    </Suspense>
+  );
+};
+
+export default withPartnerIconList;

apps/site/next-data/partners.ts

@@ -0,0 +1,11 @@
+import { NEXT_DATA_URL } from '#site/next.constants.mjs';
+import type { Partners } from '#site/types';
+
+const getPartners = async (): Promise<Array<Partners>> => {
+  const fetchURL = `${NEXT_DATA_URL}partner-data`;
+  const response = await fetch(fetchURL);
+  const text = await response.text();
+  return JSON.parse(text);
+};
+
+export default getPartners;

apps/site/next.mdx.use.mjs

@@ -7,6 +7,7 @@ import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
 import WithBadgeGroup from './components/withBadgeGroup';
 import WithBanner from './components/withBanner';
 import WithNodeRelease from './components/withNodeRelease';
+import WithPartnersIconList from './components/withPartnerIconList';
 
 /**
  * A full list of React Components that we want to pass through to MDX
@@ -21,6 +22,7 @@ export const mdxComponents = {
   WithBanner,
   // HOC for providing Badge Data
   WithBadgeGroup,
+  WithPartnersIconList,
   // Standalone Badge Group
   BadgeGroup,
   // Renders an container for Upcoming Node.js Meetings

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

@@ -0,0 +1,4 @@
+---
+title: TODO
+layout: about
+---

apps/site/pages/en/index.mdx

@@ -137,4 +137,6 @@ layout: home
 
   </div>
   Learn more what Node.js is able to offer with our [Learning materials](/learn).
+
+  <WithPartnersIconList />
 </section>

apps/site/types/index.ts

@@ -10,6 +10,7 @@ export * from './redirects';
 export * from './server';
 export * from './github';
 export * from './calendar';
+export * from './partners';
 export * from './author';
 export * from './download';
 export * from './userAgent';

apps/site/types/partners.ts

@@ -0,0 +1,20 @@
+// import type { ReactElement, SVGProps } from 'react';
+
+import type { ReactElement, SVGProps } from 'react';
+
+export interface Partners {
+  id: string;
+  // The name of the partner
+  name: string;
+  // A logo to render on the partners page
+  logo: ReactElement<SVGProps<SVGSVGElement>>;
+  // The promoted link to their website or social media
+  href: string;
+  // The categories this partner belongs to
+  categories: Array<PartnerCategory>;
+  // An optional description of the partner
+  description?: string;
+  threshold: number;
+}
+
+export type PartnerCategory = 'infrastructure' | 'security' | 'esp partner';