This project publishes packages useful for documenting components as you write them.
Built with GatsbyJS and Theme-UI.
This project contains a Gatsby app preconfigured as a documentation site for your design system so that you can begin to writing components and documenting them without alot of setup.
(Or, use the site as a reference to build your own documention site using the packages and components exported by this project.)
The @smerth/gatsby-themeui package installs packages and dependancies and sets up configuration for:
The @smerth/themeui-smerth package exports a valid theme object.
Rather than manage the theme object in a single (huge!) file it is assembled from many files, broken down into a managable file structure.
In addition to installing and configuring Theme-UI, @smerth/gatsby-themeui exports a set of components that make documenting code easy. Each of these component's names are prefixed with "Display."
When you write a codeblock in MDX the theme checks for tags added to the codeblock and swaps in the appropriate "Display" component.
Add the "live" tag to a codeblock in markdown like this
```jsx live<ColorModeToggle variant="ui" sx={{ fontSize: "36px" }} />```
to render a React Live Editor component like this:
Edit the props to see this component update live!