Vibe Coding a Grav Plugin

ai genai gemini
Lofi art style image of Peter working at his desk

Over the past few weeks, I have been doing quite a bit of maintenance on this site. I noticed that I had several blog posts in a draft state. In order to make these blog posts a little more visible to myself and to my readers, I created a simple plugin to show my upcoming posts on my blog. I see what I need to finish up, and my reader get to hint as to what is coming.

Rather than starting from scratch, I decided to do a little vibe coding. Google Gemini was my tool of choice to get me started. My initial prompt was something like:

I want to create a plugin for Grav CMS call "Upcoming Posts". The plugin should scan my content for blog posts that have the published header set to false, have a publish_date in the future, and do not have a unpublish_date set. The title and anticipated publication date should be displayed as a list in a sidebar widget.

The prompt actually got me pretty close to what I wanted. The first thing that Gemini gave me was a brief structure of the directory and files that needed to be created, then it gave me the contents for each file.

user/plugins/upcoming-posts/
├── blueprints.yaml
├── upcoming-posts.php
├── upcoming-posts.yaml
└── templates/
    └── partials/
        └── upcoming-posts.html.twig

Once I had a complete file set, I uploaded the files to my blog server and added the plugin widget to the sidebar template for my site. I performed a few quick checks and determined that I had a working plugin. I quickly disabled the plugin so that I could make a few small enhancements. I switched to VS Code with the Gemini Code Assist extension enabled. I opened up the plugin folder with VS Code and continued my chat. I added add some CSS styling and caching to the plugin. This process was a bit quicker because I could insert directly into the files as part of my chat session. After a few iterations, I was happy with my code, and I committed my new plugin to my project repo. I redeployed the plugin to my server and enabled it. After clearing cache, I ran a few quick checks and everything was working as expected. What you see in the sidebar right now is the MVP release.

One thing is missing from my new plugin. I did not create any hooks to manage it in the Grav web UI. The plugin does not have any aspects that I need a UI to manage it. The plugin simple scrapes existing data from the markdown files and displays it in a sidebar widget. I just insert the following bit of code into my sidebar.html.twig file. I need to add a conditional just in case I ever disable this plugin.

{% include 'partials/upcoming-posts.html.twig' %}

Using Gemini Code Assist definitely sped up my development process. I did all of this using a free plan. The plugin is relatively simple, and Grav has fairly good documentation on creating a plugin. I was able to create the plugin and make some updates without reaching the limits of the free plan. I find Gemini to be very good at understanding the intent of my prompts and actioning them. At this time, it is my favorite genAI tools, but that won't stop me from experimenting with others.

Previous Post