This issue documents the implementation of all community page sections including required dependencies, components and illustrations.
Hero
The first section will be the “hero” of the community page that renders a description about the page's purpose and an animated SVG component.
Chats
The 2nd section will be about Nord's community chats where each platform is represented as card rendered in a two-column grid layout. Each card will contain the platforms official logo, colorized with colors of the respective brand guidelines, a short summary about the platform/service and a link component that'll forward to the community within the platform.
Next to the official main channel each platform also provides sub-channels for all port projects
As of now the following community chats of Nord are planned to be represented:
Arctic Ice Studio's official community on Spectrum
The 3th and also last section present platforms where the community can create content and ask questions for and about Nord. Next to the official documentation these are knowledge bases also powered by community. Like the chat platforms in the previous section each platform/service will be represented as card including the same information, rendered by the same components, and also structured in a two-column grid layout.
Next to this, each card will include the latest three items (questions, posts etc.) of the platform's community rendered as link component with the item's title and metadata like tags, the name of the author and the relative creation date/time.
As of now the following community platforms of Nord are planned to be represented:
Latest questions from Stack Overflow tagged with nord or nordtheme
All data will be fetched from the official REST APIs from the respective platform using the axios client. The processing of any date/time data will be handled with date-fns, a modern and more lightweight ES6+ library with tree-shaking support that'll be used project-wide for Nord Docs to handle any other date/time data like e.g. blog posts metadata.
Responsive Design
All sections will follow the responsive design concept to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports.
This issue documents the implementation of all community page sections including required dependencies, components and illustrations.
Hero
The first section will be the “hero” of the community page that renders a description about the page's purpose and an animated SVG component.
Chats
The 2nd section will be about Nord's community chats where each platform is represented as card rendered in a two-column grid layout. Each card will contain the platforms official logo, colorized with colors of the respective brand guidelines, a short summary about the platform/service and a link component that'll forward to the community within the platform. Next to the official main channel each platform also provides sub-channels for all port projects
As of now the following community chats of Nord are planned to be represented:
Content
The 3th and also last section present platforms where the community can create content and ask questions for and about Nord. Next to the official documentation these are knowledge bases also powered by community. Like the chat platforms in the previous section each platform/service will be represented as card including the same information, rendered by the same components, and also structured in a two-column grid layout. Next to this, each card will include the latest three items (questions, posts etc.) of the platform's community rendered as link component with the item's title and metadata like tags, the name of the author and the relative creation date/time.
As of now the following community platforms of Nord are planned to be represented:
nordornordthemeAll data will be fetched from the official REST APIs from the respective platform using the axios client. The processing of any date/time data will be handled with date-fns, a modern and more lightweight ES6+ library with tree-shaking support that'll be used project-wide for Nord Docs to handle any other date/time data like e.g. blog posts metadata.
Responsive Design
All sections will follow the responsive design concept to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports.
Tasks
<hr>element.FeatureDuo,DecorationCanvasand sharedSectionlanding page molecule to be shared components for all page organisms.