Quickstart.

public/docs/_quickstart.jade

@@ -1,5 +1,136 @@
 
-if lang == 'js'
+//- if lang == 'js'
-  h2 I like JavaScript
+//-   h2 I like JavaScript
-else if lang == 'dart'
+//- else if lang == 'dart'
-  h2 I like Dart
+//-   h2 I like Dart
+
+.content-block.content-number.clearfix
+  i.number.icon-number.large
+  
+  .c11
+    header
+    
+      h3#section-install-angular Install Angular
+    p
+      | Install Angular from npm.
+      
+.content-block.content-number.clearfix
+  i.number.icon-number2.large
+  
+  .c11
+    header
+    
+      h3#section-transpile Transpile ES6 to ES5
+    p
+      | Angular is written in ES6 which needs to be transpiled to ES5 before reaching the browser.
+      
+.content-block.content-number.clearfix
+  i.number.icon-number3.large
+  
+  .c11
+    header
+    
+      h3#section-transpile Import Angular
+    p
+      | Using the ES6 module syntax you can import Angular2.
+    pre
+      code
+        | import {Component, Template, bootstrap} from 'angular2/angular2';
+    p
+      | The above import statement will import the three basic pieces needed to create an Angular app.
+      
+
+.content-block.content-number.clearfix
+  i.number.icon-number4.large
+  
+  .c11
+    header
+    
+      h3#section-angular-create-account Create a component
+    p
+      | Angular is a component based framework. Components are used to structure and represent the UI. A <code>Component</code> is made up of two parts; the annotation section and the component controller.
+    pre
+      code
+        | import {Component, Template, bootstrap} from 'angular2/angular2';
+        | @Component({ 
+        |   selector: 'app'
+        | })
+        | @Template({
+        |   inline: `
+        |     &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
+        |   `
+        | })
+        | class AppComponent {
+        |   constructor() {
+        |     this.name = "Alice";
+        |   }
+        | }
+        | bootstrap(App);
+      
+    section.docs-sub-section
+      h4 Component Annotations
+      .c6
+        p
+          | The annotation section is where you can describe meta-data about your
+          code component 
+          | You can always identify an annotation by its 
+          code @ 
+          | sign. The <code>Component</code> annotation tells Angular what the HTML tag will be for your component. Whereas the <code>Template</code> annotations tells Angular what template to apply to your component.
+        pre
+          code
+            | @Component({ 
+            |   selector: 'app'
+            | })
+            | @Template({
+            |   inline: `
+            |     &lt;h1&gt;Hello&lt;/h1&gt;
+            |   `
+            | })
+        p
+          | The <code>Component</code> created above will have a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code> and a template of <code>&lt;h1&gt;Hello&lt;/h1&gt;</code>.
+      .clear
+      
+    section.docs-sub-section
+      h4 Component Controller
+      .c6
+        p
+          | The component controller is defined using the ES6 <code>class</code> syntax. This <code>class</code> is the backing of the component's template.
+        pre
+          code
+            | class AppComponent {
+            |   constructor() {
+            |     this.name = "Alice";
+            |   }
+            | }
+        p
+          | In the template above binds to a <code>name</code> property through the <code>{{ }}</code> syntax. In the component's constructor the name property is being set to Alice. When the template is rendered, Alice will appear instead of <code>{{ name }}</code>.
+        p
+          | Templates read directly from their component controllers. Any properties or functions placed on the component controller can be directly accessed from the template.
+      .clear
+
+.content-block.content-number.clearfix
+  i.number.icon-number5.large
+  
+  .c11
+    header
+    
+      h3#section-transpile Bootstrap
+    p
+      | The last step to get your component to load on the page.
+      
+    section.docs-sub-section
+      h4 The <code>bootstrap</code> function
+      .c6
+        p
+          | Angular provides a <code>bootstrap</code> function that renders your component to the page. 
+      .clear
+
+.content-block.content-number.clearfix
+  i.number.icon-number6.large
+  
+  .c11
+    header
+    
+      h3#section-transpile Extra-credit
+    p
+      | Learn some template syntax for extra-credit.

public/docs/index.jade

@@ -0,0 +1,7 @@
+
+section
+  h3
+    a(href="/docs/js/quickstart") JavaScript Quickstart
+  
+  h3
+    a(href="/docs/dart/quickstart") Dart Quickstart

public/docs/index.md

@@ -1 +0,0 @@
-#Docs home