I was inspired by Daniel’s post 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.
Now I need to read the CSS in more detail to understand what Claude did
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.