updates to getting started page

getting-started/index.html

@@ -4,19 +4,23 @@ title: Getting started with plugins
 ---
 
 <style>
-    code .bg{
+    code.background{
         background-color: #f6f6f6;
         padding: 0 5px;
         border-radius: 5px;
     }
+    table.code {
+        -webkit-box-shadow: 0 5px 15px #AAA;
+        -moz-box-shadow: 0 5px 15px #AAA;
+        box-shadow: 0 5px 15px #AAA;
+    }
     table.code td {
         border: none;
         padding: 0;
         line-height: 20px;
         font-family: monospace;
-        font-size: 12px;
+        font-size: 14px;
     }
-
     table.code td.code {
         padding-left: 20px;
     }
@@ -37,10 +41,13 @@ title: Getting started with plugins
         border-bottom: 1px solid #CCC;
         padding-left: 5px;
     }
+    .grid .unit:last-child {
+        padding-right: 10px;
+    }
 </style>
 
 <div class="container">
-    <div class="grid" style="padding-top: 100px">
+    <div class="grid wider" style="padding-top: 100px">
         <div class="unit one-third">
             <img src="/N1/images/watercolor_help.png" style="
               width: 200px;
@@ -56,15 +63,17 @@ title: Getting started with plugins
         </div>
     </div>
 
-    <div class="grid feature" style="margin-top: 0px;">
-        <p>
-            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.
-        </p>
+    <div class="grid wider">
+        <div class="unit whole">
+            <p>
+                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.
+            </p>
+        </div>
     </div>
 
-    <div class="grid feature" style="margin-top: 60px;">
+    <div class="grid wider feature" style="margin-top: 60px;">
         <div class="unit two-thirds" style="margin-top:60px;">
             <h3>1. Install N1</h3>
             <p>
@@ -75,42 +84,49 @@ title: Getting started with plugins
             </p>
         </div>
         <div class="unit one-third" style="text-align: right;">
-            <img src="/N1/images/screenshot-sign-in.png" style="width:300px;"/>
+            <img src="/N1/images/screenshot-select-provider.png"/>
         </div>
     </div>
 
-    <div class="grid feature">
+    <div class="grid wider feature">
         <div class="unit one-third">
-            <img src="/N1/images/screenshot-create-plugin.png" style="width:300px;"/>
+            <img src="/N1/images/screenshot-create-plugin-B.png"/>
         </div>
-        <div class="unit two-thirds">
+        <div class="unit two-thirds" style="padding-left: 20px;">
             <h3>2. Create a plugin</h3>
-            <p>First, switch over to development mode: go to the <code>Developer</code> menu
-                and select <code>Run with debug flags...</code>. Dev mode turns on better exception
+            <p>First, switch over to development mode: go to the <code class="background">Developer</code> menu
+                and select <code class="background">Run with debug flags...</code>. Dev mode turns on better exception
                 logging and enables hot-reloading, but runs a bit slower.
             </p>
-            <p>Next, choose <code>Create a Package...</code> from the the <code>Developer</code> menu,
-                and name your new plugin. This will create a directory in <code>~/.nylas/dev/packages</code>
+            <p>Next, choose <code class="background">Create a Package...</code> from the the <code class="background">Developer</code> menu,
+                and name your new plugin. This will create a directory in <code class="background">~/.nylas/dev/packages</code>
                 containing your new plugin.
             </p>
         </div>
     </div>
 
-    <div class="grid feature">
-        <div class="unit whole">
+    <div class="grid wider feature">
+        <div class="unit three-fifths">
             <h3>3. Start hacking!</h3>
             <p>
-                Open the file <code>&lt;your-package&gt;/lib/my-message-sidebar.cjsx</code> in your
+                Open the file <code class="background">&lt;your-package-name&gt;/lib/my-message-sidebar.cjsx</code> 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.
+            </p>
+            <p>
+                Scroll down to line 34, the <code class="background">render</code> method. We can replace the code here
+                to change what shows up in the sidebar, and see it happen live when we save.
             </p>
         </div>
-
         <div class="unit two-fifths">
             <table class="code">
                 <tbody>
                 <tr><td class="filename" colspan="2">&lt;your-package&gt;/lib/my-message-sidebar.cjsx</td></tr>
+                <tr><td class="line-num">30</td><td class="code"></td></tr>
+                <tr><td class="line-num">31</td><td class="code">componentWillUnmount: =></td></tr>
+                <tr><td class="line-num">32</td><td class="code">&nbsp;&nbsp;&nbsp;&nbsp;@unsubscribe()</td></tr>
+                <tr><td class="line-num">33</td><td class="code"></td></tr>
                 <tr><td class="line-num">34</td><td class="code">render: =></td></tr>
                 <tr><td class="line-num">35</td><td class="code">&nbsp;&nbsp;&nbsp;&nbsp;if @state.contact</td></tr>
                 <tr><td class="line-num">36</td><td class="code">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content = @_renderContent()</td></tr>
@@ -123,18 +139,24 @@ title: Getting started with plugins
                 </tbody>
             </table>
         </div>
-        <div class="unit three-fifths">
-            <p>
-                Scroll down to line 34, the <code>render</code> method. We can replace the code here
-                to change what shows up in the sidebar, and see it happen live when we save.
-            </p>
+
+    </div>
+    <div class="grid wider">
+
+        <div class="unit three-fifths" style="text-align: right;">
+            <img src="/N1/images/screenshot-base-plugin.png"/>
+        </div>
+        <div class="unit two-fifths">
             <p>
                 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 <code>render</code> method and save - the text
+                sidebar. Now delete the content of the <code class="background">render</code> method and save - the text
                 should disappear.
             </p>
         </div>
 
+    </div>
+    <div class="grid wider">
+
         <div class="unit one-third">
             <p>
                 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
             </table>
         </div>
 
+    </div>
+    <div class="grid wider">
+
         <div class="unit two-thirds" style="text-align: right;">
             <img src="/N1/images/screenshot-color-bar.png"/>
         </div>