diff --git a/content/docs/colors-and-palettes/index.mdx b/content/docs/colors-and-palettes/index.mdx new file mode 100644 index 00000000..2948264a --- /dev/null +++ b/content/docs/colors-and-palettes/index.mdx @@ -0,0 +1,214 @@ +import { ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements"; +import ColorPaletteCard from "atoms/core/ColorPaletteCard"; +import { ReactComponent as ColorPalette } from "assets/images/illustrations/color-palette.svg"; +import { palettes } from "styles/theme"; +import { ROUTE_DOCS_SWATCHES, ROUTE_DOCS_USAGE } from "config/routes/mappings"; + +export const frontmatter = { + title: "Colors and Palettes", + subline: + "A total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance." +}; + + + + + + + + + + + +Nord consists of four named color palettes providing different syntactic meanings and color effects for dark & bright ambiance designs. + +It has been created for **clear, uncluttered and elegant designs** following a **minimal and flat** style pattern. +For syntax highlighting it aims to ensure an **undisturbed focus on important parts of the code**, a **good readability** and a **quick visual distinction** between the different syntax elements. + +All colors are numbered from `nord0` to `nord15` where each palette contains a different amount of colors. The naming convention preserves the compatibility for terminal color schemes and allows an uncomplicated use as base for such. + +This document provides a set of guidelines detailing how to style and highlight code syntax and UI elements. +Please note that these guidelines are “soft“ recommendations to describe the original idea of Nord! +They may be used in a modified form like e.g. different use cases for a specific color or with different shading options applied. + +> This is a _living document_ which means it is **work in progress**, not completed yet and **can change at any time** while the project is still in development! + +Make sure to check out the guides about how to install and integrate Nord in your own projects or use the color swatches for your favorite applications. + + + + + + + + + +**Polar Night** is made up of four darker colors that are commonly used for base elements like backgrounds or text color in _bright ambiance designs_. + +### `nord0` + +**The origin color or the _Polar Night_ palette.** + +For _dark ambiance designs_, it is used for background and area coloring while it's not used for syntax highlighting at all because otherwise it would collide with the same background color. + +For _bright ambiance designs_, it is used for base elements like plain text, the text editor caret and reserved syntax characters like curly- and square brackets. +It is rarely used for passive UI elements like borders, but might be possible to achieve a higher contrast and better visual distinction (harder/not flat) between larger components. + +### `nord1` + +**A brighter shade color based on `nord0`.** + +For _dark ambiance designs_ it is used for elevated, more prominent or focused UI elements like + +- status bars and text editor gutters +- panels, modals and floating popups like notifications or auto completion +- user interaction/form components like buttons, text/select fields or checkboxes + +It also works fine for more inconspicuous and passive elements like borders or as dropshadow between different components. +There's currently no official port project that makes use of it for syntax highlighting. + +For _bright ambiance designs_, it is used for more subtle/inconspicuous UI text elements that do not need so much visual attention. +Other use cases are also state animations like a more brighter text color when a button is hovered, active or focused. + +### `nord2` + +**An even more brighter shade color of `nord0`.** + +For _dark ambiance designs_, it is used to colorize the currently active text editor line as well as selection- and text highlighting color. +For both _bright & dark ambiance designs_ it can also be used as an brighter variant for the same target elements like `nord1`. + +### `nord3` + +**The brightest shade color based on `nord0`.** + +For _dark ambiance designs_, it is used for UI elements like indent- and wrap guide marker. +In the context of code syntax highlighting it is used for comments and invisible/non-printable characters. + +For _bright ambiance designs_, it is, next to `nord1` and `nord2` as darker variants, also used for the most subtle/inconspicuous UI text elements that do not need so much visual attention. + + + + + +**Snow Storm** is made up of three bright colors that are commonly used for text colors or base UI elements in _bright ambiance designs_. + +The palette can be used for two different shading ambiance styles: + +- bright to dark — This is the **recommended style** that uses `nord6` as base color and highlights other UI elements with `nord5` and `nord4`. +- dark to bright (_semi-light_) — This style uses `nord4` as base color and highlights other UI elements with `nord5` and `nord6`. + +The documentation of the different colors from this palette are based on the recommended _bright to dark_ ambiance style. +To apply the color purposes to the _dark to bright_ style the definitions can be used in reversed order. + +### `nord4` + +**The origin color or the _Snow Storm_ palette.** + +For _dark ambiance designs_, it is used for UI elements like the text editor caret. +In the context of syntax highlighting it is used as text color for variables, constants, attributes and fields. + +For _bright ambiance designs_, it is used for elevated, more prominent or focused UI elements like + +- status bars and text editor gutters +- panels, modals and floating popups like notifications or auto completion +- user interaction/form components like buttons, text/select fields or checkboxes + +It also works fine for more inconspicuous and passive elements like borders or as dropshadow between different components. +In the context of syntax highlighting it's not used at all. + +### `nord5` + +**A brighter shade color of `nord4`.** + +For _dark ambiance designs_, it is used for more subtle/inconspicuous UI text elements that do not need so much visual attention. +Other use cases are also state animations like a more brighter text color when a button is hovered, active or focused. + +For _bright ambiance designs_, it is used to colorize the currently active text editor line as well as selection- and text highlighting color. + +### `nord6` + +**The brightest shade color based on `nord4`.** + +For _dark ambiance designs_, it is used for elevated UI text elements that require more visual attention. +In the context of syntax highlighting it is used as text color for plain text as well as reserved and structuring syntax characters like curly- and square brackets. + +For _bright ambiance designs_, it is used as background and area coloring while it's not used for syntax highlighting at all because otherwise it would collide with the same background color. + + + + + +**Frost** can be described as the heart palette of Nord, a group of four bluish colors that are commonly used for primary UI component and text highlighting and essential code syntax elements. + +All colors of this palette are used the same for both _dark & bright ambiance designs_. + +### `nord7` + +**A calm and highly contrasted color reminiscent of frozen polar water.** + +Used for UI elements that should, next to the primary accent color `nord8`, stand out and get more visual attention. +In the context of syntax highlighting it is used for classes, types and primitives. + +### `nord8` + +**The bright and shiny primary accent color reminiscent of pure and clear ice.** + +Used for primary UI elements with main usage purposes that require the most visual attention. +In the context of syntax highlighting it is used for declarations, calls and execution statements of functions, methods and routines. + +### `nord9` + +**A more darkened and less saturated color reminiscent of arctic waters.** + +Used for secondary UI elements that also require more visual attention than other elements. +In the context of syntax highlighting it is used for language specific, syntactic and reserved keywords as well as + +- support characters +- operators +- tags +- units +- punctuations like (semi)colons, points and commas + +### `nord10` + +**A dark and intensive color reminiscent of the deep arctic ocean.** + +Used for tertiary UI elements that require more visual attention than default elements. +In the context of syntax highlighting it is used for pragmas, comment keywords and pre-processor statements. + + + + + +**Aurora** consists of five colorful components reminiscent of the [„Aurora borealis“][wiki-aurora], sometimes referred to as _polar lights_ or _northern lights_. + +All colors of this palette are used the same for both _dark & bright ambiance designs_. + +### `nord11` + +Used for UI elements that are rendering error states like linter markers and the highlighting of Git `diff` deletions. +In the context of syntax highlighting it is used to override the highlighting of syntax elements that are detected as errors. + +### `nord12` + +Rarely used for UI elements, but it may indicate a more advanced or dangerous functionality. +In the context of syntax highlighting it is used for special syntax elements like annotations and decorators. + +### `nord13` + +Used for UI elements that are rendering warning states like linter markers and the highlighting of Git `diff` modifications. +In the context of syntax highlighting it is used to override the highlighting of syntax elements that are detected as warnings as well as escape characters and within regular expressions. + +### `nord14` + +Used for UI elements that are rendering success states and visualizations and the highlighting of Git `diff` additions. +In the context of syntax highlighting it is used as main color for strings of any type like double/single quoted or interpolated. + +### `nord15` + +Rarely used for UI elements, but it may indicate a more uncommon functionality. +In the context of syntax highlighting it is used as main color for numbers of any type like integers and floating point numbers. + + + +[wiki-aurora]: https://en.wikipedia.org/wiki/Aurora diff --git a/content/docs/query-error-draft-stub/index.mdx b/content/docs/query-error-draft-stub/index.mdx deleted file mode 100644 index 3d1d6fbb..00000000 --- a/content/docs/query-error-draft-stub/index.mdx +++ /dev/null @@ -1,5 +0,0 @@ -export const frontmatter = { - title: "GraphQL query error draft stub", - subline: "This file must be kept to prevent GraphQL queries to fail when no docs pages are in the filesystem.", - draft: true -}; diff --git a/content/docs/query-error-draft-stub/placeholder.png b/content/docs/query-error-draft-stub/placeholder.png deleted file mode 100644 index 25455958..00000000 Binary files a/content/docs/query-error-draft-stub/placeholder.png and /dev/null differ diff --git a/content/docs/swatches/index.mdx b/content/docs/swatches/index.mdx new file mode 100644 index 00000000..24757754 --- /dev/null +++ b/content/docs/swatches/index.mdx @@ -0,0 +1,92 @@ +import Button from "atoms/core/Button"; +import Link from "atoms/core/Link"; +import { ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements"; +import { ReactComponent as ColorSwatches } from "assets/images/illustrations/color-swatches-stripes.svg"; +import { ROUTE_DOCS_COLOR_AND_PALETTES, ROUTE_DOCS_USAGE } from "config/routes/mappings"; + +export const frontmatter = { + title: "Swatches", + subline: + "No matter what's your design tool stack — we've got you covered with native color swatches for your favorite applications." +}; + + + + + + + + + + + +Next to the many ways of integrating Nord into your project, all color palettes of Nord are also available in various native color swatch formats. + +> This is a _living document_ which means it is **work in progress**, not completed yet and **can change at any time** while the project is still in development! +> There will also be detailed **install instructions** for all supported formats, but in the meantime please refer to the documentation of the specific application. + +### Adobe Products + +There are two different color swatches available for _Adobe_ products like [Photoshop][] and [Illustrator][]: + +- `.aco` — A format especially designed for and only compatible with _Adobe Photoshop_. + + + +- `.ase` — The “_Adobe Swatch Exchange_“ format that allows to share color swatches between different _Adobe_ products. + + + + +**Install instructions** on how to import and use the swatches are documented in [_Adobe_'s Help Center Guide][illustrator-help-swatches]. + +### Apple macOS + +For use with the macOS system color app Nord is available as `.clr` file format. + +**Install instructions** and more details are available through [_Apple's Visual Color Design_ guidelines][apple-dev-design-color]. + + + +### Gpick + +To use Nord with [Gpick][] the palettes are available as `.gpa` format. + + + +### GIMP, Krita and Inkscape + +The universal `.gpl` file format allows to use Nord with [GIMP], [Krita] and [Inkscape]. + + + +### Alias and WaveFront Material + +For applications that make use of the _Alias_ and _WaveFront Material_ format Nord also provides a `.mtl` file. + + + + + +[apple-dev-design-color]: https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color +[gimp-doc-color-palette]: https://docs.gimp.org/en/gimp-concepts-palettes.html +[gpick]: http://gpick.org +[illustrator-help-swatches]: https://helpx.adobe.com/illustrator/using/using-creating-swatches.html +[illustrator]: https://www.adobe.com/products/illustrator +[inkscape-wiki-color-palette]: http://wiki.inkscape.org/wiki/index.php/ColorPalette +[inkscape]: https://inkscape.org +[krita-doc-color-palette]: https://docs.krita.org/Palette +[krita]: https://krita.org +[photoshop]: http://adobe.com/products/photoshop diff --git a/content/docs/usage/index.mdx b/content/docs/usage/index.mdx new file mode 100644 index 00000000..7e380996 --- /dev/null +++ b/content/docs/usage/index.mdx @@ -0,0 +1,163 @@ +import Button from "atoms/core/Button"; +import Link from "atoms/core/Link"; +import { ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements"; +import { ReactComponent as PaintBrush } from "assets/images/illustrations/paint-brush.svg"; +import { ROUTE_DOCS_COLOR_AND_PALETTES, ROUTE_DOCS_SWATCHES } from "config/routes/mappings"; + +export const frontmatter = { + title: "Installation and Usage", + subline: "Learn how to install Nord, integrate the palettes and use the colors in your own projects." +}; + + + + + + + + + + + +Nord comes in many formats to cover a wide range of project types and tech stacks. +It's colors and palettes have especially been designed for UI elements and code syntax highlighting often found in projects build with web technologies like websites. + +## Installation + +Since Nord if heavily used in web technology based projects, it's main installation method is therefore [**npm**][npm], the [Node.js][] package manager. + +Install and add it as production dependency by running `npm` from the command line: + +```sh +npm install --save nord +``` + +If you're using [**yarn**][yarn] instead of `npm` run the following command: + +```sh +yarn add nord +``` + +### From Source + +If you'd like to install Nord without `npm` or `yarn` you can use it from source by either [downloading individual source files][gh-tree-src] or [cloning the repository][gh]. + +## Usage + +Next to the available color swatches for your favorite applications, Nord is available in many module formats for various CSS [preprocessors][wiki-preproc]. + +### Sass + +[Sass][] is a mature, stable, and powerful professional grade CSS preprocessor and extension language. +Nord is available as [SCSS syntax module][sass-docs-scss] that can be imported using the [`@import`][sass-docs-import] @-rule that extends the [default CSS `@import`][mdn-css-@import] @-rule: + +```scss +@import "node_modules/nord/src/nord.scss"; + +body { + background-color: $nord0; + color: $nord8; +} +``` + +Please see the official [Sass syntax][sass-docs-syntax] documentation for more details about differences to the [indented Sass syntax][sass-docs-syntax-indented]. + +The [Sass module][gh-tree-sass] provides all Nord colors as [Sass variables][sass-docs-vars] from `$nord0` to `$nord15`. + +### Less + +[Less][] is a dynamic CSS preprocessor and extension language that was influenced by [Sass][] and has influenced the newer [SCSS syntax][sass-docs-scss]. +Nord can be [imported as Less module][less-docs-importing] using the [`@import`][sass-docs-import] @-rule that extends the [default CSS `@import`][mdn-css-@import] @-rule: + +```less +@import "node_modules/nord/src/nord.less"; + +body { + background-color: @nord0; + color: @nord8; +} +``` + +The [Less module][gh-tree-less] provides all Nord colors as [Less variables][less-docs-vars] from `@nord0` to `@nord15`. + +### Stylus + +[Stylus][] is a dynamic CSS preprocessor and extension language that was influenced by [Sass][] and [Less][]. +Nord can be imported as [Stylus module][stylus-docs-import] using the `@import` @-rule, which extends the [default CSS `@import`][mdn-css-@import] @-rule, or the Stylus specific [`@require`][stylus-docs-import-req] @-rule: + +```stylus +@import "node_modules/nord/src/nord.styl"; + +body { + background-color: @nord0; + color: @nord8; +} +``` + +The [Stylus module][gh-tree-stylus] provides all Nord colors as [Stylus variables][stylus-docs-vars] from `@nord0` to `@nord15`. + +### CSS + +The [CSS specification][w3-css-spec-vars] supports the definition of **custom properties**, often referred to as **CSS variables**, that contain specific values to be reused throughout a document. +They are set using custom property notation (e.g. `--nord8: #88c0d0;`) and are accessed using the CSS [`var()`][mdn-css-func-var] function (e.g. `color: var(--nord8);`). + +Nord can be imported as [CSS module][stylus-docs-import] using the [CSS `@import`][mdn-css-@import] @-rule: + +```css +@import "node_modules/nord/src/nord.css"; + +body { + background-color: var(--nord0); + color: var(--nord8); +} +``` + +If you're using the [PostCSS][] plugin [postcss-import][gh-postcss-import], Nord can be simply imported like any JavaScript module: + +```css +@import "nord"; +``` + +The [CSS module][gh-tree-css] provides all Nord colors as variables `--nord0` to `--nord15` nested inside the `:root` element selector. + +## Source Code Documentation + +The Sass module is documented using the [SassDoc][] comment syntax, a documentation system to build pretty and powerful docs from Sass files, while the Less and Stylus modules are documented using the [KSS][] comment syntax, a documentation syntax that is human readable, but just structured enough to be machine parsable. + +Both SassDoc and KSS can be used to generate a static, fully styled HTML document from the source code. Please see the [official SassDoc documentation on how to get started][sassdoc-docs-start] and the [official KSS documentation on how to create styleguides][kss-docs-styleguides] for more details. + + + +[gh-postcss-import]: https://github.com/postcss/postcss-import +[gh-tree-css]: https://github.com/arcticicestudio/nord/blob/develop/src/nord.css +[gh-tree-less]: https://github.com/arcticicestudio/nord/blob/develop/src/nord.less +[gh-tree-sass]: https://github.com/arcticicestudio/nord/blob/develop/src/nord.scss +[gh-tree-src]: https://github.com/arcticicestudio/nord/tree/develop/src +[gh-tree-stylus]: https://github.com/arcticicestudio/nord/blob/develop/src/nord.styl +[gh]: https://github.com/arcticicestudio/nord +[kss-docs-styleguides]: http://warpspire.com/kss/styleguides +[kss]: https://warpspire.com/kss +[less-docs-import-rule]: http://lesscss.org/features/#import-atrules-feature +[less-docs-importing]: http://lesscss.org/#importing +[less-docs-vars]: http://lesscss.org/features/#variables-feature +[less]: http://lesscss.org +[mdn-css-@import]: https://developer.mozilla.org/en-US/docs/Web/CSS/@import +[mdn-css-func-var]: https://developer.mozilla.org/en-US/docs/Web/CSS/var +[node.js]: https://nodejs.org +[npm]: https://www.npmjs.com +[postcss]: https://postcss.org +[sass-docs-import]: https://sass-lang.com/documentation/file.SASS_REFERENCE#import +[sass-docs-scss]: https://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS +[sass-docs-syntax-indented]: https://sass-lang.com/documentation/file.INDENTED_SYNTAX +[sass-docs-syntax]: https://sass-lang.com/documentation/file.SASS_REFERENCE#syntax +[sass-docs-vars]: https://sass-lang.com/documentation/file.SASS_REFERENCE#variables_ +[sass]: https://sass-lang.com +[sassdoc-docs-start]: http://sassdoc.com/getting-started +[sassdoc]: http://sassdoc.com +[stylus-docs-import-req]: http://stylus-lang.com/docs/import#require +[stylus-docs-import]: http://stylus-lang.com/docs/import +[stylus-docs-vars]: http://stylus-lang.com/docs/variables +[stylus]: http://stylus-lang.com +[w3-css-spec-vars]: https://www.w3.org/TR/css-variables +[wiki-preproc]: https://en.wikipedia.org/wiki/Preprocessor +[yarn]: https://yarnpkg.com diff --git a/src/components/atoms/core/html-elements/inline-text-semantics/Code.jsx b/src/components/atoms/core/html-elements/inline-text-semantics/Code.jsx index 93712387..0578ff03 100644 --- a/src/components/atoms/core/html-elements/inline-text-semantics/Code.jsx +++ b/src/components/atoms/core/html-elements/inline-text-semantics/Code.jsx @@ -37,7 +37,6 @@ const Code = styled.code` transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; ${Pre} & { - margin-bottom: 1em; display: block; padding: 1em; font-size: 0.9375em; diff --git a/src/components/organisms/page/blog/SectionBlogPosts/SectionBlogPosts.jsx b/src/components/organisms/page/blog/SectionBlogPosts/SectionBlogPosts.jsx deleted file mode 100644 index 65f05739..00000000 --- a/src/components/organisms/page/blog/SectionBlogPosts/SectionBlogPosts.jsx +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright (C) 2018-present Arctic Ice Studio - * Copyright (C) 2018-present Sven Greb - * - * Project: Nord Docs - * Repository: https://github.com/arcticicestudio/nord-docs - * License: MIT - */ - -import React from "react"; - -import { WaveFooter } from "atoms/core/vectors/divider"; -import Section, { Content } from "containers/core/Section"; -import EmptyState from "molecules/core/EmptyState"; - -import { emptyStateIllustrationStyles } from "../../shared/styles"; - -/** - * The component that represents the landing section of the blog posts page. - * - * @author Arctic Ice Studio - * @author Sven Greb - * @since 0.3.0 - */ -const SectionBlogPosts = () => ( -
- - - - -
-); - -export default SectionBlogPosts; diff --git a/src/components/organisms/page/blog/SectionBlogPosts/index.js b/src/components/organisms/page/blog/SectionBlogPosts/index.js deleted file mode 100644 index e9ca86c1..00000000 --- a/src/components/organisms/page/blog/SectionBlogPosts/index.js +++ /dev/null @@ -1,10 +0,0 @@ -/* - * Copyright (C) 2018-present Arctic Ice Studio - * Copyright (C) 2018-present Sven Greb - * - * Project: Nord Docs - * Repository: https://github.com/arcticicestudio/nord-docs - * License: MIT - */ - -export { default } from "./SectionBlogPosts"; diff --git a/src/components/organisms/page/blog/SectionBlogPostsCardGrid/SectionBlogPostsCardGrid.jsx b/src/components/organisms/page/blog/SectionBlogPostsCardGrid/SectionBlogPostsCardGrid.jsx index 69d99c97..b005e23f 100644 --- a/src/components/organisms/page/blog/SectionBlogPostsCardGrid/SectionBlogPostsCardGrid.jsx +++ b/src/components/organisms/page/blog/SectionBlogPostsCardGrid/SectionBlogPostsCardGrid.jsx @@ -50,9 +50,9 @@ const SectionBlogPostsCardGrid = ({ blogPosts, ...passProps }) => ( ) : ( )} diff --git a/src/components/organisms/page/docs/SectionContents/styled/ContentsCard/ContentsCard.jsx b/src/components/organisms/page/docs/SectionContents/styled/ContentsCard/ContentsCard.jsx index df29fef4..647a717e 100644 --- a/src/components/organisms/page/docs/SectionContents/styled/ContentsCard/ContentsCard.jsx +++ b/src/components/organisms/page/docs/SectionContents/styled/ContentsCard/ContentsCard.jsx @@ -61,12 +61,14 @@ ContentsCard.propTypes = { accentColor: PropTypes.string.isRequired, children: PropTypes.node.isRequired, svgType: PropTypes.string, - topics: PropTypes.shape({ - iconComponent: PropTypes.node, - svgType: PropTypes.string, - title: PropTypes.string, - url: PropTypes.string - }).isRequired + topics: PropTypes.arrayOf( + PropTypes.shape({ + iconComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.node]).isRequired, + svgType: PropTypes.string, + title: PropTypes.string, + url: PropTypes.string + }) + ).isRequired }; ContentsCard.defaultProps = { diff --git a/src/components/organisms/page/docs/shared/propTypes.js b/src/components/organisms/page/docs/shared/propTypes.js index b6daacb5..802628a9 100644 --- a/src/components/organisms/page/docs/shared/propTypes.js +++ b/src/components/organisms/page/docs/shared/propTypes.js @@ -17,14 +17,14 @@ import PropTypes from "prop-types"; const cardBasePropTypes = { - logoComponent: PropTypes.node.isRequired, + logoComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.node]).isRequired, title: PropTypes.string.isRequired }; const cardIconPropTypes = { accentColor: PropTypes.string.isRequired, - iconComponent: PropTypes.node.isRequired, - svgType: PropTypes.string.isRequired + iconComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.node]).isRequired, + svgType: PropTypes.string }; export { cardBasePropTypes, cardIconPropTypes }; diff --git a/src/config/routes/constants.js b/src/config/routes/constants.js index 4b6695e7..000f5941 100644 --- a/src/config/routes/constants.js +++ b/src/config/routes/constants.js @@ -43,7 +43,7 @@ const BASE_PUBLIC_URL = process.env.NORD_DOCS_BASE_PUBLIC_URL || `${metadataNord const ROOT = pathSeparator; /** - * The route name of the "blog" page. + * The route name of the `blog` page. * * @constant {string} * @since 0.1.0 @@ -51,7 +51,7 @@ const ROOT = pathSeparator; const BLOG = "blog"; /** - * The route name of the "community" page. + * The route name of the `community` page. * * @constant {string} * @since 0.3.0 @@ -59,13 +59,37 @@ const BLOG = "blog"; const COMMUNITY = "community"; /** - * The route name of the "docs" page. + * The route name of the `docs` page. * * @constant {string} * @since 0.1.0 */ const DOCS = "docs"; +/** + * The route name of the `docs` page about Nord's colors and palettes. + * + * @constant {string} + * @since 0.11.0 + */ +const DOCS_COLORS_AND_PALETTES = "colors-and-palettes"; + +/** + * The route name of the `docs` page about Nord's color swatches. + * + * @constant {string} + * @since 0.11.0 + */ +const DOCS_SWATCHES = "swatches"; + +/** + * The route name of the `docs` page about Nord's installation and usage. + * + * @constant {string} + * @since 0.11.0 + */ +const DOCS_USAGE = "usage"; + /** * The route name of the landing page. * Alias that will be redirected to the {@link ROOT} route. @@ -88,6 +112,9 @@ module.exports = { BLOG, COMMUNITY, DOCS, + DOCS_COLORS_AND_PALETTES, + DOCS_SWATCHES, + DOCS_USAGE, LANDING, PORTS, ROOT diff --git a/src/config/routes/mappings.js b/src/config/routes/mappings.js index 2d9b11e0..3858cda9 100644 --- a/src/config/routes/mappings.js +++ b/src/config/routes/mappings.js @@ -14,7 +14,17 @@ * @since 0.1.0 */ -const { BLOG, COMMUNITY, DOCS, LANDING, PORTS, ROOT } = require("./constants"); +const { + BLOG, + COMMUNITY, + DOCS, + DOCS_COLORS_AND_PALETTES, + DOCS_SWATCHES, + DOCS_USAGE, + LANDING, + PORTS, + ROOT +} = require("./constants"); /** * The root route mapping. @@ -25,7 +35,7 @@ const { BLOG, COMMUNITY, DOCS, LANDING, PORTS, ROOT } = require("./constants"); const ROUTE_ROOT = ROOT; /** - * The route mapping for the "blog" page. + * The route mapping for the `blog` page. * * @constant {string} * @since 0.1.0 @@ -33,7 +43,7 @@ const ROUTE_ROOT = ROOT; const ROUTE_BLOG = ROUTE_ROOT + BLOG; /** - * The route mapping for the "community" page. + * The route mapping for the `community` page. * * @constant {string} * @since 0.3.0 @@ -41,16 +51,40 @@ const ROUTE_BLOG = ROUTE_ROOT + BLOG; const ROUTE_COMMUNITY = ROUTE_ROOT + COMMUNITY; /** - * The route mapping for the "docs" page. + * The route mapping for the `docs` page. * * @constant {string} * @since 0.1.0 */ const ROUTE_DOCS = ROUTE_ROOT + DOCS; +/** + * The route mapping for the `docs` page about Nord's colors and palettes. + * + * @constant {string} + * @since 0.11.0 + */ +const ROUTE_DOCS_COLOR_AND_PALETTES = `${ROUTE_ROOT}${DOCS}/${DOCS_COLORS_AND_PALETTES}`; + +/** + * The route mapping for the `docs` page about Nord's color swatches. + * + * @constant {string} + * @since 0.11.0 + */ +const ROUTE_DOCS_SWATCHES = `${ROUTE_ROOT}${DOCS}/${DOCS_SWATCHES}`; + +/** + * The route mapping for the `docs` page about Nord's installation and usage. + * + * @constant {string} + * @since 0.11.0 + */ +const ROUTE_DOCS_USAGE = `${ROUTE_ROOT}${DOCS}/${DOCS_USAGE}`; + /** * The route mapping for the landing page. - * Alias that will be redirected to {@link ROUTE_ROOT}. + * Alias that will be redirected to `${ROUTE_ROOT}`. * * @constant {string} * @since 0.1.0 @@ -90,6 +124,9 @@ module.exports = { ROUTE_BLOG, ROUTE_COMMUNITY, ROUTE_DOCS, + ROUTE_DOCS_COLOR_AND_PALETTES, + ROUTE_DOCS_SWATCHES, + ROUTE_DOCS_USAGE, ROUTE_LANDING, ROUTE_PORTS, ROUTE_ROOT, diff --git a/src/data/components/organisms/core/Footer/sitemapCategories.js b/src/data/components/organisms/core/Footer/sitemapCategories.js index 147b492f..6a3a687b 100644 --- a/src/data/components/organisms/core/Footer/sitemapCategories.js +++ b/src/data/components/organisms/core/Footer/sitemapCategories.js @@ -7,7 +7,16 @@ * License: MIT */ -import { ROUTE_BLOG, ROUTE_COMMUNITY, ROUTE_DOCS, ROUTE_PORTS, ROUTE_ROOT } from "config/routes/mappings"; +import { + ROUTE_BLOG, + ROUTE_COMMUNITY, + ROUTE_DOCS, + ROUTE_DOCS_COLOR_AND_PALETTES, + ROUTE_DOCS_SWATCHES, + ROUTE_DOCS_USAGE, + ROUTE_PORTS, + ROUTE_ROOT +} from "config/routes/mappings"; import { sectionIdFor } from "utils"; /** @@ -38,8 +47,9 @@ const sitemapCategories = [ name: "Docs", url: ROUTE_DOCS, links: [ - { title: "Getting Started", url: `${ROUTE_DOCS}#${sectionIdFor(ROUTE_DOCS, 1)}` }, - { title: "References", url: `${ROUTE_DOCS}#${sectionIdFor(ROUTE_DOCS, 1)}` } + { title: "Installation & Usage", url: ROUTE_DOCS_USAGE }, + { title: "Colors & Palettes", url: ROUTE_DOCS_COLOR_AND_PALETTES }, + { title: "Color Swatches", url: ROUTE_DOCS_SWATCHES } ] }, { diff --git a/src/data/components/organisms/page/docs/SectionContents/topics.js b/src/data/components/organisms/page/docs/SectionContents/topics.js index 7ccb0b55..d4cbcd2b 100644 --- a/src/data/components/organisms/page/docs/SectionContents/topics.js +++ b/src/data/components/organisms/page/docs/SectionContents/topics.js @@ -8,6 +8,7 @@ */ import { Code, CodeDownload, Compass, Pantone, Layout, Terminal } from "atoms/core/vectors/icons"; +import { ROUTE_DOCS_COLOR_AND_PALETTES, ROUTE_DOCS_SWATCHES, ROUTE_DOCS_USAGE } from "config/routes/mappings"; /** * The mapping of topics for the "Getting Started" contents cards. @@ -19,15 +20,18 @@ import { Code, CodeDownload, Compass, Pantone, Layout, Terminal } from "atoms/co const topicsGettingStarted = [ { iconComponent: Compass, - title: "Learn about the colors and palettes" + title: "Learn about the colors and palettes", + url: ROUTE_DOCS_COLOR_AND_PALETTES }, { iconComponent: Pantone, - title: "Use native swatches for your favorite applications" + title: "Use native swatches for your favorite applications", + url: ROUTE_DOCS_SWATCHES }, { iconComponent: CodeDownload, - title: "Include Nord in your own project" + title: "Include Nord in your own project", + url: ROUTE_DOCS_USAGE } ];