feat: enhance PartnersList component to support sorting by name and weight

Author: bjohansebas

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

@@ -4,6 +4,7 @@ import Tooltip from '@node-core/ui-components/Common/Tooltip';
 import * as PartnerLogos from '@node-core/ui-components/Icons/PartnerLogos';
 
 import { partners } from '#site/next.json.mjs';
+import { shuffle } from '#site/util/array';
 
 import type { Partner, PartnerCategory } from '#site/types';
 import type { FC } from 'react';
@@ -15,15 +16,45 @@ import style from './index.module.css';
 type PartnersListProps = {
   size?: 'big' | 'small';
   category?: PartnerCategory;
+  sort?: 'name' | 'weight';
   length?: number;
 };
 
-const getPartners = async (length?: number, category?: PartnerCategory) => {
+const getPartners = async (
+  length?: number,
+  category?: PartnerCategory,
+  sort?: 'name' | 'weight'
+) => {
+  let result: Array<Partner> = [];
+
   const filteredPartners = category
     ? partners.filter(partner => partner.categories.includes(category))
     : partners;
 
-  return length ? filteredPartners.slice(0, length) : filteredPartners;
+  if (sort === 'name') {
+    filteredPartners.sort((a, b) => a.name.localeCompare(b.name));
+    result = [...filteredPartners];
+  }
+
+  if (sort === 'weight') {
+    const weightedPartners = filteredPartners.flatMap(partner => {
+      const weight = partner.weight ?? 0;
+      return Array(weight > 0 ? weight : 1).fill(partner);
+    });
+
+    const minutes = 300; // Change every 5 minutes
+    const seed = Math.floor(Date.now() / (minutes * 1000));
+
+    // Create a copy of the array to avoid modifying the original
+    const shuffled = await shuffle(weightedPartners, seed);
+
+    // Remove duplicates while preserving order
+    const unique = Array.from(new Set(shuffled));
+
+    result = [...unique];
+  }
+
+  return length ? result.slice(0, length) : result;
 };
 
 const renderSmallPartner = (partner: Partner) => {
@@ -54,13 +85,15 @@ const renderBigPartner = (partner: Partner) => {
 const PartnersList: FC<PartnersListProps> = async ({
   size = 'small',
   category,
+  sort = 'name',
   length,
 }) => {
   const isSmall = size === 'small';
 
   const partners = await getPartners(
     length ?? (isSmall ? 6 : undefined),
-    category
+    category,
+    sort
   );
 
   return (

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

@@ -45,6 +45,6 @@ or the <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">unof
     proudly due to the support of these partners, <Link href="/about/partners">and more</Link>.
   </span>
   <div className='mt-4'>
-    <PartnersList size="big" category="infrastructure" length={3} />
+    <PartnersList size="big" category="infrastructure" length={3} sort="weight" />
   </div>
 </section>

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

@@ -45,6 +45,6 @@ or the <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">unof
     proudly due to the support of these partners, <Link href="/about/partners">and more</Link>.
   </span>
   <div className='mt-4'>
-    <PartnersList size="big" category="infrastructure" length={3} />
+    <PartnersList size="big" category="infrastructure" length={3} sort="weight" />
   </div>
 </section>

apps/site/pages/en/index.mdx

@@ -28,7 +28,7 @@ layout: home
       </Button>
 
       <div className="flex justify-center xs:mt-3">
-        <PartnersList />
+        <PartnersList sort="weight" />
       </div>
       <span className="text-center text-sm! text-neutral-800 dark:text-neutral-600 text-balance">Node.js is proudly supported by the partners above <Link href="/about/partners">and more</Link>.</span>
     </div>

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

@@ -41,6 +41,6 @@ Consultez nos binaires <LinkWithArrow href="https://nodejs.org/download/nightly/
 </span>
 
   <div className="mt-4">
-    <PartnersList size="big" category="infrastructure" length={3} />
+    <PartnersList size="big" category="infrastructure" length={3} sort="weight" />
   </div>
 </section>

apps/site/pages/fr/download/index.mdx

@@ -41,6 +41,6 @@ Consultez nos binaires <LinkWithArrow href="https://nodejs.org/download/nightly/
 </span>
 
   <div className="mt-4">
-    <PartnersList size="big" category="infrastructure" length={3} />
+    <PartnersList size="big" category="infrastructure" length={3} sort="weight" />
   </div>
 </section>

apps/site/pages/fr/index.mdx

@@ -28,7 +28,7 @@ layout: home
       </Button>
 
       <div className="flex justify-center xs:mt-3">
-        <PartnersList />
+        <PartnersList sort="weight" />
       </div>
 
       <span className="text-center text-sm! text-neutral-800 dark:text-neutral-600 text-balance">Node.js est fièrement soutenu par les partenaires ci-dessus <Link href="/about/partners">et bien d'autres encore</Link>.</span>

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

@@ -43,6 +43,6 @@ atau biner <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">
 </span>
 
   <div className="mt-4">
-    <PartnersList size="big" category="infrastructure" />
+    <PartnersList size="big" category="infrastructure" sort="weight" />
   </div>
 </section>

apps/site/pages/id/download/index.mdx

@@ -43,6 +43,6 @@ atau biner <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">
 </span>
 
   <div className="mt-4">
-    <PartnersList size="big" category="infrastructure" length={3} />
+    <PartnersList size="big" category="infrastructure" length={3} sort="weight" />
   </div>
 </section>

apps/site/pages/id/index.mdx

@@ -30,7 +30,7 @@ layout: home
       </Button>
 
       <div className="flex justify-center xs:mt-3">
-        <PartnersList />
+        <PartnersList sort="weight" />
       </div>
 
       <span className="text-center text-sm! text-neutral-800 dark:text-neutral-600 text-balance">Node.js dengan bangga didukung oleh para mitra di atas <Link href="/about/partners">dan lainnya</Link>.</span>