Documentation
diff --git a/getting-started/index.html b/getting-started/index.html
index 4c55b1fbe..1eeed0074 100644
--- a/getting-started/index.html
+++ b/getting-started/index.html
@@ -24,6 +24,15 @@ title: Getting started with plugins
table.code td.code {
padding-left: 20px;
}
+ table.code td.code.hlt {
+ background: #D0E0FF;
+ }
+ table.code td.code.add {
+ background: #D0FFD0;
+ }
+ table.code td.code.rm {
+ background: #FFD0D0;
+ }
table.code td.line-num {
color: #AAA;
border-right: 1px solid #EEE;
@@ -41,6 +50,25 @@ title: Getting started with plugins
border-bottom: 1px solid #CCC;
padding-left: 5px;
}
+
+
+ table.code td.code span.str{
+ color: #008800;
+ }
+ table.code td.code span.op{
+ font-weight: bold;
+ color: #DD7700
+ }
+
+ div.links-overlay {
+ background: #EEE;
+ border: 1px solid #DDD;
+ border-radius: 5px;
+ }
+ div.links-overlay p {
+ margin-top: 5px;
+ }
+
.grid .unit:last-child {
padding-right: 10px;
}
@@ -127,68 +155,108 @@ title: Getting started with plugins
| 31 | componentWillUnmount: => |
| 32 | @unsubscribe() |
| 33 | |
- | 34 | render: => |
- | 35 | if @state.contact |
- | 36 | content = @_renderContent() |
- | 37 | else |
- | 38 | content = @_renderPlaceholder() |
- | 39 | |
- | 40 | <div className="my-message-sidebar"> |
- | 41 | {content} |
- | 42 | </div> |
+ | 34 | render: => |
+ | 35 | if @state.contact |
+ | 36 | content = @_renderContent() |
+ | 37 | else |
+ | 38 | content = @_renderPlaceholder() |
+ | 39 | |
+ | 40 | <div className="my-message-sidebar"> |
+ | 41 | {content} |
+ | 42 | </div> |
+ | 43 | |
+ | 44 | _renderContent: => |
-
+
-
+
-
+
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
- should disappear.
+ 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
- sidebar. Drop in the code below, then save the file.
+ sidebar. Replace the existing render method with the
+ code to the right, then save the file.
| <your-package>/lib/my-message-sidebar.cjsx |
+ | 33 | |
| 34 | render: => |
- | 35 | <div className="email-color" style={@_getStyles()}></div> |
- | 36 | |
- | 37 | _getStyles: => |
- | 38 | domain = @state.contact.email.split("@")[1] |
- | 39 | hue = (domain.split('').reduce(((sum, char) -> sum + char.charCodeAt(0)), 0) % 36)*10 |
- | 40 | color = "hsl(#{hue}, 62%, 57%)" |
- | 41 | return {background: color, height: 2, 'margin-top': 5} |
+ | 35 | <div className="email-color" style={@_getStyles()}></div> |
+ | 36 | |
+ | 37 | _getStyles: => |
+ | 38 | domain = @state.contact.email.split("@")[1] |
+ | 39 | hue = (domain.split('').reduce(((sum, char) -> sum + char.charCodeAt(0)), 0) % 36)*10 |
+ | 40 | color = "hsl(#{hue}, 62%, 57%)" |
+ | 41 | return {background: color, height: 2, 'margin-top': 5} |
+ | 42 | |
-
+
-
+
-
+
You should see a horizontal bar that changes color based on
- the domain of the contact's email address!
+ the domain of the contact's email address.
+
+
+
+
+
+
+
+
That's it!
+
+ Extending the N1 mail client is that simple. Try making more code changes and seeing
+ how they affect the message sidebar. Then when you're ready, follow one of the links
+ below to learn more.
+
+
+
+
+
+
+
+ Build more functionality into the message sidebar in an extended
+ tutorial that picks up where this one left off.
+
+
+
+
+
+ Check out our library of example plugins to see what else you can build on top of
+ N1.
+
+
+
+
+
+ Head over to the full API documentation to learn about everything you can leverage
+ to build an N1 plugin.
diff --git a/images/screenshot-base-plugin.png b/images/screenshot-base-plugin.png
index 089a77dbd..8b6f498a7 100644
Binary files a/images/screenshot-base-plugin.png and b/images/screenshot-base-plugin.png differ
diff --git a/images/screenshot-color-bar.png b/images/screenshot-color-bar.png
index 92f831081..1f3a1f401 100644
Binary files a/images/screenshot-color-bar.png and b/images/screenshot-color-bar.png differ
