With Middleman::SocialImage, you can use HTML and CSS to generate images as part of the build process. The intended use case is for generating images for use with the Open Graph protocol, which will be included when someone shares your page on Facebook, Twitter, etc.
Here’s an example of how this looks:
The basic strategy of the extension is to use Chrome in headless mode to take a screenshot of a page. This requires you to be running the preview server while you run the build process (I tried getting fancy with automatically starting a preview server as a separate thread / process, but couldn’t get it to work).
If you run the preview server via Puma, it’s actually reasonably fast. Locally I can generate about 4 images a second. With Github actions, it’s faster (I haven’t benchmarked it, but assuming a similar ratio of time for generating html vs images, I’d estimate I can generate about 8 images a second.
This is my first extension, so it was a nice opportunity to look deeper into how Middleman is working internally. If anyone has any suggestions for improvements, I’d love to hear them.