good-first-issue-finder
good-first-issue-finder copied to clipboard
EddieHubCommunity
Add Table Of Contents to docs page
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
Hey @Cahllagerfeld could you elaborate on this . I could work on this issue.
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
I don't know myself in detail, I didn't have a look in depth into it, but my suggestion would be:
- Get Headings from Page and write a function that sorts them hierarchically
- turn the headings in the toc to links => the headers are already anchors that can be targeted
- 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
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.
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.
I think you can just use a QuerySelector to grab the headlines from the content-block 🤔
wouldn't I need a div to query the id? What do I query to get the headlines?
I thing you would run the query selector on the div mdsvex renders the content in, with h2, h3, h4, h5, h6 selector 🤔
Wow! I skipped the most logically and simple solution, lol. Works now, Thanks!
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.
Thank you @Cahllagerfeld I'll start working on it. I had one question where can I find the page which need to be modified??