chore: add partner section on homepage

Author: bjohansebas

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

@@ -0,0 +1,12 @@
+@reference "../../../../styles/index.css";
+
+.partnerIcon {
+  @apply h-12
+    w-auto
+    p-2;
+
+  svg {
+    @apply h-7
+      w-auto;
+  }
+}

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

@@ -0,0 +1,27 @@
+import Skeleton from '@node-core/ui-components/Common/Skeleton';
+import type { ComponentProps, FC } from 'react';
+import { cloneElement } from 'react';
+
+import type { Partners } from '#site/types';
+
+// import Link from '#site/components/Link';
+import style from './index.module.css';
+import Button from '../../Button';
+
+type ParnetsIconProps = Partners & ComponentProps<typeof Skeleton>;
+
+const PartnersIcon: FC<ParnetsIconProps> = ({ href, logo, loading }) => {
+  return (
+    <Skeleton loading={loading} className="h-12 w-12 p-1">
+      <Button kind="secondary" href={href} className={style.partnerIcon}>
+        {cloneElement(logo, {
+          className: 'h-7 w-auto',
+          width: 'auto',
+          height: '28px',
+        })}
+      </Button>
+    </Skeleton>
+  );
+};
+
+export default PartnersIcon;

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

@@ -0,0 +1,9 @@
+@reference "../../../../styles/index.css";
+
+.partnersIconList {
+  @apply flex
+    flex-row
+    flex-wrap
+    items-center
+    gap-4;
+}

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

@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect, useRef, useState, type FC } from 'react';
+
+import PARTNERS from '#site/next.partners.constants';
+import type { PartnerCategory, Partners } from '#site/types';
+
+import PartnerIcon from '../PartnerIcon';
+import style from './index.module.css';
+import { randomPartnerList } from '../utils';
+
+type PartnersIconListProps = {
+  maxLength?: number;
+  categories?: PartnerCategory;
+};
+
+const PartnersIconList: FC<PartnersIconListProps> = ({
+  maxLength = 6,
+  categories,
+}) => {
+  const initialRenderer = useRef(true);
+
+  const [seedList, setSeedList] = useState<Array<Partners>>(
+    PARTNERS.slice(0, maxLength)
+  );
+
+  // Depediendo del ancho que tiene el componente tiene que renderizar un número diferente de sponsors, tiene que se dinamico cada sponsor tiene un ancho de 24x24 pixeles
+  // crear una función que reciba el ancho del componente y retorne un número de sponsors a renderizar
+  // const getSponsorsToRender = (width: number) => {
+
+  useEffect(() => {
+    // We intentionally render the initial default "mock" list of sponsors
+    // to have the Skeletons loading, and then we render the actual list
+    // after an enough amount of time has passed to give a proper sense of Animation
+    // We do this client-side effect, to ensure that a random-amount of sponsors is renderered
+    // on every page load. Since our page is natively static, we need to ensure that
+    // on the client-side we have a random amount of sponsors rendered.
+    // Although whilst we are deployed on Vercel or other environment that supports ISR
+    // (Incremental Static Generation) whose would invalidate the cache every 5 minutes
+    // We want to ensure that this feature is compatible on a full-static environment
+    const renderSponsorsAnimation = setTimeout(() => {
+      initialRenderer.current = false;
+
+      setSeedList(randomPartnerList(PARTNERS, maxLength, 1, categories));
+    }, 0);
+
+    return () => clearTimeout(renderSponsorsAnimation);
+    // We only want this to run once on initial render
+    // We don't really care if the props change as realistically they shouldn't ever
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={style.partnersIconList}>
+      {seedList.map((partner, index) => (
+        <PartnerIcon
+          {...partner}
+          key={index}
+          loading={initialRenderer.current}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default PartnersIconList;

apps/site/components/Common/Partners/utils.ts

@@ -0,0 +1,48 @@
+import type { PartnerCategory, Partners } from '#site/types/partners.js';
+
+function randomPartnerList(
+  partners: Array<Partners>,
+  pick = 4,
+  dateSeed = 5,
+  category?: PartnerCategory
+) {
+  const now = new Date();
+  const minutes = Math.floor(now.getUTCMinutes() / dateSeed) * dateSeed;
+
+  const fixedTime = new Date(
+    Date.UTC(
+      now.getUTCFullYear(),
+      now.getUTCMonth(),
+      now.getUTCDate(),
+      now.getUTCHours(),
+      minutes,
+      0,
+      0
+    )
+  );
+
+  // We create a seed from the rounded date (timestamp in ms)
+  const seed = fixedTime.getTime();
+  const rng = mulberry32(seed);
+
+  // Create a copy of the array to avoid modifying the original
+  const shuffled = partners
+    .filter(partner => !category || partner.categories.includes(category))
+    .slice()
+    .sort(() => rng() - 0.5);
+
+  return shuffled.slice(0, pick);
+}
+
+// This function returns a random list of partners based on a fixed time seed
+
+function mulberry32(seed: number) {
+  return function () {
+    let t = (seed += 0x6d2b79f5);
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export { randomPartnerList };

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/next.partners.constants.tsx

@@ -0,0 +1,7 @@
+import type { Partners } from '#site/types';
+import { partnersList } from '#site/util/partners';
+import partners from '#site/util/partners/constants.json' with { type: 'json' };
+
+const PARTNERS = partnersList(partners as Array<Omit<Partners, 'logo'>>);
+
+export default PARTNERS as Array<Partners>;

apps/site/pages/en/index.mdx

@@ -137,4 +137,13 @@ layout: home
 
   </div>
   Learn more what Node.js is able to offer with our [Learning materials](/learn).
+  <div className='w-full flex flex-col gap-2 xs:mt-3'>
+    <div className="flex flex-row items-center justify-center gap-4">
+      <PartnersIconList />
+      <Link href="/about/partners" className="min-w-max">and more...</Link>
+    </div>
+    <span className="xs:mt-1 text-center">
+      Node.js is proudly supported by our partners above
+    </span>
+  </div>
 </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';