0.5.0

Changelog for the official Nord website and documentation

This version focused on the essential footer as well as a styled link component. It also includes the integration of the Webpack size-plugin to print the gzipped sizes of assets and the changes since the last production build.

Features

The following issues are related to the “Components” design concept.

Core Atom: “Link” — #105 ⇄ #107 (⊶ cf1f118)
↠ Implemented the core atom Link that wraps the base HTML element atom component the A and adds matching brand styles to it.

Core Organism Component: “Footer” — #106 ⇄ #108 (⊶ 9a6c049)
↠ Implemented the core organism component Footer which represent the <footer> element and is an essential part of Nord Docs. It provides a sitemap, the Arctic Ice Studio organization branding logo and caption, networking & social media links as well as the copyright paragraph including version information.

Layout

The footer uses a CSS flexbox and grid layout consisting of two container components with the maximum of flexible space between both. The left-side container contains the branding and link components while the right-side container contains the sitemap like documented in the sections below.

Wave Divider

For a nice and smooth transition between the last section/element of a page a new SVG vector graphic divider in form of multiple “overlapping waves” has been added. It must be rendered by the last component/element (in most cases a Section/<section>) to ensure the transparent background of the wave's container matches the last components background by rendering it in the bounds.

Sitemap

To allow users to simply navigate around the site, next to the main header, the component provides the quickly accessible sitemap. This container uses the flexbox layout where each base route of the site is added as one category represented as a column. Each of these consists of an heading, the name of the route, and the corresponding sub-routes.

As of now the following base routes are included:

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

Organization Branding

To represent Arctic Ice Studio's branding, the left-sided container contains the logo with the caption that'll link to the organization website. It is placed in one line with the category heading of the sitemap like documented in the section above.

Social Media & Networking Links

The left-side container also contains the social media & networking links where each link is represented through the icon of the corresponding site/service. They are placed in one line with a flexible layout to adust based on the available width.

Version Information

The last elements of the left-side container is a paragraph providing version information about the site like the currently running version (with commits ahead metadata when required) and the build & deployment date. It also has additional Git metadata added as data- attributes and a <time> HTML element.

Full Width

Reduced Width

Small Width

Responsive Design

For reduced width views (responsive design) the footer adjusts several styles and composed components. For really small view ports the grid layout be switches to a flexbox layout.

Core Organism Component: “Footer” — #109 (⊶ 75435d0)
↠ Integrated the Webpack size-plugin that prints the gzipped sizes of assets and the changes since the last build added through gatsby-plugin-webpack-size.

---

The full changelog is available here