feat: support gravatar

fix #590

.github/workflows/bundle-analysis.yml

@@ -20,12 +20,12 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '20.x'
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: ^7.4.1
+          version: ^8.14.0
           run_install: false
 
       - name: Get pnpm store directory

packages/ui/package.json

@@ -44,6 +44,7 @@
     "debounce-promise": "3.1.2",
     "framer-motion": "10.16.5",
     "lucide-react": "0.265.0",
+    "md5": "2.3.0",
     "next": "14.1.1",
     "next-auth": "4.24.5",
     "next-axiom": "0.17.0",
@@ -79,6 +80,7 @@
     "@types/canvas-confetti": "1.6.3",
     "@types/debounce-promise": "3.1.9",
     "@types/jest": "29.5.8",
+    "@types/md5": "2.3.5",
     "@types/node": "18.16.18",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",

packages/ui/src/components/avatar/avatar.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import md5 from 'md5';
 import * as React from 'react';
 
 import { IconUser } from '../icons';
@@ -36,6 +37,20 @@ export function Avatar({
 }: AvatarProps): JSX.Element {
   alt ||= 'Default avatar';
   const [sizeStyle, iconSize] = sizeStyles[size];
+  const [gravatarUrl, setGravatarUrl] = React.useState('');
+
+  React.useEffect(() => {
+    if (email && !src) {
+      const img = new Image();
+      const url = `https://www.gravatar.com/avatar/${md5(
+        email.toLowerCase().trim(),
+      )}?s=${iconSize}&d=404`;
+      img.src = url;
+      img.addEventListener('load', () => setGravatarUrl(url));
+      // img.onerror = () => {};
+    }
+  }, [email, src, iconSize]);
+
   if (!src) {
     const placeholder = (
       <IconUser
@@ -44,6 +59,24 @@ export function Avatar({
         aria-label={alt}
       />
     );
+
+    if (gravatarUrl) {
+      return (
+        <img
+          src={gravatarUrl}
+          alt={alt}
+          className={clsx(
+            bg,
+            ring,
+            `flex select-none items-center justify-center rounded-full`,
+            sizeStyle,
+            className,
+          )}
+          {...imgProps}
+        />
+      );
+    }
+
     // Keep this order to reduce name collision
     const customAvatarValue = username || email || name;
     if (customAvatarValue) {