Building An Open Graph Image Builder (Part 1)

I’ve been slowly updating this blog to the modern world from the ages when people wrote their XML-feeds by hand (yes, it was a thing). One of the “new” things Web sites nowadays have in their meta tags are Open Graph preview images (or social previews). These images are used to make preview cards in various places, for example when posting links to Twitter and other sites.

There are tools like Pablo for creating these images online. Recently I’ve switched to creating them manually with Pixelmator but I’ve long been looking for a Web-based solution that could be integrated better with my other blogging workflows.

Two days ago I happened to stumble on to ZEIT Now’s blog post Social Cards as a Service where they dogfood their own serverless platform by building a simple image generator tool that uses Puppeteer to render the images. I immediately dove in to the source code hoping that I could modify it to my own needs but it looked way too complicated for my taste. (In other words, I didn’t understand most of it.) The UI got me thinking that building a simple framework around Tailwind would probably be super easy and would allow lots more control. So I sat down for two evenings and came up with Open Graph Image Builder.

This is still a work in progress and I’m not sure how far I want to develop this but so far it has been a fun little project.

The Toolchain

My absolutely favourite frontend tool for simple projects like this has been Vue CLI. Problem with that is that as soon as you start thinking about publishing something, you’ll have gazillion things to glue together and configure before you have a production-ready site. (I should probably invest some time into a proper cookiecutter template…) This exactly is why I recently wrote Tulip, a simple one page starter template for Gridsome (which is just Vue with some JAMstack flavor).

Tulip ships with Tailwind CSS preconfigured so I was immediately ready to build something interesting.

The third weapon of choise was ZEIT Now. I’ve been following their journey for a long time because of Simon Willison but never actually tried the platform. As it was their inspiration that led me to this path it was only appropriate to try out the service with this project. The first installation and publishing workflow via the deploy button in Tulip repository was unbelievably easy, even easier than Netlify if it’s even possible. (Although I did have an issue with GitLab import. It didn’t work so I pushed my code in GitHub instead and after that everything has been smooth sailing.)

Example output:

Tulip starter for Gridsome preview

To Be Continued…

The project is just getting started and I want to learn the ZEIT platform a bit more to be able to write about it better. I’ll also probably implement a proper backend rendering for the images so it’ll be a bit more useful in practise.

In part 2 of this series I’ll dive deeper into the code, going through some of the challenges and design decisions along the way.

In the mean time, check out the project source code and follow me on Twitter!