feat: add table of contents for docs pages

[Nos43ratu]

Problem: The current documentation pages, like Router Navigation, can be challenging to navigate due to their length and density of content.

Solution: Added a Table of Contents (ToC) to the right sidebar to enhance navigation.

Changes Made:

1. Moved the DocsLayout right sidebar to be part of the document itself.
2. Added logic to extract headings dynamically from the markup content.
3. Created a Toc component to render the extracted headings.
4. Applied the existing library color scheme to the Toc component for visual consistency
5. Added heading-level padding to the Toc to clearly represent content structure

[vercel]

Someone is attempting to deploy a commit to the Tanstack Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

❌ Deploy Preview for tanstack failed.

Name	Link
🔨 Latest commit	d99481a
🔍 Latest deploy log	https://app.netlify.com/sites/tanstack/deploys/6748fbdbc89c760008721755

[SeanCassiere]

@Nos43ratu please resolve the conflicts

[Nos43ratu]

@SeanCassiere updated pr

[SeanCassiere]

Looks good! @tannerlinsley any thoughts here?

[KevinVandy]

I'm a bit concerned that there appears to be 3 scrollbars on that 2nd image, when 2 should be the max. But otherwise, I think this would be a welcome addition.

[Nos43ratu]

@KevinVandy it can be fixed by making content margins smaller and moving toc out from right side


or smth like this(draft)

[Nos43ratu]

@KevinVandy it can be fixed by making content margins smaller and moving toc out from right side or smth like this(draft)

or making scroll inside of the toc invisible
for example shad ui toc

[KevinVandy]

When a wide enough media query is triggered, that might be good. Otherwise probably needs to stay in one side bar on medium sized screens, and hidden on mobile

[SeanCassiere]

@KevinVandy it can be fixed by making content margins smaller and moving toc out from right side or smth like this(draft)

The draft looks better. Maybe just add a light border on the left and hide it on small screens.

[Nos43ratu]

Moved toc from right side bar to the page. Saved initial page width. Made pr thiner by removing unnecessary changes.

This version can be reverted to use initial version

@SeanCassiere @KevinVandy @tannerlinsley

Screen.Recording.2024-11-28.at.05.09.59.mp4

[SeanCassiere]

On http://localhost:3000/router/latest/docs/framework/react/api/router there seems to be some content width issues.

[Nos43ratu]

On http://localhost:3000/router/latest/docs/framework/react/api/router there seems to be some content width issues.

@SeanCassiere fixed

[KevinVandy]

@tannerlinsley This passes my qa from just looking at the table docs. I think it makes the docs a lot easier to navigate

Approving, but not merging until @tannerlinsley approves/merges

[SeanCassiere]

These changes are great! I checked them out with the docs for Router, Query, and Form.

[tannerlinsley]

Fantastic! Approved!

[SeanCassiere]

@Nos43ratu thank you for your contribution 🎉

[Nos43ratu]

Thanks guys 🙏