From 443e4f99e60384c05c2a586498b88f5855fdeaa1 Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Sun, 2 Jun 2019 15:56:25 +0200 Subject: [PATCH] Implement landing and doc page for "Nord tmux" This includes the initial sections for features and basic documentation pages. GH-152 --- .../tmux/SectionContents/SectionContents.jsx | 53 ++++++++++ .../docs/ports/tmux/SectionContents/index.js | 10 ++ .../ports/tmux/SectionHero/SectionHero.jsx | 39 +++++++ .../page/docs/ports/tmux/SectionHero/index.js | 10 ++ .../organisms/page/docs/ports/tmux/index.js | 13 +++ .../SectionConfigurations.jsx | 90 ++++++++++++++++ .../ports/tmux/SectionConfigurations/index.js | 10 ++ .../styled/WaveDivider.jsx | 32 ++++++ .../ports/tmux/SectionHero/SectionHero.jsx | 77 +++++++++----- .../tmux/SectionHero/styled/WaveDivider.jsx | 32 ++++++ .../SectionIntroduction.jsx | 100 ++++++++++++++++++ .../ports/tmux/SectionIntroduction/index.js | 10 ++ .../styled/WaveDivider.jsx | 32 ++++++ .../SectionPluginSupport.jsx | 63 +++++++++++ .../ports/tmux/SectionPluginSupport/index.js | 10 ++ .../styled/WaveDivider.jsx | 32 ++++++ .../ports/tmux/SectionSetup/SectionSetup.jsx | 80 ++++++++++++++ .../page/ports/tmux/SectionSetup/index.js | 10 ++ .../tmux/SectionSetup/styled/WaveDivider.jsx | 32 ++++++ .../SectionUIElements/SectionUIElements.jsx | 54 ++++++++++ .../ports/tmux/SectionUIElements/index.js | 10 ++ .../SectionUIElements/styled/WaveDivider.jsx | 32 ++++++ .../organisms/page/ports/tmux/index.js | 15 ++- src/config/routes/mappings.js | 64 +++++++++-- .../organisms/page/docs/ports/tmux/topics.js | 62 +++++++++++ src/pages/docs/ports/tmux/index.jsx | 35 ++++++ src/pages/ports/tmux.jsx | 29 +++-- 27 files changed, 992 insertions(+), 44 deletions(-) create mode 100644 src/components/organisms/page/docs/ports/tmux/SectionContents/SectionContents.jsx create mode 100644 src/components/organisms/page/docs/ports/tmux/SectionContents/index.js create mode 100644 src/components/organisms/page/docs/ports/tmux/SectionHero/SectionHero.jsx create mode 100644 src/components/organisms/page/docs/ports/tmux/SectionHero/index.js create mode 100644 src/components/organisms/page/docs/ports/tmux/index.js create mode 100644 src/components/organisms/page/ports/tmux/SectionConfigurations/SectionConfigurations.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionConfigurations/index.js create mode 100644 src/components/organisms/page/ports/tmux/SectionConfigurations/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionHero/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionIntroduction/SectionIntroduction.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionIntroduction/index.js create mode 100644 src/components/organisms/page/ports/tmux/SectionIntroduction/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionPluginSupport/SectionPluginSupport.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionPluginSupport/index.js create mode 100644 src/components/organisms/page/ports/tmux/SectionPluginSupport/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionSetup/SectionSetup.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionSetup/index.js create mode 100644 src/components/organisms/page/ports/tmux/SectionSetup/styled/WaveDivider.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionUIElements/SectionUIElements.jsx create mode 100644 src/components/organisms/page/ports/tmux/SectionUIElements/index.js create mode 100644 src/components/organisms/page/ports/tmux/SectionUIElements/styled/WaveDivider.jsx create mode 100644 src/data/components/organisms/page/docs/ports/tmux/topics.js create mode 100644 src/pages/docs/ports/tmux/index.jsx diff --git a/src/components/organisms/page/docs/ports/tmux/SectionContents/SectionContents.jsx b/src/components/organisms/page/docs/ports/tmux/SectionContents/SectionContents.jsx new file mode 100644 index 00000000..ee9283d8 --- /dev/null +++ b/src/components/organisms/page/docs/ports/tmux/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_TMUX } from "config/routes/mappings"; +import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/ports/tmux/topics"; +import { sectionIdFor } from "utils"; +import { colors } from "styles/theme"; + +import { ContentsCard, CardGrid } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_TMUX, 1); + +/** + * The component that represents the contents section of the docs page for the "Nord tmux" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const SectionContents = () => ( +
+ + + + Learn how to install, activate and configure the theme. + + + Learn about supported plugins and how to deal with occurring problems. + + + + +
+); + +export default SectionContents; diff --git a/src/components/organisms/page/docs/ports/tmux/SectionContents/index.js b/src/components/organisms/page/docs/ports/tmux/SectionContents/index.js new file mode 100644 index 00000000..a1d6d5e4 --- /dev/null +++ b/src/components/organisms/page/docs/ports/tmux/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/tmux/SectionHero/SectionHero.jsx b/src/components/organisms/page/docs/ports/tmux/SectionHero/SectionHero.jsx new file mode 100644 index 00000000..6b987107 --- /dev/null +++ b/src/components/organisms/page/docs/ports/tmux/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_TMUX } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; + +import { Headline, Subline } from "../../../shared"; + +const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_TMUX, 0); + +/** + * The component that represents the hero section of the docs page for the "Nord tmux" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const SectionHero = () => ( +
+ + Nord tmux + + Documentations to get to know the theme, supported features and how to use the plugin, configure it to fit your + needs or find solution for possible problems. + + +
+); + +export default SectionHero; diff --git a/src/components/organisms/page/docs/ports/tmux/SectionHero/index.js b/src/components/organisms/page/docs/ports/tmux/SectionHero/index.js new file mode 100644 index 00000000..f15e7dce --- /dev/null +++ b/src/components/organisms/page/docs/ports/tmux/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/tmux/index.js b/src/components/organisms/page/docs/ports/tmux/index.js new file mode 100644 index 00000000..b2a25e2a --- /dev/null +++ b/src/components/organisms/page/docs/ports/tmux/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/tmux/SectionConfigurations/SectionConfigurations.jsx b/src/components/organisms/page/ports/tmux/SectionConfigurations/SectionConfigurations.jsx new file mode 100644 index 00000000..1b66c718 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionConfigurations/SectionConfigurations.jsx @@ -0,0 +1,90 @@ +/* + * 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 { Content } from "containers/core/Section"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_DOCS_PORTS_TMUX_CONFIGURATION, ROUTE_PORTS_TMUX } from "config/routes/mappings"; +import { sectionIdFor } from "utils"; +import { Code } from "atoms/core/html-elements"; +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_TMUX, 4); + +/** + * The component that represents the theme configuration section for the landing page of the "Nord tmux" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const SectionConfigurations = ({ assets }) => ( +
+ + + + Configure it to fit your needs. + + Theme configurations like{" "} + + @nord_tmux_show_status_content + + … + + + + Screenshot showing the tmux status bar without usage of patched font elements + + + + + Screenshot showing the tmux status bar without usage of patched font elements + The tmux status bar without usage of patched „powerline“ styled font elements. + + + + + …or{" "} + + @nord_tmux_no_patched_font + {" "} + allow to customize the theme to match your personal preferences. + + + + + + + + +
+); + +SectionConfigurations.propTypes = usePortsAssetsPropTypes; + +export default SectionConfigurations; diff --git a/src/components/organisms/page/ports/tmux/SectionConfigurations/index.js b/src/components/organisms/page/ports/tmux/SectionConfigurations/index.js new file mode 100644 index 00000000..f9bf226b --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionConfigurations/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 "./SectionConfigurations"; diff --git a/src/components/organisms/page/ports/tmux/SectionConfigurations/styled/WaveDivider.jsx b/src/components/organisms/page/ports/tmux/SectionConfigurations/styled/WaveDivider.jsx new file mode 100644 index 00000000..e12b9b10 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionConfigurations/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.sectioning.secondary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.secondary[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.16.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/tmux/SectionHero/SectionHero.jsx b/src/components/organisms/page/ports/tmux/SectionHero/SectionHero.jsx index bfaed700..e7fa3067 100644 --- a/src/components/organisms/page/ports/tmux/SectionHero/SectionHero.jsx +++ b/src/components/organisms/page/ports/tmux/SectionHero/SectionHero.jsx @@ -8,16 +8,20 @@ */ 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 { Image } from "atoms/core/mdx-elements"; import Section, { Content } from "containers/core/Section"; -import EmptyState from "molecules/core/EmptyState"; +import FeatureDuo, { Actions, Headline, Subline, Text, Visualization } from "molecules/page/shared/FeatureDuo"; +import { ROUTE_DOCS_PORTS_TMUX, ROUTE_DOCS_PORTS_TMUX_INSTALLATION, ROUTE_PORTS_TMUX } from "config/routes/mappings"; import { usePortsMetadata } from "hooks"; +import { usePortsAssetsPropTypes } from "hooks/shared/propTypes"; +import { sectionIdFor } from "utils"; -import { emptyStateIllustrationStyles } from "../../../shared/styles"; +import WaveDivider from "./styled/WaveDivider"; + +const SECTION_ID = sectionIdFor(ROUTE_PORTS_TMUX, 0); /** * The component that represents the hero section for the landing page of the "Nord tmux" port project. @@ -26,32 +30,51 @@ 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-tmux"); return ( -
- - -

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

+
+ + + + Nord tmux + + An arctic, north-bluish clean and elegant tmux theme. + + Designed for a fluent and clear workflow with support for third-party plugins. + + + + + + + + Screenshot showing the terminal with active tmux session + + Terminal with active tmux session. + + + + - +
); -} +}; + +SectionHero.propTypes = usePortsAssetsPropTypes; + +export default SectionHero; diff --git a/src/components/organisms/page/ports/tmux/SectionHero/styled/WaveDivider.jsx b/src/components/organisms/page/ports/tmux/SectionHero/styled/WaveDivider.jsx new file mode 100644 index 00000000..55cbd3d6 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/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.16.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/tmux/SectionIntroduction/SectionIntroduction.jsx b/src/components/organisms/page/ports/tmux/SectionIntroduction/SectionIntroduction.jsx new file mode 100644 index 00000000..67e2d95e --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionIntroduction/SectionIntroduction.jsx @@ -0,0 +1,100 @@ +/* + * 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_TMUX, ROUTE_PORTS_VIM } 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_TMUX, 1); + +/** + * The component that represents the introduction section for the landing page of the "Nord tmux" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const SectionIntroduction = ({ assets }) => ( +
+ + + + Your terminal. Your style. + The unified UI element design provides a clutter-free and fluidly merging appearance. + + + Screenshot showing a fluidly merged UI of tmux and the Nord Vim theme with a Go function. + + Fluidly merged UI of tmux and the Nord Vim theme with a{" "} + Go function. + + + + + + + Screenshot showing a fluidly merged UI of tmux with gotop. + + Fluidly merged UI of tmux with gotop. + + + + + + Fits to many popular terminal based applications like{" "} + gotop … + + + + + + + …or htop. + + + + Screenshot showing a fluidly merged UI of tmux with htop. + + Fluidly merged UI of tmux with htop. + + + + + + +
+); + +SectionIntroduction.propTypes = usePortsAssetsPropTypes; + +export default SectionIntroduction; diff --git a/src/components/organisms/page/ports/tmux/SectionIntroduction/index.js b/src/components/organisms/page/ports/tmux/SectionIntroduction/index.js new file mode 100644 index 00000000..a20aba6f --- /dev/null +++ b/src/components/organisms/page/ports/tmux/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/tmux/SectionIntroduction/styled/WaveDivider.jsx b/src/components/organisms/page/ports/tmux/SectionIntroduction/styled/WaveDivider.jsx new file mode 100644 index 00000000..9d553544 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/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.16.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/tmux/SectionPluginSupport/SectionPluginSupport.jsx b/src/components/organisms/page/ports/tmux/SectionPluginSupport/SectionPluginSupport.jsx new file mode 100644 index 00000000..62cff2e8 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionPluginSupport/SectionPluginSupport.jsx @@ -0,0 +1,63 @@ +/* + * 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_TMUX } 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_TMUX, 3); + +/** + * The component that represents the plugin support section for the landing page of the "Nord tmux" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const SectionPluginSupport = ({ assets }) => ( +
+ + + + Take your favorite plugins with you. + + The theme supports many popular plugins for a fluid and unobtrusive user interface transition. + + + + Screenshot showing UI support for the tmux-prefix-highlight plugin + + UI support for the{" "} + tmux-prefix-highlight plugin. + + + + + + +
+); + +SectionPluginSupport.propTypes = usePortsAssetsPropTypes; + +export default SectionPluginSupport; diff --git a/src/components/organisms/page/ports/tmux/SectionPluginSupport/index.js b/src/components/organisms/page/ports/tmux/SectionPluginSupport/index.js new file mode 100644 index 00000000..2a866502 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionPluginSupport/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 "./SectionPluginSupport"; diff --git a/src/components/organisms/page/ports/tmux/SectionPluginSupport/styled/WaveDivider.jsx b/src/components/organisms/page/ports/tmux/SectionPluginSupport/styled/WaveDivider.jsx new file mode 100644 index 00000000..f979edfd --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionPluginSupport/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.16.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/tmux/SectionSetup/SectionSetup.jsx b/src/components/organisms/page/ports/tmux/SectionSetup/SectionSetup.jsx new file mode 100644 index 00000000..e4732185 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionSetup/SectionSetup.jsx @@ -0,0 +1,80 @@ +/* + * 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_TMUX, ROUTE_PORTS_TMUX } 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_TMUX, 5); + +/** + * The component that represents the setup section for the landing page of the "Nord tmux" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const SectionSetup = ({ assets }) => { + const portMetadata = usePortsMetadata(); + const { gitHubRepositoryUrl } = portMetadata.find(port => port.name === "nord-tmux"); + + return ( +
+ + + + Installation and updates in a few lines of code. + + Install Nord with your favorite plugin manager like{" "} + tpm within a few lines of code and automatic + updates or simply set it up manually. + + + + + + + + Screenshot showing the plugin setup and tpm plugin manager initialization + + Plugin setup and tpm plugin manager + initialization. + + + + + + +
+ ); +}; + +SectionSetup.propTypes = usePortsAssetsPropTypes; + +export default SectionSetup; diff --git a/src/components/organisms/page/ports/tmux/SectionSetup/index.js b/src/components/organisms/page/ports/tmux/SectionSetup/index.js new file mode 100644 index 00000000..6e5d7ddb --- /dev/null +++ b/src/components/organisms/page/ports/tmux/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/tmux/SectionSetup/styled/WaveDivider.jsx b/src/components/organisms/page/ports/tmux/SectionSetup/styled/WaveDivider.jsx new file mode 100644 index 00000000..55cbd3d6 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/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.16.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/tmux/SectionUIElements/SectionUIElements.jsx b/src/components/organisms/page/ports/tmux/SectionUIElements/SectionUIElements.jsx new file mode 100644 index 00000000..eccc4e84 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionUIElements/SectionUIElements.jsx @@ -0,0 +1,54 @@ +/* + * 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_TMUX } 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_TMUX, 2); + +/** + * The component that represents the UI elements section for the landing page of the "Nord tmux" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const SectionUIElements = ({ assets }) => ( +
+ + + + Uniform design with beautiful UI elements. + + The themed UI elements provide a fluid and unobtrusive transition from the terminal to the tmux status bar. + + + + Screenshot showing the tmux clock mode + The tmux clock mode. + + + + + +
+); + +SectionUIElements.propTypes = usePortsAssetsPropTypes; + +export default SectionUIElements; diff --git a/src/components/organisms/page/ports/tmux/SectionUIElements/index.js b/src/components/organisms/page/ports/tmux/SectionUIElements/index.js new file mode 100644 index 00000000..fce86186 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionUIElements/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 "./SectionUIElements"; diff --git a/src/components/organisms/page/ports/tmux/SectionUIElements/styled/WaveDivider.jsx b/src/components/organisms/page/ports/tmux/SectionUIElements/styled/WaveDivider.jsx new file mode 100644 index 00000000..fa982489 --- /dev/null +++ b/src/components/organisms/page/ports/tmux/SectionUIElements/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 { WaveSmooth } 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.16.0 + */ +const WaveDivider = styled(WaveSmooth)` + 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/tmux/index.js b/src/components/organisms/page/ports/tmux/index.js index 1e6f3a77..692f5c4f 100644 --- a/src/components/organisms/page/ports/tmux/index.js +++ b/src/components/organisms/page/ports/tmux/index.js @@ -7,7 +7,18 @@ * License: MIT */ +import SectionConfigurations from "./SectionConfigurations"; import SectionHero from "./SectionHero"; +import SectionIntroduction from "./SectionIntroduction"; +import SectionPluginSupport from "./SectionPluginSupport"; +import SectionSetup from "./SectionSetup"; +import SectionUIElements from "./SectionUIElements"; -/* eslint-disable-next-line import/prefer-default-export */ -export { SectionHero }; +export { + SectionConfigurations, + SectionHero, + SectionIntroduction, + SectionPluginSupport, + SectionSetup, + SectionUIElements +}; diff --git a/src/config/routes/mappings.js b/src/config/routes/mappings.js index d7871347..61766c5b 100644 --- a/src/config/routes/mappings.js +++ b/src/config/routes/mappings.js @@ -98,6 +98,38 @@ const ROUTE_DOCS_PORTS_JETBRAINS_SUPPORT = `${ROUTE_DOCS_PORTS_JETBRAINS}/suppor */ const ROUTE_DOCS_PORTS_JETBRAINS_TROUBLESHOOTING = `${ROUTE_DOCS_PORTS_JETBRAINS}/troubleshooting`; +/** + * The route mapping for the docs page of the "Nord tmux" port project. + * + * @constant {string} + * @since 0.16.0 + */ +const ROUTE_DOCS_PORTS_TMUX = `${ROUTE_ROOT}${DOCS}/${PORTS}/tmux`; + +/** + * The route mapping for the theme configuration docs page of the "Nord tmux" port project. + * + * @constant {string} + * @since 0.16.0 + */ +const ROUTE_DOCS_PORTS_TMUX_CONFIGURATION = `${ROUTE_DOCS_PORTS_TMUX}/configuration`; + +/** + * The route mapping for the installation docs page of the "Nord tmux" port project. + * + * @constant {string} + * @since 0.16.0 + */ +const ROUTE_DOCS_PORTS_TMUX_INSTALLATION = `${ROUTE_DOCS_PORTS_TMUX}/installation`; + +/** + * The route mapping for the theme plugin support docs page of the "Nord tmux" port project. + * + * @constant {string} + * @since 0.16.0 + */ +const ROUTE_DOCS_PORTS_TMUX_PLUGIN_SUPPORT = `${ROUTE_DOCS_PORTS_TMUX}/plugin-support`; + /** * The route mapping for the docs page of the "Nord Vim" port project. * @@ -211,6 +243,14 @@ const ROUTE_PORTS = ROUTE_ROOT + PORTS; */ const ROUTE_PORTS_JETBRAINS = `${ROUTE_ROOT}/${PORTS}/jetbrains`; +/** + * The route mapping for the "Nord JetBrains" port project page. + * + * @constant {string} + * @since 0.16.0 + */ +const ROUTE_PORTS_TMUX = `${ROUTE_ROOT}/${PORTS}/tmux`; + /** * The route mapping for the "Nord Vim" port project page. * @@ -240,6 +280,7 @@ const SECTION_COMPONENT_IDS = { [ROUTE_DOCS_PORTS_VIM]: ["hero", "contents"], [ROUTE_PORTS]: ["hero", "search"], [ROUTE_PORTS_JETBRAINS]: ["hero", "introduction", "syntax", "editor-details", "ui-elements", "setup"], + [ROUTE_PORTS_TMUX]: ["hero", "introduction", "ui-elements", "plugin-support", "configurations", "setup"], [ROUTE_PORTS_VIM]: ["hero", "introduction", "syntax", "editor-details", "plugin-support", "configurations", "setup"], [ROUTE_PORTS_VISUAL_STUDIO_CODE]: ["hero", "introduction", "syntax", "editor-details", "ui-elements", "setup"], [ROUTE_ROOT]: [ @@ -256,28 +297,33 @@ const SECTION_COMPONENT_IDS = { module.exports = { ROUTE_BLOG, ROUTE_COMMUNITY, - ROUTE_DOCS, - ROUTE_DOCS_PORTS_JETBRAINS, + ROUTE_DOCS_COLOR_AND_PALETTES, ROUTE_DOCS_PORTS_JETBRAINS_DEVELOPMENT, ROUTE_DOCS_PORTS_JETBRAINS_INSTALLATION, ROUTE_DOCS_PORTS_JETBRAINS_SUPPORT, ROUTE_DOCS_PORTS_JETBRAINS_TROUBLESHOOTING, - ROUTE_DOCS_PORTS_VIM, + ROUTE_DOCS_PORTS_JETBRAINS, + ROUTE_DOCS_PORTS_TMUX_CONFIGURATION, + ROUTE_DOCS_PORTS_TMUX_INSTALLATION, + ROUTE_DOCS_PORTS_TMUX_PLUGIN_SUPPORT, + ROUTE_DOCS_PORTS_TMUX, ROUTE_DOCS_PORTS_VIM_CONFIGURATION, ROUTE_DOCS_PORTS_VIM_CUSTOMIZATION, ROUTE_DOCS_PORTS_VIM_INSTALLATION, - ROUTE_DOCS_COLOR_AND_PALETTES, + ROUTE_DOCS_PORTS_VIM, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_CUSTOMIZATION, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_DEVELOPMENT, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_INSTALLATION, + ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, ROUTE_DOCS_SWATCHES, ROUTE_DOCS_USAGE, + ROUTE_DOCS, ROUTE_LANDING, - ROUTE_PORTS, ROUTE_PORTS_JETBRAINS, + ROUTE_PORTS_TMUX, ROUTE_PORTS_VIM, ROUTE_PORTS_VISUAL_STUDIO_CODE, - ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE, - ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_CUSTOMIZATION, - ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_DEVELOPMENT, - ROUTE_DOCS_PORTS_VISUAL_STUDIO_CODE_INSTALLATION, + ROUTE_PORTS, ROUTE_ROOT, SECTION_COMPONENT_IDS }; diff --git a/src/data/components/organisms/page/docs/ports/tmux/topics.js b/src/data/components/organisms/page/docs/ports/tmux/topics.js new file mode 100644 index 00000000..df7cd868 --- /dev/null +++ b/src/data/components/organisms/page/docs/ports/tmux/topics.js @@ -0,0 +1,62 @@ +/* + * 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 { Brush, CloudDownload, QuestionMarkCircle, Settings2, Target } from "atoms/core/vectors/icons"; +import { + ROUTE_DOCS_PORTS_TMUX_CONFIGURATION, + ROUTE_DOCS_PORTS_TMUX_PLUGIN_SUPPORT, + ROUTE_DOCS_PORTS_TMUX_INSTALLATION +} from "config/routes/mappings"; + +/** + * The mapping of topics for the "Getting Started" contents cards of the "Nord tmux" docs page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const topicsGettingStarted = [ + { + iconComponent: CloudDownload, + iconOutlined: true, + title: "Install and activate the theme", + url: ROUTE_DOCS_PORTS_TMUX_INSTALLATION + }, + { + iconComponent: Settings2, + title: "Configure the theme to fit your needs", + url: ROUTE_DOCS_PORTS_TMUX_CONFIGURATION + }, + { + iconComponent: Brush, + title: "Override styles with customizations" + } +]; + +/** + * The mapping of topics for the "References" contents cards of the "Nord tmux" docs page. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const topicsReferences = [ + { + iconComponent: Target, + svgType: "stroke", + title: "Supported plugins and UI widgets", + url: ROUTE_DOCS_PORTS_TMUX_PLUGIN_SUPPORT + }, + { + iconComponent: QuestionMarkCircle, + title: "Troubleshooting Guide" + } +]; + +export { topicsGettingStarted, topicsReferences }; diff --git a/src/pages/docs/ports/tmux/index.jsx b/src/pages/docs/ports/tmux/index.jsx new file mode 100644 index 00000000..ce73f99b --- /dev/null +++ b/src/pages/docs/ports/tmux/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/tmux"; + +/** + * The component that represents the docs page of the "Nord tmux" port project. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.16.0 + */ +const TmuxDocs = ({ location: { pathname } }) => ( + + + + + + +); + +TmuxDocs.propTypes = locationPropTypes; + +export default TmuxDocs; diff --git a/src/pages/ports/tmux.jsx b/src/pages/ports/tmux.jsx index 649f92c7..54df3f9a 100644 --- a/src/pages/ports/tmux.jsx +++ b/src/pages/ports/tmux.jsx @@ -11,7 +11,15 @@ import React from "react"; import { locationPropTypes } from "data/pages/shared/propTypes"; import BaseLayout from "layouts/core/BaseLayout"; -import { SectionHero } from "organisms/page/ports/tmux"; +import { + SectionConfigurations, + SectionHero, + SectionIntroduction, + SectionPluginSupport, + SectionSetup, + SectionUIElements +} from "organisms/page/ports/tmux"; +import { usePortsAssets } from "hooks"; /** * The component that represents the landing page of the "Nord tmux" port project. @@ -20,11 +28,20 @@ import { SectionHero } from "organisms/page/ports/tmux"; * @author Sven Greb * @since 0.9.0 */ -const Tmux = ({ location: { pathname } }) => ( - - - -); +const Tmux = ({ location: { pathname } }) => { + const assets = usePortsAssets("tmux"); + + return ( + + + + + + + + + ); +}; Tmux.propTypes = locationPropTypes;