Transition: Nord Atom Syntax

content/docs/ports/atom-syntax/development/index.mdx

@@ -0,0 +1,133 @@
+import Button from "atoms/core/Button";
+import Link from "atoms/core/Link";
+import { Banner, Image, ShrinkedWidth, SpaceBox, Video } from "atoms/core/mdx-elements";
+import { ReactComponent as WindowCode } from "assets/images/illustrations/window-code.svg";
+import { ROUTE_DOCS_PORTS_ATOM_SYNTAX_INSTALLATION } from "config/routes/mappings";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Package Development",
+  subline: "Learn how to customize the theme to fit your needs and instantly preview local changes."
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <WindowCode />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+This page documents how to develop the theme package — from requirements to the APM development workflow steps.
+
+# Requirements
+
+Download and install Atom, or [Atom Beta][atom-beta] to use the latest development state, with a minimal version of [1.13.0 or higher][atom-blog-rln-1.13.0].
+
+# Setup
+
+<Banner
+  title={
+    <>
+      Uninstall all currently installed versions of the <em>Nord Atom Syntax</em> package!
+    </>
+  }
+  variant="warn"
+>
+  Otherwise the installed and versioned package will collide with the development package that'll be configured in this
+  guide.
+</Banner>
+
+## Download
+
+Clone the [_Nord Atom Syntax_ repository from GitHub][gh-repo] to your local system.
+
+```sh
+git clone https://github.com/arcticicestudio/nord-atom-syntax.git
+```
+
+To get the project without [Git][] download the project as `.zip` archive file from the GitHub repository or click on the download button below and extract the archive to your local system afterwards.
+
+<Button href="https://github.com/arcticicestudio/nord-atom-syntax/archive/develop.zip">Download</Button>
+
+<Image
+  alt="Screenshot showing the GitHub repository web UI to download the project repository"
+  fillSize={60}
+  fluid={props.images["github-clone.png"]}
+>
+  Download the project repository from GitHub.
+</Image>
+
+Both methods will use the `develop` branch to work with the latest development state.
+
+## Register As Development Package
+
+To make the theme available within Atom, the package repository must be registered as _development package_.
+Open a terminal, switch to the cloned/extracted repository directory and run APM&apos;s `dev` command to register the package:
+
+```sh
+apm dev
+```
+
+This automatically links _Nord Atom Syntax_&apos;s package directory into Atom&apos;s `dev/packages` directory in your [Atom configuration folder][atom-docs-basic-custom-config] `.atom` that is by default located in your [home directory][wiki-homedir] at `~/.atom/dev/packages/<package-name>`.
+
+Afterwards **restart Atom** to check that the _Nord Atom Syntax_ theme has been registered successfully as development package. Go to the _Packages_ panes of the [_Settings_ view][atom-docs-basic-settings] and ensure the _Nord Atom Syntax_ package is listed in the _Development Packages_ section.
+
+<Image
+  alt="Screenshot showing the settings view with successfully registered Nord Atom Syntax development theme package"
+  dropShadow
+  fluid={props.images["settings-dev-theme-pkg.png"]}
+  rounded
+>
+  The{" "}
+  <Link href="https://flight-manual.atom.io/getting-started/sections/atom-basics/#settings-and-preferences">
+    <em>Settings</em> view
+  </Link>{" "}
+  with successfully registered <em>Nord Atom Syntax</em> development theme package.
+</Image>
+
+# Workflow
+
+## Dev Mode
+
+Start Atom in the [„Dev Mode“][atom-docs-hack-theme-syntax] 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
+```
+
+[Add the cloned/extracted repository as new project folder][atom-docs-basic-add_proj_dir] and set _Nord Atom_ as active syntax theme like documented in the <Link to={`${ROUTE_DOCS_PORTS_ATOM_SYNTAX_INSTALLATION}#activation`}>installation & activation guide</Link>.
+
+The theme's source code can now be modified and saved changes will immediately apply to the currently running Atom instance.
+
+<Video
+  dropShadow
+  loop
+  poster={props.images["dev-pkg-hot-reload.mp4.png"]}
+  rounded
+  sources={[props.videos["dev-pkg-hot-reload.mp4"]]}
+>
+  <span>
+    Development theme packages changes are immediately applied on save when running in Atom&apos;s „Dev Mode“.
+  </span>
+</Video>
+
+</ShrinkedWidth>
+
+[atom-beta]: https://atom.io/beta
+[atom-blog-rln-1.13.0]: https://blog.atom.io/2017/01/10/atom-1-13.html
+[atom-docs-basic-add_proj_dir]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#opening-directories
+[atom-docs-basic-custom-config]: https://flight-manual.atom.io/using-atom/sections/basic-customization/#global-configuration-settings
+[atom-docs-basic-settings]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#settings-and-preferences
+[atom-docs-hack-debug-hotreload]: https://flight-manual.atom.io/hacking-atom/sections/creating-a-theme/#live-reload
+[atom-docs-hack-debug]: https://flight-manual.atom.io/hacking-atom/sections/debugging
+[atom-docs-hack-dev_workflow]: https://flight-manual.atom.io/hacking-atom/sections/creating-a-theme/#development-workflow
+[atom-docs-hack-theme-syntax]: https://flight-manual.atom.io/hacking-atom/sections/creating-a-theme/#creating-a-syntax-theme
+[gh-repo]: https://github.com/arcticicestudio/nord-atom-syntax
+[git]: https://git-scm.com
+[wiki-homedir]: https://en.wikipedia.org/wiki/Home_directory

content/docs/ports/atom-syntax/installation/index.mdx

@@ -0,0 +1,76 @@
+import Link from "atoms/core/Link";
+import { Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { Kbd } from "atoms/core/html-elements";
+import { ReactComponent as Plugin } from "assets/images/illustrations/plugin.svg";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Installation & Activation",
+  subline: "Get up and running in one click with the official Atom theme package registry."
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <Plugin />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+Thanks to the [official Atom theme package registry][atom-theme_pkg-reg-nord], _Nord Atom Syntax_ can be installed with one click.
+
+1. Go to the [package installation view][atom-docs-pkgs] by opening the [_Settings_][atom-docs-basic-settings].
+2. Switch to the _Install_ pane and enable the [_Themes_ package search filter][atom-docs-pkgs-th].
+3. Search for _Nord_ and and click on the <Kbd>Install</Kbd> button to finish the installation.
+
+<Image
+  alt="Screenshot showing the builtin theme package registry view after searching for Nord"
+  dropShadow
+  fluid={props.images["settings-package-registry.png"]}
+  rounded
+>
+  <span>
+    The builtin <Link href="https://atom.io/themes">theme package registry</Link> view after searching for Nord.
+  </span>
+</Image>
+
+## From CLI via APM
+
+The package can also be installed from the command line using `apm` by running the `install` command:
+
+```sh
+# Install the latest Nord theme package version...
+apm install nord-atom-syntax
+
+# ...or a specific version.
+apm install nord-atom-syntax@0.9.1
+```
+
+## Activation
+
+To activate the _Nord_ syntax theme, open the [_Settings_][atom-docs-basic-settings] and switch to the _Themes_ pane to [change the UI or syntax theme][atom-docs-basic-theme_switch]. Click on the the _Syntax Theme_ drop-down menu and select _Nord Atom_.
+
+<Image
+  alt="Screenshot showing the theme pane of the setting view with active drop-down menu component to select the active syntax theme"
+  dropShadow
+  fluid={props.images["settings-theme-select.png"]}
+  rounded
+>
+  <span>
+    Selecting <em>Nord Atom</em> as active syntax theme.
+  </span>
+</Image>
+
+</ShrinkedWidth>
+
+[atom-docs-basic-settings]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#settings-and-preferences
+[atom-docs-basic-theme_switch]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#changing-the-theme
+[atom-docs-pkgs-cli]: https://flight-manual.atom.io/using-atom/sections/atom-packages/#command-line
+[atom-docs-pkgs-th]: https://flight-manual.atom.io/using-atom/sections/atom-packages/#atom-themes
+[atom-docs-pkgs]: https://flight-manual.atom.io/using-atom/sections/atom-packages
+[atom-theme_pkg-reg-nord]: https://atom.io/themes/nord-atom-syntax

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

src/components/organisms/page/docs/ports/atom-syntax/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_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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.19.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 develop the package.
+        </ContentsCard>
+        <ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
+          Learn about supported languages, packages and how to deal with occurring problems.
+        </ContentsCard>
+      </CardGrid>
+    </Content>
+    <WaveFooter />
+  </Section>
+);
+
+export default SectionContents;

src/components/organisms/page/docs/ports/atom-syntax/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";

src/components/organisms/page/docs/ports/atom-syntax/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_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 <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.19.0
+ */
+const SectionHero = () => (
+  <Section id={SECTION_ID} variant="tertiary">
+    <Content centered>
+      <Headline>Nord Atom Syntax</Headline>
+      <Subline>
+        Documentations to get to know the theme and supported features, how to use the package or to find solution for
+        possible problems.
+      </Subline>
+    </Content>
+  </Section>
+);
+
+export default SectionHero;

src/components/organisms/page/docs/ports/atom-syntax/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";

src/components/organisms/page/docs/ports/atom-syntax/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 };