feat(docs): view example source files inline

 - generate meta.json file that describes the known examples.
 - render the main page from meta.json file.
 - include highlightjs in the client page.

.gitignore

@@ -4,6 +4,7 @@
 dist/
 out/
 site/
+public/meta.json
 
 ng2-material/**/*.css
 ng2-material/**/*.css.map

Gruntfile.js

@@ -57,6 +57,9 @@ module.exports = function (grunt) {
             src: [
               './node_modules/systemjs/dist/*.js',
               './node_modules/angular2/bundles/angular2.dev.js',
+              './node_modules/angular2/bundles/http.dev.js',
+              './node_modules/highlightjs/highlight.pack.js',
+              './node_modules/highlightjs/styles/*.css',
               './node_modules/angular2/typings/**/*'
             ],
             dest: '<%- sitePath %>/<%- pkg.version %>/'
@@ -74,6 +77,7 @@ module.exports = function (grunt) {
     notify: {
       options: {title: 'Material for Angular2'},
       bundle: {options: {message: 'Output Bundle Built'}},
+      meta: {options: {message: 'Site Index Compiled'}},
       styles: {options: {message: 'Styles Compiled'}},
       source: {options: {message: 'Source Compiled'}}
     },
@@ -106,9 +110,19 @@ module.exports = function (grunt) {
         files: [
           '<%- sourceRoot %>/**/*.css',
           '<%- sourceRoot %>/*.css',
-          'app.css'],
+          'app.css'
+        ],
         tasks: ['sass', 'copy:styles', 'notify:styles']
       },
+      meta: {
+        files: [
+          'examples/**/*.html',
+          'examples/**/*.ts',
+          'examples/**/*.scss',
+          'examples/*.*'
+        ],
+        tasks: ['site-meta', 'notify:meta']
+      },
       ts: {
         files: [
           '<%- sourceRoot %>/**/*.ts',
@@ -187,7 +201,7 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-ts');
   grunt.loadNpmTasks('dts-generator');
   grunt.loadNpmTasks('remap-istanbul');
-  grunt.registerTask('default', ['dtsGenerator', 'ts:source', 'sass', 'copy:styles']);
+  grunt.registerTask('default', ['dtsGenerator', 'site-meta', 'ts:source', 'sass', 'copy:styles']);
   grunt.registerTask('develop', ['default', 'watch']);
   grunt.registerTask('build', ['default', 'ts:release', 'dist-bundle', 'copy:release']);
 
@@ -230,7 +244,7 @@ module.exports = function (grunt) {
   });
 
 
-  grunt.registerTask('publish', 'Build metadata files describing example usages', function (tag) {
+  grunt.registerTask('publish', 'Publish new npm package', function (tag) {
     var exec = require('child_process').exec;
     var done = this.async();
     process.chdir('out');
@@ -244,4 +258,94 @@ module.exports = function (grunt) {
     });
   });
 
+
+  grunt.registerTask('site-meta', 'Build metadata files describing example usages', function (tag) {
+    var done = this.async();
+    var glob = require('glob');
+    var fs = require('fs');
+    var path = require('path');
+    var util = require('util');
+    var meta = {};
+    glob("examples/components/**/*.html", function (err, files) {
+      files.forEach(parseDemo);
+      var output = prepareMeta();
+      fs.writeFileSync('public/meta.json', JSON.stringify(output, null, 2));
+      done();
+    });
+
+    function parseDemo(templateFile) {
+      var name = path.basename(templateFile, '.html');
+      var result = {
+        template: templateFile
+      };
+      var sourceFile = path.join(path.dirname(templateFile), name + '.ts');
+      var stylesFile = path.join(path.dirname(templateFile), name + '.scss');
+      if (fileExists(stylesFile)) {
+        result.styles = stylesFile;
+      }
+      if (fileExists(sourceFile)) {
+        result.source = sourceFile;
+      }
+
+      var component = readableString(path.basename(path.dirname(templateFile)));
+      result.component = selectorString(component + ' ' + readableString(name));
+      meta[component] = meta[component] || {};
+      meta[component][readableString(name)] = result;
+      lintDemo(result);
+    }
+
+    // Make the metadata easier to access in angular by using arrays rather than key/value pairs.
+    // Store as an object internally to group examples by component.
+    function prepareMeta() {
+      var keys = Object.keys(meta);
+
+      var output = keys.map(function (key) {
+        var demos = meta[key];
+        var demoKeys = Object.keys(demos);
+        return {
+          name: key,
+          examples: demoKeys.map(function (key) {
+            demos[key].name = key;
+            return demos[key];
+          })
+        };
+      });
+      return output;
+    }
+
+    // Convert readable string of component + demo to a valid element name that
+    // can be inserted into the dom to produce the demo.
+    // e.g. "Card Basic Usage" -> "card-basic-usage"
+    function selectorString(readableString) {
+      return readableString
+        .split(' ')
+        .map(function (c) {
+          return c.toLowerCase();
+        })
+        .join('-');
+    }
+
+    function readableString(snakeCaseString) {
+      return snakeCaseString
+        .split('_')
+        .map(function (c) {
+          return c[0].toUpperCase() + c.slice(1);
+        })
+        .join(' ');
+    }
+
+    function lintDemo(outputMeta) {
+      grunt.log.ok('checking ' + outputMeta.source + ' no lint present');
+    }
+
+    function fileExists(filePath) {
+      try {
+        return fs.statSync(filePath).isFile();
+      }
+      catch (err) {
+        return false;
+      }
+    }
+  });
+
 };

config.js

@@ -5,7 +5,14 @@ System.config({
     },
     'examples': {
       defaultExtension: 'js'
+    },
+    'rxjs': {
+      defaultExtension: 'js'
     }
   },
+  map: {
+    "rxjs": "node_modules/rxjs",
+    "angular2/*" : "node_modules/angular2/*"
+  },
   baseURL: './'
 });

examples/all.ts

@@ -1,29 +1,33 @@
-import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
-import CardBasicUsage from './components/card/basic_usage';
-import CardInCardActions from './components/card/in_card_actions';
-import CardActionButtons from './components/card/card_action_buttons';
+//
+// Do not edit this file, it is autogenerated by the `site-meta` grunt task.
+// See Gruntfile.js for more information.
+//
 
+import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
 
+// --=> EXAMPLES_IMPORT_START
+import CardBasicUsage from './components/card/basic_usage';
+import CardInlineActions from './components/card/inline_actions';
+import CardActionButtons from './components/card/action_buttons';
 import ToolbarBasicUsage from './components/toolbar/basic_usage';
-
-
 import ProgressCircularBasicUsage from './components/progress_circular/basic_usage';
 import ProgressLinearBasicUsage from './components/progress_linear/basic_usage';
-
 import RadioBasicUsage from './components/radio/basic_usage';
-
 import SwitchBasicUsage from './components/switch/basic_usage';
+// --=> EXAMPLES_IMPORT_END
 
 /**
  * Collection of Material Design component directives.
  */
 export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([
-  CardBasicUsage, CardInCardActions, CardActionButtons,
+// --=> EXAMPLES_EXPORT_START
+  CardBasicUsage, CardInlineActions, CardActionButtons,
   RadioBasicUsage,
   SwitchBasicUsage,
   ToolbarBasicUsage,
   ProgressCircularBasicUsage,
   ProgressLinearBasicUsage
+// --=> EXAMPLES_EXPORT_END
 ]);
 
 export * from './example';

examples/app.html

@@ -7,64 +7,21 @@ <h2>
       <span>Angular2 Material</span>
     </h2>
     <span flex></span>
-    <button md-button class="md-icon-button" aria-label="More">
-      <i md-icon class="md-light">question</i>
-    </button>
   </div>
 </md-toolbar>
 
-<md-content layout-padding>
-
-  <h1>Toolbar</h1>
-  <example name="Basic Usage">
-    <toolbar-basic-usage></toolbar-basic-usage>
-  </example>
-
-  <md-divider></md-divider>
-
-  <h1>Radio</h1>
-  <example name="Basic Usage">
-    <radio-basic-usage></radio-basic-usage>
-  </example>
-
-  <md-divider></md-divider>
-
-  <h1>Switch</h1>
-  <example name="Basic Usage">
-    <switch-basic-usage></switch-basic-usage>
-  </example>
-
-  <md-divider></md-divider>
-
-  <h1>Progress Linear</h1>
-  <example name="Basic Usage">
-    <progress-linear-basic-usage></progress-linear-basic-usage>
-  </example>
-
-
-  <md-divider></md-divider>
-
-  <md-divider></md-divider>
-
-  <h1>Progress Circular</h1>
-  <example name="Basic Usage">
-    <progress-circular-basic-usage></progress-circular-basic-usage>
-  </example>
-
+<md-content md-scroll-y layout-padding>
 
-  <md-divider></md-divider>
 
-  <h1>Card</h1>
-  <example name="Basic Usage">
-    <card-basic-usage></card-basic-usage>
-  </example>
+  <ul>
+    <li *ngFor="#value of meta"><span>{{value.name}}</span></li>
+  </ul>
 
-  <example name="Action Buttons">
-    <card-action-buttons></card-action-buttons>
-  </example>
 
-  <example name="In Card Actions">
-    <card-in-card-actions></card-in-card-actions>
-  </example>
+  <section *ngFor="#value of meta">
+    <h1 [innerText]="value.name"></h1>
+    <example *ngFor="#demo of value.examples" [model]="demo"></example>
+    <md-divider></md-divider>
+  </section>
 
 </md-content>

examples/app.scss

@@ -11,10 +11,13 @@ demos-app {
   > md-content {
     max-width: 800px;
     > h1 {
-      margin-top:rem(6);
-      margin-bottom:rem(6);
+      margin-top: rem(6);
+      margin-bottom: rem(6);
       font-weight: 300;
-      color: md-color($md-primary,900);
+      color: md-color($md-primary, 900);
+    }
+    > md-divider {
+      margin-top: rem(6);
     }
     .card-media {
       background-color: md-color($md-background);

examples/app.ts

@@ -1,11 +1,20 @@
-import {Component, View} from 'angular2/core';
-import {bootstrap} from 'angular2/angular2';
+import {Component, View, bootstrap} from 'angular2/angular2';
 import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from '../ng2-material/all';
 
 import {DEMO_DIRECTIVES} from './all';
 import Example from './example';
+import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
 
-
+/**
+ * Describe an example that can be dynamically loaded.
+ */
+export interface IExampleData {
+  template:string;
+  source:string;
+  styles:string;
+  component:string;
+  name:string;
+}
 
 @Component({
   selector: 'demos-app'
@@ -15,9 +24,15 @@ import Example from './example';
   directives: [MATERIAL_DIRECTIVES, Example, DEMO_DIRECTIVES]
 })
 export class DemosApp {
-  constructor() {
-    console.log('bam');
+  meta: any;
+
+  constructor(http: Http) {
+    http.get('public/meta.json')
+      .subscribe((res: Response) => {
+        this.meta = res.json();
+        console.log(this.meta);
+      });
   }
 }
 
-bootstrap(DemosApp, [MATERIAL_PROVIDERS]);
+bootstrap(DemosApp, [HTTP_PROVIDERS, MATERIAL_PROVIDERS]);

examples/components/card/card_action_buttons.ts → examples/components/card/action_buttons.ts

@@ -3,8 +3,8 @@ import {MATERIAL_DIRECTIVES} from '../../base';
 
 @Component({selector: 'card-action-buttons'})
 @View({
-  templateUrl: 'examples/components/card/card_action_buttons.html',
-  styleUrls: ['examples/components/card/card_action_buttons.css'],
+  templateUrl: 'examples/components/card/action_buttons.html',
+  styleUrls: ['examples/components/card/action_buttons.css'],
   directives: [MATERIAL_DIRECTIVES]
 })
 export default class CardActionButtons {

examples/components/card/basic_usage.scss

@@ -1,3 +1,4 @@
+
 .card-media {
   background-color: #999999;
 }

examples/components/card/inline_actions.ts

@@ -0,0 +1,11 @@
+import {View, Component} from 'angular2/core';
+import {MATERIAL_DIRECTIVES} from '../../base';
+
+@Component({selector: 'card-inline-actions'})
+@View({
+  templateUrl: 'examples/components/card/inline_actions.html',
+  styleUrls: ['examples/components/card/inline_actions.css'],
+  directives: [MATERIAL_DIRECTIVES]
+})
+export default class CardInlineActions {
+}