Sidebar table of contents

[rufuspollock]

Maybe only on certain pages (markdown pages or guide or ...)

Inspiration from eg. tailwindcss.com which has LHS table of contents for whole site and RHS for table of contents of current doc - https://tailwindcss.com/docs/installation

Acceptance

• RHS table of contents for the current page
• LHS table of contents for the entire site (pages and sub pages ...)
  • Bonus for making this fancy e.g. highlight which page, allow for custom stuff at top a la tailwind etc

Tasks

Notes

Note tailwindcss docs is on github so we can learn from them on code side https://github.com/tailwindlabs/tailwindcss.com/tree/master/src

[AceTheCreator]

@rufuspollock I'll work on this

[rufuspollock]

@AceTheCreator no, you can self-assign. This is probably easier than citation renderer - at least doing the RHS table of contents of the page.

[rufuspollock]

@AceTheCreator how is it going?

[AceTheCreator]

@rufuspollock I'm almost done with it and I should raise a PR tomorrow.

I performed a logic to retrieve toc for every md and save it in a final JSON and then read JSON in the js and render React component

[rufuspollock]

@AceTheCreator great - i'd start with the RHS table of contents which should be relatively easy I imagine - and do a PR with that and then a second one for the global ToC. Also could you share what research / inspiration you did - e.g. how do tailwind do it (their repo is public so you check ...)

[AceTheCreator]

@rufuspollock I need a clearer explanation of what the right LHS table of content should contain 🤔

[AceTheCreator]

@rufuspollock i noticed some of the links in some of the MD files has for example [web3](../../concepts/web3.md) which links to /concepts/web3.md instead of /concepts/web3

[rufuspollock]

@AceTheCreator

@rufuspollock I need a clearer explanation of what the right LHS table of content should contain 🤔

Look at the screenshot in the description. There is a RHS table of contents which is the current page table of contents. I would have suggested that is the much easier thing to start with before moving onto the site table of contents. I'd also suggest doing some upfront analysis before coding to think this through a bit and research how, for example, tailwind are doing this. That way you have a rough plan of work - which i can review - before starting on the detailed coding. wdyt?

@rufuspollock i noticed some of the links in some of the MD files has for example web3 which links to /concepts/web3.md instead of /concepts/web3

That's correct and relates to how obsdian resolves links.

[AceTheCreator]

Look at the screenshot in the description. There is a RHS table of contents which is the current page table of contents. I would have suggested that is the much easier thing to start with before moving onto the site table of contents. I'd also suggest doing some upfront analysis before coding to think this through a bit and research how, for example, tailwind are doing this. That way you have a rough plan of work - which i can review - before starting on the detailed coding. wdyt?

@rufuspollock You're absolutely right!

[AceTheCreator]

Issue Solution Summary

LHS toc summary

The inspiration for this solution was the Tailwindcss approach for their LHS toc. Based on my research they have an object that holds all the toc, each key in the object is the main title of the section in the toc which holds an array as a value(the value consist of an array of page link for that section) and a utility function exists called createPageList which IMO helps them generate the page for each link in the value of each section.

I was able to follow a similar approach with less code. Thanks to the content layer already in place I don't have to create a function that helps me create a page list. All I have to do was take advantage of the cotentlayer data and create an object that holds all the Toc. the breakdown can be found in #133 PR

RHS toc summary

All I did on this was to read all the markdown files in a specific path and on that, I created the toc for that and used it on the page. Then, I performed a logic to retrieve toc for every md and save it in a final Json, and then read the Json in the js and render a React component... more details can be found in this PR #134

[AceTheCreator]

@rufuspollock @khalilcodes I updated the PR by making it cleaner. Thanks, @rufuspollock for the feedback on my messy PR

[olayway]

Moved to:

• RHS table of contents RHS table of contents #152
• LHS table of contents LHS table of contents #153