---
date: "2024-07-03T08:33:45.000Z"
title: "2024-07-03"
tags: ["claude-3.5-sonnet","shortcodes"]
draft: false
---

I was inspired by [Daniel's post](https://danilafe.com/blog/blog_microfeatures) to add sidenotes to this blog.
I used `claude-3.5-sonnet` to generate the CSS and HTML shortcode to do this.
I was impressed how well it turned out[^1].
It was almost too easy.
I'm not the most competent CSS writer and I had never written a Hugo shortcode before.
In several turns with Sonnet in Cursor, I was able to create a basic styled shortcode for a sidenote that appeared as a superscript number to start.
I prompted the model to allow me to use content in-line as the shortcode anchor and it generated those modifications.
Then I had an issue with the content overflowing on the right side if the content anchor was too far right or most of the time on mobile, so I asked the model for some options.
It suggested showing the sidenote content below the main post content.
I liked that, but didn't like how it was shifting the content when it revealed the sidenote, so I prompted it to show the sidenote above the rest of the content.

With each turn, Claude generated code that I copied into `layouts/shortcodes/sidenote.html` and `assets/css/custom.css`.
This was also my first attempt at building a new feature in an existing project with Sonnet and it was a pleasure to work with.

[^1]: Now I need to read the CSS in more detail to understand what Claude did