Users/benfeely/docs update (#8)

* Update to docs for github hosting.

* Updates to docs and readme.

Author: benfeely

README.1.md

@@ -1,5 +1,32 @@
 # React support for Angular
 
+[![npm version](https://badge.fury.io/js/%40angular-react%2Fcore.svg)](https://www.npmjs.com/package/@angular-react/core)
+
 Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another.  In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version).  Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons.  
 
 Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application.  The library of wrappers for Office UI Fabric simplifies the use of these components with Angular.  However, any React code can make use of the custom Angular-React renderer.
+
+#### Quick links
+[@angular-react/fabric](https://www.npmjs.com/package/@angular-react/fabric) |
+[Documentation, quick start, and guides][ard] |
+[Demo][ard-demo] |
+[Contributing](https://github.com/benfeely/angular-react/blob/master/CONTRIBUTING.md) |
+[StackBlitz Template](https://stackblitz.com/edit/angular-react) |
+[Office UI Fabric](https://developer.microsoft.com/en-us/fabric)
+
+### Typical Use Cases
+- Use React component libraries with Angular
+- Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)
+
+### Getting started
+
+See our [Getting Started Guide][getting-started]
+if you're building your first project with Angular-React.
+
+If you'd like to contribute, you must follow our [contributing guidelines](https://github.com/angular/material2/blob/master/CONTRIBUTING.md).
+You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment.
+
+[ard]: https://benfeely.github.io/angular-react
+[ard-demo]: https://benfeely.github.io/angular-react
+[getting-started]: https://benfeely.github.io/angular-react/docs/getting-started
+[fab]: https://developer.microsoft.com/en-us/fabric

README.md

@@ -6,11 +6,13 @@ import {
   ComponentDocsComponent,
   DocsComponent,
   FabricComponent,
+  GettingStartedComponent,
   LandingComponent,
-  SemanticUiComponent,
   MixedPerfComponent,
   PerformanceComponent,
   ProfilesComponent,
+  SemanticUiComponent,
+  WrappersComponent,
 } from './containers';
 
 
@@ -28,7 +30,11 @@ const routes: Routes = [
       { path: 'fabric', component: FabricComponent },
       { path: 'semantic-ui', component: SemanticUiComponent },
     ] },
-    { path: 'docs', component: DocsComponent },
+    { path: 'docs', component: DocsComponent, children: [
+      { path: '', redirectTo: 'getting-started', pathMatch: 'full' },
+      { path: 'getting-started', component: GettingStartedComponent },
+      { path: 'wrappers', component: WrappersComponent },
+    ] },
 ];
 
 @NgModule({

apps/docs/src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 <app-sub-nav>
   <div mat-tab-nav-bar>
-    <a mat-tab-link routerLink="quick-start" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">
+    <a mat-tab-link routerLink="getting-started" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">
       <mat-icon>
         directions_run
       </mat-icon>

apps/docs/src/app/containers/docs/docs.component.html

@@ -9,10 +9,14 @@ import { ComponentsModule } from '../../components';
 
 import { DocsComponent } from './docs.component';
 import { FabricModule } from '../../fabric.module';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { WrappersComponent } from './wrappers/wrappers.component';
 
 
 const components = [
   DocsComponent,
+  GettingStartedComponent,
+  WrappersComponent,
 ];
 
 @NgModule({
@@ -33,4 +37,6 @@ export class DocsModule { }
 
 export {
   DocsComponent,
+  GettingStartedComponent,
+  WrappersComponent,
 }

apps/docs/src/app/containers/docs/docs.module.ts

@@ -0,0 +1,3 @@
+<p>
+  getting-started works!
+</p>

apps/docs/src/app/containers/docs/getting-started/getting-started.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GettingStartedComponent } from './getting-started.component';
+
+describe('GettingStartedComponent', () => {
+  let component: GettingStartedComponent;
+  let fixture: ComponentFixture<GettingStartedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GettingStartedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GettingStartedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/docs/src/app/containers/docs/getting-started/getting-started.component.scss

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-getting-started',
+  templateUrl: './getting-started.component.html',
+  styleUrls: ['./getting-started.component.scss']
+})
+export class GettingStartedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

apps/docs/src/app/containers/docs/getting-started/getting-started.component.spec.ts

@@ -0,0 +1,3 @@
+<p>
+  wrappers works!
+</p>