Squashed commit of the following:

commit b684808
Author: Austin <[email protected]>
Date:   Mon Jul 17 15:35:08 2017 -0600

    feat(PWA): add service worker angular#175 (angular#223)

commit ec7c637
Author: Austin <[email protected]>
Date:   Mon Jul 17 13:52:28 2017 -0600

    feat(docs): add page titles to doc pages angular#189 (angular#220)

commit 6170057
Author: Rafael Santana <[email protected]>
Date:   Wed Jul 12 20:05:29 2017 -0300

    Fix exception being thrown on invalid routes (angular#218)

commit 101aeff
Author: Michael Prentice <[email protected]>
Date:   Tue Jul 11 19:38:17 2017 -0400

    fix(footer): extra w in www.angular.io (angular#217)

    just use https://angular.io since that is where www.angular.io goes

commit 135c38f
Author: Rafael Santana <[email protected]>
Date:   Sun Jul 9 12:37:39 2017 -0300

    Add handling for invalid routes (angular#191)

commit ad1400e
Author: Will Howell <[email protected]>
Date:   Sun Jul 9 11:35:25 2017 -0400

    Set max width for component and guide viewers (angular#207)

commit ac3f30e
Author: Austin <[email protected]>
Date:   Sun Jul 9 10:18:02 2017 -0500

    chore(styles): apply material light / dark styles to highlightjs (angular#213)

Author: amcdnl

angular-cli.json

@@ -16,10 +16,10 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.json",
       "prefix": "app",
-      "mobile": false,
+      "serviceWorker": true,
       "styles": [
         "main.scss",
-        "highlightjs/solarized-light.css",
+        "highlightjs/material-light.css",
         {"input": "assets/pink-bluegrey.css", "lazy": true},
         {"input": "assets/deeppurple-amber.css", "lazy": true},
         {"input": "assets/indigo-pink.css", "lazy": true},

ngsw-manifest.json

@@ -0,0 +1,10 @@
+{
+  "external": {
+    "urls": [
+      {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
+      {"url": "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono"},
+      {"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}
+    ]
+  }
+}

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

@@ -21,7 +21,7 @@ describe('ComponentCategoryList', () => {
     spyOn(component, 'ngOnInit').and.callThrough();
     fixture.detectChanges();
     expect(component.ngOnInit).toHaveBeenCalled();
-    expect(component._componentPageTitle.title).toEqual('Component Library');
+    expect(component._componentPageTitle.title).toEqual('Component Categories');
   });
 
   it('should render a card for every category', () => {

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

@@ -17,7 +17,7 @@ export class ComponentCategoryList {
               public _componentPageTitle: ComponentPageTitle) {}
 
   ngOnInit() {
-    this._componentPageTitle.title = 'Component Library';
+    this._componentPageTitle.title = 'Component Categories';
   }
 }
 

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

@@ -3,7 +3,7 @@ import {
   DocumentationItems,
   DocCategory
 } from '../../shared/documentation-items/documentation-items';
-import {ActivatedRoute, RouterModule} from '@angular/router';
+import {ActivatedRoute, Router, RouterModule} from '@angular/router';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {CommonModule} from '@angular/common';
@@ -19,10 +19,16 @@ export class ComponentList {
 
   constructor(public docItems: DocumentationItems,
               private _componentPageTitle: ComponentPageTitle,
-              private _route: ActivatedRoute) {
+              private _route: ActivatedRoute,
+              private router: Router) {
     _route.params.subscribe(p => {
       this.category = docItems.getCategoryById(p['id']);
-      this._componentPageTitle.title = this.category.name;
+
+      if (this.category) {
+        this._componentPageTitle.title = this.category.name;
+      } else {
+        this.router.navigate(['/categories']);
+      }
     });
   }
 }

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

@@ -1,12 +1,13 @@
-<!-- TODO(jelbourn): turn this into nav tabs -->
-<nav md-tab-nav-bar class="docs-component-viewer-tabbed-content">
-  <a md-tab-link class="docs-component-viewer-section-tab"
-      *ngFor="let section of ['Overview', 'API', 'Examples']"
-      [routerLink]="section.toLowerCase()"
-      routerLinkActive #rla="routerLinkActive"
-      [active]="rla.isActive">{{section}}</a>
-</nav>
+<div class="docs-component-viewer">
+  <nav md-tab-nav-bar class="docs-component-viewer-tabbed-content">
+    <a md-tab-link class="docs-component-viewer-section-tab"
+        *ngFor="let section of ['Overview', 'API', 'Examples']"
+        [routerLink]="section.toLowerCase()"
+        routerLinkActive #rla="routerLinkActive"
+        [active]="rla.isActive">{{section}}</a>
+  </nav>
 
-<div class="docs-component-viewer-content">
-  <router-outlet></router-outlet>
+  <div class="docs-component-viewer-content">
+    <router-outlet></router-outlet>
+  </div>
 </div>

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

@@ -2,7 +2,17 @@
 
 app-component-viewer {
   font-weight: 400;
-  margin: 20px 70px 50px 70px;
+  padding: 20px $content-padding-side 50px;
+
+  @media ($mat-xsmall) {
+    padding-left: $content-padding-side-xs;
+    padding-right: $content-padding-side-xs;
+  }
+}
+
+.docs-component-viewer {
+  margin: 0 auto;
+  max-width: 940px;
 }
 
 .docs-component-viewer-section-tab {

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

@@ -1,5 +1,5 @@
 import {Component, NgModule, ViewEncapsulation} from '@angular/core';
-import {ActivatedRoute, RouterModule} from '@angular/router';
+import {ActivatedRoute, Router, RouterModule} from '@angular/router';
 import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {MdTabsModule} from '@angular/material';
@@ -18,11 +18,17 @@ export class ComponentViewer {
   componentDocItem: DocItem;
 
   constructor(private _route: ActivatedRoute,
+              private router: Router,
               public _componentPageTitle: ComponentPageTitle,
               public docItems: DocumentationItems) {
-    _route.params.subscribe(p => {
-      this.componentDocItem = docItems.getItemById(p['id']);
-      this._componentPageTitle.title = `${this.componentDocItem.name}`;
+    this._route.params.subscribe(params => {
+      this.componentDocItem = docItems.getItemById(params['id']);
+
+      if (this.componentDocItem) {
+        this._componentPageTitle.title = `${this.componentDocItem.name}`;
+      } else {
+        this.router.navigate(['/components']);
+      }
     });
   }
 }

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

@@ -1,24 +1,29 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, OnInit} from '@angular/core';
 import {GuideItems} from '../../shared/guide-items/guide-items';
 import {MdListModule} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {FooterModule} from '../../shared/footer/footer';
 import {CommonModule} from '@angular/common';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 @Component({
   selector: 'app-guides',
   templateUrl: './guide-list.html',
   styleUrls: ['./guide-list.scss']
 })
-export class GuideList {
-  constructor(public guideItems: GuideItems) {}
+export class GuideList implements OnInit {
+  constructor(public guideItems: GuideItems, public _componentPageTitle: ComponentPageTitle) {}
+
+  ngOnInit(): void {
+    this._componentPageTitle.title = 'Guides';
+  }
 }
 
 
 @NgModule({
   imports: [MdListModule, RouterModule, FooterModule, CommonModule],
   exports: [GuideList],
   declarations: [GuideList],
-  providers: [GuideItems],
+  providers: [GuideItems, ComponentPageTitle],
 })
 export class GuideListModule { }

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

@@ -2,9 +2,11 @@
   <h1>{{guide.name}}</h1>
 </div>
 
-<div class="docs-guide-content">
-  <doc-viewer class="docs-guide-viewer" [documentUrl]="guide.document"></doc-viewer>
+<div class="docs-guide-wrapper">
+<div class="docs-guide-inner">
+  <doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>
   <table-of-contents></table-of-contents>
 </div>
+</div>
 
 <app-footer></app-footer>

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

@@ -11,30 +11,37 @@ $guide-content-margin-side-xs: 15px;
   flex-grow: 1;
 }
 
-.docs-guide-content {
+.docs-guide-wrapper {
+  padding: 20px $content-padding-side 0;
   display: block;
-  margin: 20px $guide-content-margin-side 0;
-  flex-grow: 1;
+  text-align: center;
 
   @media ($mat-xsmall) {
-    margin-left: $guide-content-margin-side-xs;
-    margin-right: $guide-content-margin-side-xs;
+    padding-left: $content-padding-side-xs;
+    padding-right: $content-padding-side-xs;
   }
 }
 
-.docs-guide-viewer {
-  width: 80%;
+.docs-guide-inner {
+  display: inline-block;
+  text-align: left;
+  max-width: 940px;
+}
+
+.docs-guide-content {
   display: block;
   float: left;
+  width: 80%;
 
   @media (max-width: $small-breakpoint-width) {
     width: 100%;
   }
 }
 
 table-of-contents {
-  float: right;
   top: 35px;
+  float: right;
+  width: 15%;
 
   @media (max-width: $small-breakpoint-width) {
     display: none;

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

@@ -1,30 +1,42 @@
-import {Component, NgModule} from '@angular/core';
-import {ActivatedRoute, RouterModule} from '@angular/router';
+import {Component, NgModule, OnInit} from '@angular/core';
+import {ActivatedRoute, RouterModule, Router} from '@angular/router';
 import {GuideItem, GuideItems} from '../../shared/guide-items/guide-items';
 import {FooterModule} from '../../shared/footer/footer';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {HeaderLinkModule} from '../../shared/header-link/header-link.module';
 import {TableOfContentsModule} from '../../shared/table-of-contents/table-of-contents.module';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 @Component({
   selector: 'guide-viewer',
   templateUrl: './guide-viewer.html',
   styleUrls: ['./guide-viewer.scss'],
 })
-export class GuideViewer {
+export class GuideViewer implements OnInit {
   guide: GuideItem;
 
-  constructor(private _route: ActivatedRoute, public guideItems: GuideItems) {
+  constructor(private _route: ActivatedRoute,
+              private _componentPageTitle: ComponentPageTitle,
+              private router: Router,
+              public guideItems: GuideItems) {
     _route.params.subscribe(p => {
       this.guide = guideItems.getItemById(p['id']);
+
+      if (!this.guide) {
+        this.router.navigate(['/guides']);
+      }
     });
   }
+
+  ngOnInit(): void {
+    this._componentPageTitle.title = this.guide.name;
+  }
 }
 
 @NgModule({
   imports: [DocViewerModule, FooterModule, RouterModule, HeaderLinkModule, TableOfContentsModule],
   exports: [GuideViewer],
   declarations: [GuideViewer],
-  providers: [GuideItems],
+  providers: [GuideItems, ComponentPageTitle],
 })
 export class GuideViewerModule {}

src/app/pages/homepage/homepage.ts

@@ -1,19 +1,26 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, OnInit} from '@angular/core';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {MdButtonModule} from '@angular/material';
 import {FooterModule} from '../../shared/footer/footer';
 import {RouterModule} from '@angular/router';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 @Component({
   selector: 'app-homepage',
   templateUrl: './homepage.html',
   styleUrls: ['./homepage.scss']
 })
-export class Homepage {}
+export class Homepage implements OnInit {
+  constructor(public _componentPageTitle: ComponentPageTitle) {}
+
+  ngOnInit(): void {
+    this._componentPageTitle.title = '';
+  }
+}
 
 @NgModule({
   imports: [SvgViewerModule, MdButtonModule, FooterModule, RouterModule],
   exports: [Homepage],
   declarations: [Homepage],
 })
-export class HomepageModule { }
+export class HomepageModule {}

src/app/pages/page-title/page-title.spec.ts

@@ -1,8 +1,9 @@
 import {ComponentPageTitle} from './page-title';
-
+import {Title} from '@angular/platform-browser';
 
 describe('ComponentPageTitle', () => {
-  const service: ComponentPageTitle = new ComponentPageTitle();
+  const title: Title = new Title({});
+  const service: ComponentPageTitle = new ComponentPageTitle(title);
 
   it('should initialize title to empty string', () => {
     expect(service._title).toEqual('');

src/app/pages/page-title/page-title.ts

@@ -1,4 +1,5 @@
 import {Injectable} from '@angular/core';
+import {Title} from '@angular/platform-browser';
 
 /**
  * Service responsible for setting the title that appears above the components and guide pages.
@@ -8,5 +9,15 @@ export class ComponentPageTitle {
   _title = '';
 
   get title(): string { return this._title; }
-  set title(title: string) { this._title = title; }
+
+  set title(title: string) {
+    this._title = title;
+    if (title !== '') {
+      title = `${title} | `;
+    }
+    this.bodyTitle.setTitle(`${title}Angular Material`);
+  }
+
+  constructor(private bodyTitle: Title) { }
+
 }

src/app/routes.ts

@@ -37,10 +37,12 @@ export const MATERIAL_DOCS_ROUTES: Routes = [
           {path: 'overview', component: ComponentOverview, pathMatch: 'full'},
           {path: 'api', component: ComponentApi, pathMatch: 'full'},
           {path: 'examples', component: ComponentExamples, pathMatch: 'full'},
+          {path: '**', redirectTo: 'overview'},
         ],
       },
     ],
   },
   {path: 'guides', component: GuideList},
   {path: 'guide/:id', component: GuideViewer},
+  {path: '**', redirectTo: ''},
 ];

src/app/shared/footer/footer.html

@@ -8,7 +8,7 @@
 
     <div class="docs-footer-links">
       <ul>
-        <li> <a href="https://wwww.angular.io">Learn Angular</a> </li>
+        <li> <a href="https://angular.io">Learn Angular</a> </li>
       </ul>
     </div>
 

src/assets/custom-themes/pink-bluegrey.scss

@@ -1,4 +1,5 @@
 @import '../../app-theme';
+@import '../../highlightjs/material-dark';
 
 // Define the dark theme.
 $primary: mat-palette($mat-pink);

src/assets/custom-themes/purple-green.scss

@@ -1,4 +1,5 @@
 @import '../../app-theme';
+@import '../../highlightjs/material-dark';
 
 // Define the dark theme.
 $primary: mat-palette($mat-purple);

src/assets/img/favicons/manifest.json

@@ -1,5 +1,11 @@
 {
-  "name": "Angular.io",
+  "name": "Angular Material",
+  "short_name": "Angular Material",
+  "theme_color": "#FFFFFF",
+  "background_color": "#3F51B5",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
   "icons": [
     {
       "src": "\/android-chrome-36x36.png",