Community Page Sections #115
Labels
Milestone
Comments
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
- axios (1) - date-fns (2) "axios" is used to fetch all data from official REST APIs for the Nord's used content platforms. "date-fns", a modern and more lightweight ES6+ library with tree-shaking support, will be used project-wide to process any date/time data and like e.g. blog posts metadata. References: (1) https://github.com/axios/axios (2) https://github.com/date-fns/date-fns GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
The `Hr` component represents a `<hr>` (1) base HTML element to render a visual thematic break between paragraph-level elements. References: (1) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr Associated epic: GH-69 GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
The function decodes all code character (numeric) HTML entities found in the given text. GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This commit includes a new "Community Cohesion" illustration SVG component for the "Hero" section of the community page. GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
They render a "swaying" and "wobbly" wave vector graphics used for the community page sections. GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This is required to override CSS styles. GH-115`
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This simplifies the usage of a "darkened" background color for sections and containers by add it as new "tertiary" variant prop instead of definiting it as shared style. GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This allows to add background decorations to the `Content` `ontainer of the core "Section" container component by simply adding the `decorated` boolean prop instead of creating a new styled component with a `position: relative` attribute. GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This commit generalizes the `FeatureDuo` landing page molecule to a shared molecule for all pages. GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This commit generalizes the `DecorationCanvas` and `Section` landing page molecules to be shared molecules for all pages. GH-115
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
This commit implements all main organism components for the community page sections. >> Hero The first section is the "Hero" of the community page that renders a description about the page's purpose and an animated SVG component. >> Chats The 2nd section is about Nord's community chats where each platform is represented as card rendered in a two-column grid layout. Each card contains the platforms official logo, colorized with colors of the respective brand guidelines, a short summary about the platform/service and a link component that forwards to the community within the platform. Next to the official main channel each platform also provides sub-channels for all port projects. The following community chats of Nord are represented: - Arctic Ice Studio's official community on "Spectrum" (1) - Nord's official Keybase team chat (2) - Nord's official Slack (3) workspace - Nord's official Discord (4) space >> Content The 3th and also last section presents 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 is 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 includes 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. The following community platforms of Nord are represented: - Latest questions from Stack Overflow (5) tagged with `nord` or `nordtheme` - Nord's official "/r/nordtheme" (6) subreddit All data is fetched from the official REST APIs from the respective platform using the axios (7) client. The processing of any date/time data is handled with date-fns (8), 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 follow the responsive design concept (9) to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports. References: (1) https://spectrum.chat/arcticicestudio (2) https://keybase.io/team/nord.chat (3) https://arcticicestudio.slack.com (4) https://discordapp.com (5) https://stackoverflow.com/questions/tagged/nord+or+nordtheme (6) https://www.reddit.com/r/nordtheme (7) https://github.com/axios/axios (8) https://github.com/date-fns/date-fns (9) #52 Associated epic: GH-63 GH-115
Merged
arcticicestudio
added a commit
that referenced
this issue
Jan 26, 2019
…-page-sections Community Page Sections
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.The text was updated successfully, but these errors were encountered: