chore: implement list of logos on download and partners page

Author: bjohansebas

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

@@ -0,0 +1,19 @@
+@reference "../../../../styles/index.css";
+
+.partnerIcon {
+  @apply flex
+    h-[114px]
+    max-h-[130px]
+    w-auto
+    min-w-12
+    items-center
+    justify-center
+    rounded-lg
+    p-6
+    sm:p-10;
+
+  svg {
+    @apply !h-12
+      !w-auto;
+  }
+}

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

@@ -0,0 +1,26 @@
+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 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-[114px] w-full p-2">
+      <Button kind="secondary" href={href} className={style.partnerIcon}>
+        {cloneElement(logo, {
+          className: 'h-4 w-auto',
+          width: 'auto',
+          height: '16px',
+        })}
+      </Button>
+    </Skeleton>
+  );
+};
+
+export default PartnersIcon;

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

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState, type FC } from 'react';
 
-import PARTNERS from '#site/next.partners.constants';
+import { ICON_PARTNERS } from '#site/next.partners.constants';
 import type { PartnerCategory, Partners } from '#site/types';
 
 import PartnerIcon from '../PartnerIcon';
@@ -21,7 +21,7 @@ const PartnersIconList: FC<PartnersIconListProps> = ({
   const initialRenderer = useRef(true);
 
   const [seedList, setSeedList] = useState<Array<Partners>>(
-    PARTNERS.slice(0, maxLength)
+    ICON_PARTNERS.slice(0, maxLength)
   );
 
   useEffect(() => {
@@ -37,7 +37,7 @@ const PartnersIconList: FC<PartnersIconListProps> = ({
     const renderSponsorsAnimation = setTimeout(() => {
       initialRenderer.current = false;
 
-      setSeedList(randomPartnerList(PARTNERS, maxLength, 1, categories));
+      setSeedList(randomPartnerList(ICON_PARTNERS, maxLength, 1, categories));
     }, 0);
 
     return () => clearTimeout(renderSponsorsAnimation);

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

@@ -0,0 +1,7 @@
+@reference "../../../../styles/index.css";
+
+.partnersLogoList {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+}

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

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useRef, useState, type FC } from 'react';
+
+import { LOGO_PARTNERS } from '#site/next.partners.constants';
+import type { PartnerCategory, Partners } from '#site/types';
+
+import PartnerLogo from '../PartnerLogo';
+import style from './index.module.css';
+import { randomPartnerList } from '../utils';
+
+type PartnersLogoListProps = {
+  maxLength?: number;
+  categories?: PartnerCategory;
+};
+
+const PartnersLogoList: FC<PartnersLogoListProps> = ({
+  maxLength = 3,
+  categories,
+}) => {
+  const initialRenderer = useRef(true);
+
+  const [seedList, setSeedList] = useState<Array<Partners>>(
+    LOGO_PARTNERS.slice(0, maxLength)
+  );
+
+  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(LOGO_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.partnersLogoList}>
+      {seedList.map((partner, index) => (
+        <PartnerLogo
+          {...partner}
+          key={index}
+          loading={initialRenderer.current}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default PartnersLogoList;

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

@@ -1,5 +1,7 @@
 import type { PartnerCategory, Partners } from '#site/types/partners.js';
 
+// TODO: Implement no random list
+// TODO: Implement no limit items
 function randomPartnerList(
   partners: Array<Partners>,
   pick = 4,

apps/site/next.mdx.use.mjs

@@ -4,6 +4,7 @@ import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
 
 import Button from './components/Common/Button';
 import PartnersIconList from './components/Common/Partners/PartnersIconList';
+import PartnersLogoList from './components/Common/Partners/PartnersLogoList';
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import Link from './components/Link';
 import LinkWithArrow from './components/LinkWithArrow';
@@ -25,8 +26,10 @@ export const mdxComponents = {
   WithBanner,
   // HOC for providing Badge Data
   WithBadgeGroup,
-  // Shows a list of Node.js Partners
+  // Shows a list of Node.js Partners with Icons
   PartnersIconList,
+  // Shows a list of Node.js Partners with Logos
+  PartnersLogoList,
   // Standalone Badge Group
   BadgeGroup,
   // Renders an container for Upcoming Node.js Meetings

apps/site/next.partners.constants.tsx

@@ -2,6 +2,10 @@ 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'>>);
+const PARTNERS = (type?: 'Logo' | 'Favicon') =>
+  partnersList(partners as Array<Omit<Partners, 'logo'>>, type);
 
-export default PARTNERS as Array<Partners>;
+const ICON_PARTNERS = PARTNERS('Favicon');
+const LOGO_PARTNERS = PARTNERS('Logo');
+
+export { ICON_PARTNERS, LOGO_PARTNERS };

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

@@ -11,14 +11,20 @@ Importance of partners and their role and explains our partner categories (Ecosy
 
 Projects with their logo, name, tier, the description and a CTA button
 
+<PartnersLogoList categories="infrastructure" />
+
 ## Security
 
 Projects with their logo, name, tier, the description and a CTA button
 
+<PartnersLogoList categories="security" />
+
 ## Ecosystem Sustainability Program (ESP)
 
 Projects with their logo, name, tier, the description and a CTA button
 
+<PartnersLogoList categories="esp" />
+
 ## Backers (Open Collective and GitHub Sponsors)
 
 Show a list of lists direct individual or organizational support that can be done through OpenCollective and GitHub Sponsors

apps/site/pages/en/download/current.mdx

@@ -34,3 +34,15 @@ all <LinkWithArrow href="https://nodejs.org/download/release/">previous releases
 or the <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">unofficial</LinkWithArrow> binaries for other platforms.
 
 </section>
+
+<section>
+  <h2 className='text-center'>Thanks by Our Partners</h2>
+
+  <span className="text-center">
+    We are able to serve Node.js downloads and maintain our infrastructure thanks
+    to our <Link href="/about/partners">amazing partners</Link>.
+  </span>
+  <div className='mt-4'>
+    <PartnersLogoList categories="infrastructure"/>
+  </div>
+</section>