docs(core): update champions list (#29297)

- Updates the list of champions
- Restyles that champions list to be shown in a grid, rather than a
masonry layout (so that the champions list can be a single list and not
manually balanced between 3 arrays)
- Randomizes the champions list on page refresh so different champions
are shown at the top

nx-dev/nx-dev/lib/champions.ts

@@ -1,6 +1,6 @@
 import { Champion } from '@nx/nx-dev/ui-common';
 
-export const champions1: Champion[] = [
+export const champions: Champion[] = [
   {
     name: 'Santosh Yadav',
     expertise:
@@ -109,8 +109,71 @@ export const champions1: Champion[] = [
     ],
     location: 'Belgium',
   },
-];
+  {
-export const champions2: Champion[] = [
+    name: 'Bob Strecansky',
+    expertise:
+      'Community Evangelist, Enterprise Ideology, Performance Optimization',
+    imageUrl: '/images/champions/bob-strecansky.webp',
+    contact: [
+      {
+        label: '@bobstrecansky',
+        link: 'https://twitter.com/bobstrecansky',
+      },
+    ],
+    location: 'Atlanta, GA, USA',
+  },
+  {
+    name: 'Joshua VanAllen',
+    expertise:
+      'App migrations, large scale repository structures, Angular, Vue, Spring, onboarding, educating the masses',
+    imageUrl: '/images/champions/josh-vanallen.webp',
+    contact: [
+      {
+        label: '@joshvanallen.dev',
+        link: 'https://bsky.app/profile/joshvanallen.dev',
+      },
+    ],
+    location: 'Pennsylvania, USA',
+  },
+  {
+    name: 'Thomas Laforge',
+    expertise:
+      'Teach users how to create a better developer experience (DX) with Nx and Angular through github challenges, blog posts, and conference talks',
+    imageUrl: '/images/champions/thomas-laforge.webp',
+    contact: [
+      {
+        label: '@laforge_toma',
+        link: 'https://twitter.com/laforge_toma',
+      },
+    ],
+    location: 'France',
+  },
+  {
+    name: 'Fabian Gosebrink',
+    expertise:
+      'Angular, Blogs, Conferences & Talks, Enterprise Architecture with Nx, Onboarding new Devs, Repository Structure, State Management',
+    imageUrl: '/images/champions/fabian-gosebrink.webp',
+    contact: [
+      {
+        label: 'fabian.gosebrink@offering.solutions',
+        link: 'mailto:fabian.gosebrink@offering.solutions',
+      },
+    ],
+    location: 'Switzerland',
+  },
+  {
+    name: 'Brecht Billiet',
+    expertise:
+      "Large-scale architecture, GenAI automation, Angular, Scaling monorepo's",
+    imageUrl: '/images/champions/brecht-billiet.webp',
+    contact: [
+      {
+        label: 'brecht@simplified.courses',
+        link: 'mailto:brecht@simplified.courses',
+      },
+    ],
+    location: 'Belgium',
+  },
   {
     name: 'Dominik Pieper',
     expertise:
@@ -239,8 +302,6 @@ export const champions2: Champion[] = [
     ],
     location: 'Czechia',
   },
-];
-export const champions3: Champion[] = [
   {
     name: 'Lara Newsom',
     expertise:
@@ -268,16 +329,17 @@ export const champions3: Champion[] = [
     location: 'USA',
   },
   {
-    name: 'Shai Reznik',
+    name: 'Edouard Maleix',
-    expertise: 'Writing plugins, Qwik, testing',
+    expertise:
-    imageUrl: '/images/champions/shai-reznik.webp',
+      'Setting up workspace for startups and enterprises. Improving workspace and CI pipeline performance. Creating plugins for Node.js applications and deployments. Sharing knowledge. Caching nerd.',
+    imageUrl: '/images/champions/edouard-maleix.webp',
     contact: [
       {
-        label: '@shai_reznik',
+        label: 'LinkedIn: edouard-maleix',
-        link: 'https://twitter.com/shai_reznik',
+        link: 'https://www.linkedin.com/in/edouard-maleix',
       },
     ],
-    location: 'Israel',
+    location: 'Austria',
   },
   {
     name: 'Issam GUISSOUMA',
@@ -291,18 +353,6 @@ export const champions3: Champion[] = [
     ],
     location: 'France',
   },
-  {
-    name: 'Devin Shoemaker',
-    expertise: 'Writing plugins and being the resident Nx enthusiast at Ionic',
-    imageUrl: '/images/champions/devin-shoemaker.webp',
-    contact: [
-      {
-        label: '@ParanoidCoder',
-        link: 'https://twitter.com/ParanoidCoder',
-      },
-    ],
-    location: 'Missouri, USA',
-  },
   {
     name: 'Preston Lamb',
     expertise: 'Angular, Cypress, Question Answerer for New Users',

nx-dev/nx-dev/pages/community.tsx

@@ -1,3 +1,4 @@
+'use client';
 import {
   ChampionCard,
   ChampionPerks,
@@ -8,7 +9,25 @@ import {
 import { ConnectWithUs } from '@nx/nx-dev/ui-community';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
-import { champions1, champions2, champions3 } from '../lib/champions';
+import dynamic from 'next/dynamic';
+import { champions } from '../lib/champions';
+
+export function ChampionsList(): JSX.Element {
+  return (
+    <>
+      {[...champions]
+        .sort(() => 0.5 - Math.random())
+        .map((data, index) => (
+          <ChampionCard key={data.name} data={data} />
+        ))}
+    </>
+  );
+}
+
+const DynamicChampionsList = dynamic(() => Promise.resolve(ChampionsList), {
+  ssr: false,
+  loading: () => <div></div>,
+});
 
 export default function Community(): JSX.Element {
   const router = useRouter();
@@ -68,24 +87,8 @@ export default function Community(): JSX.Element {
                     gather feedback from the community to help improve Nx.
                   </p>
                 </div>
-                <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2">
-                  <div className="space-y-6">
-                    {champions1.map((data, index) => (
-                      <ChampionCard key={data.name} data={data} />
-                    ))}
-                  </div>
-                  <div className="space-y-6">
-                    {champions2.map((data) => (
-                      <ChampionCard key={data.name} data={data} />
-                    ))}
-                  </div>
-                </div>
-              </div>
-              <div className="mt-6 flex h-full w-full flex-col items-stretch gap-6 md:mt-0">
-                {champions3.map((data) => (
-                  <ChampionCard key={data.name} data={data} />
-                ))}
               </div>
+              <DynamicChampionsList />
             </div>
           </article>
           <ChampionPerks />

nx-dev/ui-common/src/lib/champion-card.tsx

@@ -15,19 +15,12 @@ export interface Champion {
 
 export function ChampionCard({ data }: { data: Champion }): JSX.Element {
   return (
-    <figure className="relative flex flex-col-reverse rounded-lg border border-slate-200 bg-white/40 p-4 text-sm shadow-sm  transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
+    <figure className="relative flex flex-col justify-between rounded-lg border border-slate-200 bg-white/40 p-4 text-sm shadow-sm  transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
-      <blockquote className="mt-4 text-slate-600 dark:text-slate-400">
-        <p className="mb-4">{data.expertise}</p>
-        <div className="ml mt-0.5 inline text-xs text-slate-400 dark:text-slate-500">
-          <ChatBubbleLeftIcon className="inline h-4 w-4" />{' '}
-          {data.contact[0].label}
-        </div>
-      </blockquote>
       <figcaption className="flex items-center space-x-4">
         <img
           src={data.imageUrl}
           alt={data.name}
-          className="h-12 w-12 flex-none rounded-full border border-slate-200 object-cover dark:border-slate-800/40"
+          className="h-12 w-12 flex-none rounded-full border border-slate-200 bg-slate-800/40 object-cover dark:border-slate-800/40 dark:bg-slate-200"
           loading="lazy"
         />
         <div className="flex-auto">
@@ -42,6 +35,11 @@ export function ChampionCard({ data }: { data: Champion }): JSX.Element {
           </div>
         </div>
       </figcaption>
+      <p className="mt-4">{data.expertise}</p>
+      <div className="ml mt-4 inline text-xs text-slate-400 dark:text-slate-500">
+        <ChatBubbleLeftIcon className="inline h-4 w-4" />{' '}
+        {data.contact[0].label}
+      </div>
     </figure>
   );
 }