Far too many articles recently have been about running. And yes, the “now” page says I’m doing Quality Management by day, but that doesn’t mean I’m not coding anymore. Just very little. Or rather, almost none. However, recently, a side project materialized, and I took the opportunity to learn something new. This very blog is powered by Ghost.io, for which I haven’t looked deeply into the customization options. For the side project, I figured I want something that is easy to set up and highly extensible. I’m a long-time reader of Felix’s wirres.net, and he seems pretty happy with the Kirby CMS, which sounded intriguing to me for this project.

Why Kirby?

It doesn’t need a database, the entire content is organized in flat files. Easy to move around, easy to work with, easy to understand. Further, Kirby has a very lively ecosystem with plugins for many functionalities one would want to see on a modern web page. There’s a catch though (for me personally): Kirby uses PHP, and I haven’t played around with PHP for a very long time, and even back when I did I barely scratched the surface. Alas, all languages are created equal, and if you know many you can understand and learn a new one. Thing is, I ain’t got no time for really, deeply, learning a new programming language, in particular not if it’s just for a toy project.

Yet, I have a few ideas that I want to implement on this site, and I want to see results fast. The days of frustrating, long, focused sessions in the code editor are long gone.

Claude.ai

Enter AI. Full disclosure: I hate the AI-enshitifcation that is happening in the software industry right now. Every app gets AI features, and most of them don’t need them. Strava’s AI summaries of my workouts? Thank you very much, but no, thank you. ChatGPT pretending to be intelligent, alas merely summarizing existing sources in a mediocre way? It was fun for a while. But, and you might call me lame for this, I asked Claude.ai if it could write me an extension for the Kirby CMS. Mostly, because I am impatient to learn how to do this myself, but also out of curiosity, maybe AI is helpful after all? Let’s try this:

I am using Kirby4 with the starterkit installed. I want to be able to create 'Place' pages that embed an openstreetmap location for this place, and I want to collect all these places in a nice overview page called "Places" that aggregates all locations on one openstreetmap map.

The goal was to get some boilerplate set up which I could understand and finalize. Turn’s out, Claude.ai generated the correct blueprints and templates, including exact instructions where to put the code (and no, before you think ‘Trojan Horse’, I did review the code myself). There was one little, but still very frustrating bug, or rather, omission, that resulted in a 7 out of 10 performance rating. I could not create these new pages through the panel, as Kirby didn’t recognize the new templates. Creating pages in the backend directly (remember, flat files in the file system are a wonderful thing) worked perfectly though, and the places were rendered nicely. How so?

Learning Kirby

Here’s where I fell short. When you add new templates to Kirby and you want to be able to use them in the panel, it helps to read the comments in the site.yml file:

# The `pages` pages section shows other main pages of the site
# Using the `templates` option, we limit which types of pages are shown
# Using the `create` option, we limit the type of page that can be created when a new page is created

The second line is important, and it took Claude.ai and me several tries to find the missing piece and add one more line to the site.yml:

pages:
  type: pages
  create: default
  templates:
    - about
    - home
    - default
    - places

I am pretty confident that Kirby’s documentation, had I bothered to study it, would’ve taught me all the steps necessary to correctly add new templates, including this last step. At the same time, having the AI do the heavy lifting (OpenStreetMap integration) saved me still a ton of time. And by writing this post, I will:

  • Remember to add new templates to the site.yml as well.
  • Maybe save some poor soul a couple of frustrating hours if they happen to read this in the future.

But wait, it gets better!

Enter Kodu.ai

For this side project I work mostly in VS Code (through remote-ssh, it’s so convenient!) and there are many VS Code extensions for AI coding assistance, one of them being Kodu.ai (referral link #ad). Why don't we let Kodu.ai read the generated code, reason about it and suggest improvements? Well, it happily implemented some cool refactoring and generated this git commit message:

refactor(templates): improve place templates by using map snippets instead of embedded code, fix CSS loading and reduce duplication.

Loving it. Except, it broke the overview page! With the right pointer (luckily I know how to read the console output in the browser’s developer tool) and a specific error description, we were good to go again after just a few reasonings:

fix(maps): add PlacePage model and sanitize JavaScript variable names in map snippet.

What’s interesting here is that Kodu.ai uses the same Claude.ai model as I did with the web-based prompt. The main difference, of course, being that in VS Code, Kodu.ai sees the entire project, whereas in the web-based interface the model relies on things that I tell it through the prompt. Let’s see if the site.yml omission gets solved faster in VS Code. Introducing the bug again:

diff --git a/site/blueprints/site.yml b/site/blueprints/site.yml
index ff4e696..2244d04 100644
--- a/site/blueprints/site.yml
+++ b/site/blueprints/site.yml
@@ -30,4 +30,4 @@ columns:
           - about
           - home
           - default
-          - places

And $0.4221 later, Kodu.ai tells me:

I've identified and fixed the issue with the Places page not showing up in the Kirby Panel. The problem was that in your site.yml blueprint, the "places" and "place" templates were not included in the allowed templates list. This meant that even though the pages existed and were correctly displayed on the frontend, they couldn't be accessed or created through the Panel.
Koda.ui figuring stuff out

It did mistakingly think I didn’t have a blueprint for the ‘Place’ pages, but after I rejected that change it arrived at the correct solution, and did so faster and with more “confidence” than my first iteration on the web.

Lessons Learned

AI supported coding might actually be the first AI application that I consider helpful. At the same time, I fear it will make generations of developers dumber, if they don’t bother to read and understand the produced code. Case in point: Apart from the site.yml mistake, I still haven’t quite learned how to add blueprints and their models to Kirby. I guess I’ll spend some time watching the YouTube series on Kirby Basics next.

CTA Image

Curious as to what this new side project is all about? Subscribers will hear about it first, so …

Stay tuned