Expand component view with example viewer (#33)

* Add DocumentationItems service and use throughout app

* Add content to component-view sidenav

* Rename top nav link to "Docs"

* Make example viewer work with a set of examples

* Add example components for testing

* Render raw examples in the Examples tab

* Add rough example-viewer structure and styles

* Load example sources into example viewer

* Remove testing examples except for button

* Add script to syntax highlight an example and hljs style

* Example assets loaded via document-viewer

* Introduce shared-module for shared/ directory

* Add missing RouterModule to SharedModule

Author: jelbourn

src/app/app-module.ts

@@ -6,12 +6,11 @@ import {HttpModule} from '@angular/http';
 import {MaterialModule} from '@angular/material';
 import {MaterialDocsApp} from './material-docs-app';
 import {Homepage} from './pages/homepage/homepage';
-import {NavBar} from './shared/navbar/navbar';
 import {routing} from './routes';
 import {ComponentList} from './pages/component-list/component-list';
-import {DocViewerModule} from './shared/doc-viewer/index';
-import {ExampleViewerModule} from './shared/example-viewer/index';
 import {ComponentViewer} from './pages/component-viewer/component-viewer';
+import {ExampleModule} from './examples/example-module';
+import {SharedModule} from './shared/shared-module';
 
 
 @NgModule({
@@ -20,12 +19,11 @@ import {ComponentViewer} from './pages/component-viewer/component-viewer';
     ComponentList,
     ComponentViewer,
     Homepage,
-    NavBar,
   ],
   imports: [
     BrowserModule,
-    DocViewerModule,
-    ExampleViewerModule,
+    ExampleModule,
+    SharedModule,
     FormsModule,
     HttpModule,
     MaterialModule.forRoot(),

src/app/examples/button-overview/button-overview-example.html

@@ -0,0 +1 @@
+<button md-button>Click me!</button>

src/app/examples/button-overview/button-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-overview-example',
+  templateUrl: './button-overview-example.html',
+})
+export class ButtonOverviewExample {}

src/app/examples/button-types/button-types-example.html

@@ -0,0 +1,17 @@
+<div class="example">
+  <h3>Normal Buttons</h3>
+  <div class="button-row">
+    <button md-button>Flat button</button>
+    <button md-raised-button>Raised button</button>
+    <button md-fab><md-icon>check</md-icon></button>
+    <button md-mini-fab><md-icon>check</md-icon></button>
+  </div>
+
+  <h3>Link Buttons</h3>
+  <div class="button-row">
+    <a md-button routerLink=".">Flat button</a>
+    <a md-raised-button routerLink=".">Raised button</a>
+    <a md-fab routerLink="."><md-icon>check</md-icon></a>
+    <a md-mini-fab routerLink="."><md-icon>check</md-icon></a>
+  </div>
+</div>

src/app/examples/button-types/button-types-example.scss

@@ -0,0 +1,9 @@
+.example {
+  width: 500px;
+}
+
+.button-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}

src/app/examples/button-types/button-types-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'button-types-example',
+  templateUrl: './button-types-example.html',
+  styleUrls: ['./button-types-example.scss'],
+})
+export class ButtonTypesExample {}

src/app/examples/example-module.ts

@@ -0,0 +1,34 @@
+import {NgModule} from '@angular/core';
+import {MaterialModule} from '@angular/material';
+import {ButtonOverviewExample} from './button-overview/button-overview-example';
+import {ButtonTypesExample} from './button-types/button-types-example';
+
+
+/**
+ * The list of example components.
+ * Key is the example name which will be used in `material-docs-example="key"`.
+ * Value is the component.
+ */
+
+export const EXAMPLE_COMPONENTS = {
+  'button-overview': ButtonOverviewExample,
+  'button-types': ButtonTypesExample
+};
+
+/**
+ * The list of all example components.
+ * We need to put them in both `declarations` and `entryComponents` to make them work.
+ */
+export const EXAMPLE_LIST = [
+  ButtonOverviewExample,
+  ButtonTypesExample,
+];
+
+@NgModule({
+  declarations: EXAMPLE_LIST,
+  entryComponents: EXAMPLE_LIST,
+  imports: [
+    MaterialModule.forRoot(),
+  ]
+})
+export class ExampleModule { }

src/app/pages/component-list/component-list.html

@@ -1,8 +1,11 @@
-<a *ngFor="let component of componentItems"
-    class="docs-component-list-item"
-    [routerLink]="['/component/', component.id]">
-  <img src="../../../assets/img/components/{{component.src}}.svg"
-      class="docs-component-list-item-icon"
-      [alt]="component.name">
-  {{component.name}}
-</a>
+<div *ngFor="let category of docItems.getItemsInCategories()" class="docs-component-list-category">
+  <h2>{{category.name}}</h2>
+  <a *ngFor="let component of category.items"
+      class="docs-component-list-item"
+      [routerLink]="['/component/', component.id]">
+    <img src="../../../assets/img/components/{{component.id}}.svg"
+        class="docs-component-list-item-icon"
+        [alt]="component.name">
+    {{component.name}}
+  </a>
+</div>

src/app/pages/component-list/component-list.scss

@@ -1,3 +1,10 @@
+@import '~@angular/material/button/button-base';
+
+
+.docs-component-list-category {
+  margin: 50px;
+}
+
 .docs-component-list-item {
   display: inline-flex;
   flex-direction: column;

src/app/pages/component-list/component-list.ts

@@ -1,36 +1,11 @@
 import {Component} from '@angular/core';
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 
 @Component({
   selector: 'app-components',
   templateUrl: './component-list.html',
   styleUrls: ['./component-list.scss']
 })
 export class ComponentList {
-  componentItems = [
-    {id: 'button', name: 'Button', src: 'button'},
-    {id: 'checkbox', name: 'Checkbox', src: 'checkbox'},
-    {id: 'radio-button', name: 'Radio button', src: 'radio'},
-    {id: 'button-toggle', name: 'Button toggle', src: 'button-toggle'},
-    {id: 'input', name: 'Input', src: 'input'},
-    {id: 'textarea', name: 'Textarea', src: 'textarea'},
-    {id: 'select', name: 'Select', src: 'select'},
-    {id: 'slide-toggle', name: 'Slide toggle', src: 'slide-toggle'},
-    {id: 'slider', name: 'Slider', src: 'slider'},
-
-    {id: 'card', name: 'Card', src: 'card'},
-    {id: 'list', name: 'List', src: 'list'},
-    {id: 'grid-list', name: 'Grid list', src: 'grid-list'},
-    {id: 'sidenav', name: 'Sidenav', src: 'sidenav'},
-    {id: 'toolbar', name: 'Toolbar', src: 'toolbar'},
-
-    {id: 'menu', name: 'Menu', src: 'menu'},
-    {id: 'dialog', name: 'Dialog', src: 'dialog'},
-    {id: 'snackbar', name: 'Snackbar', src: 'snackbar'},
-    {id: 'tooltip', name: 'Tooltip', src: 'tooltip'},
-
-    {id: 'progress-spinner', name: 'Progress spinner', src: 'progress-spinner'},
-    {id: 'progress-bar', name: 'Progress bar', src: 'progress-bar'},
-
-    {id: 'icon', name: 'Icon', src: 'icon'},
-  ];
+  constructor(public docItems: DocumentationItems) { }
 }