Handbook Development
The handbook is a dynamic application built entirely with the EBRAINS Design System . Every element—from the display of inner parts to the overall page layout - is rendered using our components library. This approach ensures a consistent user experience while enabling continuous contributions. Developers are encouraged to build new components (either from the stencil library or as simple custom components), develop shortcodes, refine configurations, and improve integration within the ebrains-ui-ecosystem.
A Step-by-Step Guide
Undertand Hugo Shortcodes and Partials
Understand Shortcodes and Integration: Learn how our shortcodes work to streamline content management and discover best practices for integrating new functionality into the handbook.
Useful links:
Explore the EBRAINS Design System
The handbook is part of the ebrains-ui-ecosystem , which fully implements the EBRAINS Design System. This means that all assets, artefacts, and shared resources are readily accessible within the handbooks’ scope.
However, since the handbook is generated using Hugo, directly accessing UI components requires a few extra steps. You can incorporate these components by using Hugo partials or Hugo shortcodes, allowing you to embed and render web components directly in your Markdown content.
For instance, one complete way to reference a word with an external link in a Markdown file (.md) using the UI component provided by the Design System eds-link include it like this:
Review the Components Library: Familiarize yourself with the pre-built components and how they are used across the handbook. Visit the Component Documentation for examples and guidelines.
Develop New Components and Shortcodes
- Creating New Components: Develop new UI components using either our stencil library or by building custom components. Ensure they align with the visual and functional standards of the EBRAINS Design System.
- Enhancing Shortcodes: Improve or add new shortcodes to support additional functionalities. This helps streamline the creation of consistent content throughout the handbook.
- Refining Configurations: Adjust configuration settings to optimize how the handbook integrates within the ebrains-ui-monorepo, ensuring smooth interoperability with other system components.