Static Websites

Was time to automate the showcasing of my static sites!

I had done many static frontend sites as part of #100Devs work, and as I was only going to be doing more, I wanted a way to both automate the deployment and management of the sites themselves, but also automate the showcasing of these sites.

One thing I wanted was recordings of these static sites in various resolutions, so I went with Playwright to do this., first with only three resolutions:

• 1920x1080
• 360x640
• 1024x768

I had the script iterate through all the the resolutions, then all layout directories - it'd launch the page, wait for loading to complete, take a screenshot, and finally scroll the page down by half the screen height until the bottom was reached. Of course this wasn't a instant process, so I decided to add cli-progress to the project, and with a short learning period, had it both incrementing accordingly but also showing the current resolution & layout.

As this recording process would only get longer, I knew I wanted to implement some form of caching - the odds of me modifying every layout and them all needing to be re-recorded was slim to none, the reality would be one would be updated/created, and it'd be only that one that would need re-recording. So I brought in folder-hash to hash the layout directories, and I'd compare if the previously-saved hash for that layout matches the current, and only re-record videos for the layout if they differed.

GitHub Markdown

Now I did want this to be usable via GitHub Markdown, so also created a markdown-updating script. This all starts with the README.mds in the layout directories though:

[origin]: url

# Title

> Automatically generated table

The automatically generated table would be a 3x2 table containing:

Each of these layout README.md would also be copied into the primary README.md.

GitHub Pages

Finally I wanted all of these static sites to actually be navigable, so the entire repo would be hosted via GitHub Pages. Unfortunately the README.md does not support inline linking of videos that are uploaded to a repo, so I went with creating my own root index.html for the gh-pages branch, which of course meant another generation-script, this one shorter only because I used EJS to do the templating.

Asset Management

I had no intention of making my repository full of dozens of video files, so decided to create empty assets branch that would store the video assets, and a little bash script that would add the new assets in the most efficient manner possible - be it via amending the previous commit, or creating a new one.