Core Organism Component: Footer

[arcticicestudio]

Associated epic: #63
Depends on: #105

This issue documents the core organism component Footer which represent the <footer> element and is an essential part of Nord Docs. It'll provide a sitemap, the Arctic Ice Studio organization branding logo and caption, networking & social media links as well as the copyright paragraph including version information.

🚧 This is a work in progress document which means it is not completed yet and will be extended!

Layout

The footer will use a CSS flexbox and grid layout consisting of two container components with the maximum of flexible space between both. The left-side container will contain 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” will be implemented. 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 will provide the quickly accessible sitemap. This container will use the flexbox layout where each base route of the site will be added as one category represented as a column. Each of these will consist of an heading, the name of the route, and the corresponding sub-routes.

As of now the following base routes are planned:

• “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 will contain the logo with the caption that'll link to the organization website. It'll be 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 will also contain the social media & networking links where each link will be represented through the icon of the corresponding site/service. They will be 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 will be a paragraph providing version information about the site like the currently running version number (with commits ahead metadata when required) and the build & deployment date. It'll also have additional Git metadata added as data- attributes and <time> HTML element.

Responsive Design

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

Tasks

• Install required packages:
  • semver
• Implement util function to get Git version information.
• Wrap project data social media links into organization object.
• Implement required brand & social media icon components.
• Implement SVG “overlapping wave” divider component.
• Implement mapping of titles and URLs of categories for the sitemap.
• Implement styled footer components.
• Implement Footer core organism component.
• Add the footer component to the base layout.