feat: enhance partner list functionality with sorting options

Author: bjohansebas

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

@@ -37,7 +37,13 @@ const PartnersIconList: FC<PartnersIconListProps> = ({
     const renderSponsorsAnimation = setTimeout(() => {
       initialRenderer.current = false;
 
-      setSeedList(randomPartnerList(ICON_PARTNERS, maxLength, 5, categories));
+      setSeedList(
+        randomPartnerList(ICON_PARTNERS, {
+          pick: maxLength,
+          dateSeed: 5,
+          category: categories,
+        })
+      );
     }, 0);
 
     return () => clearTimeout(renderSponsorsAnimation);

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

@@ -12,10 +12,12 @@ import { randomPartnerList } from '../utils';
 type PartnersLogoListProps = {
   maxLength?: number;
   categories?: PartnerCategory;
+  sort?: 'name' | 'weight';
 };
 
 const PartnersLogoList: FC<PartnersLogoListProps> = ({
   maxLength = 3,
+  sort = 'weight',
   categories,
 }) => {
   const initialRenderer = useRef(true);
@@ -42,7 +44,14 @@ const PartnersLogoList: FC<PartnersLogoListProps> = ({
     const renderSponsorsAnimation = setTimeout(() => {
       initialRenderer.current = false;
 
-      setSeedList(randomPartnerList(LOGO_PARTNERS, maxLength, 5, categories));
+      setSeedList(
+        randomPartnerList(LOGO_PARTNERS, {
+          pick: maxLength,
+          dateSeed: 5,
+          category: categories,
+          sort: sort,
+        })
+      );
     }, 0);
 
     return () => clearTimeout(renderSponsorsAnimation);

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

@@ -1,13 +1,47 @@
 import type { PartnerCategory, Partners } from '#site/types/partners.js';
 
-// TODO: Implement no random list
-// TODO: Implement no importance of partner
 function randomPartnerList(
   partners: Array<Partners>,
-  pick = 4,
-  dateSeed = 5,
-  category?: PartnerCategory
+  config: {
+    /**
+     * Number of partners to pick from the list.
+     * If null, all partners will be returned.
+     */
+    pick?: number | null;
+    /**
+     * Date seed to use for the randomization.
+     * This is used to ensure that the same partners are returned for the same date.
+     */
+    dateSeed?: number;
+    /**
+     * Category of partners to filter by.
+     * If not provided, all partners will be returned.
+     */
+    category?: PartnerCategory;
+    /**
+     * Whether to randomize the partners or not.
+     */
+    sort?: 'name' | 'weight' | null;
+  }
 ) {
+  const { pick = 4, dateSeed = 5, category, sort = 'weight' } = config;
+
+  const filteredPartners = [...partners].filter(partner => {
+    return !category || partner.categories.includes(category);
+  });
+
+  if (sort === null) {
+    return pick !== null ? filteredPartners.slice(0, pick) : filteredPartners;
+  }
+
+  if (sort === 'name') {
+    const shuffled = [...filteredPartners].sort((a, b) =>
+      a.name.localeCompare(b.name)
+    );
+
+    return pick !== null ? shuffled.slice(0, pick) : shuffled;
+  }
+
   const now = new Date();
   const minutes = Math.floor(now.getUTCMinutes() / dateSeed) * dateSeed;
 
@@ -27,8 +61,7 @@ function randomPartnerList(
   const seed = fixedTime.getTime();
   const rng = mulberry32(seed);
 
-  const weightedPartners = partners.flatMap(partner => {
-    if (category && !partner.categories.includes(category)) return [];
+  const weightedPartners = filteredPartners.flatMap(partner => {
     const weight = partner.weight;
     return Array(weight).fill(partner);
   });

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

@@ -18,31 +18,31 @@ The infrastructure partners provide important support for the Node.js project,
 providing hardware and machines for our continuous integration and testing processes,
 without we can't test and release new versions of Node.js.
 
-<PartnersLogoList categories="infrastructure" maxLength={null} />
+<PartnersLogoList categories="infrastructure" maxLength={null} sort="name" />
 
 ## Security
 
 The security partners help us to provide new security releases in a timely manner, ensuring
 properly good practices for vulnerability disclosure and remediation. Their contributions are
 crucial to ensure that the Node.js ecosystem remains secure and resilient against vulnerabilities.
 
-<PartnersLogoList categories="security" maxLength={null} />
+<PartnersLogoList categories="security" maxLength={null} sort="name" />
 
 ## Releases
 
 The release partners help us to provide new releases, ensuring that new features and improvements
 are delivered to the Node.js ecosystem in a timely manner. Their contributions are essential
 to the ongoing development and evolution of Node.js.
 
-<PartnersLogoList categories="release" maxLength={null} />
+<PartnersLogoList categories="release" maxLength={null} sort="name" />
 
 ## Services
 
 The service partners help us to provide a range of services that support the Node.js project.
 Their contributions are vital to ensuring that nodejs maintainers have access to the tools and
 resources they need to build and maintain this project.
 
-<PartnersLogoList categories="service" maxLength={null} />
+<PartnersLogoList categories="service" maxLength={null} sort="name" />
 
 ## Supporters
 
@@ -63,7 +63,7 @@ End-Of-Life versions, please visit [End-Of-Life Node.js Releases](/eol)
 > Using EOL releases through NES should be viewed as a temporary solution, the goal should always
 > be to upgrade to actively supported versions.
 
-<PartnersLogoList categories="esp" maxLength={null} />
+<PartnersLogoList categories="esp" maxLength={null} sort="name" />
 
 ## Become a Partner