Skip to content

0.9.0
Compare
Choose a tag to compare
@arcticicestudio arcticicestudio released this 03 Mar 08:17
v0.9.0
This tag was signed with the committer’s verified signature.
arcticicestudio Arctic Ice Studio
GPG key ID: 60C54F1519346085
Learn about vigilant mode.
3351e5b

Changelog for the official Nord website and documentation

Release Date: 2019-03-03 Project Board Milestone

This version mainly focused on the sections of the ports page to represent Nord's port projects. The implementation was limited to the “landing” page components and currently doesn't include any prot specific pages, but will be implemented later on when the actual documentations are being migrated.

Features

The following issues are related to the “Components” design concept and the “Responsive Web” design concept to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports.

Ports Page Sections — #119 ⇄ #126 (⊶ 606f805)
↠ Implemented all port page sections including required changes to involved components and new dependencies.

Hero

The first section contains a feature duo container with the pages heading and a summary about Nord's ports.
Underneath the static vector graphic that was placed in the port section of the landing (/) page has been implemented as interactive animated component. It uses a 3D depth effect for the port project's logos by moving against the direction of the current mouse position where the larger logos will move more to give the impression that they are closer.

Grid Filter

The second section consists of a input field that allows to filter available port projects by predefined search terms. Underneath a animated grid of card components reacts to the input field by filtering non-matching ports projects.
Each card represents one port project and consists of the logo, the name (with the Nord prefix) as well as a card footer that contains the version of the latest release of the respective project and the number of stars of the GitHub repository.

To prevent UI freezes/frame drops when typing in the input field, while the grid reacts to the change immediately, it was considered to use debounce that waits some milliseconds before actually filtering the grid by the given search term. This hasn't been implemented yet but might be added later on when there are performance problems. To get the best performance Lodash can be used through gatsby-plugin-lodash which sets up babel-plugin-lodash and lodash-webpack-plugin.

GitHub GraphQL API

To view the metadata about the port project repositories Gatsby's fantastic GraphQL integration is used through the awesome gatsby-source-graphql plugin. It allows to fire queries that'll get executed and stitches remote schemas together by adding a type that wraps the remote schema Query type and putting it under field of Gatsby GraphQL Query.

Interactive Animations

To implement components with an interactive animation the awesome react-spring project is used which allows, like the already used fantastic react-pose library, to use spring-physics based animations.
The advantage of react-spring is that it bails out of the React renderer to avoid unnecessary renders and instead uses native methods to get the best performance even for complex animations.
It comes with first-class support for Hooks, a great and extensive documentation and a lot of examples for inspirations.

React Hooks Support — #121 ⇄ #122 (⊶ c1bf2db)
↠ Since the latest stable React version finally comes with the long-awaited Hooks the project now added support for the new features.
To simplify the usage and import of custom Hooks a new hooks import alias has been added that allows to import custom hooks from the new src/hooks Hooks base directory.

The ESLint plugin eslint-plugin-react-hooks provided by the React core team has been added to enforce the rules of Hooks. This is a temporary integration until the eslint-config-arcticicestudio package has been updated to support and include the plugin.

The plugin is configured by following the official documentation about the rules of Hooks.
Since React Hooks are making use of inline arrow functions the react/jsx-no-bind rule has been disabled to avoid noisy false-positive errors.

git-crypt — #123 ⇄ #124 (⊶ 475c695)
↠ Integrated git-crypt into the repository to allow to encrypt specific files using GPG.
git-crypt is a stable and production proven concept that works safely and allows to use a transparent encryption with Git.

Nord Docs uses it to encrypt Gatsby environment variables stored in .env* files that are handled by dotenv. Another way would be to use Circle CI's environment variables features to make sensitive data available during build time, but using git-crypt ensures that all required project data is stored in the repository and tracked by Git without the need to manually configure CI/CD providers and servers.

Unfortunately Netlify currently doesn't provide a way to customize the Docker container configuration so that it was not possible to set up GPG and git-crypt to import the CI/CD GPG secret key, decrypt the files and build the project. An attempted solution was to use Netlify's awesome “Functions” feature to run a function that executes shell commands using the deploy-building trigger to set up GPG and git-crypt, but there is no way to install git-crypt in the container so this doesn't work.

Therefore is was necessary to manually set required environment variables via Netlify's web app UI for build environment variables:

  • NORD_DOCS_GOOGLE_UNIVERSAL_ANALYTICS_TRACKING_ID — Stores the “Google Universal Analytics” tracking ID.

The following steps have been performed to integrate git-crypt for the current code base:

  1. Add files to .gitattributes and configure filter and diff to use git-crypt setup
  2. Initialize git-crypt for the repository: git-crypt init (default key)
  3. Add the GPG keys of all core team members keys and Nord theme CI/CD virtual user: git-crypt add-gpg-user --trusted --no-commit <ID> (--no-commit flag prevents automatic commit of generated files while --trusted assumes the GPG user IDs are trusted)
  4. Commit the new generated .git-crypt folder
  5. Unlock the repository: git-crypt unlock
  6. Ensure all target files are tracked to be encrypted: git-crypt status
  7. Commit all encrypted target files
  8. Validate the encryption works by locking the repository again: git-crypt lock
  9. Implement Circle CI build configuration jobs and commands to handle GPG key import, file decryption and clean up after successful build
  10. Document required manual steup steps for Netlify deployment configuration in netlify.toml file

Improvements

Interactive illustration for ports section of landing page — #127 (⊶ f79f4ac)
↠ #126 improved the already existing “Nordify” SVG illustration by making it an interactive components that animates the floating logos in the opposite direction of the current mouse cursor's position.

The new component is now also used for the port section of the landing page replacing the static SVG illustration/image.

Tasks

Dependency Update January 2018 — #120 (⊶ cb09058)
↠ Performed the regular batch update for outdated dependencies.
It includes the long awaited React version 16.8.0 finally brings the stable Hooks API as well as great performance improvements and bug fixes!

Updated Jest's configuration since version >=24.0.0 deprecated setupTestFrameworkScriptFile in favor of the new setupFilesAfterEnv option.

The ESLint plugin eslint-plugin-react includes a lot of improvements and bug fixes regarding the parsing of code structures for better prop validation and display name detection. This resulted in the requirement to implement currently missing prop types and display names in various SFC and class components in the project.

Gatsby and all plugins have been updated to the latest versions to include the latest improvements and bug fixes. The gatsby-plugin-manifest plugin now sets the legacy option to true by default to include Apple touch icons since the assumption was wrong that iOS supports the icons from the web manifest.

As of version 3.3 the “Inter UI” font typeface has been renamed and is now “Inter”, without the “UI” part. This change has been ported to the used inter-ui package. The import has been adjusted to match the renamed inter.css main file and all references to the “Inter UI” name have been adjusted by removing “UI”.

Prettier version 1.16.0 comes with support for React Hooks and features for TypeScript and HTML as well as many other improvements and bug fixes.

React Pose includes an important fix that also animates all other children when items are moving when using the PoseGroup component.

Gatsby 2.1.0 with React Hooks Support — #125 (⊶ cf57879)
↠ Updated to Gatsby v2.1.0 which introduces useStaticQuery, a new Gatsby feature that provides the ability to use a React Hook to query with GraphQL at build time. It provides the same functionality like the StaticQuery component, but as a Hook rather than a component that takes a render prop.

Update to React 16.8.3 — #128 (⊶ f4c9b45)
↠ The latest React version 16.8.3 has been released including important bug fixes for incorrect state behaviors with the useState hook as well as a fix for <input> elements that discarded state updates during the render phase and reduced the performance.
The update is strongly recommended for any 16.8 release by the core team.

This bug fix release version might fix some problems that were encountered during development of the search filter <input> for #119.

The full changelog is available here

Assets 2
Loading