feat(web): add /api/minidenticon endpoint for email avatar fallbacks

Replace placeholder avatars in email templates with dynamically generated
minidenticon PNGs. The new endpoint converts minidenticon SVGs to PNGs
via sharp, making them compatible with email clients that don't support
data URIs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: brendan-kellam

packages/web/package.json

@@ -196,7 +196,7 @@
   "devDependencies": {
     "@asteasolutions/zod-to-openapi": "7.3.4",
     "@eslint/eslintrc": "^3",
-    "@react-email/preview-server": "5.2.8",
+    "@react-email/preview-server": "5.2.10",
     "@react-grab/mcp": "^0.1.23",
     "@tanstack/eslint-plugin-query": "^5.74.7",
     "@testing-library/dom": "^10.4.1",
@@ -219,7 +219,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8",
     "raw-loader": "^4.0.2",
-    "react-email": "^5.1.0",
+    "react-email": "^5.2.10",
     "react-grab": "^0.1.23",
     "react-scan": "^0.5.3",
     "tailwindcss": "^3.4.1",

packages/web/src/actions.ts

@@ -723,6 +723,7 @@ export const createInvites = async (emails: string[]): Promise<{ success: boolea
                     const inviteLink = `${env.AUTH_URL}/redeem?invite_id=${invite.id}`;
                     const transport = createTransport(smtpConnectionUrl);
                     const html = await render(InviteUserEmail({
+                        baseUrl: env.AUTH_URL,
                         host: {
                             name: user.name ?? undefined,
                             email: user.email!,

packages/web/src/app/api/minidenticon/route.ts

@@ -0,0 +1,29 @@
+'use server';
+
+import { minidenticon } from 'minidenticons';
+import sharp from 'sharp';
+import { NextRequest } from 'next/server';
+import { apiHandler } from '@/lib/apiHandler';
+
+// Generates a minidenticon avatar PNG from an email address.
+// Used as a fallback avatar in emails where data URIs aren't supported.
+export const GET = apiHandler(async (request: NextRequest) => {
+    const email = request.nextUrl.searchParams.get('email');
+    if (!email) {
+        return new Response('Missing email parameter', { status: 400 });
+    }
+
+    const svg = minidenticon(email, 50, 50);
+    const png = await sharp(Buffer.from(svg))
+        .flatten({ background: { r: 241, g: 245, b: 249 } })
+        .resize(128, 128)
+        .png()
+        .toBuffer();
+
+    return new Response(new Uint8Array(png), {
+        headers: {
+            'Content-Type': 'image/png',
+            'Cache-Control': 'public, max-age=31536000, immutable',
+        },
+    });
+}, { track: false });

packages/web/src/components/userAvatar.tsx

@@ -2,7 +2,7 @@
 
 import { minidenticon } from 'minidenticons';
 import { ComponentPropsWithoutRef, forwardRef, useMemo } from 'react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { cn } from '@/lib/utils';
 
 interface UserAvatarProps extends ComponentPropsWithoutRef<typeof Avatar> {
@@ -20,13 +20,8 @@ export const UserAvatar = forwardRef<HTMLSpanElement, UserAvatarProps>(
         }, [email]);
 
         return (
-            <Avatar ref={ref} className={cn(className)} {...rest}>
-                <AvatarImage src={imageUrl ?? undefined} />
-                <AvatarFallback className="bg-muted">
-                    {identiconUri ? (
-                        <img src={identiconUri} alt={email ?? 'avatar'} className="h-full w-full" />
-                    ) : null}
-                </AvatarFallback>
+            <Avatar ref={ref} className={cn("bg-muted", className)} {...rest}>
+                <AvatarImage src={imageUrl ?? identiconUri} />
             </Avatar>
         );
     }

packages/web/src/emails/inviteUserEmail.tsx

@@ -18,6 +18,7 @@ import { EmailFooter } from './emailFooter';
 import { SOURCEBOT_LOGO_LIGHT_LARGE_URL, SOURCEBOT_ARROW_IMAGE_URL, SOURCEBOT_PLACEHOLDER_AVATAR_URL } from './constants';
 
 interface InviteUserEmailProps {
+    baseUrl: string;
     inviteLink: string;
     host: {
         email: string;
@@ -32,6 +33,7 @@ interface InviteUserEmailProps {
 }
 
 export const InviteUserEmail = ({
+    baseUrl,
     host,
     recipient,
     orgName,
@@ -71,7 +73,7 @@ export const InviteUserEmail = ({
                                 <Column align="right">
                                     <Img
                                         className="rounded-full"
-                                        src={host.avatarUrl ? host.avatarUrl : SOURCEBOT_PLACEHOLDER_AVATAR_URL}
+                                        src={host.avatarUrl ?? `${baseUrl}/api/minidenticon?email=${encodeURIComponent(host.email)}`}
                                         width="64"
                                         height="64"
                                     />
@@ -128,17 +130,16 @@ const InvitedByText = ({ email, name }: { email: string, name?: string }) => {
 }
 
 InviteUserEmail.PreviewProps = {
+    baseUrl: 'http://localhost:3000',
     host: {
         name: 'Alan Turing',
         email: 'alan.turing@example.com',
-        avatarUrl: SOURCEBOT_PLACEHOLDER_AVATAR_URL,
     },
     recipient: {
         // name: 'alanturing',
     },
     orgName: 'Enigma',
-    orgImageUrl: SOURCEBOT_PLACEHOLDER_AVATAR_URL,
-    inviteLink: 'https://sourcebot.example.com/redeem?invite_id=1234',
+    inviteLink: 'http://localhost:3000/redeem?invite_id=1234',
 } satisfies InviteUserEmailProps;
 
 export default InviteUserEmail;

packages/web/src/emails/joinRequestSubmittedEmail.tsx

@@ -69,7 +69,7 @@ export const JoinRequestSubmittedEmail = ({
                                 <Column align="right">
                                     <Img
                                         className="rounded-full"
-                                        src={requestor.avatarUrl ? requestor.avatarUrl : SOURCEBOT_PLACEHOLDER_AVATAR_URL}
+                                        src={requestor.avatarUrl ?? `${baseUrl}/api/minidenticon?email=${encodeURIComponent(requestor.email)}`}
                                         width="64"
                                         height="64"
                                         alt="Requestor avatar"
@@ -127,15 +127,13 @@ const RequestorInfo = ({ email, name }: { email: string, name?: string }) => {
 }
 
 JoinRequestSubmittedEmail.PreviewProps = {
-    baseUrl: 'https://sourcebot.example.com',
+    baseUrl: 'http://localhost:3000',
     requestor: {
         name: 'Alan Turing',
         email: 'alan.turing@example.com',
-        avatarUrl: SOURCEBOT_PLACEHOLDER_AVATAR_URL,
     },
     orgName: 'Enigma',
     orgDomain: '~',
-    orgImageUrl: SOURCEBOT_PLACEHOLDER_AVATAR_URL,
 } satisfies JoinRequestSubmittedEmailProps;
 
 export default JoinRequestSubmittedEmail;