Alert boxes

I’ve been revisiting the blog and cleaning up the mess that no one sees behind the scenes. As readers, you may have noticed a few aesthetic changes. This work was done with some pressure from Alecsargent who significantly helped with tidying up my CSS and with internal restructuring. So kudos to him!
In this post, I’d like to share about the alert shortcode that I’ve been implemented in few posts so far.

Quick presentation

I recently came across a collection of Hugo shortcodes from squidfingers . Amongst all his shortcodes, the alert one seems to be a simple yet powerful addition that can significantly enhance the way I can present important information in my blog posts.

I’m always looking for ways to improve my blog’s functionality and user experience, and this shortcode fits right into that goal. Just as I’ve explored optimizing images in Hugo or setting up series navigation, this alert shortcode provides a native way to highlight critical content.

The alert shortcode offers various styles (info, warning, danger, success, etc.) to convey different levels of emphasis. This kind of structured content presentation aligns with my preference for clear and efficient information delivery. It’s about providing the right context and visual cues to guide the reader.

Highlighting with purpose

This shortcode allows you to easily highlight a crucial tip, a stern warning, or a celebratory success message without fighting with custom CSS for every callout.

With just one line of code where you define the three paramaters below, you can automatically create customized highlights:

• Severity: Defines the stylistic type of the alert. Possible values are “info”, “success”, “warning”, or “error”
• Size: Controls the padding and overall scale of the alert box. Options are “small”, ot “medium”, or “large”
• Hideicon: Set to “true” or “false” to show or hide the icon

The structure of this shortcode is so well-built that you simply define your style in your CSS and with your own icons and then it’s rock solid and you can use it without bothering about the style anymore. This will draw immediate attention to the content. It’s far more effective than just bolding text or using a simple blockquote.

Here are few examples I’ve setup so far:

Integration and workflow philosophy

Shortcodes like that are not just meant to improve the aesthetic of your blog but to make it more functional, more accessible, and more effective at conveying information.
In the realm of static site generation, even the smallest enhancements can yield significant improvements in reader engagement and clarity. This shortcode allows you to add visual weight and context to your content, all while maintaining a streamlined Markdown workflow.