chore: server-side render partners

apps/site/components/Common/Partners/PartnerLogo/index.module.css → apps/site/components/Common/Partners/PartnerButton/index.module.css

@@ -1,6 +1,6 @@
 @reference "../../../../styles/index.css";
 
-.partnerIcon {
+.large {
   @apply flex
     h-28
     max-h-28
@@ -17,3 +17,14 @@
       !w-auto;
   }
 }
+
+.small {
+  @apply h-9
+    w-auto
+    min-w-9;
+
+  svg {
+    @apply h-4
+      w-auto;
+  }
+}

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

@@ -0,0 +1,26 @@
+import Button from '#site/components/Common/Button';
+
+import type { AnchorHTMLAttributes, FC } from 'react';
+
+import style from './index.module.css';
+
+type PartnerProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  size?: 'large' | 'small';
+};
+
+const PartnerButton: FC<PartnerProps> = ({
+  href,
+  size = 'small',
+  ...props
+}) => (
+  <Button
+    kind="secondary"
+    href={`${href}/?utm_source=nodejs-website&utm_medium=Link`}
+    rel="sponsored noopener"
+    target="_blank"
+    className={style[size]}
+    {...props}
+  />
+);
+
+export default PartnerButton;

apps/site/components/Common/Partners/index.module.css

@@ -0,0 +1,22 @@
+@reference "../../../styles/index.css";
+
+.small {
+  @apply flex
+    flex-row
+    flex-wrap
+    items-center
+    gap-2;
+}
+
+.large {
+  @apply grid
+    w-full
+    grid-cols-[repeat(auto-fill,minmax(240px,1fr))]
+    gap-4;
+}
+
+.tooltip {
+  @apply p-2
+    text-neutral-900
+    dark:text-neutral-200;
+}

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

@@ -0,0 +1,83 @@
+import Tooltip from '@node-core/ui-components/Common/Tooltip';
+import * as PartnerLogos from '@node-core/ui-components/Icons/PartnerLogos';
+
+import providePartners from '#site/next-data/providers/partners';
+import { partners } from '#site/next.json.mjs';
+
+import type { Partner, PartnerCategory } from '#site/types';
+import type { FC } from 'react';
+
+import PartnerButton from './PartnerButton';
+
+import style from './index.module.css';
+
+type PartnersListProps = {
+  size?: 'large' | 'small';
+  category?: PartnerCategory;
+  sort?: 'name' | 'weight';
+  length?: number;
+};
+
+const getPartners = async (
+  length?: number,
+  category?: PartnerCategory,
+  sort?: 'name' | 'weight'
+) => {
+  let result = sort === 'name' ? partners : await providePartners();
+
+  result = category
+    ? result.filter(p => p.categories.includes(category))
+    : result;
+
+  return length ? result.slice(0, length) : result;
+};
+
+const renderSmallPartner = (partner: Partner) => {
+  const Logo = PartnerLogos[partner.id];
+
+  return (
+    <Tooltip
+      key={partner.id}
+      content={<div className={style.tooltip}>{partner.name}</div>}
+    >
+      <PartnerButton size="small" href={partner.href}>
+        <Logo.Favicon />
+      </PartnerButton>
+    </Tooltip>
+  );
+};
+
+const renderLargePartner = (partner: Partner) => {
+  const Logo = PartnerLogos[partner.id];
+
+  return (
+    <PartnerButton key={partner.id} size="large" href={partner.href}>
+      <Logo.Logo />
+    </PartnerButton>
+  );
+};
+
+const PartnersList: FC<PartnersListProps> = async ({
+  size = 'small',
+  category,
+  sort = 'name',
+  length,
+}) => {
+  const isSmall = size === 'small';
+
+  const SMALL_PARTNER_LIMIT = 6;
+
+  const partners = await getPartners(
+    length ?? (isSmall ? SMALL_PARTNER_LIMIT : undefined),
+    category,
+    sort
+  );
+
+  return (
+    <div className={style[size]}>
+      {partners.map(isSmall ? renderSmallPartner : renderLargePartner)}
+    </div>
+  );
+};
+
+export default PartnersList;

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

@@ -1,10 +1,10 @@
 import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
 
-import type { Supporters } from '#site/types';
+import type { Supporter } from '#site/types';
 import type { FC } from 'react';
 
 type SupportersListProps = {
-  supporters: Array<Supporters>;
+  supporters: Array<Supporter<'opencollective'>>;
 };
 
 const SupportersList: FC<SupportersListProps> = ({ supporters }) => (