Skip to content

Commit bf641a8

Browse files
Transfer and polish existing "Nord Sublime Text" docs and assets
Inititially this includes the install & activation guide and instructions how to develop the theme. GH-171
1 parent e600888 commit bf641a8

File tree

7 files changed

+200
-0
lines changed

7 files changed

+200
-0
lines changed
Loading
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import Button from "atoms/core/Button";
2+
import Link from "atoms/core/Link";
3+
import { Banner, Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
4+
import { Code } from "atoms/core/html-elements";
5+
import { ReactComponent as WindowCode } from "assets/images/illustrations/window-code.svg";
6+
import { ROUTE_DOCS_PORTS_SUBLIME_TEXT_INSTALLATION } from "config/routes/mappings";
7+
8+
import WIPNotice from "../../../../shared/docs/wip-notice";
9+
10+
export const frontmatter = {
11+
title: "Package Development",
12+
subline: "Learn how to customize the theme to fit your needs, preview changes and bundle it as package."
13+
};
14+
15+
<ShrinkedWidth value={25}>
16+
17+
<SpaceBox mTop={4} mBottom={4}>
18+
<WindowCode />
19+
</SpaceBox>
20+
21+
</ShrinkedWidth>
22+
23+
<ShrinkedWidth value={80}>
24+
25+
<WIPNotice />
26+
27+
This page documents how to develop the theme package — from requirements to `.sublime-package` packaging and the development workflow steps.
28+
29+
# Requirements
30+
31+
Download and install [Sublime Text] with a minimal version of [3.1.0 Build 3170][sbt-blog-announce-v3.1] (2018-05-07).
32+
33+
# Setup
34+
35+
## Download
36+
37+
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].
38+
39+
```sh
40+
git clone https://github.com/arcticicestudio/nord-sublime-text.git
41+
```
42+
43+
<Banner title={<>Package directories take precedence over <Code>`.sublime-package`</Code> files!</>} variant="warn">
44+
45+
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].
46+
47+
</Banner>
48+
49+
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.
50+
51+
<Button href="https://github.com/arcticicestudio/nord-sublime-text/archive/develop.zip">Download</Button>
52+
53+
Afterwards extract the archive to your [local `Packages/User` directory][sbt-docs-pkgs] located in the [settings data path][sbt-docs-settings].
54+
55+
<Image
56+
alt="Screenshot showing the GitHub repository web UI to download the project repository"
57+
fillSize={60}
58+
fluid={props.images["github-clone.png"]}
59+
>
60+
GitHub Web UI to download the theme repository as{" "}
61+
<Link href="https://en.wikipedia.org/wiki/Zip_(file_format)">ZIP</Link> file from GitHub.
62+
</Image>
63+
64+
Both methods will use the `develop` branch to work with the latest development state.
65+
66+
# Workflow
67+
68+
Sublime Text provides auto reload („hot reload“) for themes to immediately see saved changes when editing any of the package's source code files.
69+
70+
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 <Link to={`${ROUTE_DOCS_PORTS_SUBLIME_TEXT_INSTALLATION}#activation`}>installation & activation guide</Link>.
71+
72+
The theme's source code can now be modified and saved changes will immediately apply to the currently running Sublime Text instance.
73+
74+
# Packaging
75+
76+
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`.
77+
78+
Read the theme documentation about <Link to={`${ROUTE_DOCS_PORTS_SUBLIME_TEXT_INSTALLATION}#manual`}>how to install and activate a `.sublime-theme` package file</Link> for more details.
79+
80+
</ShrinkedWidth>
81+
82+
[gh-repo]: https://github.com/arcticicestudio/nord-sublime-text
83+
[gh-tree-color_scheme]: https://github.com/arcticicestudio/nord-sublime-text/blob/develop/Nord.sublime-color-scheme
84+
[gh-tree-skins]: https://github.com/arcticicestudio/nord-sublime-text/blob/develop/Nord.skins
85+
[git]: https://git-scm.com
86+
[sbt-blog-announce-v3.1]: https://www.sublimetext.com/blog/articles/sublime-text-3-point-1
87+
[sbt-docs-pkgs]: https://www.sublimetext.com/docs/3/packages.html
88+
[sbt-docs-settings]: https://www.sublimetext.com/docs/3/settings.html
89+
[wiki-zip]: https://en.wikipedia.org/wiki/Zip_(file_format)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import Link from "atoms/core/Link";
2+
import { Banner, Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
3+
import { Kbd } from "atoms/core/html-elements";
4+
import { ReactComponent as Plugin } from "assets/images/illustrations/plugin.svg";
5+
6+
import WIPNotice from "../../../../shared/docs/wip-notice";
7+
8+
export const frontmatter = {
9+
title: "Installation & Activation",
10+
subline: "Get up and running in one command with the package control registry."
11+
};
12+
13+
<ShrinkedWidth value={25}>
14+
15+
<SpaceBox mTop={4} mBottom={4}>
16+
<Plugin />
17+
</SpaceBox>
18+
19+
</ShrinkedWidth>
20+
21+
<ShrinkedWidth value={80}>
22+
23+
<WIPNotice />
24+
25+
Thanks to the [_package control_ registry][pc-pkg-nord], _Nord Sublime Text_ can be installed with one command.
26+
Please follow the [official installation instructions][pc-install] to set up _package control_ itself in order to install available packages from the registry.
27+
28+
<Banner title={<>Nord requires a minimum Sublime Text version of <Link href="https://www.sublimetext.com/blog/articles/sublime-text-3-point-1">3.1.0 Build 3170</Link></>}>
29+
30+
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.
31+
32+
</Banner>
33+
34+
Open the _package installation_ view through the [command palette][sbt-udocs-cmdp] via <Kbd>Ctrl</Kbd>/<Kbd>⌘</Kbd>+<Kbd>Shift</Kbd>+<Kbd>p</Kbd> and run the „Package Control: Install Package“ command.
35+
36+
<Image
37+
alt="Screenshot showing the command palette searching for the package installation command"
38+
dropShadow
39+
fluid={props.images["ui-package-control-install-command.png"]}
40+
rounded
41+
>
42+
<span>
43+
The <Link href="http://docs.sublimetext.info/en/latest/extensibility/command_palette.html">command palette</Link>{" "}
44+
searching for the „Install Package“ command.
45+
</span>
46+
</Image>
47+
48+
Search for „Nord“ and press <Kbd>⏎</Kbd> _Enter_ to install the theme.
49+
50+
<Image
51+
alt="Screenshot showing the installation view searching for the Nord package in the package registry"
52+
dropShadow
53+
fluid={props.images["ui-package-control-list-installed.png"]}
54+
rounded
55+
>
56+
<span>
57+
The installation view searching for the{" "}
58+
<Link href="https://packagecontrol.io/packages/Nord">Nord package in the package registry</Link>.
59+
</span>
60+
</Image>
61+
62+
### Manual
63+
64+
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].
65+
66+
1. Get the theme by either
67+
- downloading the `.sublime-package` file of the [latest release version][gh-rel-latest] (recommended).
68+
- 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.
69+
- 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.
70+
2. Copy the `.sublime-package` file into your package directory (_Preferences__Browse Packages…_) and restart Sublime Text in order to reload all installed packages.
71+
72+
## Activation
73+
74+
To activate the _Nord_ color theme, open the [command palette][sbt-udocs-cmdp] via <Kbd>Ctrl</Kbd>/<Kbd>⌘</Kbd>+<Kbd>Shift</Kbd>+<Kbd>p</Kbd> and run the „UI: Select Color Theme“ command or use the _Preferences__Color Theme…_ menu.
75+
76+
<Image dropShadow fluid={props.images["ui-color-theme-select.png"]} rounded>
77+
<span>
78+
Opening the color theme picker through the{" "}
79+
<Link href="http://docs.sublimetext.info/en/latest/extensibility/command_palette.html">Command Palette</Link>.
80+
</span>
81+
</Image>
82+
83+
Search for `Nord` and confirm the color theme change with <Kbd>⏎</Kbd> _Enter_.
84+
85+
<Image dropShadow fluid={props.images["ui-color-theme-select-search.png"]} rounded>
86+
<span>
87+
Selecting <em>Nord</em> as active color theme.
88+
</span>
89+
</Image>
90+
91+
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:
92+
93+
```json
94+
"color_scheme": "Packages/User/nord-sublime-text/Nord.sublime-color-scheme"
95+
```
96+
97+
</ShrinkedWidth>
98+
99+
[gh-dl-develop]: https://github.com/arcticicestudio/nord-docs/archive/develop.zip
100+
[gh-dl-master]: https://github.com/arcticicestudio/nord-docs/archive/develop.zip
101+
[gh-rel-latest]: https://github.com/arcticicestudio/nord-docs/releases/latest
102+
[gh-repo]: https://github.com/arcticicestudio/nord-sublime-text
103+
[pc-install]: https://packagecontrol.io/installation
104+
[pc-pkg-nord]: https://packagecontrol.io/packages/Nord
105+
[sbt-blog-announce-v3.1]: https://www.sublimetext.com/blog/articles/sublime-text-3-point-1
106+
[sbt-docs-color_schemes]: https://www.sublimetext.com/docs/3/color_schemes.html
107+
[sbt-docs-pkgs]: https://www.sublimetext.com/docs/3/packages.html
108+
[sbt-docs-settings]: https://www.sublimetext.com/docs/3/settings.html
109+
[sbt-docs-tmtheme]: https://www.sublimetext.com/docs/3/color_schemes_tmtheme.html
110+
[sbt-udocs-cmdp]: http://docs.sublimetext.info/en/latest/extensibility/command_palette.html
111+
[wiki-zip]: https://en.wikipedia.org/wiki/Zip_(file_format)
Loading
Loading
Loading
Loading

0 commit comments

Comments
 (0)