How to make this documentation index effect?
I'm struggling to do this right now, using framer-motion
25 Replies
The source code is probably online if you check their github but looking at your video.
I haven't looked at it but heres what I'm thinking:
First look at the URL. As you scroll into sections its manipulating the URL and adding an id for the section you are scrolling into as you do it.
The sidebar on the right is likely just doing some conditional rendering like active ? bg-purple : "" and the active case is just checking if the id is in the url
You'll just need something to tell you when something is in view of the user and then add to your url.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Theres a hook for this on npm/all over the internet if you attach react/flavor of framework
Intersection Observer API - Web APIs | MDN
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
GitHub
docs/src/components/RightSidebar/TableOfContents.tsx at 2d805df28f4...
Astro documentation. Contribute to withastro/docs development by creating an account on GitHub.
Component in question
Well, no, scrolling doesn't manipulate the URL. It changes when you click the links. Actually, I could make this work, by doing what you said, checking if something is in the view. The problem is, when I click the link, it goes to the element, but some other elements are present in the viewport, so, that other element, changes the state and the link ends up being incorrect
Do you see?
ACTUALLY YEAH IT DOES NOT MY BAD
But it doesn't matter what method you interact with it
the state is stored in that url and clicking it does the same thing
I'm feelling somehow stupid, but really I'm not being able to solve this lol
Just dump the url stuff I mentioned
And just check for inview
I didn't realize you were clicking in your original post*
Once the original "in view element" is out of view it seems to be changing on the astro docs so you could probably weight them? but I imagine their docs has a much cleaner approach then this
Even their's is kinda buggy
Sometimes the state doesnt reconcile correctly so you don't have any selected even when one is clearly in view
hmm
I see examples like this everywhere, take a look at nextjs docs, it works similarly, there should be a concise way of doing this
This is the meat of it
lets seeeee
It really does look like they are doing the same thing from just examining the react state
Idk where the next docs repo is
So this is my cope
Its also slightly buggy on the next site too
If you want to take a look: https://github.com/vercel/next.js/tree/canary/docs/02-app/01-building-your-application
GitHub
next.js/docs/02-app/01-building-your-application at canary · vercel...
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
Anyways, thanks man, if those are buggy too, i'll try to find a workaround
Yeah I saw these but I was more looking for the actual code
I just thought mdx is just markdown?
Yes, mdx allows you to use jsx in md files, I don't know it well
GitHub
next.js/packages/next/src/client/link.tsx at canary · vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
Its this
GitHub
next.js/packages/next/src/client/link.tsx at canary · vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
Intersection stuff
So, I think I made it. I just modified when the element is considered in view, to the 50% of it's height. Now, when you click the link, the element that is below is not considered inside the view, so it doesn't trigger the state change. I thought this when I just did it, but using px instead of % wasn't working so I had to look for other solutions
Looks good. Are you trying to do transitions for scrolling to clicked sections?
Not necessarily, but I'll try
Anyways, this shouldn't be the best way, it works in this case. If there were elements with different heights, I'll not be good