Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(www): Scroll-sync on docs table of contents #21640

Closed
tesseralis opened this issue Feb 21, 2020 · 2 comments
Closed

feature(www): Scroll-sync on docs table of contents #21640

tesseralis opened this issue Feb 21, 2020 · 2 comments
Assignees
Labels
type: documentation An issue or pull request for improving or updating Gatsby's documentation

Comments

@tesseralis
Copy link
Contributor

Summary

  • When scrolling through a doc page, the active item should switch to the current section (much like the tutorial sidebar
  • When scrolling through a doc page, the hash at the top should update to the current section

Basic example

  1. Go to docs quick-start
  2. Click on one of the table of contents links
  3. Scroll around the page

The "active item" is the item originally selected in the hash, not the currently focused element, possibly causing confusion.

Motivation

Much like how the tutorials are scroll-synced to ease navigation, adding a scroll sync would make it easier to navigate around the docs. We have a lot of docs that have long sections, and it's easy to lose one's position.

Implementation

Most likely, we can adapt the scroll sync sidebar into a useActiveHash hook. Instead of passing in an item list, we can just query the DOM for page headings (or use the headings query to get them).

@tesseralis tesseralis added help wanted Issue with a clear description that the community can help with. 💡 Proposed Work labels Feb 21, 2020
@gatsbot gatsbot bot added the type: documentation An issue or pull request for improving or updating Gatsby's documentation label Feb 21, 2020
@jlkiri
Copy link
Contributor

jlkiri commented Feb 24, 2020

I'd like to try this one.

@jlkiri
Copy link
Contributor

jlkiri commented Mar 21, 2020

Added in #21762

@jlkiri jlkiri closed this as completed Mar 21, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: documentation An issue or pull request for improving or updating Gatsby's documentation
Projects
None yet
Development

No branches or pull requests

2 participants