fix: toc does not highlight clicked anchor + use scroll-margin-top #5425
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
✔️ [V2] 🔨 Explore the source changes: 410a933 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/6127a8da16f26a0008270df8 😎 Browse the preview: https://deploy-preview-5425--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5425--docusaurus-2.netlify.app/ |
|
Size Change: +1.03 kB (0%) Total Size: 815 kB
ℹ️ View Unchanged
|
lex111
reviewed
Aug 26, 2021
packages/docusaurus-theme-classic/src/theme/Heading/styles.module.css
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme-classic/src/theme/hooks/useTOCHighlight.ts
Outdated
Show resolved
Hide resolved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
The issue can simply be seen by clicking here: https://docusaurus.io/docs#docsify
Despite
#docsifybeing the anchor, the toc highlightsGitBook:This is because we apply a top offset when computing the active anchors, but this offset only makes sense when the navbar is sticky.
We now compute that offset according to how the navbar sticky/hideable config.
Also refactors the workaround to make clicked anchors appear under the sticky navbar, because a css property exists for that (
scroll-margin-top, see https://twitter.com/JoshWComeau/status/1332015868725891076) and is quite well supported. If we encounter issues we'll revert.Have you read the Contributing Guidelines on pull requests?
yes
Test Plan
This now works: https://deploy-preview-5425--docusaurus-2.netlify.app/docs/#docsify
preview + local tests on Chrome/Safari/FF with/without sticky navbar