Add Table Of Contents to docs page

[Cahllagerfeld]

Description

We should display the headings on the page in the right column of the layout, to make it easier for users to navigate

Screenshots

No response

Additional information

No response

[ChinmayMhatre]

Could you explain it again where exactly would the headings be?

[ChinmayMhatre]

Hey @Cahllagerfeld could you elaborate on this . I could work on this issue.

[Cahllagerfeld]

Oh sorry for the late reply:

In the Docs-Layout we're currently having a third column that isn't used.
Its planned to display a table of contents of the current page inside it, similar to tailwind

Features:

• pick the headings from the current page and display them in a hierarchical order
• when clicking one of the headings in the table of contents, the page should jump to that heading
• When scrolling through headings, the active one should be highlighted

[ChinmayMhatre]

Got it ! I'd like to work on this.

[ChinmayMhatre]

Could you give me a overview on how I could get this started?

[Cahllagerfeld]

I don't know myself in detail, I didn't have a look in depth into it, but my suggestion would be:

1. Get Headings from Page and write a function that sorts them hierarchically
2. turn the headings in the toc to links => the headers are already anchors that can be targeted
3. For the scrolling thing, you may need a scroll-listener calculating and comparing the Y-Offset of the page and the headings 🤔

I'm not sure if this is working though, its just my assumption

[ChinmayMhatre]

Alright I'll look into it.

[ChinmayMhatre]

Hey @Cahllagerfeld ,
I am working on this. but I can't seem to figure out how to get the headings from the markdown file. I tried using the vite plugin for markdown but I can't seem to be able to import the markdown file in the layout.svelte file.

[ChinmayMhatre]

https://github.com/hmsk/vite-plugin-markdown this is the plugin. But when I go to add the configs it throws and error. And with out the plugin I could'nt even import the md file.

[Cahllagerfeld]

I think you can just use a QuerySelector to grab the headlines from the content-block 🤔

[ChinmayMhatre]

wouldn't I need a div to query the id?
What do I query to get the headlines?

[Cahllagerfeld]

I thing you would run the query selector on the div mdsvex renders the content in, with h2, h3, h4, h5, h6 selector 🤔

[ChinmayMhatre]

Wow! I skipped the most logically and simple solution, lol. Works now, Thanks!

[saaagarsingh]

Hey, is this issue being already resolved??? if not do let me know I would love to work on the issue. I've got the enough insights about the issue and solution approach. Please assign it to me.

[saaagarsingh]

Thank you @Cahllagerfeld I'll start working on it. I had one question where can I find the page which need to be modified??

[Cahllagerfeld]

I think it's the layout file in the docs route