dynamic path rendering in docs nag

harp.json

@@ -1,6 +1,8 @@
 {
   "globals": {
     "title": "Angular",
-    "description"  : "some description"
+    "description": "Angular is a modern javascript framework for building professional web applications.",
+    "jsVersion": "2_0_0-alpha_11",
+    "dartVersion": "2_0_0-alpha_11"
   }
 }

public/_includes/_docs-nav.jade

@@ -2,6 +2,7 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
   .side-nav-search
     input(type="search" placeholder="SEARCH DOCS...")
 
+
   ul.side-nav-primary
-    li <a href="/docs/quickstart.html">Quick Start</a>
+    for page, slug in public.docs[current.path[1]][current.path[2]]._data
-    li <a href="/docs/guide.html">Guide</a>
+      li <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html">#{page.title}</a>

public/_includes/_main-nav.jade

@@ -1,11 +1,11 @@
 md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
   nav
-    h1 <a href="/">Angular <sup>by Google</sup></a>
+    h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
 
     ul
-      li <a class="main-nav-button" href="/features.html">Features</a>
+      li <a class="main-nav-button" href="/features.html" md-button>Features</a>
-      li <a class="main-nav-button" href="/docs/">Docs</a>
+      li <a class="main-nav-button" href="/docs/js/#{jsVersion}/" md-button>Docs</a>
-      li <a class="main-nav-button" href="/about/">About</a>
+      li <a class="main-nav-button" href="/about/" md-button>About</a>
-      li <a class="main-nav-button" href="/contribute.html">Contribute</a>
+      li <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
 
-    a(class="cta main-nav-button has-icon" href="/download.html")  <span class="icon icon-cloud-download"></span> Download
+    a(class="cta main-nav-button has-icon" href="/download.html" md-button)  <span class="icon icon-cloud-download"></span> Download

public/_layout.jade

@@ -1,22 +1,19 @@
 doctype
 html(lang="en"  layout="column" ng-app="myApp")
-
   head
     != partial("/_includes/_head-include")
 
   body(class="l-offset-nav"  ng-controller="AppCtrl")
     != partial("/_includes/_main-nav")
 
-    // INCLUDE HERO
+    <!-- HERO LOGO -->
     if hero == 'home'
       != partial("/_includes/_hero-home")
     else
       != partial("/_includes/_hero")
 
-    // PAGE CONTENT
+    article.l-content
-    .l-content
       != yield
 
-    // FOOTER & SCRIPTS
     != partial("/_includes/_footer")
     != partial("/_includes/_scripts-include")

public/docs/_data.json

@@ -1 +1,12 @@
-{}
+{
+  "index": {
+    "title": "Angular Docs",
+    "subtitle": "Choose a language for Angular",
+    "layout": "../_layout"
+  },
+
+  "search": {
+    "title": "Docs Search Results",
+    "layout": "../_layout"
+  }
+}

public/docs/_layout.jade

@@ -1,10 +1,14 @@
 doctype
 html(lang="en"  layout="column" ng-app="myApp")
   head
-    != partial("..//_includes/_head-include")
+    != partial("../_includes/_head-include")
 
   body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl")
     != partial("../_includes/_main-nav")
     != partial("../_includes/_docs-nav")
+    != partial("../_includes/_hero")
+
     != yield
+
     != partial("../_includes/_footer")
+    != partial("../_includes/_scripts-include")

public/docs/_quickstart.jade

@@ -1,5 +0,0 @@
-
-if lang == 'js'
-  h2 I like JavaScript
-else if lang == 'dart'
-  h2 I like Dart

public/docs/dart/_data.json

@@ -1,3 +0,0 @@
-{
-  "lang": "dart"
-}

public/docs/dart/quickstart.jade

@@ -1,3 +0,0 @@
-h1 Dart Quickstart
-
-!= partial("../_quickstart", public.docs.dart._data)

public/docs/index.jade

@@ -0,0 +1 @@
+h1 path #{current.path[0]}

public/docs/index.md

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

public/docs/js/2_0_0-alpha_11/_data.json

@@ -0,0 +1,21 @@
+{
+  "index": {
+    "title": "Angular Docs"
+  },
+
+  "quickstart": {
+    "title": "5 Min Quickstart"
+  },
+
+  "resources": {
+    "title": "Angular Resources"
+  },
+
+  "api": {
+    "title": "API Proposal"
+  },
+
+  "help": {
+    "title": "Help & Support"
+  }
+}

public/docs/js/2_0_0-alpha_11/index.jade

@@ -0,0 +1 @@
+h1 Docs Home for latest version

public/docs/js/_data.json

@@ -1,3 +0,0 @@
-{
-  "lang": "js"
-}

public/resources/css/main.scss

@@ -16,9 +16,9 @@
 *
 */
 
-@import 'module/main-nav';
+@import 'module/top-nav';
-@import 'module/main-footer';
 @import 'module/side-nav';
+@import 'module/footer';
 @import 'module/hero';
 @import 'module/banner';
 @import 'module/cta-bar';

public/resources/css/module/_top-nav.scss

@@ -5,16 +5,16 @@
   box-shadow: 0px 2px 5px 0 rgba($coal, 0.26);
 
   h1 {
-    margin: $unit ($unit * 10) 0px 0px;
+    margin: 0px ($unit * 9) 0px 0px;
     padding: 0px;
     height: 36px;
     width: 135px;
     float: left;
 
     a {
-      background: url('/resources/images/logos/standard/logo-nav.png');
+      background: url('/resources/images/logos/standard/logo-nav.png') 0px 8px no-repeat;
       display: block;
-      height: 36px;
+      height: 56px;
       width: 135px;
       overflow: hidden;
       text-indent: -3000px;