Right Hand Side Table of Content

[AceTheCreator]

This pull request resolves the RHS 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

[netlify]

✅ Deploy Preview for boring-fermat-22cb64 ready!

Name	Link
🔨 Latest commit	1e4d1c6
🔍 Latest deploy log	https://app.netlify.com/sites/boring-fermat-22cb64/deploys/624d9e1101c2ea000851639c
😎 Deploy Preview	https://deploy-preview-113--boring-fermat-22cb64.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[rufuspollock]

@AceTheCreator is there a reason we can't use rehype headings link stuff - see #99 - that seems a better option than having to write our own ids (?) Again have you summarized in #93 how. tailwind do this and your general approach.

[AceTheCreator]

@AceTheCreator is there a reason we can't use rehype headings link stuff - see #99 - that seems a better option than having to write our own ids (?) Again have you summarized in #93 how. tailwind do this and your general approach.

@rufuspollock I tried using the rehype-heading-link but it seems kinda complicated to me, and I also had to install some extra stuff I don't really need(Maybe because I don't understand how it works yet.) But if we could make it work without using an external library, why don't we just do that?