Robb. Knight.

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.

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.