Add guides (getting-started, theming)

src/_app-theme.scss

@@ -5,6 +5,7 @@
 @import './app/pages/component-list/component-list-theme';
 @import './app/pages/component-category-list/component-category-list-theme';
 
+@import './styles/typography-theme';
 @import './app/shared/navbar/navbar-theme';
 @import './app/shared/example-viewer/example-viewer-theme';
 
@@ -20,6 +21,15 @@
     background: md-color($background, background);
   }
 
+  .docs-primary-header {
+    background: md-color($primary);
+
+    h1 {
+      color: md-color($primary, default-contrast);
+    }
+  }
+
+  @include docs-site-typography-theme($theme);
   @include nav-bar-theme($theme);
   @include component-viewer-sidenav-theme($theme);
   @include home-page-theme($theme);

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

@@ -5,14 +5,6 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  .docs-component-list-header {
-    background: md-color($primary);
-
-    h1 {
-      color: md-color($primary, default-contrast);
-    }
-  }
-
   .docs-component-list-item {
     color: md-color($foreground, secondary-text);
   }

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

@@ -1,4 +1,4 @@
-<div class="docs-component-list-header">
+<div class="docs-primary-header">
   <h1> {{category.name}} </h1>
 </div>
 

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

@@ -21,14 +21,3 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-
-.docs-component-list-header {
-  padding-left: 20px;
-
-  h1 {
-    font-size: 30px;
-    font-weight: 300;
-    margin: 0;
-    padding: 50px;
-  }
-}

src/app/pages/component-viewer/_component-viewer-theme.scss

@@ -1,3 +1,5 @@
+@import '~@angular/material/core/theming/theming';
+
 @mixin component-viewer-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
@@ -8,47 +10,6 @@
   app-component-viewer {
     color: md-color($foreground, secondary-text);
 
-    .docs-component-viewer-tabbed-content {
-      h1 {
-        color: md-color($primary, 800);
-        background: rgba(md-color($foreground, secondary-text), .03);
-      }
-
-      h3, h2, h4, h5, p, ol, li{
-        color: md-color($foreground, secondary-text);
-      }
-
-      a {
-        color: md-color($primary);
-      }
-
-      table {
-        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
-      }
-
-      table tbody th{
-        border: 1px solid rgba(md-color($foreground, secondary-text), .03);
-      }
-
-      td {
-        color: md-color($foreground, secondary-text);
-        border: 1px solid rgba(md-color($foreground, secondary-text), .03);
-      }
-
-      th {
-        color: md-color($foreground, secondary-text);
-        background: rgba(md-color($foreground, secondary-text), .03);
-      }
-    }
-
-    .docs-component-viewer-header {
-      background: md-color($primary);
-
-      h1 {
-        color: md-color($primary, default-contrast);
-      }
-    }
-
     .md-tab-label:focus {
       color: md-color($foreground, secondary-text);
     }

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

@@ -1,4 +1,4 @@
-<div class="docs-component-viewer-header">
+<div class="docs-primary-header">
   <h1> Component - {{componentDocItem.name}} </h1>
 </div>
 

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

@@ -2,17 +2,6 @@ app-component-viewer {
   font-weight: 400;
 }
 
-.docs-component-viewer-header {
-  padding-left: 20px;
-
-  h1 {
-    font-size: 30px;
-    font-weight: 300;
-    margin: 0;
-    padding: 50px;
-  }
-}
-
 .docs-component-viewer-tabbed-content {
   margin: 50px 70px;
 
@@ -21,74 +10,6 @@ app-component-viewer {
   }
 }
 
-.docs-component-viewer-tabbed-content .docs-component-view-text-content {
-
-  h1 {
-    display:inline-block;
-    font-size: 20px;
-    font-weight: 400;
-    padding: 5px;
-  }
-
-  h3, h2 {
-    font-size: 20px;
-    font-weight: 400;
-    margin-bottom: 30px;
-    margin-top: 80px;
-  }
-
-  h4 {
-    margin-top: 40px;
-  }
-
-  h5 {
-    font-size: 16px;
-  }
-
-  .md-tab-body-wrapper h2 {
-    margin-top: 0px;
-  }
-
-  p {
-    font-size: 16px;
-    line-height: 28px;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  table {
-    border-collapse: collapse;
-    border-radius: 2px;
-    border-spacing: 0;
-    margin: 0 0 32px 0;
-    width: 100%;
-  }
-
-  table tbody th {
-    max-width: 100px;
-    padding: 13px 32px;
-    text-align: left;
-  }
-
-  td {
-    font-weight: 400;
-    padding: 8px 30px;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  th {
-    font-size: 16px;
-    font-weight: 400;
-    padding: 13px 32px;
-    text-align: left;
-  }
-}
-
 .md-tab-header {
   border: none;
   margin-bottom: 30px;

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

@@ -1,3 +1,6 @@
+<div class="docs-primary-header">
+  <h1>Guides</h1>
+</div>
 <md-list class="docs-guide-list-item">
   <a md-list-item
      *ngFor="let guide of guideItems.getAllItems()"

src/app/pages/guide-viewer/guide-viewer.html

@@ -1 +1,5 @@
-<doc-viewer [documentUrl]="documentUrl"></doc-viewer>
+<div class="docs-primary-header">
+  <h1>{{guide.name}}</h1>
+</div>
+
+<doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>

src/app/pages/guide-viewer/guide-viewer.scss

@@ -0,0 +1,4 @@
+.docs-guide-content {
+  display: block;
+  margin: 20px 0 0 70px;
+}

src/app/pages/guide-viewer/guide-viewer.ts

@@ -1,20 +1,19 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {GuideItems} from '../../shared/guide-items/guide-items';
+import {GuideItems, GuideItem} from '../../shared/guide-items/guide-items';
 
 
 @Component({
   selector: 'guide-viewer',
   templateUrl: './guide-viewer.html',
   styleUrls: ['./guide-viewer.scss'],
-  encapsulation: ViewEncapsulation.None,
 })
 export class GuideViewer {
-  documentUrl: string;
+  guide: GuideItem;
 
   constructor(private _route: ActivatedRoute, public guideItems: GuideItems) {
     _route.params.subscribe(p => {
-      this.documentUrl = guideItems.getItemById(p['id']).document;
+      this.guide = guideItems.getItemById(p['id']);
     });
   }
 }

src/app/pages/homepage/homepage.html

@@ -5,7 +5,7 @@ <h1>Angular Material</h1>
       <h2> Material Design components for Angular 2 apps</h2>
     </div>
     <div class="docs-header-start">
-     <a md-raised-button routerLink="components">Get started</a>
+     <a md-raised-button routerLink="guide/getting-started">Get started</a>
     </div>
   </div>
 </header>
@@ -27,7 +27,7 @@ <h2>Sprint from Zero to App</h2>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Fast and Consistent</h2>
-      <p>Finely tunes performance, because every millisecond counts. Fully tested across
+      <p>Finely tuned performance, because every millisecond counts. Fully tested across
         modern browsers.</p>
     </div>
   </div>
@@ -51,6 +51,6 @@ <h2>Optimized for Angular</h2>
     </div>
   </div>
   <div class="docs-homepage-bottom-start">
-    <button md-raised-button color="primary">Get started</button>
+    <a md-raised-button routerLink="guide/getting-started">Get started</a>
   </div>
 </div>

src/app/shared/guide-items/guide-items.spec.ts

@@ -30,6 +30,6 @@ describe('GuideItems', () => {
   });
 
   it('should get a doc item by id', () => {
-    expect(guideItems.getItemById('readme')).toBeDefined();
+    expect(guideItems.getItemById('getting-started')).toBeDefined();
   });
 });

src/app/shared/guide-items/guide-items.ts

@@ -8,14 +8,19 @@ export interface GuideItem {
 
 const GUIDES = [
   {
-    id: 'readme',
-    name: 'Read Me',
-    document: '/assets/documents/README.html',
+    id: 'getting-started',
+    name: 'Getting started',
+    document: '/assets/documents/guides/getting-started.html',
   },
   {
-    id: 'card',
-    name: 'Card',
-    document: '/assets/documents/overview/card.html',
+    id: 'theming',
+    name: 'Theming Angular Material',
+    document: '/assets/documents/guides/theming.html',
+  },
+  {
+    id: 'theming-your-components',
+    name: 'Theming your own components',
+    document: '/assets/documents/guides/theming-your-components.html',
   },
 ];