feat(examples): highlight code examples in component readme files

Gruntfile.js

@@ -123,6 +123,7 @@ module.exports = function (grunt) {
       meta: {
         files: [
           'modules/docs/src/**/*.*',
+          'src/**/*.md',
           'package.json'
         ],
         tasks: ['site-meta', 'build-npm-package', 'notify:meta']
@@ -364,6 +365,20 @@ module.exports = function (grunt) {
       });
     });
 
+
+    // Copy Readme for official components BEFORE rendering readme markdown files.
+    tasks.push(function buildComponentDocumentation() {
+      glob("src/components/**/readme.md", function (err, files) {
+        files.forEach(function parseReadme(readmeFile) {
+          var component = readableString(path.basename(path.dirname(readmeFile)));
+          var data = fs.readFileSync(readmeFile).toString();
+          meta[component] = meta[component] || {};
+          meta[component].documentation = marked(data);
+        });
+        next();
+      });
+    });
+
     tasks.push(function buildReadmeFiles() {
       glob("modules/docs/src/app/examples/**/readme.md", function (err, files) {
         files.forEach(function parseDemo(readmeFile) {
@@ -468,8 +483,10 @@ module.exports = function (grunt) {
         var demos = meta[key];
         var sources = demos.files.slice();
         var readme = demos.readme;
+        var componentDocs = demos.documentation;
         delete demos.files;
         delete demos.readme;
+        delete demos.documentation;
         var demoKeys = Object.keys(demos);
         var result = {
           name: key,
@@ -483,6 +500,9 @@ module.exports = function (grunt) {
         if (readme) {
           result.readme = readme;
         }
+        if (componentDocs) {
+          result.documentation = componentDocs;
+        }
         return result;
       });
     }

modules/docs/src/app/+components/components.component.html

@@ -1,5 +1,11 @@
-<p class="examples-intro" *ngIf="value.readme" [innerHtml]="value.readme"></p>
+<p class="examples-intro example-readme" *ngIf="value.readme" [innerHtml]="value.readme"></p>
 
 <h1 class="examples-title">Examples</h1>
 
 <docs-example *ngFor="let demo of value.examples" [model]="demo"></docs-example>
+
+<docs-highlight-container
+  class="examples-intro"
+  *ngIf="value.documentation"
+  selector="pre > code" [innerHtml]="value.documentation">
+</docs-highlight-container>

modules/docs/src/app/+components/components.component.scss

@@ -1,10 +1,48 @@
+@import "core/style/mixins";
+@import "core/style/variables";
+@import "core/style/default-theme";
+
 :host {
-.examples-intro {
-  pre {
-    padding: 12px;
-    border: 1px solid lightgray;
-    background-color: white;
+
+  .example-readme {
+    pre {
+      padding: 12px;
+      border: 1px solid lightgray;
+      background-color: white;
+    }
+  }
+  .examples-intro {
+
+    &:not(:first-child) {
+      margin-top: 2em;
+    }
+
+    h1 {
+      margin-top: 3em;
+      color: md-color($md-primary);
+    }
+    h2 {
+      margin-top: 2em;
+      margin-bottom: 1.5em;
+      > code {
+        color: md-color($md-primary);
+      }
+    }
+    table {
+      background-color: white;
+      border-collapse: collapse;
+      width: 100%;
+      font-size: 0.8em;
+      th, td {
+        padding: 4px 12px;
+        border: 1px solid #ddd;
+      }
+      tr {
+        background-color: #fff;
+        border-top: 1px solid #ccc;
+      }
+    }
+
   }
-}
 
 }

modules/docs/src/app/+components/components.component.ts

@@ -1,17 +1,16 @@
 import {Component} from '@angular/core';
 import {OnActivate, RouteSegment, ROUTER_DIRECTIVES} from '@angular/router';
 import {MATERIAL_DIRECTIVES} from 'ng2-material';
-
 import {ComponentsService, IComponentMeta, NavigationService, ExampleComponent} from '../shared';
-import {HighlightComponent} from '../shared/highlight/highlight.component';
+import {HighlightComponent, HighlightContainerComponent} from '../shared/highlight/index';
 
 
 @Component({
   moduleId: module.id,
   selector: 'docs-components',
   templateUrl: 'components.component.html',
   styleUrls: ['components.component.css'],
-  directives: [ExampleComponent, ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES, HighlightComponent]
+  directives: [ExampleComponent, ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES, HighlightComponent, HighlightContainerComponent]
 })
 export class ComponentsComponent implements OnActivate {
   public id: string;
@@ -21,7 +20,8 @@ export class ComponentsComponent implements OnActivate {
   public next: IComponentMeta = null;
   public previous: IComponentMeta = null;
 
-  constructor(private _components: ComponentsService, private _navigation: NavigationService) {}
+  constructor(private _components: ComponentsService, private _navigation: NavigationService) {
+  }
 
   routerOnActivate(curr: RouteSegment): void {
     this.id = curr.getParam('id');

modules/docs/src/app/examples/dialog/readme.md

@@ -1,4 +1,4 @@
 
 ```
-These components are a work in progress.
+This component is experimental.
 ```

modules/docs/src/app/shared/example/example.component.scss

@@ -10,6 +10,9 @@
   md-toolbar.demo-toolbar {
     border-radius: 3px 3px 0 0;
     box-shadow: 0 1px rgba(255, 255, 255, 0.1);
+    .md-icon-button {
+      margin-right: 0;
+    }
     .material-icons {
       color: white;
     }

modules/docs/src/app/shared/highlight/highlight-container.component.scss

@@ -0,0 +1,14 @@
+@import "./highlight";
+
+:host {
+  pre {
+    @extend .highlight-block;
+    @extend .higlight-pre;
+    > code.highlight {
+      margin-bottom: 0 !important;
+      font-size: 0.9em;
+      border: 1px solid lightgrey;
+    }
+  }
+}
+

modules/docs/src/app/shared/highlight/highlight-container.component.spec.ts

@@ -0,0 +1,46 @@
+import {
+  beforeEach,
+  beforeEachProviders,
+  describe,
+  expect,
+  it,
+  inject,
+} from '@angular/core/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { HighlightContainerComponent } from './highlight-container.component.ts';
+
+describe('Component: HighlightContainer', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEachProviders(() => [HighlightContainerComponent]);
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([HighlightContainerComponent],
+      (component: HighlightContainerComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(HighlightContainerComponentTestController)
+      .then((fixture: ComponentFixture<any>) => {
+        let query = fixture.debugElement.query(By.directive(HighlightContainerComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
+});
+
+@Component({
+  selector: 'test',
+  template: `
+    <docs-highlight-container></docs-highlight-container>
+  `,
+  directives: [HighlightContainerComponent]
+})
+class HighlightContainerComponentTestController {
+}
+

modules/docs/src/app/shared/highlight/highlight-container.component.ts

@@ -0,0 +1,36 @@
+import {ElementRef, Component, AfterViewInit, Input} from '@angular/core';
+import {HighlightComponent} from './highlight.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'docs-highlight-container',
+  template: `<ng-content></ng-content>`,
+  styleUrls: ['highlight-container.component.css']
+})
+export class HighlightContainerComponent implements AfterViewInit {
+
+  @Input() selector: string = '';
+
+  constructor(private elementRef: ElementRef) {
+
+  }
+
+  ngAfterViewInit() {
+    // Find children and highlight them in place
+    if (this.selector !== '' && this.elementRef) {
+      const blocks = this.elementRef.nativeElement.querySelectorAll(this.selector);
+      for (var i = 0; i < blocks.length; i++) {
+        const codeBlock = blocks[i] as HTMLElement;
+        const inputCode = codeBlock.innerText;
+        const hasType = codeBlock.className.indexOf('lang-') === 0;
+        const language = hasType ? codeBlock.className.replace('lang-', '') : 'html';
+
+        const code = HighlightComponent.highlight(language, inputCode);
+        codeBlock.classList.add('highlight');
+        codeBlock.innerHTML = code;
+      }
+
+    }
+  }
+
+}