Hugo Module - Scroll Indicator

Let me introduce a very simple Hugo Module today—the Scroll Indicator.

If you scroll down on this page, you’ll notice a blue bar at the top indicating the scroll position. That’s right—this is the Scroll Indicator!

This is my first attempt at creating a Hugo Module, and you can find the source code at the following link:

hugo-modules/scroll-indicator at main · craftgears/hugo-modules · GitHub

Sharing Additional Modules Developed for the Craft Theme - hugo-modules/scroll-indicator at main · craftgears/hugo-modules

https://github.com/craftgears/hugo-modules/tree/main/scroll-indicator

Did you find the link above cool?

I’m working on a Hugo Module called pretty-link. I’ll introduce it in detail next time!

Here’s how you can use the Scroll Indicator:

Installation #

Add the following code to your module list in the config/_default/module.toml file.

[[imports]]
path = "github.com/craftgears/hugo-modules/scroll-indicator"

Scroll Indicator Implementation #

Add the following code to your assets/scss/main.scss file.

@import 'scroll-indicator';

Add the following code to the top of single.html.

  <!-- hugo-modules: scroll-indicator -->
  {{ partial "scroll-indicator.html" site.Params.scrollIndicator.color }}

Add the following settings to config/_default/params.toml.

# Scroll indicator
[scrollIndicator]
color = "#0ea5e9"

• color: Scroll position color

Conclusion #

That’s it—a short and simple post for an equally simple Hugo Module!

Building features like this one step at a time is turning out to be more fun than I expected. I’ll continue to share interesting creations as I make them.

See you next time!