Interactive demo

Introduction#

Below is a demo of how the heatmap widget appears when used on a Hugo site.¹

Tip
Turn off any “dark mode” browser plugins because it may affect how the calendar renders its colours.

How to use#

Interact with the calendar heatmap by hovering over the coloured squares (days with a published post). A floating tooltip will appear with post details (date, word count, title).
Click on the square to read the post.²
You can also click one of the coloured rectangles on the lower right corner to filter posts by length based on your configuration.
Access previous years in a dropdown menu.

Read next#

To get a rundown of the main features and current limitations of the project, see Overview. To add the widget to your Hugo site, skip ahead to Installation, or you can visit the Showcase for styling examples and inspiration.

This docs site uses the Hugo Book theme. ↩︎
The posts in this demo are placeholders (fake), except for the first and last post which explain the placeholder blog. ↩︎