diff --git a/src/components/organisms/page/docs/ports/dircolors/SectionContents/SectionContents.jsx b/src/components/organisms/page/docs/ports/dircolors/SectionContents/SectionContents.jsx new file mode 100644 index 00000000..b2ae8a6e --- /dev/null +++ b/src/components/organisms/page/docs/ports/dircolors/SectionContents/SectionContents.jsx @@ -0,0 +1,53 @@ +/* + * 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 { BookOpen, Zap } from "atoms/core/vectors/icons"; +import { ROUTE_DOCS_PORTS_DIRCOLORS } from "config/routes/mappings"; +import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/ports/dircolors/topics"; +import { sectionIdFor } from "utils"; +import { colors } from "styles/theme"; + +import { ContentsCard, CardGrid } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_DIRCOLORS, 1); + +/** + * The component that represents the contents section of the docs page for the "Nord dircolors" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const SectionContents = () => ( +
+ + + + Learn how to install and activate the theme. + + + Learn about supported file and node types and how to deal with occurring problems. + + + + +
+); + +export default SectionContents; diff --git a/src/components/organisms/page/docs/ports/dircolors/SectionContents/index.js b/src/components/organisms/page/docs/ports/dircolors/SectionContents/index.js new file mode 100644 index 00000000..a1d6d5e4 --- /dev/null +++ b/src/components/organisms/page/docs/ports/dircolors/SectionContents/index.js @@ -0,0 +1,10 @@ +/* + * 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 "./SectionContents"; diff --git a/src/components/organisms/page/docs/ports/dircolors/SectionHero/SectionHero.jsx b/src/components/organisms/page/docs/ports/dircolors/SectionHero/SectionHero.jsx new file mode 100644 index 00000000..a00fe157 --- /dev/null +++ b/src/components/organisms/page/docs/ports/dircolors/SectionHero/SectionHero.jsx @@ -0,0 +1,39 @@ +/* + * 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 Section, { Content } from "containers/core/Section"; +import { ROUTE_DOCS_PORTS_DIRCOLORS } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +import { Headline, Subline } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_DIRCOLORS, 0); + +/** + * The component that represents the hero section of the docs page for the "Nord dircolors" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const SectionHero = () => ( +
+ + Nord dircolors + + Documentations to get to know the theme, supported features, how to use the theme and find solution for possible + problems. + + +
+); + +export default SectionHero; diff --git a/src/components/organisms/page/docs/ports/dircolors/SectionHero/index.js b/src/components/organisms/page/docs/ports/dircolors/SectionHero/index.js new file mode 100644 index 00000000..f15e7dce --- /dev/null +++ b/src/components/organisms/page/docs/ports/dircolors/SectionHero/index.js @@ -0,0 +1,10 @@ +/* + * 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 "./SectionHero"; diff --git a/src/components/organisms/page/docs/ports/dircolors/index.js b/src/components/organisms/page/docs/ports/dircolors/index.js new file mode 100644 index 00000000..b2a25e2a --- /dev/null +++ b/src/components/organisms/page/docs/ports/dircolors/index.js @@ -0,0 +1,13 @@ +/* + * 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 SectionContents from "./SectionContents"; +import SectionHero from "./SectionHero"; + +export { SectionContents, SectionHero }; diff --git a/src/components/organisms/page/ports/dircolors/SectionHero/SectionHero.jsx b/src/components/organisms/page/ports/dircolors/SectionHero/SectionHero.jsx index 4b999031..1ac0e22b 100644 --- a/src/components/organisms/page/ports/dircolors/SectionHero/SectionHero.jsx +++ b/src/components/organisms/page/ports/dircolors/SectionHero/SectionHero.jsx @@ -8,16 +8,26 @@ */ import React from "react"; -import { css } from "styled-components"; -import { WaveFooter } from "atoms/core/vectors/divider"; -import { P } from "atoms/core/html-elements"; +import Button from "atoms/core/Button"; import Link from "atoms/core/Link"; -import Section, { Content } from "containers/core/Section"; -import EmptyState from "molecules/core/EmptyState"; +import { Code } from "atoms/core/html-elements"; +import { Image } from "atoms/core/mdx-elements"; +import { Content } from "containers/core/Section"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { + ROUTE_DOCS_PORTS_DIRCOLORS, + ROUTE_DOCS_PORTS_DIRCOLORS_INSTALLATION, + ROUTE_PORTS_DIRCOLORS +} from "config/routes/mappings"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; +import { sectionIdFor } from "utils"; import { usePortsMetadata } from "hooks"; -import { emptyStateIllustrationStyles } from "../../../shared/styles"; +import { Section } from "../../../shared"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_DIRCOLORS, 0); /** * The component that represents the hero section for the landing page of the "Nord dircolors" port project. @@ -26,32 +36,61 @@ import { emptyStateIllustrationStyles } from "../../../shared/styles"; * @author Sven Greb * @since 0.9.0 */ -export default function SectionHero() { +const SectionHero = ({ assets }) => { const portMetadata = usePortsMetadata(); - const { gitHubRepositoryUrl } = portMetadata.find(port => port.name === "nord-dircolors"); + const { gitHubRepositoryUrl, projectUrl } = portMetadata.find(port => port.name === "nord-dircolors"); return ( -
- - -

- In the meantime, please see the official{" "} - - repository on GitHub - {" "} - for information about Nord dircolors. -

+
+ + + + Nord dircolors + + An arctic, north-bluish clean and elegant dircolors theme. + + + Sets up colorized output for GNU core utils like{" "} + + ls + {" "} + and{" "} + + tree + {" "} + as well as other modern apps like{" "} + + fd + {" "} + that respect the LS_COLORS environment variable. + + + + + + + + + Screenshot showing an overview of various file and node types colorized by Nord + + - +
); -} +}; + +SectionHero.propTypes = usePortsAssetsPropTypes; + +export default SectionHero; diff --git a/src/components/organisms/page/ports/dircolors/SectionHero/styled/WaveDivider.jsx b/src/components/organisms/page/ports/dircolors/SectionHero/styled/WaveDivider.jsx new file mode 100644 index 00000000..a4d9e9e2 --- /dev/null +++ b/src/components/organisms/page/ports/dircolors/SectionHero/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * 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 styled from "styled-components"; + +import { WaveSmooth2 } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "smooth" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const WaveDivider = styled(WaveSmooth2)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/dircolors/SectionIntroduction/SectionIntroduction.jsx b/src/components/organisms/page/ports/dircolors/SectionIntroduction/SectionIntroduction.jsx new file mode 100644 index 00000000..86830502 --- /dev/null +++ b/src/components/organisms/page/ports/dircolors/SectionIntroduction/SectionIntroduction.jsx @@ -0,0 +1,158 @@ +/* + * 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 Link from "atoms/core/Link"; +import { Content } from "containers/core/Section"; +import FeatureDuo, { Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_PORTS_DIRCOLORS } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Image } from "atoms/core/mdx-elements"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; + +import { Section } from "../../../shared"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_DIRCOLORS, 1); + +/** + * The component that represents the introduction section for the landing page of the "Nord dircolors" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const SectionIntroduction = ({ assets }) => ( +
+ + + + Beautiful highlighting for all your bits and bytes. + + Support for a wide range of data and node types — From symbolic links, executables up to file system + permissions. + + + + Screenshot showing different link types like symbolic and hard links + + Different link types like symbolic and{" "} + hard links. + + + + + + + Screenshot showing directories with different file system permissions + + Directories with different{" "} + file system permissions. + + + + + + Styles for different{" "} + file system permissions. + + + + + + + Various Unix file types like{" "} + device files and{" "} + domain sockets. + + + + Screenshot showing various Unix file types + + + + + Screenshot showing files with different capabilities. + + + + Capabilities are also styled to be more prominent. + + + + + + + Recognize executables at a glance. + + + + Screenshot showing executable files + + + + + Screenshot showing file extensions for multimedia files + + + Support for many file extensions like common multimedia files… + + + + + …and file ignore pattern. + + + Screenshot showing ignore pattern files + + + + +
+); + +SectionIntroduction.propTypes = usePortsAssetsPropTypes; + +export default SectionIntroduction; diff --git a/src/components/organisms/page/ports/dircolors/SectionIntroduction/index.js b/src/components/organisms/page/ports/dircolors/SectionIntroduction/index.js new file mode 100644 index 00000000..a20aba6f --- /dev/null +++ b/src/components/organisms/page/ports/dircolors/SectionIntroduction/index.js @@ -0,0 +1,10 @@ +/* + * 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 "./SectionIntroduction"; diff --git a/src/components/organisms/page/ports/dircolors/SectionIntroduction/styled/WaveDivider.jsx b/src/components/organisms/page/ports/dircolors/SectionIntroduction/styled/WaveDivider.jsx new file mode 100644 index 00000000..1bd5d827 --- /dev/null +++ b/src/components/organisms/page/ports/dircolors/SectionIntroduction/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * 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 styled from "styled-components"; + +import { WaveRough } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "rough" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const WaveDivider = styled(WaveRough)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/dircolors/SectionSetup/SectionSetup.jsx b/src/components/organisms/page/ports/dircolors/SectionSetup/SectionSetup.jsx new file mode 100644 index 00000000..21fe2555 --- /dev/null +++ b/src/components/organisms/page/ports/dircolors/SectionSetup/SectionSetup.jsx @@ -0,0 +1,70 @@ +/* + * 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 Button from "atoms/core/Button"; +import { WaveFooter } from "atoms/core/vectors/divider"; +import { Content } from "containers/core/Section"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_DOCS_PORTS_DIRCOLORS, ROUTE_PORTS_DIRCOLORS } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Image } from "atoms/core/mdx-elements"; +import { usePortsMetadata } from "hooks"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; + +import { Section } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_DIRCOLORS, 2); + +/** + * The component that represents the setup section for the landing page of the "Nord dircolors" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const SectionSetup = ({ assets }) => { + const portMetadata = usePortsMetadata(); + const { gitHubRepositoryUrl } = portMetadata.find(port => port.name === "nord-dircolors"); + + return ( +
+ + + + Installation in one line of code. + Download and install Nord in one line of code added to your shell configuration file. + + + + + + + Screenshot showing an example of a shell configuration file to load Nord through dircolors + + + + +
+ ); +}; + +SectionSetup.propTypes = usePortsAssetsPropTypes; + +export default SectionSetup; diff --git a/src/components/organisms/page/ports/dircolors/SectionSetup/index.js b/src/components/organisms/page/ports/dircolors/SectionSetup/index.js new file mode 100644 index 00000000..6e5d7ddb --- /dev/null +++ b/src/components/organisms/page/ports/dircolors/SectionSetup/index.js @@ -0,0 +1,10 @@ +/* + * 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 "./SectionSetup"; diff --git a/src/components/organisms/page/ports/dircolors/SectionSetup/styled/WaveDivider.jsx b/src/components/organisms/page/ports/dircolors/SectionSetup/styled/WaveDivider.jsx new file mode 100644 index 00000000..a4d9e9e2 --- /dev/null +++ b/src/components/organisms/page/ports/dircolors/SectionSetup/styled/WaveDivider.jsx @@ -0,0 +1,32 @@ +/* + * 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 styled from "styled-components"; + +import { WaveSmooth2 } from "atoms/core/vectors/divider"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const fillColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A "smooth" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const WaveDivider = styled(WaveSmooth2)` + fill: ${fillColor}; + transition: fill ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default WaveDivider; diff --git a/src/components/organisms/page/ports/dircolors/index.js b/src/components/organisms/page/ports/dircolors/index.js index 1e6f3a77..6f35c57b 100644 --- a/src/components/organisms/page/ports/dircolors/index.js +++ b/src/components/organisms/page/ports/dircolors/index.js @@ -8,6 +8,7 @@ */ import SectionHero from "./SectionHero"; +import SectionIntroduction from "./SectionIntroduction"; +import SectionSetup from "./SectionSetup"; -/* eslint-disable-next-line import/prefer-default-export */ -export { SectionHero }; +export { SectionHero, SectionIntroduction, SectionSetup }; diff --git a/src/config/routes/mappings.js b/src/config/routes/mappings.js index 7e9553f9..e7d09a09 100644 --- a/src/config/routes/mappings.js +++ b/src/config/routes/mappings.js @@ -58,6 +58,30 @@ const ROUTE_COMMUNITY = ROUTE_ROOT + COMMUNITY; */ const ROUTE_DOCS = ROUTE_ROOT + DOCS; +/** + * The route mapping for the docs page of the "Nord dircolors" port project. + * + * @constant {string} + * @since 0.18.0 + */ +const ROUTE_DOCS_PORTS_DIRCOLORS = `${ROUTE_ROOT}${DOCS}/${PORTS}/dircolors`; + +/** + * The route mapping for the installation docs page of the "Nord dircolors" port project. + * + * @constant {string} + * @since 0.18.0 + */ +const ROUTE_DOCS_PORTS_DIRCOLORS_INSTALLATION = `${ROUTE_DOCS_PORTS_DIRCOLORS}/installation`; + +/** + * The route mapping for the theme plugin support docs page of the "Nord dircolors" port project. + * + * @constant {string} + * @since 0.18.0 + */ +const ROUTE_DOCS_PORTS_DIRCOLORS_TYPE_SUPPORT = `${ROUTE_DOCS_PORTS_DIRCOLORS}/type-support`; + /** * The route mapping for the docs page of the "Nord Emacs" port project. * @@ -283,6 +307,14 @@ const ROUTE_LANDING = ROUTE_ROOT + LANDING; */ const ROUTE_PORTS = ROUTE_ROOT + PORTS; +/** + * The route mapping for the "Nord dircolors" port project page. + * + * @constant {string} + * @since 0.18.0 + */ +const ROUTE_PORTS_DIRCOLORS = `${ROUTE_ROOT}/${PORTS}/dircolors`; + /** * The route mapping for the "Nord Emacs" port project page. * @@ -332,11 +364,13 @@ const ROUTE_PORTS_VISUAL_STUDIO_CODE = `${ROUTE_ROOT}/${PORTS}/visual-studio-cod const SECTION_COMPONENT_IDS = { [ROUTE_COMMUNITY]: ["hero", "chat-channels", "content"], [ROUTE_DOCS]: ["hero", "contents"], + [ROUTE_DOCS_PORTS_DIRCOLORS]: ["hero", "contents"], [ROUTE_DOCS_PORTS_EMACS]: ["hero", "contents"], [ROUTE_DOCS_PORTS_JETBRAINS]: ["hero", "contents"], [ROUTE_DOCS_PORTS_TMUX]: ["hero", "contents"], [ROUTE_DOCS_PORTS_VIM]: ["hero", "contents"], [ROUTE_PORTS]: ["hero", "search"], + [ROUTE_PORTS_DIRCOLORS]: ["hero", "introduction", "setup"], [ROUTE_PORTS_EMACS]: ["hero", "introduction", "syntax", "editor-details", "configurations", "setup"], [ROUTE_PORTS_JETBRAINS]: ["hero", "introduction", "syntax", "editor-details", "ui-elements", "setup"], [ROUTE_PORTS_TMUX]: ["hero", "introduction", "ui-elements", "plugin-support", "configurations", "setup"], @@ -357,6 +391,9 @@ module.exports = { ROUTE_BLOG, ROUTE_COMMUNITY, ROUTE_DOCS_COLOR_AND_PALETTES, + ROUTE_DOCS_PORTS_DIRCOLORS, + ROUTE_DOCS_PORTS_DIRCOLORS_INSTALLATION, + ROUTE_DOCS_PORTS_DIRCOLORS_TYPE_SUPPORT, ROUTE_DOCS_PORTS_EMACS, ROUTE_DOCS_PORTS_EMACS_CONFIGURATION, ROUTE_DOCS_PORTS_EMACS_DEVELOPMENT, @@ -384,6 +421,7 @@ module.exports = { ROUTE_DOCS_USAGE, ROUTE_DOCS, ROUTE_LANDING, + ROUTE_PORTS_DIRCOLORS, ROUTE_PORTS_EMACS, ROUTE_PORTS_JETBRAINS, ROUTE_PORTS_TMUX, diff --git a/src/data/components/organisms/page/docs/ports/dircolors/topics.js b/src/data/components/organisms/page/docs/ports/dircolors/topics.js new file mode 100644 index 00000000..eab37d9f --- /dev/null +++ b/src/data/components/organisms/page/docs/ports/dircolors/topics.js @@ -0,0 +1,52 @@ +/* + * 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 { CloudDownload, QuestionMarkCircle, Target } from "atoms/core/vectors/icons"; +import { + ROUTE_DOCS_PORTS_DIRCOLORS_INSTALLATION, + ROUTE_DOCS_PORTS_DIRCOLORS_TYPE_SUPPORT +} from "config/routes/mappings"; + +/** + * The mapping of topics for the "Getting Started" contents cards of the "Nord dircolors" docs page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const topicsGettingStarted = [ + { + iconComponent: CloudDownload, + iconOutlined: true, + title: "Install and activate the theme", + url: ROUTE_DOCS_PORTS_DIRCOLORS_INSTALLATION + } +]; + +/** + * The mapping of topics for the "References" contents cards of the "Nord dircolors" docs page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const topicsReferences = [ + { + iconComponent: Target, + svgType: "stroke", + title: "Supported file and node types", + url: ROUTE_DOCS_PORTS_DIRCOLORS_TYPE_SUPPORT + }, + { + iconComponent: QuestionMarkCircle, + title: "Troubleshooting Guide" + } +]; + +export { topicsGettingStarted, topicsReferences }; diff --git a/src/data/ports.js b/src/data/ports.js index c318bfac..0c72b870 100644 --- a/src/data/ports.js +++ b/src/data/ports.js @@ -109,8 +109,7 @@ const ports = [ name: "nord-dircolors", projectName: "dircolors", logoComponent: CommonTerminal, - projectUrl: - "https://www.gnu.org/software/coreutils/manual/html_node/dircolors-invocation.html#dircolors-invocation", + projectUrl: "https://www.gnu.org/software/coreutils/manual/html_node/dircolors-invocation.html", searchTerms: [...tokensTerminal, "dircolors", "gnu", "ls"] }, { diff --git a/src/pages/docs/ports/dircolors/index.jsx b/src/pages/docs/ports/dircolors/index.jsx new file mode 100644 index 00000000..15cf22c1 --- /dev/null +++ b/src/pages/docs/ports/dircolors/index.jsx @@ -0,0 +1,35 @@ +/* + * 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 { locationPropTypes } from "data/pages/shared/propTypes"; +import BaseLayout from "layouts/core/BaseLayout"; +import { DocsPage } from "organisms/page/docs"; +import { SectionContents, SectionHero } from "organisms/page/docs/ports/dircolors"; + +/** + * The component that represents the docs page of the "Nord dircolors" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.18.0 + */ +const DircolorsDocs = ({ location: { pathname } }) => ( + + + + + + +); + +DircolorsDocs.propTypes = locationPropTypes; + +export default DircolorsDocs; diff --git a/src/pages/ports/dircolors.jsx b/src/pages/ports/dircolors.jsx index 20e1affe..006e55fd 100644 --- a/src/pages/ports/dircolors.jsx +++ b/src/pages/ports/dircolors.jsx @@ -11,7 +11,8 @@ import React from "react"; import { locationPropTypes } from "data/pages/shared/propTypes"; import BaseLayout from "layouts/core/BaseLayout"; -import { SectionHero } from "organisms/page/ports/dircolors"; +import { SectionHero, SectionIntroduction, SectionSetup } from "organisms/page/ports/dircolors"; +import { usePortsAssets } from "hooks"; /** * The component that represents the landing page of the "Nord dircolors" port project. @@ -20,11 +21,17 @@ import { SectionHero } from "organisms/page/ports/dircolors"; * @author Sven Greb * @since 0.9.0 */ -const Dircolors = ({ location: { pathname } }) => ( - - - -); +const Dircolors = ({ location: { pathname } }) => { + const assets = usePortsAssets("dircolors"); + + return ( + + + + + + ); +}; Dircolors.propTypes = locationPropTypes;