bdebon / choiceof.dev

Developers have to cope with pretty hard choices every day. This is a collection of the most complex and funny choices. What will be yours?

Home Page:https://choiceof.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Auto-Screenshot for social media cards preview

bdebon opened this issue · comments

commented

When people copy paste the url of a question on a social media like Twitter, the preview image should be a screenshot with both choice displayed.
CleanShot 2022-10-22 at 18 35 37@2x

In choixdemerde.fr I was uploading some preview by myself for each new question. Here I'm gonna do the same thing for now because we don't have a server, it's all static files.
Maybe there is a solution to automatically generate this kind of image for static websites. As we can use any tool that uses a server, maybe we can see if we can generate that with a CI? Something else? Open to discussion here. For now though, we need to upload the screenshot a la mano.

Hello, that would probably be possible with Vercel's new OG Image Generation library 😉
I can try to take care of that!

commented

Proposition Neo: You can maybe use Cypress to generate an end to end and make a screenshot

In my opinion, using Cypress might be "over-complicating" things. I would agree on using Cypress if we had no idea what the images and text were, but we do. And generally, using Cypress is a pain with all the dependencies and the execution time it takes.

My solution would simply be to just use canvas to generate an image. A 2D image like described should be pretty straightforward and the image creation shouldn't take very long. But that's debatable.

commented

related #63

commented

@booleans-oss I finally went in your direction. But it was not so easy oh my god... I had to rebuild the canvas from scratch with both image and their title center with a black background. It was sooooo long and technical. Then I had to run all of that with ts-node. And make a github action that check that the preview has well been generated. If not you are invited to run the command on your machine to generate the previews.
It was so so so long but I'm glad I did it in the end ahah. Thanks for the idea!