Description
Sistent components are documented on the Sistent Components page. However, several new components have been added to Sistent without corresponding documentation.
These components should be documented so that Sistent users can understand what each component does and how to use it without having to inspect the source code.
Proposed Implementation
As more components are added, keeping all of them in a single, ungrouped list will make the documentation increasingly difficult to navigate. The components should therefore be organized into logical groups to improve discoverability and navigation.
First point: Add All Components
- Add an "All Components" item under the Components section.
- The "All Components" page will replace components page.
- The page should display all available Sistent components in a summarized and grouped layout.
- Components should be organized into logical categories.
- Each category should have a "View More" action that allows users to view all components within that category.
- Clicking on a component should navigate to its dedicated documentation page, where users can find more detailed information and usage examples.
Second point: Group components in the sidebar
- Organize the component links in the sidebar into relevant categories.
- For example, components could be grouped into categories such as Icons, Custom Components, and other appropriate groups.
- The grouping should make it easier for users to find a specific component without having to navigate through a long list.
For inspiration, follow the structure and navigation patterns used in MUI's All Components documentation.
Steps to Follow
- Propose a Figma design
- Create a Figma design for the proposed component documentation structure and navigation.
- The design should cover both the All Components page and the grouped sidebar navigation.
- Implement the documentation structure
- Implement the proposed design using the existing Sistent documentation components and layout.
- Restructure the existing components where necessary to support the new grouping and navigation.
- Add missing component documentation (add documentation for the new Sistent components that are currently missing, the step into adding new components should follow the current layout of the available component).
- Each component should include enough information for users to understand its purpose, available properties, and how to use it.
- Include usage examples where appropriate.
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
Join the Layer5 Community by submitting your community member form.
Description
Sistent components are documented on the Sistent Components page. However, several new components have been added to Sistent without corresponding documentation.
These components should be documented so that Sistent users can understand what each component does and how to use it without having to inspect the source code.
Proposed Implementation
As more components are added, keeping all of them in a single, ungrouped list will make the documentation increasingly difficult to navigate. The components should therefore be organized into logical groups to improve discoverability and navigation.
First point: Add All Components
Second point: Group components in the sidebar
For inspiration, follow the structure and navigation patterns used in MUI's All Components documentation.
Steps to Follow
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
masterbranch.