Transition: Nord tmux

content/docs/ports/tmux/configuration/index.mdx

@@ -0,0 +1,113 @@
+import Link from "atoms/core/Link";
+import { Banner, Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { Code } from "atoms/core/html-elements";
+import { ReactComponent as WindowConfiguration } from "assets/images/illustrations/window-configuration.svg";
+import { ROUTE_DOCS_PORTS_TMUX_INSTALLATION } from "config/routes/mappings";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Configuration",
+  subline: "From UI elements to font rendering — configure the theme to match your personal preferences"
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <WindowConfiguration />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+Nord tmux is designed to provide a good UX out-of-the-box, but there is a reason why principles like „themes“ exist at all: Everyone has different preferences and that's a good thing!
+
+To ensure Nord tmux fits your needs it comes with configurations for UI elements and font rendering to make the theme as flexible as possible while still providing sane defaults.
+
+All theme configuration variables must be added to either tmux's user-level, by default located in your [home directory][wiki-home_dir], or system-wide configuration file(s) that are referred to as `.tmux.conf` in this documentation. The location of the files and more details can be found in [tmux's `.tmux.conf` manual documentation][tmux-man-tmux.conf].
+
+<Banner
+  title={
+    <>
+      All configuration variables should be set <strong>before</strong> <em>tpm</em>&apos;s <Code>@plugin</Code>{" "}
+      <Link to={`${ROUTE_DOCS_PORTS_TMUX_INSTALLATION}`}>installation</Link> definition line!
+    </>
+  }
+>
+  This ensures the configurations are applied correctly when the scheme file gets loaded, otherwise the theme might be
+  loaded without taking these configurations into account.
+</Banner>
+
+## UI Elements
+
+### Default Status Bar Content
+
+By default, this theme provides status bar content including patched „powerline“ styled characters like separator arrows.
+
+<Image
+  alt="Screenshot showing the status bar with default content."
+  dropShadow
+  fluid={props.images["ui-default-status-bar-content.png"]}
+  rounded
+>
+  <span>Default status bar content.</span>
+</Image>
+
+The status bar content can be disabled in order to use customized content by setting the `@nord_tmux_show_status_content` configuration variable in the `.tmux.conf` file:
+
+```sh
+set -g @nord_tmux_show_status_content "0"
+```
+
+## Font Rendering
+
+<Banner
+  title={
+    <>
+      Disable specific font rendering theme configurations when facing rendering problems with incompatible terminals or
+      fonts!
+    </>
+  }
+  variant="warn"
+>
+  Special font rendering styles like the usage of special characters (patched „powerline“ arrows) require support from
+  the side of the used terminal and font family in order to work properly. Please check if your used terminal and font
+  supports any of the theme styles in this section, otherwise there might be unexpected rendering issues or the
+  configuration won't have any effect at all.
+</Banner>
+
+### Patched Font Characters
+
+The provided default status bar content makes use of patched „powerline“ styled characters like the separator arrows for a more modern UI and fluidly merged appearance with other applications like the status bars of Vim or Emacs.
+
+<Image
+  alt="Screenshot showing the tmux status bar with patched font elements"
+  dropShadow
+  fluid={props.images["font-rendering-patched-font.png"]}
+  rounded
+>
+  <span>The status bar with patched font elements.</span>
+</Image>
+
+To disable the usage of patched „powerline“ styled font characters, using normal _Unicode_ characters instead that should be compatible with all terminals and fonts, set the `@nord_tmux_no_patched_font` configuration variable in your `.tmux.conf` file:
+
+```sh
+set -g @nord_tmux_no_patched_font "1"
+```
+
+<Image
+  alt="Screenshot showing the tmux status bar without patched font elements"
+  dropShadow
+  fluid={props.images["font-rendering-patched-font-disabled.png"]}
+  rounded
+>
+  <span>The status bar without patched font elements.</span>
+</Image>
+
+</ShrinkedWidth>
+
+[tmux-man-tmux.conf]: http://man.openbsd.org/OpenBSD-current/man1/tmux.1#FILES
+[wiki-home_dir]: https://en.wikipedia.org/wiki/Home_directory

content/docs/ports/tmux/installation/index.mdx

@@ -0,0 +1,114 @@
+import Link from "atoms/core/Link";
+import { Banner, Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { Code, Kbd } from "atoms/core/html-elements";
+import { ReactComponent as WindowCode } from "assets/images/illustrations/window-code.svg";
+import { ROUTE_DOCS_COLOR_AND_PALETTES, ROUTE_PORTS } from "config/routes/mappings";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Installation & Activation",
+  subline: "Get up and running in a few lines of code with your favorite plugin manager or manual setup"
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <WindowCode />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+<Banner
+  title={
+    <>
+      tmux <strong>must</strong> be used with a <Link to={ROUTE_PORTS}>Nord terminal emulator theme</Link> in order to work properly!
+    </>
+  }
+>
+  Make sure to install one of the currently supported <Link to={ROUTE_PORTS}>terminal emulator port projects</Link> <strong>before</strong> installing Nord tmux.
+
+tmux in terminal mode uses the 16 color codes provided by the terminal emulator.
+**When used with another color theme** than the one provided by one of Nord's terminal emulator ports, the colors in tmux won't use the <Link to={ROUTE_DOCS_COLOR_AND_PALETTES}>Nord color palettes</Link>!
+This will result in different styles than those defined by Nord tmux and could make it appear that there is a problem with the Nord tmux theme while the actual problem are missing Nord colors.
+
+Read the GitHub Gist about [terminal colors][gh-gist-terminal-colors] for more information about terminal color specifications.
+
+</Banner>
+
+Thanks to existing plugin managers for tmux, Nord tmux can be installed for all platforms in a uniform way within a few lines of codes. The recommended manager is [tpm][gh-tmux-plugins/tpm], but any other manager like [tundle][gh-javier-lopez/tundle] can also be used.
+
+To automatically download and activate Nord tmux, follow the install instructions for [tpm][gh-tmux-plugins/tpm] and
+
+1. add `set -g @plugin "arcticicestudio/nord-tmux"` to your [`tmux.conf`][tmux-man-tmux.conf], by default `.tmux.conf` located in your [home directory][wiki-home_dir]
+2. press the default key binding `prefix` + <Kbd>I</Kbd> to fetch- and install the plugin
+
+Also see [_tpm's_ install instructions][gh-tpm-docs-install-plugins] for more details.
+
+<Image
+  dropShadow
+  fluid={props.images["tpm.png"]}
+  rounded
+  alt="Screenshot showing a minimal tmux.conf with installed Nord color scheme"
+>
+  <span>
+    Minimal <Code>tmux.conf</Code> with installed Nord color scheme.
+  </span>
+</Image>
+
+By default, the [latest version][repo-rel-latest] will be installed. To use the [latest development state from the `develop` branch][repo-br-develop] instead, go to the installation path of Nord tmux and switch to the `develop` branch or [any other version tag][repo-tags] you like.
+
+###### Manual
+
+To install Nord tmux manually **using Git**,
+
+1. [clone the repository][repo] into any location, e.g. `~/.tmux/themes/nord-tmux`
+2. source the downloaded theme by adding the path of the [`nord.tmux`][repo-tree-master-nord.tmux] file to the bottom of your `.tmux.conf`, located in your [home directory][wiki-home_dir]:
+   ```sh
+   run-shell "~/.tmux/themes/nord-tmux/nord.tmux"
+   ```
+3. reload your `.tmux.conf` file to source- and activate the theme:
+   ```sh
+   tmux source-file ~/.tmux.conf
+   ```
+
+<Image
+  alt="Screenshot showing the GitHub repository web UI to download the project repository"
+  fillSize={60}
+  fluid={props.images["github-clone.png"]}
+/>
+
+To install the theme **without Git**,
+
+1. [download the latest version][repo-down-master] of the repository
+2. extract the downloaded archive into any location, e.g. `~/.tmux/themes/nord-tmux`
+3. copy the [`nord.tmux`][repo-tree-master-nord.tmux], [`nord-status-content.conf`][repo-tree-master-status-content.conf] and [`nord-status-content-no-patched-font.conf`][repo-tree-master-no-patched-font.conf] files to any location
+4. source the downloaded theme by adding the path of the [`nord.tmux`][repo-tree-master-nord.tmux] file to the bottom of your `.tmux.conf`, located in your [home directory][wiki-home_dir]:
+   ```sh
+   run-shell "~/.tmux/themes/nord-tmux/nord.tmux"
+   ```
+5. reload your `.tmux.conf` file to source- and activate the theme:
+   ```sh
+   tmux source-file ~/.tmux.conf
+   ```
+
+</ShrinkedWidth>
+
+[gh-gist-terminal-colors]: https://gist.github.com/XVilka/8346728
+[gh-javier-lopez/tundle]: https://github.com/javier-lopez/tundle
+[gh-tmux-plugins/tpm]: https://github.com/tmux-plugins/tpm
+[gh-tpm-docs-install-plugins]: https://github.com/tmux-plugins/tpm#installing-plugins
+[repo-br-develop]: https://github.com/arcticicestudio/nord-tmux/tree/develop
+[repo-down-master]: https://github.com/arcticicestudio/nord-tmux/archive/master.zip
+[repo-rel-latest]: https://github.com/arcticicestudio/nord-tmux/releases/latest
+[repo-tags]: https://github.com/arcticicestudio/nord-tmux/tags
+[repo-tree-master-no-patched-font.conf]: https://github.com/arcticicestudio/nord-tmux/blob/master/src/nord-status-content-no-patched-font.conf
+[repo-tree-master-nord.tmux]: https://github.com/arcticicestudio/nord-tmux/blob/master/nord.tmux
+[repo-tree-master-status-content.conf]: https://github.com/arcticicestudio/nord-tmux/blob/master/src/nord-status-content.conf
+[repo]: https://github.com/arcticicestudio/nord-tmux
+[tmux-man-tmux.conf]: http://man.openbsd.org/OpenBSD-current/man1/tmux.1#FILES
+[wiki-home_dir]: https://en.wikipedia.org/wiki/Home_directory

content/docs/ports/tmux/plugin-support/index.mdx

@@ -0,0 +1,59 @@
+import Link from "atoms/core/Link";
+import { Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { ReactComponent as Plugin } from "assets/images/illustrations/plugin.svg";
+import { ROUTE_DOCS_PORTS_TMUX_CONFIGURATION } from "config/routes/mappings";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Plugin Support",
+  subline: "Use your favorite plugins with a fluid and unobtrusive user interface transition."
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <Plugin />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+The theme comes with styles for popular [official][gh-tmux-plugins]- and third-party UI plugins allowing a unobtrusive and visually matching integration.
+
+## tmux-prefix-highlight
+
+[tmux-prefix-highlight][gh-tmux-plugins/tmux-prefix-highlight] highlights when pressing the tmux prefix key that allows to quickly see the current usage mode.
+Nord tmux supports the _prefix_ and _copy-mode_ status indicator.
+
+<Image
+  alt="Screenshot showing the status bar with multiple tmux-prefix-highlight mode indicators."
+  dropShadow
+  fluid={props.images["tmux-prefix-highlight.png"]}
+  rounded
+>
+  <span>
+    The status bar with multiple <em>tmux-prefix-highlight</em> mode indicators.
+  </span>
+</Image>
+
+The plugin is also supported when using Nord tmux without <Link to={`${ROUTE_DOCS_PORTS_TMUX_CONFIGURATION}#patched-font-characters`}>patched font characters</Link>.
+
+<Image
+  alt="Screenshot showing the status bar with disabled patched font characters and multiple tmux-prefix-highlight mode indicators."
+  dropShadow
+  fluid={props.images["tmux-prefix-highlight-no-patched-font.png"]}
+  rounded
+>
+  <span>
+    The status bar with disabled patched font characters and multiple <em>tmux-prefix-highlight</em> mode indicators.
+  </span>
+</Image>
+
+</ShrinkedWidth>
+
+[gh-tmux-plugins]: https://github.com/tmux-plugins
+[gh-tmux-plugins/tmux-prefix-highlight]: https://github.com/tmux-plugins/tmux-prefix-highlight

src/components/organisms/page/docs/ports/tmux/SectionContents/SectionContents.jsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * 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 <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @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;

src/components/organisms/page/docs/ports/tmux/SectionContents/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+export { default } from "./SectionContents";