Implement landing and doc page for "Nord tmux"

This includes the initial sections for features and basic documentation pages. GH-152
nordtheme · Jun 2, 2019 · 77f39e2 · 77f39e2
1 parent 5e9c051
commit 77f39e2
Show file tree

Hide file tree

Showing 27 changed files with 992 additions and 44 deletions.
diff --git a/src/components/organisms/page/docs/ports/tmux/SectionContents/SectionContents.jsx b/src/components/organisms/page/docs/ports/tmux/SectionContents/SectionContents.jsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.16.0
+ */
+const SectionContents = () => (
+  <Section id={SECTION_ID} variant="tertiary">
+    <Content centered>
+      <CardGrid>
+        <ContentsCard
+          accentColor={colors.nord8}
+          logoComponent={Zap}
+          svgType="stroke"
+          title="Getting Started"
+          topics={topicsGettingStarted}
+        >
+          Learn how to install, activate and configure the theme.
+        </ContentsCard>
+        <ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
+          Learn about supported plugins and how to deal with occurring problems.
+        </ContentsCard>
+      </CardGrid>
+    </Content>
+    <WaveFooter />
+  </Section>
+);
+
+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
@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.16.0
+ */
+const SectionHero = () => (
+  <Section id={SECTION_ID} variant="tertiary">
+    <Content centered>
+      <Headline>Nord tmux</Headline>
+      <Subline>
+        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.
+      </Subline>
+    </Content>
+  </Section>
+);
+
+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
@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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
@@ -0,0 +1,13 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.16.0
+ */
+const SectionConfigurations = ({ assets }) => (
+  <Section id={SECTION_ID}>
+    <Content centered>
+      <FeatureDuo columnRatio={[1, 2]}>
+        <Text>
+          <Headline>Configure it to fit your needs.</Headline>
+          <Subline>
+            Theme configurations like{" "}
+            <Link to={`${ROUTE_DOCS_PORTS_TMUX_CONFIGURATION}#default-status-bar-content`}>
+              <Code>@nord_tmux_show_status_content</Code>
+            </Link>
+            …
+          </Subline>
+        </Text>
+        <Visualization>
+          <Image
+            alt="Screenshot showing the tmux status bar without usage of patched font elements"
+            dropShadow
+            fluid={assets.images["config-no-status-bar-content.png"]}
+            rounded
+          />
+        </Visualization>
+      </FeatureDuo>
+      <FeatureDuo columnRatio={[2, 1]}>
+        <Visualization>
+          <Image
+            alt="Screenshot showing the tmux status bar without usage of patched font elements"
+            dropShadow
+            fluid={assets.images["config-no-patched-font.png"]}
+            rounded
+          >
+            <span>The tmux status bar without usage of patched „powerline“ styled font elements.</span>
+          </Image>
+        </Visualization>
+        <Text>
+          <Subline>
+            …or{" "}
+            <Link to={`${ROUTE_DOCS_PORTS_TMUX_CONFIGURATION}#patched-font-characters`}>
+              <Code>@nord_tmux_no_patched_font</Code>
+            </Link>{" "}
+            allow to customize the theme to match your personal preferences.
+          </Subline>
+          <Actions>
+            <Button ghost href={ROUTE_DOCS_PORTS_TMUX_CONFIGURATION} outlined quiet variant="primary">
+              Learn More
+            </Button>
+          </Actions>
+        </Text>
+      </FeatureDuo>
+    </Content>
+    <WaveDivider />
+  </Section>
+);
+
+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
@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @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
@@ -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 <development@svengreb.de>
  * @since 0.9.0
  */
-export default function SectionHero() {
+const SectionHero = ({ assets }) => {
   const portMetadata = usePortsMetadata();
   const { gitHubRepositoryUrl } = portMetadata.find(port => port.name === "nord-tmux");
 
   return (
-    <Section>
-      <Content centered>
-        <EmptyState
-          headline="Oh, there's nothing here yet"
-          illustrationStyles={emptyStateIllustrationStyles}
-          illustrationVariant="iglooHemisphere"
-          subline="Please check back later, we're working hard on this page!"
-        />
-        <P
-          css={css`
-            text-align: center;
-          `}
-        >
-          In the meantime, please see the official{" "}
-          <Link href={gitHubRepositoryUrl} target="_blank" variant="minimal">
-            repository on GitHub
-          </Link>{" "}
-          for information about Nord tmux.
-        </P>
+    <Section id={SECTION_ID}>
+      <Content centered decorated>
+        <FeatureDuo verticalOnly>
+          <Text verticalOnly>
+            <Headline large>Nord tmux</Headline>
+            <Subline>
+              An arctic, north-bluish clean and elegant <Link href="https://tmux.github.io">tmux</Link> theme.
+            </Subline>
+            <Subline>Designed for a fluent and clear workflow with support for third-party plugins.</Subline>
+            <Actions>
+              <Button to={ROUTE_DOCS_PORTS_TMUX_INSTALLATION} variant="primary">
+                Get Started
+              </Button>
+              <Button ghost outlined quiet to={ROUTE_DOCS_PORTS_TMUX} variant="primary">
+                Documentation
+              </Button>
+              <Button ghost href={gitHubRepositoryUrl} outlined quiet variant="primary">
+                GitHub
+              </Button>
+            </Actions>
+          </Text>
+          <Visualization>
+            <Image
+              alt="Screenshot showing the terminal with active tmux session"
+              dropShadow
+              fluid={assets.images["overview.png"]}
+              rounded
+            >
+              <span>
+                Terminal with active <em>tmux</em> session.
+              </span>
+            </Image>
+          </Visualization>
+        </FeatureDuo>
       </Content>
-      <WaveFooter />
+      <WaveDivider />
     </Section>
   );
-}
+};
+
+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
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @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;