fix(changelog): fallback contributor avatars

src/pages/Changelog/index.tsx

@@ -405,6 +405,10 @@ function ContributorAvatars({ contributors, showLabel }: { contributors: Contrib
             <img
               src={c.avatar}
               alt={c.name}
+              onError={(event) => {
+                event.currentTarget.onerror = null
+                event.currentTarget.src = c.fallbackAvatar
+              }}
               style={{
                 width: 24,
                 height: 24,

src/pages/Changelog/utils.test.ts

@@ -7,10 +7,12 @@ describe('parseContributors', () => {
       {
         name: 'caster-Q',
         avatar: 'https://github.com/caster-Q.png?size=48',
+        fallbackAvatar: 'https://api.dicebear.com/9.x/identicon/svg?seed=caster-Q&backgroundColor=b6e3f4',
       },
       {
         name: '@octocat',
         avatar: 'https://github.com/octocat.png?size=48',
+        fallbackAvatar: 'https://api.dicebear.com/9.x/identicon/svg?seed=%40octocat&backgroundColor=ffdfbf',
       },
     ])
   })

src/pages/Changelog/utils.ts

@@ -183,16 +183,22 @@ export function getVersionSeverity(version: string, prevVersion?: string): Versi
 export interface Contributor {
   name: string
   avatar: string
+  fallbackAvatar: string
 }
 
 const CONTRIBUTORS_PATTERN = /^@contributors:\s*(.+)/i
 const GITHUB_AVATAR_SIZE = 48
+const CONTRIBUTOR_COLORS = ['b6e3f4', 'ffdfbf', 'c0aede', 'd1f4e0', 'ffd5dc', 'ffe4c4', 'c4e0ff', 'f4d1e0']
 
 function githubAvatarUrl(name: string): string {
   const login = name.replace(/^@+/, '')
   return `https://github.com/${encodeURIComponent(login)}.png?size=${GITHUB_AVATAR_SIZE}`
 }
 
+function fallbackAvatarUrl(name: string, index: number): string {
+  return `https://api.dicebear.com/9.x/identicon/svg?seed=${encodeURIComponent(name)}&backgroundColor=${CONTRIBUTOR_COLORS[index % CONTRIBUTOR_COLORS.length]}`
+}
+
 export function parseContributors(desc: string): Contributor[] {
   if (!desc) return []
 
@@ -204,9 +210,10 @@ export function parseContributors(desc: string): Contributor[] {
         .split(/[,，、]\s*/)
         .map((name) => name.trim())
         .filter(Boolean)
-        .map((name) => ({
+        .map((name, index) => ({
           name,
           avatar: githubAvatarUrl(name),
+          fallbackAvatar: fallbackAvatarUrl(name, index),
         }))
     }
   }