search

CoreyGinnivan / whocanuse

WhoCanUse is a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
https://whocanuse.com/
MIT License
456 stars 48 forks source link

Dynamically create color comparison image for social sharing #58

Open cbirdsong opened 1 year ago

cbirdsong commented 1 year ago

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?

kitgrose commented 1 year ago

For the record, Vercel has a similar API for generating OpenGraph images that would seemingly be fairly easy to implement (if the impact on your Vercel plan is acceptable).

MrRobotIsHere commented 7 months ago

❤️