Simple DevOps for Simple Icons Stream Deck

This week, I made some updates to the Simple Icons Stream Deck icon pack, fixing a bug that's been causing the builds to break and updating the preview images to be dynamically generated using a Python script and a GitHub Action.

Here are some nice before and after shots (thanks GitHub!):

Looks a lot better, doesn't it?

How'd I do this? First, let me explain what v1 was:

The Previous Solution

Previously, I created the preview files using a basic HTML page, where I swapped out the image files and took screenshots. This worked okay. It let me have a fairly consistent layout and made making grids a lot easier than if I'd done it in Photoshop, but the design was somewhat primitive and creating and updating the images was very manual. This labor burden resulted in me never actually updating or refreshing the images.

Current Solution

Knowing that it would need to be automated in order to actually get done regularly, I decided I needed to automate preview generation using a GitHub Action. My process was as follows:

• Design the preview images: For this, I elected to get Claude's help. Using the Canvas tool I had Claude iteratively make edits to the design. It used tailwind, which wouldn't have normally been my first choice, but in this case, with such a simple page design, the class-based styling actually resulted in more readability and made it really easy to style.
• Generate images: For this I went with Python and Puppeteer. Using Puppeteer allows me to programmatically interact with the HTML-designed images, wait for things to load, and save screenshots. This takes out most of the manual work and ensures consistency. See the code here: render-previews.py
• Run the script and upload results: This could easily be a local script where you run it and upload the images, but why do that when you can use an Action? Using a workflow dispatch GitHub Action, I specify the tag of Simple Icons I want to get icons from, it installs Python and Puppeteer, downloads the icons, renders the preview images, and finally commits the changes to the GitHub repo where they'll be used in the weekly builds. See the action here: previews.yml

Overall, I'm really happy with this solution. If I were to spend more time on it, I would like to have it run every week along with the build to ensure that any old icons are removed from the preview. This would, however, also require knowing which icons are available. Currently, the icons I want to use are hardcoded. It would be interesting if I could somehow and cheaply use an LLM to go through the list of available icons, categorize them by type, and select the most well-known brands to feature. That seems a bit pricy right now for this use case, though.

You Should Learn Some DevOps

It's pretty awesome that something I threw together in an afternoon is used by more people than live in my entire county and now it is even less work for me to maintain. No matter the size of your project, whether for fun or for work, spending a little bit of time on DevOps can pay dividends over time. Testing, releases, etc., take a little bit of time to set up but allow you to employ an army of scripts and runners that work for you while you sleep.