✨ Enhancement: Add active section highlight for in-page sidebar navigation on blog posts

Is your feature request related to a problem? Please describe

On the blog post at https://json-schema.org/blog/posts/oracle-case-study , there is a left-hand sidebar with links to sections such as:

• JSON Data Guide
• Data Validation
• Performance Improvement
• Relational Model Evolution
• Conclusion

These links work correctly for in-page navigation, but the sidebar does not visually indicate which section is currently active as the user scrolls.

Common documentation patterns highlight the active section (e.g., bold, colored text, left border) as the user scrolls or when clicking on a link.

Describe the solution you'd like

When a user scrolls within the blog post:

• The sidebar item corresponding to the currently visible section should be visually highlighted.
• When clicking a sidebar link, the clicked item should also become active.
• The active state should update even when the user scrolls manually (without clicking).
• This provides better context and improves navigation for long content pages.

Example of expected UX patterns:

• Highlight the active item with a different text color or bold font.
• Add a left border or background color to indicate the current section.
• Optionally, add a smooth scroll so the page transitions clearly.

Describe alternatives you've considered

No response

Additional context

I’ve recorded a video demonstrating:

• Before: Sidebar does not indicate the active section when scrolling.

https://github.com/user-attachments/assets/292d7b3f-eca9-4b2a-b683-d36033832e20

• After (prototype): Sidebar highlights the section currently in view.

https://github.com/user-attachments/assets/90df3ff1-02b0-4111-ba49-16b4fb849310

Are you working on this?

Yes

Start with the blog post at https://json-schema.org/blog/posts/oracle-case-study and inspect how its left-hand section sidebar and links are implemented. Compare the current behavior with the linked prototype videos; done means the visible section is highlighted during scrolling and the clicked item receives the active state.