diff --git a/getting-started/index.html b/getting-started/index.html index afbaf94c3..4c55b1fbe 100644 --- a/getting-started/index.html +++ b/getting-started/index.html @@ -4,19 +4,23 @@ title: Getting started with plugins ---
-
+
-

- Plugins lie at the heart of N1. The thread list, composer - and other core parts of the app are packages bundled with the - app, and you can create your own in a matter of minutes. -

+
+
+

+ Plugins lie at the heart of N1. The thread list, composer + and other core parts of the app are packages bundled with the + app, and you can create your own in a matter of minutes. +

+
-
+

1. Install N1

@@ -75,42 +84,49 @@ title: Getting started with plugins

- +
-
+
- +
-
+

2. Create a plugin

-

First, switch over to development mode: go to the Developer menu - and select Run with debug flags.... Dev mode turns on better exception +

First, switch over to development mode: go to the Developer menu + and select Run with debug flags.... Dev mode turns on better exception logging and enables hot-reloading, but runs a bit slower.

-

Next, choose Create a Package... from the the Developer menu, - and name your new plugin. This will create a directory in ~/.nylas/dev/packages +

Next, choose Create a Package... from the the Developer menu, + and name your new plugin. This will create a directory in ~/.nylas/dev/packages containing your new plugin.

-
-
+
+

3. Start hacking!

- Open the file <your-package>/lib/my-message-sidebar.cjsx in your + Open the file <your-package-name>/lib/my-message-sidebar.cjsx in your favorite text editor. Your new plugin is pre-filled with a simple example component - for the message sidebar (on the right when you're viewing an email), but with a - few quick changes we can build something interesting. + for the message sidebar (on the right when you're viewing an email), which is defined in this file. It + just shows the name of the selected contact, but with a few quick changes we can build something interesting. +

+

+ Scroll down to line 34, the render method. We can replace the code here + to change what shows up in the sidebar, and see it happen live when we save.

-
+ + + + @@ -123,18 +139,24 @@ title: Getting started with plugins
<your-package>/lib/my-message-sidebar.cjsx
30
31componentWillUnmount: =>
32    @unsubscribe()
33
34render: =>
35    if @state.contact
36        content = @_renderContent()
-
-

- Scroll down to line 34, the render method. We can replace the code here - to change what shows up in the sidebar, and see it happen live when we save. -

+ +
+
+ +
+ +
+

Try opening a message in N1 - you'll see the new package's example text show up on the - sidebar. Now delete the content of the render method and save - the text + sidebar. Now delete the content of the render method and save - the text should disappear.

+
+
+

Now let's add something - a bar that changes color based on the active contact in the @@ -157,6 +179,9 @@ title: Getting started with plugins

+
+
+
diff --git a/images/screenshot-base-plugin.png b/images/screenshot-base-plugin.png new file mode 100644 index 000000000..089a77dbd Binary files /dev/null and b/images/screenshot-base-plugin.png differ diff --git a/images/screenshot-create-plugin.png b/images/screenshot-create-plugin.png index 2900db20f..212443367 100644 Binary files a/images/screenshot-create-plugin.png and b/images/screenshot-create-plugin.png differ diff --git a/images/screenshot-select-provider.png b/images/screenshot-select-provider.png new file mode 100644 index 000000000..3bf433306 Binary files /dev/null and b/images/screenshot-select-provider.png differ