[BUG] The TOC doesn't highlight the current section of the page.

C-ArenA commented 3 years ago

Describe the bug

First of all, sorry if my English is not correct, my native language is Spanish. Well, as I said in the title the TOC isn't working properly. Depending on the content it just gets crazy. I have tested it in Firefox and Chrome and building the exampleSite, but it is still not working. I even tried the demo.

Expected behavior

It should highlight the name of the current section, but it highlights any of the next sections. I don't know if there is some configuration I'm not considering, but I have checked the documentation and the config.toml that comes with the exampleSite and didn't find anything that can solve this.

Screenshots

In the next screenshot (theme-documentation-built-in-shortcodes), the "Instagram" tag gets highlighted, but we are in the "gist" section.

Build Environment

OS: Windows 10
Theme version/commit addce32
Hugo version 0.80.0 (extended)

Preview Environment

OS: Windows 10
Browsers: Chrome, Edge, Firefox

Additional Information

I would send my code, but I've also tried using the exampleSite and even the demo works this way.

uPagge commented 3 years ago

Yes, I know about this problem until my hands reached it))

Admonstrator commented 3 years ago

Is this error also responsible for the console messages?

Uncaught TypeError: Cannot read property 'classList' of undefined
    at _tocOnScroll (theme.min.js:50)
    at theme.min.js:64
_tocOnScroll @ theme.min.js:50
(anonymous) @ theme.min.js:64

Happens here: https://ublogger.netlify.app/theme-documentation-basics/ if you scroll beyond the TOC

noaione commented 3 years ago

I don't know if this have been fixed or not, but the bug is caused because $headerLinkElements is selecting ToC + Title and Subtitle (if exists), while $tocLinkElements only selected the ToC part itself.

activeTocIndex are using the index from $headerLinkElements resulting in wrong highlighting. This can be fixed if the index is subtracted by one (title only) or two (title + subtitle).

uPagge commented 3 years ago

@noaione Unfortunately, I did not find the time to fix it, so thanks more for the hint. If you have the desire and the time, could you make a PR to the dev branch with a fix?

uPagge commented 3 years ago

I hasten to inform you that thanks to the efforts of @noaione, we managed to solve this problem. The solution is already available in the dev branch, and one of these days there will be a new release

uPagge / uBlogger