Right Hand Side Table of Content #104
Conversation
✅ Deploy Preview for boring-fermat-22cb64 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
@AceTheCreator could you provide a bit of detail in the PR descriptor e.g. what you did, how it provides it, maybe a screenshot of what it looks like etc. Also when i visit a page i don't see any table of contents e.g. https://deploy-preview-104--boring-fermat-22cb64.netlify.app/concepts/bitcoin |
@rufuspollock there's a table of content on the RHS that says on this page with an arrow. Should I make it open by default? |
|
@AceTheCreator great - yes please make it open by default (we don't even need the open or closed part i think). |
AceTheCreator
changed the title
This pull request resolves the LHS of issue #93
Details
Wrote a script to retrieve a table of content for every MD and save it in a final JSON (config/post.json), and then read the JSON in the js and render a React component(components/Toc.JS).
The Toc component uses react scroll-spy to navigate the right heading in the markdown...
Since the react-scrollspy library checks, if the heading actually exists in the content in other to scroll, we're using markdown for the site content in which the headings don't have IDs assigned to them. So, I wrote a custom heading in the MDX.js component to assign an id to specific headings which are called CustomHeading
Screenshot