Fix blogpost chapter nav #65
Open
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
…on on page refactors BlogpostChapters utilizing content_html once more. Refactors getChapters to work properly with updated serialization
✅ Deploy Preview for content-sub ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
rccsousa
commented
Oct 25, 2024
Comment on lines
+12
to
+35
| useEffect(() => { | ||
| const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); | ||
|
|
||
| extractHeadings(); | ||
| const observer = new IntersectionObserver((entries) => { | ||
| let visibleId = ""; | ||
|
|
||
| entries.forEach((entry) => { | ||
| if (entry.isIntersecting || entry.boundingClientRect.bottom < 0) { | ||
| visibleId = entry.target.id; | ||
| } | ||
| }); | ||
|
|
||
| }, []); | ||
| setVisibleChapter(visibleId); | ||
| }, { | ||
| root: null, | ||
| threshold: 0.5, | ||
| }); | ||
|
|
||
| headings.forEach((heading) => observer.observe(heading)); | ||
|
|
||
| return () => { | ||
| headings.forEach((heading) => observer.unobserve(heading)); | ||
| }; | ||
| }, [chapters]); |
There was a problem hiding this comment.
@davelange regarding blogpost chapter nav, IntersectionObserver seems a bit finicky
links are working fine, but the navbar is not working spectacularly. when there is more than 1 id on the viewport" it makes sense, but when there is only one it sometimes work and sometimes doesn't
couldn't find a better way to achieve this result, is there a better way to achieve this result?
demo of the behavior: https://github.com/user-attachments/assets/6c47308a-710a-4103-9a1b-ddc25baf9155
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.
Why
With the update to Payload 3.0 and switching to using serialized Lexical nodes instead of
content_html, blogpost chapter navigation was broken, not allowing to navigate and just displaying different chapter titltes.How
By reimplementing chapter navigation using
content_htmland updating Lexical node serialization to include chapter ids on headings.Closes #25