Supercharge your headings in Hugo with Render Hooks

tips & tricks
1

My approach for supercharging headings in the posts with Hugo, render hooks, with on click action and proper visualisation when copying a link to the clipboard.

This post covers:

  • Full link icon visible when hovered over, or when clicking on the heading (on mobile devices). In other instances is still visible but with less transparency;
  • Copy the link to the clipboard when clicked on it;
  • Tooltip when hovering over (on desktop);
  • Receive a visual prompt about copy to clipboard action.
7 Likes
2

Thanks for sharing this helpful post @idarek.

One small thought:
The idea of tooltip is nice. In addition, don’t you think it’s a good idea to change the cursor to pointer, when the link is hovered?

1 Like
3

Thank you Sid, totally forget about that, updated :slight_smile:

1 Like