Transition: Nord Xcode

content/docs/ports/xcode/asset_catalog/index.mdx

@@ -0,0 +1,80 @@
+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 ColorSwatchesStripes } from "assets/images/illustrations/color-swatches-stripes.svg";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Asset Catalog",
+  subline: "Use Nord as color set from the asset catalog and for the interface builder"
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <ColorSwatchesStripes />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+## Color Set
+
+Nord Xcode provides a _color set_ for Xcode [asset catalog][apple-dev-lib-asset_catalog] that can be used as named colors in the [Interface Builder][apple-dev-if_builder] and programmatically, e.g. via the `UIColor(named)` function.
+
+<Image
+  alt="Screenshot showing the Xcode interface builder using the Nord color set from the asset catalog"
+  fluid={props.images["ui-interface_builder.png"]}
+>
+  <span>
+    The Xcode{" "}
+    <Link href="https://developer.apple.com/xcode/interface-builder" target="_blank">
+      interface builder
+    </Link>{" "}
+    using the Nord color set from the asset catalog.
+  </span>
+</Image>
+
+The colors are located in the [`nord.xcassets`][gh-tree-xcassets] folder and can be installed by [adding the folder to your project][apple-help-xcode-add_folder_files].
+
+<SpaceBox mTop={2} mBottom={2}>
+<Banner
+  title={
+    <>
+      More details about the asset catalog, color sets and the usage.
+    </>
+  }
+>
+
+Please read the official documentation section on how to [create a asset catalog and color sets][apple-help-xcode-create_ass_cata] to learn more about the usage in the [Interface Builder][apple-dev-if_builder].
+
+</Banner>
+</SpaceBox>
+
+<Image
+  alt="Screenshot showing the Nord color set in the Xcode asset catalog"
+  fluid={props.images["ui-asset_catalog.png"]}
+>
+  <span>
+    The Nord color set in the{" "}
+    <Link
+      href="https://developer.apple.com/library/archive/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format"
+      target="_blank"
+    >
+      Xcode asset catalog
+    </Link>
+    .
+  </span>
+</Image>
+
+</ShrinkedWidth>
+
+[gh-tree-xcassets]: https://github.com/arcticicestudio/nord-xcode/tree/develop/src/nord.xcassets
+[apple-dev-lib-asset_catalog]: https://developer.apple.com/library/archive/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format
+[apple-dev-if_builder]: https://developer.apple.com/xcode/interface-builder
+[apple-help-xcode-add_folder_files]: https://help.apple.com/xcode/mac/current/#/dev81ce1d383
+[apple-help-xcode-create_ass_cata]: https://help.apple.com/xcode/mac/current/#/dev10510b1f7

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

@@ -0,0 +1,73 @@
+import Link from "atoms/core/Link";
+import { Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { ReactComponent as WindowCode } from "assets/images/illustrations/window-code.svg";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Installation & Activation",
+  subline: "Get up and running with a few commands"
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <WindowCode />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+## Installation
+
+Nord Xcode can be installed by downloading the latest [`Nord.xccolortheme`][gh-tree-xccolortheme] file from the [GitHub repository][gh-repo] and place it into the `~/Library/Developer/Xcode/UserData/FontAndColorThemes` directory.
+
+```sh
+mkdir -p ~/Library/Developer/Xcode/UserData/FontAndColorThemes
+curl https://raw.githubusercontent.com/arcticicestudio/nord-xcode/develop/src/Nord.xccolortheme -o ~/Library/Developer/Xcode/UserData/FontAndColorThemes/Nord.xccolortheme
+```
+
+### Latest Development State
+
+To always use the latest development state of Nord Xcode, [clone the repository][gh-repo] and create a [symbolic link][wiki-symlink] of the [`Nord.xccolortheme`][gh-tree-xccolortheme] file to `~/Library/Developer/Xcode/UserData/FontAndColorThemes/Nord.xccolortheme` afterwards:
+
+```sh
+git clone https://github.com/arcticicestudio/nord-xcode
+ln -sr "$PWD/src/Nord.xccolortheme" "$HOME/Library/Developer/Xcode/UserData/FontAndColorThemes/Nord.xccolortheme"
+```
+
+<Image
+  alt="Screenshot showing the GitHub repository web UI to download the project repository"
+  fillSize={60}
+  fluid={props.images["github-clone.png"]}
+>
+  <span>The GitHub repository web UI to download the project repository.</span>
+</Image>
+
+## Activation
+
+To activate and use Nord Xcode as your default color theme…
+
+1. …open _File_ > _Preferences_
+2. …switch to the _Fonts & Colors_ tab
+3. …select _Nord_ from the list
+
+<SpaceBox mTop={4} mBottom={4}>
+  <Image
+    dropShadow
+    fluid={props.images["ui-activation.png"]}
+    rounded
+    alt="Screenshot showing the Xcode preference to activate the Nord color theme"
+  >
+    <span>The Xcode preferences to activate the Nord color theme.</span>
+  </Image>
+</SpaceBox>
+
+</ShrinkedWidth>
+
+[gh-repo]: https://github.com/arcticicestudio/nord-xcode
+[gh-tree-xccolortheme]: https://github.com/arcticicestudio/nord-xcode/blob/develop/src/Nord.xccolortheme
+[wiki-symlink]: https://en.wikipedia.org/wiki/Symbolic_link

src/components/organisms/page/docs/ports/xcode/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_XCODE } from "config/routes/mappings";
+import { topicsGettingStarted, topicsReferences } from "data/components/organisms/page/docs/ports/xcode/topics";
+import { sectionIdFor } from "utils";
+import { colors } from "styles/theme";
+
+import { ContentsCard, CardGrid } from "../../../shared";
+
+const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_XCODE, 1);
+
+/**
+ * The component that represents the contents section of the docs page for the "Nord Xcode" port project.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.22.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 and activate the theme.
+        </ContentsCard>
+        <ContentsCard accentColor={colors.nord10} logoComponent={BookOpen} title="References" topics={topicsReferences}>
+          Learn about theme features and how to deal with occurring problems.
+        </ContentsCard>
+      </CardGrid>
+    </Content>
+    <WaveFooter />
+  </Section>
+);
+
+export default SectionContents;

src/components/organisms/page/docs/ports/xcode/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/xcode/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_XCODE } from "config/routes/mappings";
+import { sectionIdFor } from "utils";
+
+import { Headline, Subline } from "../../../shared";
+
+const SECTION_ID = sectionIdFor(ROUTE_DOCS_PORTS_XCODE, 0);
+
+/**
+ * The component that represents the hero section of the docs page for the "Nord Xcode" port project.
+ *
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.22.0
+ */
+const SectionHero = () => (
+  <Section id={SECTION_ID} variant="tertiary">
+    <Content centered>
+      <Headline>Nord Xcode</Headline>
+      <Subline>
+        Documentations to get to know the project and supported features, how to use the theme and find solutions for
+        possible problems.
+      </Subline>
+    </Content>
+  </Section>
+);
+
+export default SectionHero;

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

src/components/organisms/page/ports/xcode/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_XCODE, ROUTE_DOCS_PORTS_XCODE_INSTALLATION, ROUTE_PORTS_XCODE } 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_XCODE, 0);
 
 /**
  * The component that represents the hero section for the landing page of the "Nord Xcode" 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-xcode");
+  const { gitHubRepositoryUrl, projectUrl } = portMetadata.find(port => port.name === "nord-xcode");
 
   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 Xcode.
-        </P>
+    <Section id={SECTION_ID}>
+      <Content centered decorated>
+        <FeatureDuo verticalOnly>
+          <Text verticalOnly>
+            <Headline large>Nord Xcode</Headline>
+            <Subline>
+              An arctic, north-bluish clean and elegant <Link href={projectUrl}>Xcode</Link> color theme.
+            </Subline>
+            <Subline>Designed for a fluent and clear workflow.</Subline>
+            <Actions>
+              <Button to={ROUTE_DOCS_PORTS_XCODE_INSTALLATION} variant="primary">
+                Get Started
+              </Button>
+              <Button ghost outlined quiet to={ROUTE_DOCS_PORTS_XCODE} variant="primary">
+                Documentation
+              </Button>
+              <Button ghost href={gitHubRepositoryUrl} outlined quiet variant="primary">
+                GitHub
+              </Button>
+            </Actions>
+          </Text>
+          <Visualization>
+            <Image
+              alt="Screenshot showing the syntax highlighting in the Xcode source code editor"
+              dropShadow
+              fluid={assets.images["overview.png"]}
+              rounded
+            >
+              <span>
+                The syntax highlighting in the <em>Xcode</em> source code editor.
+              </span>
+            </Image>
+          </Visualization>
+        </FeatureDuo>
       </Content>
-      <WaveFooter />
+      <WaveDivider />
     </Section>
   );
-}
+};
+
+SectionHero.propTypes = usePortsAssetsPropTypes;
+
+export default SectionHero;