Changelog
-
I’ve added some examples to the CLI commands section.
After years of putting it off, I finally rebuilt kirbysites.com. The old version was getting messy, and maintaining it was becoming tedious. I’ve rebuilt it from scratch, and I’m pretty happy with the result:
There’s still some stuff on my to-do list, but the core functionality is there.
Actually accessible this time
The old site’s accessibility was… not great. This bothered me increasingly over time.
The rebuild fixes all the no-brainers: proper structure and hierarchy, ARIA labels, skip links, fallback alt texts. No more JavaScript lightbox either — just clean HTML with view transitions for a smooth experience in modern browsers.
It’s a good foundation now, but I definitely want to improve it further. Ideally, each screenshot gets its own descriptive alt text rather than relying on fallbacks.
“Which plugin is this?”
I get this question a lot. So now I’ve made it possible to add captions to each screenshot where I can explain what’s happening and link to specific plugins.
It’s still a work in progress, but the goal is making kirbysites.com a learning resource, not just a gallery.
“Who made this?”
I’ve added fields for credits, linking to designers and developers involved in each project. This was long overdue — I just honestly didn’t know where to put it in the old design. Now I just need to go through ~180 emails to add the rest of them. 😬
Since I sometimes got confused with the Kirby team, I’ve also made it clearer in the header that I’m the one curating the sites.
Automation everywhere
Somehow, I wrote a lot of Kirby CLI commands in the process. Initially, for the migration and batch-checking if sites still run on Kirby. Then, fully automating adding new sites with different commands.
Creating a new site now looks something like this. This will create a new page in the content folder, add the URL and title, and take a screenshot of the site in 1600px × 1200px as a WebP image:
kirby new
Enter the website URL: https://panorama-bad.de/
Enter the website title: Panorama-Bad
Page created: panorama-bad
Taking screenshot of: https://panorama-bad.de
Sometimes I want to take a new screenshot, optionally with a delay:
kirby screenshot panorama-bad
Enter delay (default: 2): 5
Taking screenshot of: https://panorama-bad.de
When I’m done adding a site, I take an automated screenshot of my local Kirbysites installation for the Open Graph image in 1200px × 630px:
kirby og
Taking screenshot of: http://kirbysites.test
OG screenshot saved: /content/og.png
If you’re interested in the details, let me know. I’ll clean up the commands and share them here.
No more Panel
I know, ironic for a site showcasing Panel screenshots. But just like this website of mine, not using the Panel comes with a lot of flexibility. And since I’m already in my code editor taking screenshots with a CLI command, I might as well add the content there while it’s doing its automated thing.
While becoming a no-Panel hardliner, I’ve also written a simple syntax highlighting extension for VSCode, making it easier to spot errors in the content files.
Help me make it better
Here’s where I could use your help: if you’ve submitted a site to kirbysites.com, consider helping me with the captions to your screenshots. What plugins did you use? What’s this fancy Panel CSS?
The more context we add, the more useful it becomes for everyone. Drop me a message on Mastodon or send me an email if you want to add captions to your submission. Thank you! ♥︎