docs(style-guide): add style-guide - v.3

closes #1170

Author: johnpapa

public/_includes/_util-fns.jade

@@ -9,8 +9,13 @@ mixin makeExample(filePath, region, title, stylePatterns)
   - var frag = getFrag(filePath, region);
   - var defaultFormat = frag.split('\n').length > 2 ? "linenums" : "";
   - var format = attributes.format || defaultFormat;
+  - var avoid = !!attributes.avoid;
+
   if (title)
-    .example-title #{title}
+    if (avoid)
+      .example-title.avoid AVOID: #{title}
+    else
+      .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     != styleString(frag, stylePatterns)
 
@@ -37,9 +42,13 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
   - var frag = getFrag(filePath, '');
   - var json = unescapeHtml(frag);
   - var jsonExtract = extractJson(json, jsonConfig);
+  - var avoid = !!attributes.avoid;
 
   if (title)
-    .example-title #{title}
+    if (avoid)
+      .example-title.avoid #{title}
+    else
+      .example-title #{title}
   code-example(language="#{language}" format="#{format}")
     if (jsonExtract == 'ERROR')
       err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
@@ -303,4 +312,4 @@ script.
 -       }
 -     }
 -   }
-- }
+- }

public/docs/_examples/style-guide/ts/001/app/app.component.ts renamed to public/docs/_examples/style-guide/ts/01-01/app/app.component.ts

@@ -10,20 +10,20 @@ import { Hero } from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-  selector: 'my-app',
+  selector: 'toh-app',
   template: `
-      <pre>{{heroes | json}}</pre>  
+      <pre>{{heroes | json}}</pre>
     `,
   styleUrls: ['app/app.component.css'],
   providers: [HeroService]
 })
 export class AppComponent implements OnInit{
   heroes: Hero[] = [];
 
-  constructor(private _heroService: HeroService) {}
+  constructor(private heroService: HeroService) {}
 
   ngOnInit() {
-    this._heroService.getHeroes()
+    this.heroService.getHeroes()
       .then(heroes => this.heroes = heroes);
   }
 }

public/docs/_examples/style-guide/ts/001/app/hero.model.ts renamed to public/docs/_examples/style-guide/ts/01-01/app/hero.model.ts

@@ -1,6 +1,6 @@
 // #docplaster
 
-// #docregion 001-1
+// #docregion 01-01-1
   /* avoid */
   import { bootstrap } from 'angular2/platform/browser';
   import { Component, OnInit } from 'angular2/core';
@@ -9,7 +9,7 @@
     selector: 'my-app',
     template: `
         <h1>{{title}}</h1>
-        <pre>{{heroes | json}}</pre>  
+        <pre>{{heroes | json}}</pre>
       `,
     styleUrls: ['app/app.component.css']
   })
@@ -27,11 +27,11 @@
 
   function getHeroes() {
     return // some promise of data;
-  }  
-// #enddocregion 001-1
+  }
+// #enddocregion 01-01-1
 
 
-// #docregion 001-2
+// #docregion 01-01-2
   /* recommended */
 
   // main.ts
@@ -50,24 +50,24 @@
   @Component({
     selector: 'my-app',
     template: `
-        <pre>{{heroes | json}}</pre>  
+        <pre>{{heroes | json}}</pre>
       `,
     styleUrls: ['app/app.component.css'],
     providers: [HeroService]
   })
   export class AppComponent implements OnInit{
     heroes: Hero[] = [];
 
-    constructor(private _heroService: HeroService) {}
+    constructor(private heroService: HeroService) {}
 
     ngOnInit() {
-      this._heroService.getHeroes()
+      this.heroService.getHeroes()
         .then(heroes => this.heroes = heroes);
     }
   }
-// #enddocregion 001-2
+// #enddocregion 01-01-2
 
-// #docregion 001-3
+// #docregion 01-01-3
   /* recommended */
 
   // hero.service.ts
@@ -80,14 +80,14 @@
       return Promise.resolve(HEROES);
     }
   }
-// #enddocregion 001-3
+// #enddocregion 01-01-3
 
-// #docregion 001-4
+// #docregion 01-01-4
   /* recommended */
 
   // hero.ts
   export class Hero {
     id: number;
     name: string;
   }
-// #enddocregion 001-4
+// #enddocregion 01-01-4