This issue documents the implementation of all /ports page sections including required changes to involved components and new dependencies.
Hero
The first section will contain a feature duo container with the pages heading and a summary about Nord's ports.
Underneath the static vector graphic that is currently placed in the port section of the landing (/) page will be implemented as interactive animated component. It will use 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 will consist of a input field that allows users to filter available port projects by predefined search terms. Underneath a animated grid of card components will react to the input field by filtering non-matching ports projects.
Each card represents one port project and will consist 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 users typing in the input field while the grid reacts to the change immediately a debounce might be used. It can wait some milliseconds before actually filtering the grid by the given search term. 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 will be 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 will be used which allows, like the fantastic and also already used 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.
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.
[x] Implement port project metadata provider hook via static query for GitHub GraphQL API and static data.
[x] Implement new SVG components for logos and section dividers.
[x] Implement interactive and animated port project SVG illustration component.
[x] Implement hero and card grid filter section components.
[x] Implement initial pages for each currently existing port projects showing a empty state and link to refer to the GitHub repository for the meantime the pages are not implemented yet.
This issue documents the implementation of all
/portspage sections including required changes to involved components and new dependencies.Hero
The first section will contain a feature duo container with the pages heading and a summary about Nord's ports. Underneath the static vector graphic that is currently placed in the port section of the landing (
/) page will be implemented as interactive animated component. It will use 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 will consist of a input field that allows users to filter available port projects by predefined search terms. Underneath a animated grid of card components will react to the input field by filtering non-matching ports projects. Each card represents one port project and will consist 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 users typing in the input field while the grid reacts to the change immediately a debounce might be used. It can wait some milliseconds before actually filtering the grid by the given search term. 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 will be 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 will be used which allows, like the fantastic and also already used 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.
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