0.3.0

Changelog for the official Nord website and documentation

This version focused on the [responsive web design][gh-52], [core & base component][gh-63] as well as [base HTML elements as components][gh-69] of Nord Docs. It includes the [base layout][gh-66] which initially consists of the [header][gh-64] that provides the global navigation links.
Another focus was the handling of exceptional & special states like [empty states][gh-78] and the [404 error state][gh-84].

Features

Base Media Query Setup — #61 ⇄ #62 (⊶ 6b78d69)
↠ The basic setup for components with responsive styles through media queries has been implemented based on the [“Responsive Web Design” design concept][gh-52].

Media Query Generator

To simplify the usage of [media queries][mdn-mq] with [styled-components][gh-51], a utility function to generate [media templates][stc-docs-mqt]has been implemented. It uses the min-width parameter to fulfill the used mobile-first approach. The base size that is used has been implemented as theme property in [#54][gh-55-diff-r49].

Initial Media Queries

Always adjust media queries to the content individually and not vice-versa.
The design supports the content. Not the other way around.

Like documented in the #52, Nord Docs uses the mobile-first pattern and follows the great [“Google Developer Responsive Web Design” guidelines][gdev-web-fund-rwd]. The recommended way is to create media queries not based on any device sizes but individually based on the content which is unique for each project. This is the best practice and, contrary to most popular CSS framework like Bootstrap, the correct way since each site is different and there are thousands of devices and in the future new sizes will appear.
The following media query template functions have been implemented:

• phonePortrait — max-width: 479px
• phoneLandscape — max-width: 480px
• tabletPortrait — max-width: 600px
• tabletLandscape — max-width: 900px
• desktop — max-width: 1200px
• desktopPlus — max-width: 1800px

Core Layout Component: BaseLayout — #66 ⇄ #68 (⊶ 208c9ac)
↠ Implemented the BaseLayout core layout component, the default layout of Nord Docs. It consists of the [Root core container][gh-36] as root element and the core components representing the [header][gh-64], the main [page container][gh-65] and in the future the footer.

Core Container Component: Page — #65 ⇄ #67 (⊶ 701ec43)
↠ Implemented the core container component Page, the base wrapper for page content of Nord Docs. It renders the [HTML <main> element][mdn-html-el-main] to wrap page content and is used in layout components like [BaseLayout][gh-66].

Core Atom HTML Element: P — #79 ⇄ #80 (⊶ ad995b0)
↠ Implemented the core atom P that represents the [text content][mdn-html-el-tc] HTML element [<p>][mdn-html-el-p]. It uses adjusted styles instead of browser defaults to match Nord Docs brand style.

Core Atom HTML Element: Heading — #81 ⇄ #82 (⊶ c4e1aa8)
↠ Implemented the core atoms H1-H6 that represent the [content sectioning][mdn-html-el-cs] HTML elements [<h1>-<h6>][mdn-html-el-h]. They use custom styles instead of browser defaults and allow to disable the bottom margin via the noMargin prop. The font style like size, modular scale and family adhere to the [“Typography” design concept][gh-2].

Core Atom HTML Element: A — #70 ⇄ #71 (⊶ 75d0e49)
↠ Implemented the core atom A that represents the [inline text semantic][mdn-html-el-inl-txt-sem] HTML element [<a>][mdn-html-el-a]. This is a special dynamic and failsafe component because it internally uses the [Gatsby Link][gatsby-docs-link] component to route within the site (internal links) while also being able to link to external data.

URL Routing Utilities

To handle the logic of conditionally rendering a Gatsby Link or a basic <a>, based on the passed target URL (internal & external), utility functions has been implemented to evaluate the passed target.

Core Organism Component: Header — #64 ⇄ #75 (⊶ d6f0fef)
↠ Implemented the essential core organism component Header that provides the main site navigation and a user action component to [toggle between the global theme modes][gh-57].

Layout

The header uses the CSS flexbox layout consisting of two container components with the maximum of flexible space between both. The containers contain the branding and the navigation components like described in the sections below.

Navigation

To allow users to simply navigate around the site, the component provides the quickly accessible navigation. It is placed in the right-sided container and currently contains the following items:

• “Ports” — links to /ports, the landing page for all Nord port projects.
• “Docs” — links to /docs, the landing page for Nord's documentation.
• “Blog” — links to /blog, the landing page for Nord's blog.
• “Community” — links to /community, the landing page of the Nord community channels.

Branding

To represent Nord's branding, the left-sided container contains the Nord logo with the caption. It links the landing page to allow quick access to the root (/) page.

Theme Mode Switcher

The user action component mentioned in the introduction paragraph above allows to toggle between the available global theme modes. Both modes are represented through icons where a sun is used for the “bright snow flurry” and a moon for the “dark night frost” mode. They are implemented using the awesome [React Pose][react-pose] project to animate the switching. The icons “fly out and in” within the bounds of the component that takes the form of a button.

Like documented in the [“Iconography” design concept][gh-74], the awesome [Eva Icons][eva-icons] project is for icons.

Responsive Design

For reduced width views (responsive design) the header adjusts several styles and composed components.

Slide Menu

The main navigation link list will be hidden and replaced by a user action element (button) that toggles an animated slide down menu containing the navigation links. The drop down starts right below the header and takes up the available height and width to cover the full screen. As soon as the animation starts all scroll events will be removed from the underlying content (body) using the [body-scroll-lock][gh-bsl] project. This prevents users from scrolling the content below the menu when the menu itself overflows the Y-axis and shows a scroll bar.

Behavior

To allow quick access while also being inconspicuous, the component is sticky at the top of the site, but collapses as soon as the user scrolls down and only switches back into expanded mode when at top of the site.
In expanded mode, the height of the header is larger and the caption of the logo is visible. As soon as switching into collapsed mode the height decreases and the logo caption fades out with a smooth transition animation.

To achieve the resizing animation based on the scroll position the [subscribe-ui-event][gh-sue] project is used to listen to scroll events. It provides throttling by default, only calls document.body.scrollTop and window.innerWidth once and uses requestAnimationFrame for a better performance.

Empty State Component — #78 ⇄ #83 (⊶ 2079c05)
↠ Implemented the EmptyState molecule component to represent an [empty state][md-com-es]. It consists an vector illustration, a headline and the corresponding subline.

There are initially 3 different illustrations available that can be selected through the illustrationVariant prop. The headline informs the user about the purpose of the illustration and th...

0.2.0

Changelog for the official Nord website and documentation

This version focused on the [typography][gh-2], the [brand design & styling][gh-51] and theme modes of Nord Docs. It includes the globally used [typefaces][gh-54], a React context [provider and consumer component for the available theme modes][gh-57] as well as some initial [global base styles][gh-59].

Features

Typefaces — #54 ⇄ #55 (⊶ 81a5b23)
↠ Integrated globally available open source typefaces like documented in the [“Typograhpy” design concept][gh-2] and implemented the typography module to define style properties and configurations. The font size and units are based on the used [modular scale][modularscale-majorsecond] documented in #2.

[Rubik][gf-rubik] — the main stylistic and visualization sans-serif font installed through through the [typeface-rubik][npm-typeface-rubik] package.

[Inter UI][inter-ui] — the sans-serif font for documentations as well as technical and factual content. It is installed through the [inter-ui][npm-inter-ui] package. Note that the font is currently not available through [Google Fonts][gf] yet, but might be added in the future very soon due to its large popularity and perfect implementation.

[Source Code Pro][gf-source-code-pro] — the main monospace font for all code elements installed through the [typeface-source-code-pro][npm-typeface-source-code-pro] package.

Base Style & Theme Setup — #53 ⇄ #56 (⊶ 85498ca)
↠ Implemented the basic style & theme setup like documented in the [“Brand Design & Styling” design concept][gh-51] using the CSS-in-JS library [styled-components][] for component representations. To use uniform global theme definitions and to simplify CSS styling, the [styled-theming][gh-styled-theming] and [polished][] libraries are also integrated next to some useful and required specific Babel & Gatsby plugins.

Default Browser Style Normalization

Integrated the great project [modern-normalize][gh-modern-normalize] that normalizes the default styles of browsers for a consistent appearance across different modern browsers. For the best usage with styled-components the [npm-styled-modern-normalize][npm-styled-modern-normalize] project is used. It exports the styles via the css API and has been added to the created global styles component mentioned below.

CSS Tools

To simplify the CSS styling, the [polished][] package is used that provides a lightweight toolset for writing styles in JavaScript (CSS-in-JS).

CSS Base Styles

Global and normalization CSS styles have been implemented using styled-components css API. They extend modern-normalize and define, next to the browser normalization, styles of the available global themes like documented in the sections below.

In order to use fonts in Nord Docs style & themes (implemented in #54) the basic properties and values have been added and integrated into this CSS base styles.

Global Styles

To inject global styles, styled-components v4 [createGlobalStyle][stc-docs-api-cgs] API is used to create a <GlobalStyle> component to inject various styles globally.

Global Themes

To [provide the global theme][stc-docs-theming], the [ThemeProvider][stc-docs-api-thp] component has been added to the Nord Docs [Root core container component][gh-36]. The global theme is now passed to the provider.

Simplified Theme Usage

To simplify the usage of styled-theming's [theme()][gh-stth-api-th] and theme.variants() API functions, two utility functions have been implemented:

• themeMode(modeStyles : object) — Shorthand function for the theme API to define styles based on the global theme mode(s).
• themedModeVariant(modeStyles : object, variantPropName : string) — Shorthand function for the theme.variants API to define variant styles based on the global theme mode(s).

Available Themes

Initially Nord Docs will be build with the “bright snow flurry” and “dark night frost” theme modes. The names have been implemented as constants with values BRIGHT_SNOW_FLURRY and DARK_NIGHT_FROST that are used with the utility functions mentioned above to define the styles of a component for each available global theme.

Plugins

[styled-components great Babel plugin][stc-docs-tool-babel] adds support for server-side rendering, minification of styles, and a nicer debugging experience. It has been integrated via the [corresponding Gatsby's plugin][npm-gatsby-plugin-styled-components].

Nord Colors

Since the main [JavaScript implementation of Nord][gh-nord-36] is currently not completed and released yet, the colors and palettes have been provided "manually" via the nord and palettes modules. As soon as the implementation has been done they will be replaced through imports from the official package.

Motion

Some basic configurations for motion related styles like animations have been implemented, inspired by [Material Designs][md] great documentation and guide about [motion speed][md-motion-speed]. This includes values for speed like transition durations for the global theme modes. It'll be used to set the CSS transition for the base background and font color within the globals CSS style module.

Theme Mode Context — #57 ⇄ #58 (⊶ 86edb92)
↠ Implemented a [React.Context provider and consumer][react-docs-context] for the global theme modes. It provides the name of the currently active theme and a function to toggle through available themes.

Context Provider & Consumer

Both the context consumer and provider components have been implemented in the [Root core container component][gh-36]. The consumer is exported and can then be imported in any component to consume the provided values.

The Root component has beene changed from a SFC to a class component to store the currently active state and handle the theme mode toggle logic through a function. It migrated the currently used simple [styled-component theme][stc-docs-theming] (provided through the <ThemeProvider component) to the [styled-theming theme][gh-styled-theming] that provides the initially implemented theme (#53).

Session Storage

To persist the current active theme mode when changing the route (which unmounts the Root component and therefore resets the state), the value is written to the browser's [session storage][mdn-ss]. The storage type has been preferred over the [local storage][mdn-ls] since this would persist the active theme mode even when the user closes the tab, but the desired behavior is to optimize the site for the “bright snow flurry” aura theme mode that is set as default theme.

To simplify the read- and write handling as well as prevent possible errors due to wrong storage keys, two utility functions have also been implemented:

• readSessionCache(key : string) — Reads the value of the given key from the session storage (if available).
• writeSessionCache(key : string, value : any) — Writes the given key-value pair to...

0.1.0

Changelog for the official Nord website and documentation

This is the initial release version of Nord Docs!
It represents the basic project setup, structure and development workflow with an deployable state. There are many initial implementations and configurations for the documented design concepts. They are covered in the following sections of this version changelog to introduce used technologies and explain why several decisions have been made.

To get an overview of the general project plan, read the [“Design Concept & Initial Launch Plan”][gh-1] documentation which describes the project's justification, it's goals, the architecture, the tech stack and the “UI Design & Branding“ concept.

Features

Basic Project Setup

NPM configuration file — #4 (⊶ f4df27c)
↠ Added the [NPM .npmrc file][npm-docs-rc] to ensure specific configurations are set project-wide for all core team members and contributors. This includes the usage of the [lockfile][npm-docs-lock] and exact (dev)dependency package versions.

Git mail mapping — #9 (⊶ e562910)
↠ Added a Git [mailmap][git-docs-mailmap] file to link to in documentations and allow contributors to send mails regarding security issues. This prevents unnecessary overhead of updating all documents when new core team and members and contributors are added and additionally adds the main functionality of the file: Mapping commits when someone uses a different email address.

EditorConfig — #11 (⊶ 4fa30ce)
↠ Added the [EditorConfig][] file to define and maintain consistent coding styles between different editors and IDEs.

GitHub code owners — #7 (⊶ 05ded0c)
↠ Adapted to GitHub's [code owners][gh-blog-intro-code-owners] feature to define matching pattern for project paths to automatically add all required reviewers of the core team and contributors to new PRs. Read the [GitHub Help article][gh-help-code-owners] for more details.

GitHub Open Source community standards — #8 ⇄ #12 (⊶ 262f731)
↠ Inspired Nord Docs project philosophy using GitHub's features for [recommended community standards][gh-blog-intro-comm-tools]. It adheres to the great [Open Source Guides][ossg] and adapted to the recommendations to complete the projects [community profile][gh-community-profile].

To facilitate a healthy and constructive community behavior, Nord Docs also introduced and enforces a [code of conduct][gh-help-coc].
Read the [GitHub Help article][gh-help-coc] for more details about the provided integrations.

The added [contribution guidelines][gh-blog-intro-contrib-gl] help to build a community that [encourages people to use, contribute to][ossg-contrib], and evangelize the project.

It includes sections about

• how to get started
• bug reports
• enhancement suggestions
• pull requests
• style guides
  • [JavaScript Style Guide][gh-styleguide-js]
  • [Markdown Style Guide][gh-styleguide-md]
  • [Git Style Guide][gh-styleguide-git]
• credits

Read the [GitHub introduction blog post][gh-blog-intro-contrib-gl] and the [GitHub Help article][gh-help-contrib-gl] for more details about the provided integrations.

GitHub issue and pull request templates — #10 ⇄ #13 (⊶ c3c7b8a)
↠ Integrated GitHub's feature to define [multiple issue templates][gh-blog-multi-issue-templ] while the [initial template file][gh-blog-intro-issue-templ] is used as a fallback/generic template to link to the specific ones.

Read the [GitHub Help article][gh-help-issue-templ] for more details about issue and pull request templates. Also check out how to manually create [issue templates][gh-help-pr-templ], a [pull request template][gh-help-issue-templ-repo]. and the guide on [how to create the (deprecated) fallback/generic issue template][gh-help-issue-templ-depr].

Introducing remark-lint — #14 ⇄ #19 (⊶ 1d2959c)
↠ Integrated [remark-lint][gh-remark-lint], a linter built on [remark][], the powerful Markdown processor powered by plugins such as remark-lint.
It is used through [remark-cli][npm-remark-cli] with [remark-preset-lint-arcticicestudio][gh-remark-preset-lint-arcticicestudio], the custom preset that implements the [Arctic ice Studio Markdown Style Guide][styleguide-markdown].

To lint all Markdown sources within the project the lint:md NPM script has been added which will be picked up by the main lint script.

Introducing ESLint — #15 ⇄ #20 (⊶ d4bd783)
↠ Integrated [ESLint][], the pluggable and de-facto standard linting utility for JavaScript using the configuration preset [eslint-config-arcticicestudio][gh-eslint-config-arcticicestudio] which implements the [Arctic Ice Studio JavaScript Style][styleguide-javascript].
Read #15 for more details about the configuration and setup as well as included plugins.

To lint all JavaScript sources within the project the lint:js NPM script has been added which will be picked up by the main lint script. The second script format:js allows to make use of ESLint's great [auto-fixing][eslint-docs-auto-fix] feature.

Introducing Prettier — #16 ⇄ #21 (⊶ 39af1da)
↠ Integrated [Prettier][], the opinionated code formatter with support for many languages and integrations with most editors. It ensures that all outputted code conforms to a consistent style and provides the best and recommended style configurations of-out-the-box™.
Read #16 for more details about the configuration and setup as well as included plugins.

To format all compatible sources within the project the format:pretty NPM script has been added which will be picked up by the main format script.

Introducing lint-staged — #17 ⇄ #22 (⊶ 6ab1091)
↠ Integrated [lint-staged][gh-lint-staged] to run linters against staged Git files and prevent adding code that violates any style guide into the code base.

Read #17 for more details about the configuration and setup.

Introducing Husky — #18 ⇄ #23 (⊶ 16e90c3)
↠ Integrated [Husky][gh-husky], the tool that make Git hooks easy and can prevent bad Git commits, pushes and more woof!

Read #18 for more details about the configuration and setup.

Project repository README — #49 (⊶ f856150)
↠ Wrote the project's repository README that initially contains the hero and various badges provided by the gre...