[WIP]

Author: bjohansebas

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

@@ -0,0 +1,19 @@
+import partners from '#site/util/partners/constants.json' with { type: 'json' };
+
+export const GET = async () => {
+  const list = partners.map(({ ...data }) => {
+    return data;
+  });
+
+  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,30 @@
+'use client';
+
+import { type FC } from 'react';
+
+import type { Partners } from '#site/types';
+import { partnersList } from '#site/util/partners';
+import partnersData from '#site/util/partners/constants.json';
+
+import PartnerIcon from '../PartnerIcon';
+
+type PartnersIconListProps = {
+  partners: Array<Partners>;
+  maxLength?: number;
+};
+
+const PartnersIconList: FC<PartnersIconListProps> = ({
+  // @ts-expect-error I don't know
+  partners = partnersList(partnersData),
+  maxLength = 4,
+}) => {
+  return (
+    <div>
+      {partners.slice(0, maxLength).map((supporter, index) => (
+        <PartnerIcon {...supporter} key={index} />
+      ))}
+    </div>
+  );
+};
+
+export default PartnersIconList;

apps/site/next.mdx.use.mjs

@@ -2,6 +2,7 @@
 
 import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
 
+import PartnersIconList from './components/Common/Partners/PartnersIconList';
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
 import WithBadgeGroup from './components/withBadgeGroup';
@@ -21,6 +22,7 @@ export const mdxComponents = {
   WithBanner,
   // HOC for providing Badge Data
   WithBadgeGroup,
+  PartnersIconList,
   // 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).
+
+  <PartnersIconList />
 </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,19 @@
+// 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;
+}
+
+export type PartnerCategory = 'infrastructure' | 'security' | 'esp partner';

apps/site/util/partners/constants.json

@@ -0,0 +1,50 @@
+[
+  {
+    "id": "RACKSPACE",
+    "name": "Rackspace",
+    "href": "https://www.rackspace.com",
+    "categories": ["infrastructure"]
+  },
+  {
+    "id": "CLOUDFLARE",
+    "name": "Cloudflare",
+    "href": "https://www.cloudflare.com",
+    "categories": ["infrastructure"]
+  },
+  {
+    "id": "VERCEL",
+    "name": "Vercel",
+    "href": "https://vercel.com",
+    "categories": ["infrastructure"]
+  },
+  {
+    "id": "SENTRY",
+    "name": "Sentry",
+    "href": "https://sentry.io",
+    "categories": ["infrastructure"]
+  },
+  {
+    "id": "CROWDIN",
+    "name": "Crowdin",
+    "href": "https://crowdin.com",
+    "categories": ["infrastructure"]
+  },
+  {
+    "id": "HERODEVS",
+    "name": "HeroDevs",
+    "href": "https://herodevs.com",
+    "categories": ["security", "esp partner"]
+  },
+  {
+    "id": "NODESOURCE",
+    "name": "NodeSource",
+    "href": "https://nodesource.com",
+    "categories": ["security"]
+  },
+  {
+    "id": "DATADOG",
+    "name": "Datadog",
+    "href": "https://www.datadoghq.com",
+    "categories": ["security"]
+  }
+]

apps/site/util/partners/index.tsx

@@ -0,0 +1,27 @@
+import * as PartnersLogo from '@node-core/ui-components/Icons/PartnerLogos';
+import type { ElementType } from 'react';
+
+import type { Partners } from '#site/types';
+
+// import partners from './constants.json';
+
+/**
+ * Creates an icon element for a component
+ */
+const createIcon = (
+  IconModule: Record<string, ElementType>,
+  iconName: string
+) => {
+  const IconComponent = IconModule[iconName];
+  return <IconComponent width={16} height={16} />;
+};
+
+// Package Manager dropdown items
+export const partnersList = (partnerLists: Array<Omit<Partners, 'logo'>>) =>
+  partnerLists.map(({ id, ...partner }) => {
+    return {
+      id: id,
+      logo: createIcon(PartnersLogo, id),
+      ...partner,
+    };
+  });