Documentation layout shell

[endigo9740]

This is very similar in concept to our AppShell component, but rather than providing control for our app layout, we create a reusable component template that can be used for controlling the layout and design of our documentation pages. Given these have a lot of repetition!

Loose ideas:

• Small bits of data are controlled with multiple props or a singular "config" prop (title, desc, imports, source link, etc)
• We provide table data to the component to generate whole sections, perhaps folded into tabbed areas
• We insert Usage via a dedicated slot, perhaps the default slot, as this varies wildly doc to doc
• Perhaps we standardize out example/sandbox preview? Would be great if these were always interactive!
• We look to dynamically generate a table of contents, perhaps per page, based on headings, data attributes, etc
• (more ideas to come....)

[endigo9740]

Plotting out the structure and requirements.

Header

• Name/Description - slot

Details

• import: (list of Svelte imports)
• stylesheets - (tailwind elements; included in X)
• source: view source code
• doc: edit this page
• package: @brainandbones/skeleton (default)
• depedencies: (ex: highlight.js)

Examples

Standarize Sandbox?

• Examples/Sandbox - slot

Tabbed Sections

Support parent/child components

• Usage - default slot
  • Mix of docs + small examples
  • Browser Support?
• Props - slot/tables
• Classes - slot/tables
• Slots - slot/tables
• A11y/Keyboard - slot/tables/APG

[endigo9740]

I've implemented a working draft of new component layout. It allows for a MUCh more sophisticated and dynamic documentation layout and visual presentation. Very please with the initial results.

Here's the Accordion component documented:

Showing the Accordion properties tab:

[endigo9740]

This has now been merged into dev branch and is ready for review!

[endigo9740]

Marking this completed and ready for release.