From e6e93493151149126a412df0e1b4430d0c654537 Mon Sep 17 00:00:00 2001 From: Drew Regitsky Date: Sun, 4 Oct 2015 21:59:40 -0700 Subject: [PATCH 1/2] getting started css tweak --- getting-started/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/getting-started/index.html b/getting-started/index.html index 3e24cecce..a446e890a 100644 --- a/getting-started/index.html +++ b/getting-started/index.html @@ -67,6 +67,8 @@ title: Getting started with plugins } div.links-overlay p { margin-top: 5px; + font-size: 18px; + line-height: 22px; } .grid .unit:last-child { From 040ce93ce8cd692219cb9622770ddf143882b72d Mon Sep 17 00:00:00 2001 From: Drew Regitsky Date: Sun, 4 Oct 2015 22:51:52 -0700 Subject: [PATCH 2/2] updated copy and layout for getting started and docs --- _data/sidebar.json | 7 ++-- docs/index.html | 54 ++++++++++++------------- getting-started/index.html | 81 +++++++++++++++++++++----------------- 3 files changed, 76 insertions(+), 66 deletions(-) diff --git a/_data/sidebar.json b/_data/sidebar.json index d57c1555b..9ad3b57dc 100644 --- a/_data/sidebar.json +++ b/_data/sidebar.json @@ -2,7 +2,7 @@ "sections": [ { "name": "Guides", - "description": "Get a tour of how we structured N1, and learn best practices for writing your own plugin.", + "description": "Get a tour of how we structured N1, and learn best practices for writing your own plugins.", "items": [ { "html": "

Packages lie at the heart of N1. Each part of the core experience is a separate package that uses the Nylas Package API to add functionality to the client. Want to make a read-only mail client? Remove the core Composer package and you'll see reply buttons and composer functionality disappear.

\n

Let's explore the files in a simple package that adds a Translate option to the Composer. When you tap the Translate button, we'll display a popup menu with a list of languages. When you pick a language, we'll make a web request and convert your reply into the desired language.

\n

Package Structure

\n

Each package is defined by a package.json file that includes its name, version and dependencies. Packages may also declare dependencies which are loaded from npm - in this case, the request library. You'll need to npm install these dependencies locally when developing the package.

\n
{\n  \"name\": \"translate\",\n  \"version\": \"0.1.0\",\n  \"main\": \"./lib/main\",\n  \"description\": \"An example package for N1\",\n  \"license\": \"Proprietary\",\n  \"engines\": {\n    \"atom\": \"*\"\n  },\n  \"dependencies\": {\n    \"request\": \"^2.53\"\n  }\n}\n

Our package also contains source files, a spec file with complete tests for the behavior the package adds, and a stylesheet for CSS:

\n
- package.json\n- lib/\n   - main.coffee\n   - translate-button.cjsx\n- spec/\n   - main-spec.coffee\n- stylesheets/\n   - translate.less\n

package.json lists lib/main as the root file of our package. Since N1 runs NodeJS, we can require other source files, Node packages, etc.

\n

N1 can read js, coffee, jsx, and cjsx files automatically.

\n

Inside main.coffee, there are two important functions being exported:

\n
require './translate-button'\n\nmodule.exports =\n\n  # Activate is called when the package is loaded. If your package previously\n  # saved state using `serialize` it is provided.\n  #\n  activate: (@state) ->\n    ComponentRegistry.register TranslateButton,\n      role: 'Composer:ActionButton'\n\n  # Serialize is called when your package is about to be unmounted.\n  # You can return a state object that will be passed back to your package\n  # when it is re-activated.\n  #\n  serialize: ->\n      {}\n\n  # This optional method is called when the window is shutting down,\n  # or when your package is being updated or disabled. If your package is\n  # watching any files, holding external resources, providing commands or\n  # subscribing to events, release them here.\n  #\n  deactivate: ->\n    ComponentRegistry.unregister(TranslateButton)\n
\n
\n

N1 uses CJSX, a CoffeeScript version of JSX, which makes it easy to express Virtual DOM in React render methods! You may want to add the Babel plugin to Sublime Text, or the CJSX Language for syntax highlighting.

\n
\n

Package Stylesheets

\n

Style sheets for your package should be placed in the styles directory. Any style sheets in this directory will be loaded and attached to the DOM when your package is activated. Style sheets can be written as CSS or Less, but Less is recommended.

\n

Ideally, you won't need much in the way of styling. We've provided a standard set of components which define both the colors and UI elements for any package that fits into N1 seamlessly.

\n

If you do need special styling, try to keep only structural styles in the package stylesheets. If you must specify colors and sizing, these should be taken from the active theme's [ui-variables.less][ui-variables]. For more information, see the [theme variables docs][theme-variables]. If you follow this guideline, your package will look good out of the box with any theme!

\n

An optional stylesheets array in your package.json can list the style sheets by name to specify a loading order; otherwise, all style sheets are loaded.

\n

Package Assets

\n

Many packages need other static files, like images. You can add static files anywhere in your package directory, and reference them at runtime using the nylas:// url scheme:

\n
<img src=\"nylas://my-package-name/assets/goofy.png\">\n\na = new Audio()\na.src = \"nylas://my-package-name/sounds/bloop.mp3\"\na.play()\n

Installing a Package

\n

N1 ships with many packages already bundled with the application. When the application launches, it looks for additional packages in ~/.nylas/dev/packages. Each package you create belongs in its own directory inside this folder.

\n

In the future, it will be possible to install packages directly from within the client.

\n", @@ -136,7 +136,7 @@ }, { "name": "Sample Code", - "description":"Sample plugins to give an idea of what you can build on N1.", + "description":"Check out example plugins to get an idea of what you can build on N1.", "link": "https://nylas.github.io/N1/examples", "external": true, "items": [ @@ -174,7 +174,8 @@ }, { "name": "API Reference", - "description":"Detailed documentation on all the classes and methods in the API.", + "description":"View detailed documentation on all the classes and methods in the API.", + "link": "http://localhost:4000/N1/docs/APIReference.html", "items": [ { "name": "General", diff --git a/docs/index.html b/docs/index.html index 60a7b1f34..05a072ad7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,14 +4,17 @@ title: N1 Documentation edit_url: "https://github.com/nylas/N1/blob/master/docs/index.md" ---