docs: add Tables of Contents to every page

[tulup-conner]

Description

TODO

• Table of Contents should be a sidebar on the right-hand side, not at the top of each page
• There should be a hover state for each link, and an active state for the current section we're in
• When you click on a link in the Table of Contents, it should "push" you a bit further up to compensate for the fixed Navbar at the top, which is currently causing the heading you just jumped to to be cut off

Adds Tables of Contents to the top of every page in the documentation. We will change the position of the Table of Contents later, to match flowbite.com, where it is a sidebar on the right-hand side of the screen, but that will require some more involved backend work.

Also adds a Theme section to each component's docs, which include the TypeScript typing of that component's available theme={} customization options. We can and should take in feedback on how useful this actually is, and look for opportunities to make it as useful as possible. Generally speaking, dumping TypeScript types isn't necessarily that helpful, but it's better than having no guidance at all (the current state).

Type of change

• This change contains documentation update

Breaking changes

None.

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Visual confirmation locally
• Visual confirmation of Vercel preview deployment

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• New and existing unit tests pass locally with my changes
• I have checked my code and corrected any misspellings

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 12, 2023 11:34pm

[zoltanszogyenyi]

Hey @tulup-conner,

Works great, but there are some things:

• the TOC should be on the right side where you can see the "Getting Started" text similar to Flowbite.com and Flowbite Svelte where you can also see the "On this page" text
• the theme section is nice, I'll think of some ways to make it even more user friendly
• we will later need a props section too with tables

The first thing that I've mentioned definitely needs to be done for this PR to be merged and we should basically remove it from the center area and move it to the right side where you have the styles/positioning.

Cheers,
Zoltan

[tulup-conner]

@zoltanszogyenyi We've already discussed this but for posterity - we'll be using this PR to make some systemic changes to how we load MDX so we can process the MDX on the server and then spit the headings out in a sidebar, which is pretty much impossible with how we are currently rendering MDX. Once those changes are made I'll follow up here with the Tables of Contents moved into the correct locations.

[tulup-conner]

I haven't been able to transition us to loading MDX on the server, but we still have Tables of Contents, they are just client-rendered, unfortunately. A few blockers:

• We have to manually export everything from flowbite-react (or the src folder in our case), including re-exporting child components like Accordion.Content
• Syntax highlighter stops detecting component names, refers to each as <Defer>