Doc Shell overhaul

[endigo9740]

Per: #783

To kick off the new documentation updates, one of the first items we need to address is a cleanup and refactor of the Doc Shell component. This and the "Previewer" component will be critical to be in place before we can begin improving examples, editing the copy, etc.

Todo

• Break this up into a small set of components for easier maintenance
• Improved layout, (flatter?) navigation, and better UX as relevant
• Implement structure changes, such as a dedicated examples/usage sections
• Provide a better home for the table of contents - it's just sort of duct tape on right now
• Implement the new ad position in the sidebar above table of contents
• Support the ability to deep link to section headers
• Create a reusable class to replace space-y-4 assigned to section Section element

References:

• Radix UI Docs - https://www.radix-ui.com/docs/primitives/components/accordion
• VitePress - https://vitepress.vuejs.org/
• Tailwind - https://tailwindcss.com/docs/installation
• Docusaurus - https://docusaurus.io/
• Chakra UI - https://chakra-ui.com/docs/components/button/props

[endigo9740]

Preview URL:
https://skeleton-docs-git-feat-doc-shell-overhaul-skeleton-labs.vercel.app/components/accordions

So great progress today. Here's a preview of before vs after comparing the new design structure. Note that nothing shown here is set in stone yet.

Notable changes:

• Uses a max width for the main content area, to avoid content being stretched too wide
• Makes much better use of the available space, reduces all the empty whitespace in the heading
• The import statement is now much more prominent
• Features an explicit "examples" area near the top
• Tabs are more localized (should support sticky-top soon)
• The right sidebar supports banners/ad positions

More to come tomorrow!

[niktek]

Looking good - only nitpick I can come up with is maybe changing the Github label to be Component Source with the same GH logo as the icon. Makes it balance with the Doc Source button and also slightly more full justifies the line

[endigo9740]

More progress today:

• All heading features are now functional
• I've combined the import and type imports into a single code block
• Each tab "panel" (prop, classes, etc) is now functional
• Updated a few pages missing the new LayoutPage (sidebar + table of contents)
• I've implemented the staging version of the Carbon ads and added theme styles
• Adjusted some feature examples to utilize the new format better

Overall this should be working MUCH closer to the final product. Tomorrow I'll finalize this and aim to merge into dev branch asap. Implemented the new Previewer component will be the next order of business.

[endigo9740]

I've implement a means to automatically generate links to headings and auto-scroll when a hash is included in the browser URL. This means deep-linking to page sections is now enabled.

With this, the Doc Shell updates are now complete and ready for testing to begin.