Monzo Pot Image Generator


While browsing this thread on the Monzo forums I came up with an idea to generate Monzo pot images whenever I want so I created the Monzo Pot Image Generator.

Monzo Pot Image Generator

First thing was to work out how to generate and download the images. This turned out to be relatively easy with a combination of dom-to-image and FileSaver. To generate a list of the Font Awesome icons output in the search, I grabbed the JSON config, did a little bit of manipulating in Sublime and used Eleventy's global data files to use that data when building the site.

I wanted to keep everything as simple as possible; no crazy build scripts and as few files as possible. I used Water.css for the base css and the rest of the css is in a style tag in the head (is that legal?). I also learnt that there is a type="color" input - although I might replace this at some point because it's not particularly nice on mobile Safari.

You can also share you pot images with a link like this. I initially used url hashes to keep the url updated all the time, but when sharing these to Twitter they get stripped out so I switched to using query strings instead.