Add highlight to sections

[mooreds]

Adds highlights to sections as you scroll

Tested on safari and firefox on mac.

[lyleschemmerling]

So I like the idea but there's a couple things here.

We already have a piece of code that is doing this, my guess is that it was just too subtle and not as accurate as you like

https://github.com/FusionAuth/fusionauth-site/assets/11809481/89b3ed29-c6d7-4f8e-aec4-8625dd2013f5

The behavior looks like it is controlled by ScrollSpy-0.1.0.js

In this second clip you can actually see where that script and your new one don't agree

https://github.com/FusionAuth/fusionauth-site/assets/11809481/f3cdc01d-8944-4d68-9d1c-fddc563b669b

Ideally we would have one piece of Javascript (or typescript) that controls this behavior.

I also think that the orange highlight is a little harsh, you can't actually tell what the text is under the link that is being highlighted, so perhaps there is a middle ground between the two stylings we can get to

[mooreds]

I think that we should trash this script and just make the ScrollSpy behavior more obvious.

The scrollspy behavior also throws some null exceptions

Uncaught TypeError: document.querySelector(...) is null
    #s https://fusionauth.io/js/ScrollSpy-0.1.0.js:1
    ScrollSpy https://fusionauth.io/js/ScrollSpy-0.1.0.js:1
    ScrollSpy https://fusionauth.io/js/ScrollSpy-0.1.0.js:1
    <anonymous> https://fusionauth.io/js/ScrollSpy-0.1.0.js:1
    EventListener.handleEvent* https://fusionauth.io/js/ScrollSpy-0.1.0.js:1

[SeanBobby]

I'll take a look at this tomorrow and get back to you two.

[mooreds]

Hi @SeanBobby I just want to make it more obvious. I see the subtle change Lyle points out now, so maybe the best thing to do would be to ask you what you would do with the current highlighting to make it more obvious (rather than look at this code).

[SeanBobby]

@lyleschemmerling @mooreds Updated this in the API Style guide - based on what I'm seeing we could benefit by inverting the active link color state under "On the page" and creating a highlighted (link color) box around the text and changing the text to white. Blah blah ... see below.

Seems like an easy adjustment