Ok, fine. I will seriously consider adding code into the single template. Thing is I just don’t know how. I’ll figure it out.
Erm… Sorry, no repository. I’m not a programmer and I have yet no clue about git. I’m still learning Hugo and slowly building a theme, so I’m working on a local server and a repo is not yet considered.
But I can share the code here or upload screenshots, which is what I’ll do now.
About the intersection observer: a web browser sees everything on a webpage as blocks, rectangles with content inside. The intersection observer, among other things, is able to know when a certain block is visible on the viewport (on screen), so a script can do things when that block is visible. If the block goes out of view, then nothing can be done depending on that block because is no longer visible.
All of this is important because the block surrounding the heading tags sooner or later will get out of view, so the intersection observer can no longer tell the script to highlight the toc element.
The problem has been shown in the post preceding the one I linked in my first post here: watch the toc and you will see that there are points where no toc element is highlighted. That’s because at that point there are no headings visible on screen. I already saw that problem time ago, but didn’t found any solution to it.
Here you can see my current theme (with a bare-bones style applied to it) and what I wish to have in my page toc (the highlights have been added by hand with the browser dev tools):
The text is in Spanish, but that is not important. You can see an h3 on screen (hugo section number 5.1). With the original code from @jmooring I can highlight the whole h2 section, because the div (or section) surrounds everything up to where the next h2 appears. That’s one thing I need.
With my custom code I would be able to highlight the first h3 heading in the toc, but not the h2 heading (let’s say the h2 heading is no longer visible on the viewport; it currently really is because the upper quote is contained in the h2 section, but if you scrolled down a bit more, then the h2 block will no longer be on screen).
And this is really what I want to accomplish:
Here, the h2 block is yet highlighted, because it still surrounds everything up to the next h2 heading. AND the current visible block is also highlighted, and is a block that ends where the next h3 heading starts, so no gaps in the highlighting, even if the current h3 heading gets out of view.
Hope this helps.