add core contributors to home page

KevinVandy · KevinVandy · commit bb12aba09ff6 · 2025-06-04T18:04:58.000-05:00
diff --git a/src/components/ContributorsWall.tsx b/src/components/ContributorsWall.tsx
@@ -10,12 +10,30 @@ export function ContributorsWall({ library }: { library: Library }) {
       >
         <img
           alt="GitHub Contributors"
-          src={`https://contrib.rocks/image?repo=tanstack/${library.id}`}
+          src={`https://contrib.rocks/image?repo=${library.repo}`}
           loading="lazy"
         />
       </a>
       <div className="text-xs text-gray-500 mt-2">
-        Powered by <a href="https://contrib.rocks" target="_blank" rel="noopener noreferrer" className="underline">contrib.rocks</a>
+        Powered by{' '}
+        <a
+          href="https://contrib.rocks"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline"
+        >
+          contrib.rocks
+        </a>
+      </div>
+      <div className="mt-4">
+        <a
+          href={`https://github.com/${library.repo}/graphs/contributors`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 mb-2"
+        >
+          View all contributors on GitHub
+        </a>
       </div>
     </div>
   )
diff --git a/src/components/MaintainerCard.tsx b/src/components/MaintainerCard.tsx
@@ -1,7 +1,12 @@
 import { Library, Framework, frameworkOptions } from '~/libraries'
-import { getRoleInLibrary, Maintainer } from '~/libraries/maintainers'
+import {
+  getRoleInLibrary,
+  Maintainer,
+  getPersonsMaintainerOf,
+} from '~/libraries/maintainers'
+import { useState } from 'react'
 
-function RoleBadge({ role, libraryId }: { role: string; libraryId: string }) {
+function RoleBadge({ role }: { role: string }) {
   const isCreator = role.toLowerCase().includes('creator')
   const isMaintainer = role.toLowerCase().includes('maintainer')
 
@@ -37,12 +42,27 @@ function FrameworkChip({ framework }: { framework: Framework }) {
   )
 }
 
+function LibraryBadge({ library }: { library: Library }) {
+  return (
+    <span
+      className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-gray-700 dark:text-gray-300 ${
+        library.bgStyle ?? 'bg-gray-500'
+      } bg-opacity-20 dark:bg-opacity-20`}
+    >
+      {library.name}
+    </span>
+  )
+}
+
 interface MaintainerCardProps {
   maintainer: Maintainer
-  libraryId: Library['id']
+  libraryId?: Library['id']
 }
 
 export function MaintainerCard({ maintainer, libraryId }: MaintainerCardProps) {
+  const libraries = getPersonsMaintainerOf(maintainer)
+  const [showAllLibraries, setShowAllLibraries] = useState(false)
+
   return (
     <a
       href={`https://github.com/${maintainer.github}`}
@@ -55,6 +75,8 @@ export function MaintainerCard({ maintainer, libraryId }: MaintainerCardProps) {
           alt={`${maintainer.name}'s avatar`}
           className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
           src={maintainer.avatar}
+          loading="lazy"
+          decoding="async"
           style={{
             aspectRatio: '1/1',
             objectFit: 'cover',
@@ -88,47 +110,78 @@ export function MaintainerCard({ maintainer, libraryId }: MaintainerCardProps) {
         </div>
       </div>
       <div className="p-3 space-y-2">
+        {!libraryId && libraries.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {libraries
+              .slice(0, showAllLibraries ? undefined : 2)
+              .map((library) => (
+                <LibraryBadge key={library.id} library={library} />
+              ))}
+            {!showAllLibraries && libraries.length > 2 && (
+              <button
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  setShowAllLibraries(true)
+                }}
+                className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+              >
+                +{libraries.length - 3} more
+              </button>
+            )}
+          </div>
+        )}
         <div className="flex items-center justify-between">
           <h3 className="text-base font-bold">{maintainer.name}</h3>
-          <RoleBadge
-            role={getRoleInLibrary(maintainer, libraryId)}
-            libraryId={libraryId}
-          />
+          {libraryId && (
+            <RoleBadge role={getRoleInLibrary(maintainer, libraryId)} />
+          )}
         </div>
-        <div className="flex items-center space-x-3 text-gray-500 dark:text-gray-400">
+        <div className="flex items-center space-x-4 text-gray-400 dark:text-gray-500 [&>*]:grayscale">
           <a
             href={`https://github.com/${maintainer.github}`}
-            className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+            className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors p-2 -m-2 hover:grayscale-0"
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
           >
-            <svg viewBox="0 0 16 16" className="w-4 h-4" fill="currentColor">
+            <svg viewBox="0 0 16 16" className="w-5 h-5" fill="currentColor">
               <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
             </svg>
           </a>
           {maintainer.social?.twitter && (
             <a
               href={maintainer.social.twitter}
-              className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+              className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors p-2 -m-2 hover:grayscale-0"
               target="_blank"
               rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}
             >
-              <svg viewBox="0 0 24 24" className="w-4 h-4" fill="currentColor">
-                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
+              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor">
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
               </svg>
             </a>
           )}
+          {maintainer.social?.bluesky && (
+            <a
+              href={maintainer.social.bluesky}
+              className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors p-2 -m-2 hover:grayscale-0"
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <span className="text-lg">🦋</span>
+            </a>
+          )}
           {maintainer.social?.website && (
             <a
               href={maintainer.social.website}
-              className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+              className="hover:text-gray-700 dark:hover:text-gray-200 transition-colors p-2 -m-2 hover:grayscale-0"
               target="_blank"
               rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}
             >
-              <svg viewBox="0 0 24 24" className="w-4 h-4" fill="currentColor">
+              <svg viewBox="0 0 24 24" className="w-5 h-5" fill="currentColor">
                 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
               </svg>
             </a>
diff --git a/src/libraries/index.tsx b/src/libraries/index.tsx
@@ -60,7 +60,7 @@ export type Library = {
     | 'create-tsrouter-app'
   name: string
   cardStyles: string
-  to: string
+  to?: string
   tagline: string
   description: string
   ogImage?: string
@@ -90,6 +90,7 @@ export type Library = {
   }[]
   docsRoot?: string
   embedEditor?: 'codesandbox' | 'stackblitz'
+  visible?: boolean
 }
 
 export type LibraryMenuItem = {
@@ -110,6 +111,16 @@ export const libraries = [
   rangerProject,
   dbProject,
   configProject,
+  {
+    id: 'react-charts',
+    name: 'React Charts',
+    repo: 'tanstack/react-charts',
+  } as Library,
+  {
+    id: 'create-tsrouter-app',
+    name: 'Create TS Router App',
+    repo: 'tanstack/create-tsrouter-app',
+  } as Library,
 ] satisfies Library[]
 
 export const librariesByGroup = {
diff --git a/src/libraries/maintainers.ts b/src/libraries/maintainers.ts
@@ -34,6 +34,7 @@ export const allMaintainers: Maintainer[] = [
       'virtual',
       'ranger',
       'store',
+      'pacer',
       'react-charts',
     ],
     frameworkExpertise: ['react', 'solid'],
@@ -208,6 +209,63 @@ export const allMaintainers: Maintainer[] = [
       website: 'https://www.linkedin.com/in/jonghyeonko',
     },
   },
+  {
+    name: 'Riccardo Perra',
+    avatar:
+      'https://cdn.bsky.app/img/avatar/plain/did:plc:gtnigsmgu7jyrc4tnkvn62qw/bafkreiceysbj4o6jrbbniudtwj3tcsns6rvwcxyjsqiaumeojurwbkki5a@jpeg',
+    github: 'riccardoperra',
+    contributorOf: ['table'],
+    frameworkExpertise: ['angular', 'solid'],
+    specialties: [],
+    social: {
+      twitter: 'https://x.com/riccardoperra0',
+      bluesky: 'https://bsky.app/profile/riccardoperra.bsky.social',
+      website: 'https://riccardoperra.com',
+    },
+  },
+  {
+    name: 'Birk Skyum',
+    avatar: 'https://github.com/birkskyum.png',
+    github: 'birkskyum',
+    maintainerOf: ['start'],
+    frameworkExpertise: ['solid'],
+    specialties: [],
+    social: {
+      twitter: 'https://x.com/birkskyum',
+      bluesky: 'https://bsky.app/profile/bskyum.bsky.social',
+    },
+  },
+  {
+    name: 'Arnoud de Vries',
+    avatar: 'https://github.com/arnoud-dv.png',
+    github: 'arnoud-dv',
+    maintainerOf: ['query'],
+    frameworkExpertise: ['angular', 'react'],
+    specialties: [
+      'Architecture',
+      'Developer Experience',
+      'TypeScript',
+      'Reactivity',
+    ],
+    social: {
+      twitter: 'https://x.com/Arnoud_dv',
+      bluesky: 'https://bsky.app/profile/arnoud.dev',
+      website: 'https://www.linkedin.com/in/arnouddv/',
+    },
+  },
+  {
+    name: 'Fülöp Kovács',
+    isCoreMaintainer: false,
+    avatar: 'https://github.com/fulopkovacs.png',
+    github: 'fulopkovacs',
+    maintainerOf: ['form'],
+    frameworkExpertise: ['react'],
+    social: {
+      website: 'https://fulop.dev/',
+      twitter: 'https://x.com/notacheetah',
+      bluesky: 'https://bsky.app/profile/notacheetah.bsky.social',
+    },
+  },
 ]
 
 export const coreMaintainers = allMaintainers.filter(
diff --git a/src/routes/_libraries/index.tsx b/src/routes/_libraries/index.tsx
@@ -15,6 +15,8 @@ import splashLightImg from '~/images/splash-light.png'
 import splashDarkImg from '~/images/splash-dark.png'
 import { GadFooter } from '~/components/GoogleScripts'
 import LandingPageGad from '~/components/LandingPageGad'
+import { MaintainerCard } from '~/components/MaintainerCard'
+import { coreMaintainers } from '~/libraries/maintainers'
 
 export const textColors = [
   `text-rose-500`,
@@ -382,6 +384,17 @@ function Index() {
           </div>
         </div>
 
+        <div className="px-4 lg:max-w-screen-lg md:mx-auto">
+          <h3 className={`text-4xl font-light mb-6`}>Core Maintainers</h3>
+          <div
+            className={`grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3`}
+          >
+            {coreMaintainers.map((maintainer) => (
+              <MaintainerCard key={maintainer.github} maintainer={maintainer} />
+            ))}
+          </div>
+        </div>
+
         <LandingPageGad />
 
         <div className="px-4 mx-auto max-w-screen-lg">
diff --git a/src/routes/_libraries/route.tsx b/src/routes/_libraries/route.tsx
