From 694a14fc552b42f1190b83e7fe4384901fed5413 Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Tue, 30 Jul 2019 14:19:06 +0200 Subject: [PATCH] Implement landing and doc page for "Nord Atom Syntax" This includes the initial sections for features and basic documentation pages. GH-168 --- .../docs/ports/atom-ui/development/index.mdx | 2 +- .../SectionContents/SectionContents.jsx | 53 ++++++++ .../atom-syntax/SectionContents/index.js | 10 ++ .../atom-syntax/SectionHero/SectionHero.jsx | 39 ++++++ .../ports/atom-syntax/SectionHero/index.js | 10 ++ .../page/docs/ports/atom-syntax/index.js | 13 ++ .../SectionEditorDetails.jsx | 96 ++++++++++++++ .../atom-syntax/SectionEditorDetails/index.js | 10 ++ .../styled/WaveDivider.jsx | 32 +++++ .../atom-syntax/SectionHero/SectionHero.jsx | 86 ++++++++----- .../SectionHero/styled/WaveDivider.jsx | 32 +++++ .../SectionIntroduction.jsx | 59 +++++++++ .../atom-syntax/SectionIntroduction/index.js | 10 ++ .../styled/WaveDivider.jsx | 32 +++++ .../SectionPackageSupport.jsx | 64 ++++++++++ .../SectionPackageSupport/index.js | 10 ++ .../styled/WaveDivider.jsx | 32 +++++ .../atom-syntax/SectionSetup/SectionSetup.jsx | 81 ++++++++++++ .../ports/atom-syntax/SectionSetup/index.js | 10 ++ .../SectionSetup/styled/WaveDivider.jsx | 32 +++++ .../SectionSyntax/SectionSyntax.jsx | 117 ++++++++++++++++++ .../ports/atom-syntax/SectionSyntax/index.js | 10 ++ .../SectionSyntax/styled/WaveDivider.jsx | 32 +++++ .../organisms/page/ports/atom-syntax/index.js | 8 +- .../ports/atom-ui/SectionHero/SectionHero.jsx | 6 +- src/config/routes/mappings.js | 65 ++++++++++ .../page/docs/ports/atom-syntax/topics.js | 56 +++++++++ src/data/ports.js | 1 + src/pages/docs/ports/atom-syntax/index.jsx | 35 ++++++ src/pages/docs/ports/atom-ui/index.jsx | 6 +- src/pages/ports/atom-syntax.jsx | 28 ++++- 31 files changed, 1035 insertions(+), 42 deletions(-) create mode 100644 src/components/organisms/page/docs/ports/atom-syntax/SectionContents/SectionContents.jsx create mode 100644 src/components/organisms/page/docs/ports/atom-syntax/SectionContents/index.js create mode 100644 src/components/organisms/page/docs/ports/atom-syntax/SectionHero/SectionHero.jsx create mode 100644 src/components/organisms/page/docs/ports/atom-syntax/SectionHero/index.js create mode 100644 src/components/organisms/page/docs/ports/atom-syntax/index.js create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/SectionEditorDetails.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/index.js create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionHero/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionIntroduction/SectionIntroduction.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionIntroduction/index.js create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionIntroduction/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/SectionPackageSupport.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/index.js create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionSetup/SectionSetup.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionSetup/index.js create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionSetup/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionSyntax/SectionSyntax.jsx create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionSyntax/index.js create mode 100644 src/components/organisms/page/ports/atom-syntax/SectionSyntax/styled/WaveDivider.jsx create mode 100644 src/data/components/organisms/page/docs/ports/atom-syntax/topics.js create mode 100644 src/pages/docs/ports/atom-syntax/index.jsx diff --git a/content/docs/ports/atom-ui/development/index.mdx b/content/docs/ports/atom-ui/development/index.mdx index 642e2d4f..766a2b3d 100644 --- a/content/docs/ports/atom-ui/development/index.mdx +++ b/content/docs/ports/atom-ui/development/index.mdx @@ -95,7 +95,7 @@ Afterwards **restart Atom** to check that the _Nord Atom UI_ theme has been regi ## Dev Mode -Start Atom in the [„Dev Mode“][atom-docs-hack-debug] using the `--dev`/`-d` CLI flag to to detect and load all registered development packages. This enables [auto reload („hot reload“)][atom-docs-hack-debug-hotreload] for registered development packages to immediately see saved changes of any of the package's source code files. +Start Atom in the [„Dev Mode“][atom-docs-hack-theme-ui] using the `--dev`/`-d` CLI flag to detect and load all registered development packages as well as [enabling more debugging utilities][atom-docs-hack-debug]. This enables [auto reload („hot reload“)][atom-docs-hack-debug-hotreload] to immediately see saved changes of any of the package's source code files. ```sh atom --dev diff --git a/src/components/organisms/page/docs/ports/atom-syntax/SectionContents/SectionContents.jsx b/src/components/organisms/page/docs/ports/atom-syntax/SectionContents/SectionContents.jsx new file mode 100644 index 00000000..19706117 --- /dev/null +++ b/src/components/organisms/page/docs/ports/atom-syntax/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_ATOM_SYNTAX } from "config/routes/mappings"; +import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/ports/atom-syntax/topics"; +import { sectionIdFor } from "utils"; +import { colors } from "styles/theme"; + +import { ContentsCard, CardGrid } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_ATOM_SYNTAX, 1); + +/** + * The component that represents the contents section of the docs page for the "Nord Atom Syntax" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const SectionContents = () => ( +
+ + + + Learn how to install, activate and develop the package. + + + Learn about supported languages, packages and how to deal with occurring problems. + + + + +
+); + +export default SectionContents; diff --git a/src/components/organisms/page/docs/ports/atom-syntax/SectionContents/index.js b/src/components/organisms/page/docs/ports/atom-syntax/SectionContents/index.js new file mode 100644 index 00000000..a1d6d5e4 --- /dev/null +++ b/src/components/organisms/page/docs/ports/atom-syntax/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/atom-syntax/SectionHero/SectionHero.jsx b/src/components/organisms/page/docs/ports/atom-syntax/SectionHero/SectionHero.jsx new file mode 100644 index 00000000..16384809 --- /dev/null +++ b/src/components/organisms/page/docs/ports/atom-syntax/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_ATOM_SYNTAX } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +import { Headline, Subline } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_ATOM_SYNTAX, 0); + +/** + * The component that represents the hero section of the docs page for the "Nord Atom Syntax" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const SectionHero = () => ( +
+ + Nord Atom Syntax + + Documentations to get to know the theme and supported features, how to use the package or to find solution for + possible problems. + + +
+); + +export default SectionHero; diff --git a/src/components/organisms/page/docs/ports/atom-syntax/SectionHero/index.js b/src/components/organisms/page/docs/ports/atom-syntax/SectionHero/index.js new file mode 100644 index 00000000..f15e7dce --- /dev/null +++ b/src/components/organisms/page/docs/ports/atom-syntax/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/atom-syntax/index.js b/src/components/organisms/page/docs/ports/atom-syntax/index.js new file mode 100644 index 00000000..b2a25e2a --- /dev/null +++ b/src/components/organisms/page/docs/ports/atom-syntax/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/atom-syntax/SectionEditorDetails/SectionEditorDetails.jsx b/src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/SectionEditorDetails.jsx new file mode 100644 index 00000000..38e4e758 --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/SectionEditorDetails.jsx @@ -0,0 +1,96 @@ +/* + * 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 { Content } from "containers/core/Section"; +import FeatureDuo, { Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_PORTS_ATOM_SYNTAX } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Video } 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_ATOM_SYNTAX, 3); + +/** + * The component that represents the editor details section for the landing page of the "Nord Atom Syntax" port + * project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const SectionEditorDetails = ({ assets }) => ( +
+ + + + Small details with unobtrusive styles. + + Popular and common code editor features like search result marker and brace matching are designed to get out + of your way with a visually attractive appearance. + + + + + + + + + + + + + The discreet visual style for selected code blocks ensures still easily recognizable syntax colors. + + + + + + Well recognizable marker for active and context related search results. + + + + + + + +
+); + +SectionEditorDetails.propTypes = usePortsAssetsPropTypes; + +export default SectionEditorDetails; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/index.js b/src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/index.js new file mode 100644 index 00000000..69351605 --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/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 "./SectionEditorDetails"; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/styled/WaveDivider.jsx b/src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/styled/WaveDivider.jsx new file mode 100644 index 00000000..01031ada --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionEditorDetails/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 { WaveSwaying } 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 "swaying" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const WaveDivider = styled(WaveSwaying)` + 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/atom-syntax/SectionHero/SectionHero.jsx b/src/components/organisms/page/ports/atom-syntax/SectionHero/SectionHero.jsx index 3f4e2f7e..d0be8054 100644 --- a/src/components/organisms/page/ports/atom-syntax/SectionHero/SectionHero.jsx +++ b/src/components/organisms/page/ports/atom-syntax/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 { 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_ATOM_SYNTAX, + ROUTE_DOCS_PORTS_ATOM_SYNTAX_INSTALLATION, + ROUTE_PORTS_ATOM_SYNTAX, + ROUTE_PORTS_ATOM_UI +} from "config/routes/mappings"; import { usePortsMetadata } from "hooks"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; +import { sectionIdFor } from "utils"; -import { emptyStateIllustrationStyles } from "../../../shared/styles"; +import { Section } from "../../../shared"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_ATOM_SYNTAX, 0); /** * The component that represents the hero section for the landing page of the "Nord Atom Syntax" port project. @@ -26,32 +36,50 @@ 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-atom-syntax"); + const { gitHubRepositoryUrl, projectUrl } = portMetadata.find(port => port.name === "nord-atom-syntax"); return ( -
- - -

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

+
+ + + + Nord Atom Syntax + + An arctic, north-bluish clean and elegant Atom syntax theme. + + + Designed for a optimized fluent and clear workflow matching the{" "} + Nord Atom UI theme. + + + + + + + + + Screenshot showing JSX syntax as part of a React component + + - +
); -} +}; + +SectionHero.propTypes = usePortsAssetsPropTypes; + +export default SectionHero; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionHero/styled/WaveDivider.jsx b/src/components/organisms/page/ports/atom-syntax/SectionHero/styled/WaveDivider.jsx new file mode 100644 index 00000000..ff2a80fc --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/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.19.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/atom-syntax/SectionIntroduction/SectionIntroduction.jsx b/src/components/organisms/page/ports/atom-syntax/SectionIntroduction/SectionIntroduction.jsx new file mode 100644 index 00000000..df597be4 --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionIntroduction/SectionIntroduction.jsx @@ -0,0 +1,59 @@ +/* + * 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 { Content } from "containers/core/Section"; +import FeatureDuo, { Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_PORTS_ATOM_SYNTAX } 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_ATOM_SYNTAX, 1); + +/** + * The component that represents the introduction section for the landing page of the "Nord Aom Syntax" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const SectionIntroduction = ({ assets }) => ( +
+ + + + Your IDE. Your style. + + The unified UI and editor syntax element design provides a clutter-free and fluidly merging appearance. + + + + Screenshot showing the code editor in combination with UI elements like the sidebar and minimap + Syntax highlighting in the editor in combination with UI elements like the sidebar and minimap. + + + + + +
+); + +SectionIntroduction.propTypes = usePortsAssetsPropTypes; + +export default SectionIntroduction; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionIntroduction/index.js b/src/components/organisms/page/ports/atom-syntax/SectionIntroduction/index.js new file mode 100644 index 00000000..a20aba6f --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/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/atom-syntax/SectionIntroduction/styled/WaveDivider.jsx b/src/components/organisms/page/ports/atom-syntax/SectionIntroduction/styled/WaveDivider.jsx new file mode 100644 index 00000000..570f6ef8 --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/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.19.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/atom-syntax/SectionPackageSupport/SectionPackageSupport.jsx b/src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/SectionPackageSupport.jsx new file mode 100644 index 00000000..f080c9de --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/SectionPackageSupport.jsx @@ -0,0 +1,64 @@ +/* + * 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_ATOM_SYNTAX } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Video } 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_ATOM_SYNTAX, 4); + +/** + * The component that represents the packages support section for the landing page of the "Nord Atom Syntax" port + * project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const SectionPackageSupport = ({ assets }) => ( +
+ + + + Take your favorite packages with you. + The theme supports many popular syntax packages for great highlighting. + + + + + + + +
+); + +SectionPackageSupport.propTypes = usePortsAssetsPropTypes; + +export default SectionPackageSupport; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/index.js b/src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/index.js new file mode 100644 index 00000000..1a449453 --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/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 "./SectionPackageSupport"; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/styled/WaveDivider.jsx b/src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/styled/WaveDivider.jsx new file mode 100644 index 00000000..0c340fef --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionPackageSupport/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 { WaveWobbly } 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 "wobbly" vector wave to render a visual differentiation to the next section. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const WaveDivider = styled(WaveWobbly)` + 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/atom-syntax/SectionSetup/SectionSetup.jsx b/src/components/organisms/page/ports/atom-syntax/SectionSetup/SectionSetup.jsx new file mode 100644 index 00000000..83d56806 --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionSetup/SectionSetup.jsx @@ -0,0 +1,81 @@ +/* + * 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 Link from "atoms/core/Link"; +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_ATOM_SYNTAX, ROUTE_PORTS_ATOM_SYNTAX } 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_ATOM_SYNTAX, 5); + +/** + * The component that represents the setup section for the landing page of the "Nord Atom Syntax" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const SectionSetup = ({ assets }) => { + const portMetadata = usePortsMetadata(); + const { gitHubRepositoryUrl, packageThemeRegistryUrl } = portMetadata.find(port => port.name === "nord-atom-syntax"); + + return ( +
+ + + + Installation and updates with one click. + + Install Nord from the official theme package registry with one + click including automatic updates to always use the latest Nord version. + + + + + + + + + Screenshot showing the builtin theme package registry view + + The builtin theme package registry view. + + + + + + +
+ ); +}; + +SectionSetup.propTypes = usePortsAssetsPropTypes; + +export default SectionSetup; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionSetup/index.js b/src/components/organisms/page/ports/atom-syntax/SectionSetup/index.js new file mode 100644 index 00000000..6e5d7ddb --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/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/atom-syntax/SectionSetup/styled/WaveDivider.jsx b/src/components/organisms/page/ports/atom-syntax/SectionSetup/styled/WaveDivider.jsx new file mode 100644 index 00000000..ff2a80fc --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/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.19.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/atom-syntax/SectionSyntax/SectionSyntax.jsx b/src/components/organisms/page/ports/atom-syntax/SectionSyntax/SectionSyntax.jsx new file mode 100644 index 00000000..52b4e685 --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionSyntax/SectionSyntax.jsx @@ -0,0 +1,117 @@ +/* + * 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_ATOM_SYNTAX } 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_ATOM_SYNTAX, 2); + +/** + * The component that represents the syntax section for the landing page of the "Nord Atom Syntax" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.19.0 + */ +const SectionSyntax = ({ assets }) => ( +
+ + + + Screenshot showing a Go function + + Syntax highlighting for Go. + + + + + Beautiful code to keep focused. + + The theme supports a wide range of programming languages — From bundled definitions up to many popular + third-party syntax packages. + + + + + + + Screenshot showing a JavaScript React Hook function + + JavaScript with a React Hook for{" "} + React Spring animations. + + + + + + + Screenshot showing a React component with highlighted matching brackets + + React component with highlighted matching brackets. + + + + + + Supportive code surfing features like highlighting of bracket pairs are designed to stand out well + from the actual code. + + + + + + + Comments and reference documentations are intentionally inconspicuous and less disturbing in order to keep + the focus on the important elements: the source code. + + + + Screenshot showing multiple Go functions with corresponding documentation comments + Go function with corresponding documentation comments. + + + + + +
+); + +SectionSyntax.propTypes = usePortsAssetsPropTypes; + +export default SectionSyntax; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionSyntax/index.js b/src/components/organisms/page/ports/atom-syntax/SectionSyntax/index.js new file mode 100644 index 00000000..600fcfdf --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionSyntax/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 "./SectionSyntax"; diff --git a/src/components/organisms/page/ports/atom-syntax/SectionSyntax/styled/WaveDivider.jsx b/src/components/organisms/page/ports/atom-syntax/SectionSyntax/styled/WaveDivider.jsx new file mode 100644 index 00000000..ff2a80fc --- /dev/null +++ b/src/components/organisms/page/ports/atom-syntax/SectionSyntax/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.19.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/atom-syntax/index.js b/src/components/organisms/page/ports/atom-syntax/index.js index 1e6f3a77..7d617bec 100644 --- a/src/components/organisms/page/ports/atom-syntax/index.js +++ b/src/components/organisms/page/ports/atom-syntax/index.js @@ -7,7 +7,11 @@ * License: MIT */ +import SectionEditorDetails from "./SectionEditorDetails"; import SectionHero from "./SectionHero"; +import SectionIntroduction from "./SectionIntroduction"; +import SectionPackageSupport from "./SectionPackageSupport"; +import SectionSetup from "./SectionSetup"; +import SectionSyntax from "./SectionSyntax"; -/* eslint-disable-next-line import/prefer-default-export */ -export { SectionHero }; +export { SectionEditorDetails, SectionHero, SectionIntroduction, SectionPackageSupport, SectionSetup, SectionSyntax }; diff --git a/src/components/organisms/page/ports/atom-ui/SectionHero/SectionHero.jsx b/src/components/organisms/page/ports/atom-ui/SectionHero/SectionHero.jsx index 29810d4a..8d2f7c66 100644 --- a/src/components/organisms/page/ports/atom-ui/SectionHero/SectionHero.jsx +++ b/src/components/organisms/page/ports/atom-ui/SectionHero/SectionHero.jsx @@ -15,6 +15,7 @@ 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_PORTS_ATOM_SYNTAX, ROUTE_DOCS_PORTS_ATOM_UI, ROUTE_DOCS_PORTS_ATOM_UI_INSTALLATION, ROUTE_PORTS_ATOM_UI @@ -48,7 +49,10 @@ const SectionHero = ({ assets }) => { An arctic, north-bluish clean and elegant Atom UI theme. - Designed for a optimized fluent and clear workflow matching the Nord Atom Syntax theme. + + Designed for a optimized fluent and clear workflow matching the{" "} + Nord Atom Syntax theme. +