diff --git a/content/docs/ports/sublime-text/development/github-clone.png b/content/docs/ports/sublime-text/development/github-clone.png new file mode 100644 index 00000000..a603447a Binary files /dev/null and b/content/docs/ports/sublime-text/development/github-clone.png differ diff --git a/content/docs/ports/sublime-text/development/index.mdx b/content/docs/ports/sublime-text/development/index.mdx new file mode 100644 index 00000000..fff7c6d6 --- /dev/null +++ b/content/docs/ports/sublime-text/development/index.mdx @@ -0,0 +1,89 @@ +import Button from "atoms/core/Button"; +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 WindowCode } from "assets/images/illustrations/window-code.svg"; +import { ROUTE_DOCS_PORTS_SUBLIME_TEXT_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, preview changes and bundle it as package." +}; + + + + + + + + + + + + + +This page documents how to develop the theme package — from requirements to `.sublime-package` packaging and the development workflow steps. + +# Requirements + +Download and install [Sublime Text] with a minimal version of [3.1.0 Build 3170][sbt-blog-announce-v3.1] (2018-05-07). + +# Setup + +## Download + +Clone the [_Nord Sublime Text_ repository from GitHub][gh-repo] to your [local `Packages/User` directory][sbt-docs-pkgs] located in the [settings data path][sbt-docs-settings]. + +```sh +git clone https://github.com/arcticicestudio/nord-sublime-text.git +``` + +Package directories take precedence over `.sublime-package` files!} variant="warn"> + +When Nord has also been installed as `.sublime-package` [ZIP][wiki-zip] archive file while a directory with the same name (without `.sublime-package` prefix) is also placed in the package directory, each file within the directory overrides files whose names are equal to files in the packaged theme. See the section about „Overriding Files From a Zipped Package“ in the [official package documentations][sbt-docs-pkgs]. + + + +To get the theme without [Git][], download the repository as [ZIP][wiki-zip] archive file from the GitHub or click on the download button below. + + + +Afterwards extract the archive to your [local `Packages/User` directory][sbt-docs-pkgs] located in the [settings data path][sbt-docs-settings]. + +Screenshot showing the GitHub repository web UI to download the project repository + GitHub Web UI to download the theme repository as{" "} + ZIP file from GitHub. + + +Both methods will use the `develop` branch to work with the latest development state. + +# Workflow + +Sublime Text provides auto reload („hot reload“) for themes to immediately see saved changes when editing any of the package's source code files. + +Open the extension by adding the cloned/extracted repository directory as project folder through the „Project: Add Folder“ command or opening the directory directly (_File_ ➜ _Open Folder_) and set _Nord_ as active color 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 Sublime Text instance. + +# Packaging + +Sublime Text packages are stored as compressed `.sublime-package` file using the [ZIP][wiki-zip] archive file format. To create Nord as package, either add at least the [`Nord.sublime-color-scheme`][gh-tree-color_scheme] and [`Nord.skins`][gh-tree-skins] files (recommended) or the whole repository to a new ZIP archive file named `Nord.sublime-package`. + +Read the theme documentation about how to install and activate a `.sublime-theme` package file for more details. + + + +[gh-repo]: https://github.com/arcticicestudio/nord-sublime-text +[gh-tree-color_scheme]: https://github.com/arcticicestudio/nord-sublime-text/blob/develop/Nord.sublime-color-scheme +[gh-tree-skins]: https://github.com/arcticicestudio/nord-sublime-text/blob/develop/Nord.skins +[git]: https://git-scm.com +[sbt-blog-announce-v3.1]: https://www.sublimetext.com/blog/articles/sublime-text-3-point-1 +[sbt-docs-pkgs]: https://www.sublimetext.com/docs/3/packages.html +[sbt-docs-settings]: https://www.sublimetext.com/docs/3/settings.html +[wiki-zip]: https://en.wikipedia.org/wiki/Zip_(file_format) diff --git a/content/docs/ports/sublime-text/installation/index.mdx b/content/docs/ports/sublime-text/installation/index.mdx new file mode 100644 index 00000000..0bc7210a --- /dev/null +++ b/content/docs/ports/sublime-text/installation/index.mdx @@ -0,0 +1,111 @@ +import Link from "atoms/core/Link"; +import { Banner, 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 command with the package control registry." +}; + + + + + + + + + + + + + +Thanks to the [_package control_ registry][pc-pkg-nord], _Nord Sublime Text_ can be installed with one command. +Please follow the [official installation instructions][pc-install] to set up _package control_ itself in order to install available packages from the registry. + +Nord requires a minimum Sublime Text version of 3.1.0 Build 3170}> + +Nord makes use of the new [`.sublime-color-scheme` JSON file format][sbt-docs-color_schemes] that has been introduced in Sublime Text [version 3.1.0 Build 3170][sbt-blog-announce-v3.1] and is therefore the minimum required and supported version. The `.tmTheme` XML file format][sbt-docs-tmtheme] has been officially deprecated by the Sublime Text team and is not supported by Nord anymore. + + + +Open the _package installation_ view through the [command palette][sbt-udocs-cmdp] via Ctrl/⌘+Shift+p and run the „Package Control: Install Package“ command. + +Screenshot showing the command palette searching for the package installation command + + The command palette{" "} + searching for the „Install Package“ command. + + + +Search for „Nord“ and press ⏎ _Enter_ to install the theme. + +Screenshot showing the installation view searching for the Nord package in the package registry + + The installation view searching for the{" "} + Nord package in the package registry. + + + +### Manual + +A `.sublime-package` file can be installed manually without using the online _package control_ registry by placing the package file in the `Installed Packages` or `Packages/User` directory located in the [settings data path][sbt-docs-settings]. For details about package directory paths on different operating system see the [official package documentations][sbt-docs-pkgs]. + +1. Get the theme by either + - downloading the `.sublime-package` file of the [latest release version][gh-rel-latest] (recommended). + - cloning the [repository from GitHub][gh-repo], packing it as [ZIP][wiki-zip] archive file and renaming the file extension and rename the file extension from `.zip` to `.sublime-package` afterwards. + - downloading the [master][gh-dl-master] (stable) or [`develop`][gh-dl-develop] (unstable) repository branch from GitHub as [ZIP][wiki-zip] archive file and rename the file extension from `.zip` to `.sublime-package` afterwards. +2. Copy the `.sublime-package` file into your package directory (_Preferences_ ➜ _Browse Packages…_) and restart Sublime Text in order to reload all installed packages. + +## Activation + +To activate the _Nord_ color theme, open the [command palette][sbt-udocs-cmdp] via Ctrl/⌘+Shift+p and run the „UI: Select Color Theme“ command or use the _Preferences_ ➜ _Color Theme…_ menu. + + + + Opening the color theme picker through the{" "} + Command Palette. + + + +Search for `Nord` and confirm the color theme change with ⏎ _Enter_. + + + + Selecting Nord as active color theme. + + + +Alternatively the color scheme can also be set directly within the [user settings][sbt-docs-settings] that can be opened using the _Preferences_ ➜ _Settings_ menu. Add or modify the `color_scheme` JSON key and set _Nord Sublime Text_ as active color theme: + +```json +"color_scheme": "Packages/User/nord-sublime-text/Nord.sublime-color-scheme" +``` + + + +[gh-dl-develop]: https://github.com/arcticicestudio/nord-docs/archive/develop.zip +[gh-dl-master]: https://github.com/arcticicestudio/nord-docs/archive/develop.zip +[gh-rel-latest]: https://github.com/arcticicestudio/nord-docs/releases/latest +[gh-repo]: https://github.com/arcticicestudio/nord-sublime-text +[pc-install]: https://packagecontrol.io/installation +[pc-pkg-nord]: https://packagecontrol.io/packages/Nord +[sbt-blog-announce-v3.1]: https://www.sublimetext.com/blog/articles/sublime-text-3-point-1 +[sbt-docs-color_schemes]: https://www.sublimetext.com/docs/3/color_schemes.html +[sbt-docs-pkgs]: https://www.sublimetext.com/docs/3/packages.html +[sbt-docs-settings]: https://www.sublimetext.com/docs/3/settings.html +[sbt-docs-tmtheme]: https://www.sublimetext.com/docs/3/color_schemes_tmtheme.html +[sbt-udocs-cmdp]: http://docs.sublimetext.info/en/latest/extensibility/command_palette.html +[wiki-zip]: https://en.wikipedia.org/wiki/Zip_(file_format) diff --git a/content/docs/ports/sublime-text/installation/ui-color-theme-select-search.png b/content/docs/ports/sublime-text/installation/ui-color-theme-select-search.png new file mode 100644 index 00000000..379e159b Binary files /dev/null and b/content/docs/ports/sublime-text/installation/ui-color-theme-select-search.png differ diff --git a/content/docs/ports/sublime-text/installation/ui-color-theme-select.png b/content/docs/ports/sublime-text/installation/ui-color-theme-select.png new file mode 100644 index 00000000..4ff58de3 Binary files /dev/null and b/content/docs/ports/sublime-text/installation/ui-color-theme-select.png differ diff --git a/content/docs/ports/sublime-text/installation/ui-package-control-install-command.png b/content/docs/ports/sublime-text/installation/ui-package-control-install-command.png new file mode 100644 index 00000000..63d7524a Binary files /dev/null and b/content/docs/ports/sublime-text/installation/ui-package-control-install-command.png differ diff --git a/content/docs/ports/sublime-text/installation/ui-package-control-list-installed.png b/content/docs/ports/sublime-text/installation/ui-package-control-list-installed.png new file mode 100644 index 00000000..d6a827ba Binary files /dev/null and b/content/docs/ports/sublime-text/installation/ui-package-control-list-installed.png differ