Adapting the reasonable system for Hugo and making the counter(s).
In this hugo based implementation, the code is in counter.js, a file in the page bundle, keeping it local (see that LoB in the article).
See how the jslocals front matter property is used to link scripts in the head.html template. They use the deferattribute, which ensures the page is loaded before the scripts run.
There might be some issues in the future if local js files are combined with code from third party libraries (see the Alpine.js and Hyperscript examples). Some might need to be linked before the external libaries whereas other might need to go after. I can refactor the front matter properties and the head.html template accordingly if that crops up.
I did do the naive way of moving the javacript out into a separate file. There isn’t much point in having both, so here is the refactored way, as explained in the book.
<section class="counter" data-counter>
<output data-counter-output>0</output>
<button data-counter-increment>Count with RSJS</button>
</section>
I didn’t think the HTML tags in the example required their id attributes, and they don’t. I’ve removed them and everything still works. The class attribute can be used to style the features, even from markdown.
The article suggested that this would work for other counters on the same page, so here’s another. Do they interfere with each other? No, they do not.