Render table-of-contents inline, in the left nav, under currently selected page

[maurice]

Hi,

I have a documentation site and it's been a joy to create with Astro Starlight 😁

On some of the pages I'd like to have interactive examples but in some cases these can get fairly wide - wider than the standard page article content area - and they begin to bleed into the right sidebar (table of contents).

Additionally I'd actually prefer to not have the right sidebar at all, and render the table-of-contents inline under the currently selected page. This is how Bun's docs site works, and I rather like it, eg: https://bun.sh/docs.

I started hacking around with the CSS - eg hiding the right sidebar and increasing the article content width - but the responsive layout started to break (look wrong) for smaller screen sizes.

I'm wondering if anyone else already has something like this working that they could share?

Or any pointers as to how I might achieve it on my own?

Thanks,
Maurice

[HiDeoo]

Thanks for the discussion 👋

Not something I am personally working on or heard about, but sharing a few initial pointers in case they can help you get started:

• Starlight route data is an object containing all the information required to render a single page.
• The route data contains the entire sidebar for this page and also its toc.
• Starlight component overrides is a mechanism allowing you to replace the default Starlight components with your own.
• The <Sidebar> component in Starlight can be overriden and is by default responsible for rendering the sidebar on wide enough viewports and inside a drop-down menu on small (mobile) viewports.

I think an approach to the idea you shared could be to have a component override for the <Sidebar> component that would take care of rendering the sidebar using the sidebar data from the route data, and when rendering the sidebar entry for the current page, it would also render the toc data for that page. There may be quite a few challenges with that, e.g. around sidebar state restoration, handling page scroll, etc., but I think the idea and the documentation links I provided should help you get started with a proof of concept, get the data in place and maybe later focus on more specific challenges you may encounter along the way.

As someone who just discovered this approach with your link, I think it's the first time I'm seeing a sidebar with a TOC merged into it. Definitely a unique approach, confusing at first (at least for me), but definitely an interesting challenge.