docs dropdown logice

harp.json

@@ -2,7 +2,7 @@
   "globals": {
     "title": "Angular",
     "description": "Angular is a modern javascript framework for building professional web applications.",
-    "jsVersion": "2_0_0-alpha_11",
-    "dartVersion": "2_0_0-alpha_11"
+    "jsLatest": "2.0.0-alpha.11",
+    "dartLatest": "2.0.0-alpha.11"
   }
 }

public/_includes/_banner.jade

@@ -0,0 +1,2 @@
+.banner.is-centered
+    p.text-body !{banner}

public/_includes/_footer.jade

@@ -1,10 +1,10 @@
 .main-footer
-  nav(class="background-silver" layout="row" layout-sm="column")
+  nav.background-silver.grid-fluid
 
-    section(flex)
+    .c3
       .logo-inverse-large
 
-    section(flex)
+    .c2
       h3.text-headline ANGULAR
 
       ul.text-body
@@ -14,7 +14,7 @@
         li <a href="#"> Angular Material</a>
         li <a href="#"> AngularFire</a>
 
-    section(flex)
+    .c2
       h3.text-headline LEARN
 
       ul.text-body
@@ -25,7 +25,7 @@
         li <a href="#"> AngularFire</a>
 
 
-    section(flex)
+    .c2
       h3.text-headline HELP
 
       ul.text-body
@@ -36,7 +36,7 @@
         li <a href="#"> AngularFire</a>
 
 
-    section(flex)
+    .c3
       h3.text-headline COMMUNITY
 
       ul.text-body

public/_includes/_hero.jade

@@ -1,5 +1,10 @@
 header(class="hero background-sky")
   h1.hero-title.text-display-1 #{title}
-  h2.hero-subtitle.text-subhead #{subtitle}
+
+  if subtitle
+    h2.hero-subtitle.text-subhead #{subtitle}
+
+  else if current.path[0] == "docs"
+    != partial("_version-dropdown")
 
   != partial("_social-icons")

public/_includes/_version-dropdown.jade

@@ -0,0 +1,14 @@
+language = current.path[1]
+version = current.path[2]
+title = "Some Version"
+
+if language == 'js'
+  if version == "latest"
+    title = jsLatest
+
+if language == 'dart'
+  if version == "latest"
+    title = dartLatest
+
+h2.hero-subtitle.text-subhead
+  button(md-button ng-click="showVersionMenu($event)") #{title}

public/_layout.jade

@@ -1,5 +1,5 @@
 doctype
-html(lang="en" ng-app="myApp")
+html(lang="en" ng-app="angularIOApp")
   head
     != partial("/_includes/_head-include")
 

public/docs/_data.json

@@ -8,5 +8,11 @@
   "search": {
     "title": "Docs Search Results",
     "layout": "../_layout"
+  },
+
+  "styleguide": {
+    "title": "Docs Style Guide",
+    "subtitle": "Design & Layout Patterns For Documentation",
+    "layout": "../_layout"
   }
 }

public/docs/_layout.jade

@@ -1,5 +1,5 @@
 doctype
-html(lang="en"  layout="column" ng-app="myApp")
+html(lang="en" ng-app="angularIOApp")
   head
     != partial("../_includes/_head-include")
 
@@ -8,7 +8,10 @@ html(lang="en"  layout="column" ng-app="myApp")
     != partial("../_includes/_docs-nav")
     != partial("../_includes/_hero")
 
-    article.l-pad-6.grid-fluid
+    if banner
+      != partial("../_includes/_banner")
+
+    article.l-pad-6.grid-fluid.docs-content
       != yield
 
     != partial("../_includes/_footer")

public/docs/js/latest/_data.json

@@ -1,6 +1,7 @@
 {
   "index": {
-    "title": "Angular Docs"
+    "title": "Angular Docs",
+    "banner": "Angular 2 is currently in Alpha Preview. We reccomend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications."
   },
 
   "quickstart": {

public/docs/js/latest/index.jade

@@ -3,7 +3,7 @@ div.c4
   md-card
     md-card-content
       h2.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
-      p.text-body Learn Angular in 5 minutes
+      p.text-body Learn in 5 minutes
 
       footer
         a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
@@ -16,7 +16,7 @@ div.c4
       p.text-body Preview of v2.0
 
       footer
-        a(href="/docs/#{current.path[1]}/#{current.path[2]}/resources.html" class="button" md-button) View Resources
+        a(href="/docs/#{current.path[1]}/#{current.path[2]}/resources.html" class="button button-primary" md-button) View Resources
 
 
 div.c4

public/docs/styleguide.jade

@@ -0,0 +1 @@
+adsf

public/resources/css/base/_type.scss

@@ -47,7 +47,8 @@ a {
   line-height: 48px;
 }
 
-.text-display-1 {
+.text-display-1,
+.docs-content h1 {
   margin: 0px;
   font-size: 34px;
   font-weight: 400;
@@ -55,7 +56,8 @@ a {
   line-height: 40px;
 }
 
-.text-headline {
+.text-headline,
+.docs-content h2 {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 24px;
   font-weight: 400;
@@ -63,7 +65,8 @@ a {
   line-height: 32px;
 }
 
-.text-title {
+.text-title,
+.docs-content h3 {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 20px;
   font-weight: 500;
@@ -72,7 +75,8 @@ a {
 }
 
 .text-subhead,
-.text-body {
+.text-body,
+.docs-content p {
   margin: 0px 0px ($unit * 2) 0px;
   font-size: 16px;
   font-weight: 400;

public/resources/css/module/_banner.scss

@@ -25,7 +25,11 @@
   }
 
   h4 {
-    margin: 0px;
     line-height: 24px;
   }
+
+  p,
+  h4 {
+    margin: 0px;
+  }
 }

public/resources/js/site.js

@@ -1,4 +1,4 @@
-var app = angular.module('myApp', ['ngMaterial'])
+var angularIO = angular.module('angularIOApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
   $mdThemingProvider.theme('default')
     .primaryPalette('blue', {
@@ -14,10 +14,14 @@ var app = angular.module('myApp', ['ngMaterial'])
     });
 });
 
-app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
+angularIO.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
   $scope.toggleSidenav = function(menuId) {
     $mdSidenav(menuId).toggle();
   };
+
+  $scope.showVersionMenu = function() {
+    alert('hi');
+  };
 }]);