whocanuse icon indicating copy to clipboard operation
whocanuse copied to clipboard

Published 20 hours ago • verified publisher icon CoreyGinnivan

Dynamically create color comparison image for social sharing

Open cbirdsong opened this issue 1 year ago • 2 comments

Right now, you get a generic OpenGraph preview image when you share a WhoCanUse link in a chat client or social network. Here's what I get when sharing a comparison between #0078c2 and #ffeb38 (https://www.whocanuse.com/?bg=0078c2&fg=ffeb38&fs=16&fw=):

The generic WhoCanUse image shown as an unfurl in Slack and Discord

It would be cool if the image preview for the URL's specific color combination was dynamically generated so that shared link unfurls showed the colors and contrast ratio information like 11ty's Rainglow demo does:

The image it generates for #048e86 (https://rainglow.zachleat.dev/048e86/): A dynamic image that has a #048e86 background color along with contrast information for white and black

How it appears in social share previews: The image shown as an unfurl in Slack and Discord

This is accomplished using 11ty's serverless plugin on Netlify alongside 11ty's OpenGraph image API. It seems like it might be possible to create a new layout to use with 11ty's API or a similar one, but I'm not familiar with Vercel and have no idea how feasible it is to do either/both of these on there?

cbirdsong avatar Dec 20 '22 20:12 cbirdsong