diff --git a/content/docs/ports/atom-syntax/development/dev-pkg-hot-reload.mp4 b/content/docs/ports/atom-syntax/development/dev-pkg-hot-reload.mp4 new file mode 100644 index 00000000..98c43874 Binary files /dev/null and b/content/docs/ports/atom-syntax/development/dev-pkg-hot-reload.mp4 differ diff --git a/content/docs/ports/atom-syntax/development/dev-pkg-hot-reload.mp4.png b/content/docs/ports/atom-syntax/development/dev-pkg-hot-reload.mp4.png new file mode 100644 index 00000000..b18c17a0 Binary files /dev/null and b/content/docs/ports/atom-syntax/development/dev-pkg-hot-reload.mp4.png differ diff --git a/content/docs/ports/atom-syntax/development/github-clone.png b/content/docs/ports/atom-syntax/development/github-clone.png new file mode 100644 index 00000000..a603447a Binary files /dev/null and b/content/docs/ports/atom-syntax/development/github-clone.png differ diff --git a/content/docs/ports/atom-syntax/development/index.mdx b/content/docs/ports/atom-syntax/development/index.mdx new file mode 100644 index 00000000..cc3c7d57 --- /dev/null +++ b/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." +}; + + + + + + + + + + + + + +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 + + + Uninstall all currently installed versions of the Nord Atom Syntax package! + + } + variant="warn" +> + Otherwise the installed and versioned package will collide with the development package that'll be configured in this + guide. + + +## 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. + + + +Screenshot showing the GitHub repository web UI to download the project repository + Download the project repository from GitHub. + + +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's `dev` command to register the package: + +```sh +apm dev +``` + +This automatically links _Nord Atom Syntax_'s package directory into Atom'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/`. + +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. + +Screenshot showing the settings view with successfully registered Nord Atom Syntax development theme package + The{" "} + + Settings view + {" "} + with successfully registered Nord Atom Syntax development theme package. + + +# 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 installation & activation guide. + +The theme's source code can now be modified and saved changes will immediately apply to the currently running Atom instance. + + + + + +[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 diff --git a/content/docs/ports/atom-syntax/development/settings-dev-theme-pkg.png b/content/docs/ports/atom-syntax/development/settings-dev-theme-pkg.png new file mode 100644 index 00000000..ce51e1dd Binary files /dev/null and b/content/docs/ports/atom-syntax/development/settings-dev-theme-pkg.png differ diff --git a/content/docs/ports/atom-syntax/installation/index.mdx b/content/docs/ports/atom-syntax/installation/index.mdx new file mode 100644 index 00000000..8a6feb36 --- /dev/null +++ b/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." +}; + + + + + + + + + + + + + +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 Install button to finish the installation. + +Screenshot showing the builtin theme package registry view after searching for Nord + + The builtin theme package registry view after searching for Nord. + + + +## 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_. + +Screenshot showing the theme pane of the setting view with active drop-down menu component to select the active syntax theme + + Selecting Nord Atom as active syntax theme. + + + + + +[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 diff --git a/content/docs/ports/atom-syntax/installation/settings-package-registry.png b/content/docs/ports/atom-syntax/installation/settings-package-registry.png new file mode 100644 index 00000000..24b9a1d8 Binary files /dev/null and b/content/docs/ports/atom-syntax/installation/settings-package-registry.png differ diff --git a/content/docs/ports/atom-syntax/installation/settings-theme-select.png b/content/docs/ports/atom-syntax/installation/settings-theme-select.png new file mode 100644 index 00000000..d98cafe2 Binary files /dev/null and b/content/docs/ports/atom-syntax/installation/settings-theme-select.png differ