add og image generation #1
Description
What?
Automatically generate 1200px x 675pxOpen Graph images for each page on the site.
Each image should be generated using the page title and description.
As an example, here's an endpoint I built for my personal site that generates og images with randomized plant+heart emojis for the border:
That image is generated from this link:
https://with-heart.xyz/api/img/bordered?title=aoe2.studio&description=Building%20cool%20Age%20of%20Empires%20II%20stuff
See how it has query params for title and description? The ?title=aoe2.studio&description=Building%20cool%20Age%20of%20Empires%20II%20stuff part of the URL?
You can change the title and description params (with %20 in place of spaces) to generate an entirely new image with the provided text.
That's basically what we're going for here. Minus the flowers+hearts theme. Plus aoe2 stuff.
Why?
In order for our links to look all pretty when shared around the web, we need to properly configure our Open Graph meta tags.
There are two image tags we should generate an image for: og:image/twitter:image
Adding these tags will show the image when the page/post is linked on socials and such.
How?
Here's a post on how to generate og images with Astro using React and satori: https://techsquidtv.com/blog/generating-open-graph-images-for-astro/
As far as the image style goes… I'd prefer something cute and eye-catching because why not?
