Added PWA capability and updated styling

.angular-cli.json

@@ -9,6 +9,7 @@
       "outDir": "dist",
       "assets": [
         "assets",
+        "manifest.json",
         "favicon.ico"
       ],
       "index": "index.html",
@@ -18,8 +19,9 @@
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
+      "serviceWorker": true,
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
@@ -54,7 +56,8 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
-    "component": {}
+    "styleExt": "scss",
+    "component": {
+    }
   }
 }

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"},
+      {"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"}
+    ]
+  }
+}

package.json

@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build-prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -33,10 +34,13 @@
     "@angular/cli": "1.4.3",
     "@angular/compiler-cli": "^4.2.4",
     "@angular/language-service": "^4.2.4",
+    "@angular/service-worker": "^1.0.0-beta.16",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
+    "angular2-template-loader": "^0.6.2",
     "codelyzer": "~3.1.1",
+    "electron": "^1.6.11",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -48,6 +52,7 @@
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "typescript": "~2.3.3",
+    "wallaby-webpack": "*"
   }
 }

src/app/app.component.html

@@ -1,16 +1,16 @@
 <md-sidenav-container fullscreen>
-  <md-toolbar color="accent">
-    <button md-button (click)="sidenav.toggle()">
+  <md-toolbar color="accent" class="mat-elevation-z6">
+    <button md-icon-button (click)="sidenav.toggle()">
       <md-icon>
         menu
       </md-icon>
     </button>
-    RxJS Docs
+    <span class="title"> RxJS Docs </span>
   </md-toolbar>
   <md-sidenav #sidenav>
     <md-toolbar>
       <span>
-        <button md-button routerLink="/rxjs">
+        <button md-button routerLink="/">
           Home
         </button>
       </span>
@@ -32,6 +32,6 @@
     </md-toolbar>
   </md-sidenav>
   <div class="body-margin">
-    <router-outlet></router-outlet> 
+    <router-outlet></router-outlet>
   </div>
-</md-sidenav-container>
+</md-sidenav-container>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.title {
+  padding: 0 16px;
+}

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'app';

src/app/app.module.ts

@@ -2,7 +2,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MdToolbarModule, MdSidenavModule, MdIconModule, MdButtonModule } from '@angular/material';
-import { routing } from './app.routing';
+import { RouterModule } from '@angular/router';
+
+import { RXJS_DOC_ROUTES } from './app.routing';
 
 import { AppComponent } from './app.component';
 import { OperatorsComponent } from './operators/operators.component';
@@ -21,7 +23,7 @@ import { RxjsComponent } from './rxjs/rxjs.component';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    routing,
+    RouterModule.forRoot(RXJS_DOC_ROUTES),
     MdToolbarModule,
     MdSidenavModule,
     MdIconModule,

src/app/app.routing.ts

@@ -1,17 +1,15 @@
 import { ModuleWithProviders } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 
 import { CompaniesComponent } from './companies/companies.component';
 import { OperatorsComponent } from './operators/operators.component';
 import { RxjsComponent } from './rxjs/rxjs.component';
 import { TeamComponent } from './team/team.component';
 
-const appRoutes: Routes = [
+export const RXJS_DOC_ROUTES: Routes = [
   { path: '', component: RxjsComponent },
-  { path: 'rxjs', component: RxjsComponent},
   { path: 'operators', component: OperatorsComponent },
   { path: 'team', component: TeamComponent },
-  { path: 'companies', component: CompaniesComponent }
+  { path: 'companies', component: CompaniesComponent },
+  { path: '**', redirectTo: '' }
 ];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

src/app/companies/companies.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
-  styleUrls: ['./companies.component.css']
+  styleUrls: ['./companies.component.scss']
 })
 export class CompaniesComponent implements OnInit {
 

src/app/operators/operators.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-operators',
   templateUrl: './operators.component.html',
-  styleUrls: ['./operators.component.css']
+  styleUrls: ['./operators.component.scss']
 })
 export class OperatorsComponent implements OnInit {
 

src/app/rxjs/rxjs.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-rxjs',
   templateUrl: './rxjs.component.html',
-  styleUrls: ['./rxjs.component.css']
+  styleUrls: ['./rxjs.component.scss']
 })
 export class RxjsComponent implements OnInit {
 

src/app/team/team.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-team',
   templateUrl: './team.component.html',
-  styleUrls: ['./team.component.css']
+  styleUrls: ['./team.component.scss']
 })
 export class TeamComponent implements OnInit {
 

src/index.html

@@ -2,13 +2,19 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="theme-color" content="#333">
   <title>RxjsDocs</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="manifest" href="manifest.json">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
+  <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
 </body>
 </html>

src/manifest.json

@@ -0,0 +1,52 @@
+{
+  "name": "RxJS Docs",
+  "display": "standalone",
+  "start_url": "/",
+  "short_name": "RxJS Docs",
+  "theme_color": "#333",
+  "description": "Documentation for RxJS 5+",
+  "orientation": "any",
+  "background_color": "#fafafa",
+  "icons": [
+    {
+      "src": "/assets/img/Rx_Logo-512-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-192-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-144-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-128-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-96-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-72-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-48-48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/Rx_Logo-16-16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    }
+  ]
+}

src/styles.css → src/styles.scss

@@ -1,7 +1,3 @@
-@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
-
-@import '~https://fonts.googleapis.com/icon?family=Roboto';
-
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
 body {

src/wallabyTest.ts

@@ -0,0 +1,19 @@
+import './polyfills';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);