From f560418c20d49bb796673355fe0e4c4ccf998b54 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 10:24:43 +0100
Subject: [PATCH 01/26] refactor(operators): Separate operators in multiple
 pages

---
 .../components/operator/operator.component.ts | 44 +++++++++++-----
 src/app/operators/operators-routing.module.ts |  9 +++-
 src/app/operators/operators.component.html    |  7 +--
 src/app/operators/operators.component.ts      | 51 ++++++++++++-------
 src/app/operators/operators.module.ts         | 10 +++-
 5 files changed, 81 insertions(+), 40 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 453a59d8..e1789743 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -2,28 +2,46 @@ import {
   Component,
   Input,
   OnInit,
-  ChangeDetectionStrategy
-} from "@angular/core";
-import { OperatorDoc } from "../../../../operator-docs/operator.model";
+  ChangeDetectionStrategy,
+  Inject,
+  InjectionToken
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { OperatorDoc } from '../../../../operator-docs/operator.model';
+import 'rxjs/add/operator/pluck';
+
+export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 
 @Component({
-  selector: "app-operator",
-  templateUrl: "./operator.component.html",
-  styleUrls: ["./operator.component.scss"],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-operator',
+  templateUrl: './operator.component.html',
+  styleUrls: ['./operator.component.scss']
 })
-export class OperatorComponent {
-  @Input() operator: OperatorDoc;
-
-  private readonly baseSourceUrl = "https://github.com/ReactiveX/rxjs/blob/master/src/operators/";
-  private readonly baseSpecUrl = "http://reactivex.io/rxjs/test-file/spec-js/operators";
+export class OperatorComponent implements OnInit {
+  public operator: OperatorDoc;
+
+  private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
+  private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
+
+  constructor(
+    private _activatedRoute: ActivatedRoute,
+    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[]
+  ) {}
+
+  ngOnInit() {
+    this._activatedRoute.params.pluck('operator').subscribe((name: string) => {
+      this.operator = this.operators.filter(
+        (operator: OperatorDoc) => operator.name === name
+      )[0];
+    });
+  }
 
   get operatorName() {
     return this.operator.name;
   }
 
   get signature() {
-    return this.operator.signature || "Signature Placeholder";
+    return this.operator.signature || 'Signature Placeholder';
   }
 
   get marbleUrl() {
diff --git a/src/app/operators/operators-routing.module.ts b/src/app/operators/operators-routing.module.ts
index 83354d0e..ea38e80e 100644
--- a/src/app/operators/operators-routing.module.ts
+++ b/src/app/operators/operators-routing.module.ts
@@ -2,8 +2,15 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { OperatorsComponent } from './operators.component';
+import { OperatorComponent } from './components/operator/operator.component';
 
-const routes: Routes = [{ path: '', component: OperatorsComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: OperatorsComponent,
+    children: [{ path: ':operator', component: OperatorComponent }]
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/operators/operators.component.html b/src/app/operators/operators.component.html
index ef256efa..cc9f4f87 100644
--- a/src/app/operators/operators.component.html
+++ b/src/app/operators/operators.component.html
@@ -11,15 +11,12 @@
       <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
-        [href]="'/operators#' + operator.name">
+        [routerLink]="['/operators', operator.name]">
         {{ operator.name }}
       </a>
     </mat-nav-list>
   </mat-sidenav>
-  <app-operator
-    *ngFor="let operator of operators"
-    [operator]="operator">
-  </app-operator>
+  <router-outlet></router-outlet>
 </mat-sidenav-container>
 <button
   *ngIf="smallScreen"
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index 147ab136..5d1f5cc1 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -1,5 +1,18 @@
-import { Component, Inject, InjectionToken, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
-import { trigger, state, style, animate, transition } from '@angular/animations';
+import {
+  Component,
+  Inject,
+  InjectionToken,
+  OnInit,
+  AfterViewInit,
+  ChangeDetectionStrategy
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
 import { Router, ActivatedRoute } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
@@ -21,7 +34,7 @@ interface OperatorDocMap {
   styleUrls: ['./operators.component.scss'],
   animations: [
     trigger('growInOut', [
-      state('in', style({opacity: 1})),
+      state('in', style({ opacity: 1 })),
       transition('void => *', [
         style({
           opacity: 0,
@@ -30,10 +43,13 @@ interface OperatorDocMap {
         animate(`150ms ease-in`)
       ]),
       transition('* => void', [
-        animate(`150ms ease-out`, style({
-          opacity: 0,
-          transform: 'scale3d(.3, .3, .3)'
-        }))
+        animate(
+          `150ms ease-out`,
+          style({
+            opacity: 0,
+            transform: 'scale3d(.3, .3, .3)'
+          })
+        )
       ])
     ])
   ]
@@ -49,14 +65,14 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
     @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
-  ) { }
+  ) {}
 
   ngOnInit() {
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
-    this._subscription = this._activatedRoute
-      .fragment
-      .subscribe(name => this.scrollToOperator(name));
+    this._subscription = this._activatedRoute.fragment.subscribe(name =>
+      this.scrollToOperator(name)
+    );
   }
 
   ngAfterViewInit() {
@@ -69,10 +85,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     }
   }
 
-  updateUrl(name: string) {
-    this._router.navigate([ '/operators' ], { fragment: name });
-  }
-
   scrollToOperator(name: string) {
     const element = document.getElementById(name);
 
@@ -90,20 +102,21 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   }
 
   get operatorMenuGap() {
-    return this.extraSmallScreen ? OPERATOR_MENU_GAP_SMALL : OPERATOR_MENU_GAP_LARGE;
+    return this.extraSmallScreen
+      ? OPERATOR_MENU_GAP_SMALL
+      : OPERATOR_MENU_GAP_LARGE;
   }
 
   get sidenavMode() {
     return this.smallScreen ? 'over' : 'side';
   }
-
 }
 
 export function groupOperatorsByType(operators: OperatorDoc[]): OperatorDocMap {
   return operators.reduce((acc: OperatorDocMap, curr: OperatorDoc) => {
     if (acc[curr.operatorType]) {
-      return { ...acc, [ curr.operatorType ] : [ ...acc[ curr.operatorType ], curr ] };
+      return { ...acc, [curr.operatorType]: [...acc[curr.operatorType], curr] };
     }
-    return { ...acc, [ curr.operatorType ]: [ curr ] };
+    return { ...acc, [curr.operatorType]: [curr] };
   }, {});
 }
diff --git a/src/app/operators/operators.module.ts b/src/app/operators/operators.module.ts
index 86d8c4b9..9522a00e 100644
--- a/src/app/operators/operators.module.ts
+++ b/src/app/operators/operators.module.ts
@@ -9,7 +9,10 @@ import { ClipboardModule } from 'ngx-clipboard';
 import { ALL_OPERATORS, OperatorDoc } from '../../operator-docs';
 import { OperatorsRoutingModule } from './operators-routing.module';
 import { OperatorsComponent, OPERATORS_TOKEN } from './operators.component';
-import { OperatorComponent } from './components/operator/operator.component';
+import {
+  OperatorComponent,
+  OPERATOR_TOKEN
+} from './components/operator/operator.component';
 import { OperatorHeaderComponent } from './components/operator-header/operator-header.component';
 import { OperatorParametersComponent } from './components/operator-parameters/operator-parameters.component';
 import { OperatorExamplesComponent } from './components/operator-examples/operator-examples.component';
@@ -43,7 +46,10 @@ import { SharedModule } from '../shared.module';
     ClipboardModule,
     LayoutModule
   ],
-  providers: [{ provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }],
+  providers: [
+    { provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS },
+    { provide: OPERATOR_TOKEN, useValue: ALL_OPERATORS }
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class OperatorsModule {}

From 5b3ad9b525cd2dae0171e43a79ac29ca3210b189 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 15:29:33 +0100
Subject: [PATCH 02/26] refactor(operators): Adapt links for operators in
 different pages

---
 .../related-operators.component.html          |  2 +-
 src/operator-docs/combination/combineAll.ts   | 48 ++++++++++---------
 src/operator-docs/filtering/debounceTime.ts   | 40 ++++++++--------
 3 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/app/operators/components/related-operators/related-operators.component.html b/src/app/operators/components/related-operators/related-operators.component.html
index 2da9fa6f..a0b853e5 100644
--- a/src/app/operators/components/related-operators/related-operators.component.html
+++ b/src/app/operators/components/related-operators/related-operators.component.html
@@ -1,6 +1,6 @@
 <h2 class="related-operators"> Related Operators </h2>
 <ul class="section-list">
   <li *ngFor="let related of relatedOperators">
-    <a [href]="'/operators#' + related"> {{ related }} </a>
+    <a [routerLink]="['/operators', related]"> {{ related }} </a>
   </li>
 </ul>
diff --git a/src/operator-docs/combination/combineAll.ts b/src/operator-docs/combination/combineAll.ts
index 98ba45d6..7edd6e91 100644
--- a/src/operator-docs/combination/combineAll.ts
+++ b/src/operator-docs/combination/combineAll.ts
@@ -1,31 +1,31 @@
 import { OperatorDoc } from '../operator.model';
 
 export const combineAll: OperatorDoc = {
-  'name': 'combineAll',
-  'operatorType': 'combination',
-  'signature': 'public combineAll(project: function): Observable',
-  'parameters': [
+  name: 'combineAll',
+  operatorType: 'combination',
+  signature: 'public combineAll(project: function): Observable',
+  parameters: [
     {
-      'name': 'project',
-      'type': 'function',
-      'attribute': 'optional',
-      'description': `An optional function to map the most recent values from each inner Observable into a new result.
+      name: 'project',
+      type: 'function',
+      attribute: 'optional',
+      description: `An optional function to map the most recent values from each inner Observable into a new result.
       Takes each of the most recent values from each collected inner Observable as arguments, in order.`
     }
   ],
-  'marbleUrl': 'http://reactivex.io/rxjs/img/combineAll.png',
-  'shortDescription': {
-    'description': `
-      Flattens an Observable-of-Observables by applying <a href="/operators#combineLatest" class="markdown-code">combineLatest</a>
+  marbleUrl: 'http://reactivex.io/rxjs/img/combineAll.png',
+  shortDescription: {
+    description: `
+      Flattens an Observable-of-Observables by applying <a href="/operators/combineLatest" class="markdown-code">combineLatest</a>
       when the Observable-of-Observables completes.`,
-    'extras': []
+    extras: []
   },
-  'walkthrough': {
-    'description': `
+  walkthrough: {
+    description: `
       <p>
         Takes an Observable of Observables, and collects all Observables from it.
         Once the outer Observable completes, it subscribes to all collected
-        Observables and combines their values using the <a href="/operators#combineLatest" class="markdown-code">combineLatest</a>
+        Observables and combines their values using the <a href="/operators/combineLatest" class="markdown-code">combineLatest</a>
         strategy, such that:
       </p>
       <ul>
@@ -46,10 +46,11 @@ export const combineAll: OperatorDoc = {
       </ul>
     `
   },
-  'examples': [
+  examples: [
     {
-      'name': 'Map two click events to a finite interval Observable, then apply <span class="markdown-code">combineAll</span>',
-      'code': `
+      name:
+        'Map two click events to a finite interval Observable, then apply <span class="markdown-code">combineAll</span>',
+      code: `
         const clicks = Rx.Observable.fromEvent(document, 'click');
         const higherOrder = clicks.map(ev =>
           Rx.Observable.interval(Math.random()*2000).take(3)
@@ -58,9 +59,12 @@ export const combineAll: OperatorDoc = {
         const result = higherOrder.combineAll();
         result.subscribe(x => console.log(x));
       `,
-      'externalLink': { 'platform': 'JSBin', 'url': 'http://jsbin.com/peparawuvo/1/embed?js,console,output'}
+      externalLink: {
+        platform: 'JSBin',
+        url: 'http://jsbin.com/peparawuvo/1/embed?js,console,output'
+      }
     }
   ],
-  'relatedOperators': [ 'combineLatest', 'mergeAll' ],
-  'additionalResources': []
+  relatedOperators: ['combineLatest', 'mergeAll'],
+  additionalResources: []
 };
diff --git a/src/operator-docs/filtering/debounceTime.ts b/src/operator-docs/filtering/debounceTime.ts
index cabc3e4f..99a196ef 100644
--- a/src/operator-docs/filtering/debounceTime.ts
+++ b/src/operator-docs/filtering/debounceTime.ts
@@ -1,31 +1,31 @@
-import { OperatorDoc } from "../operator.model";
+import { OperatorDoc } from '../operator.model';
 
 export const debounceTime: OperatorDoc = {
-  name: "debounceTime",
-  operatorType: "filtering",
+  name: 'debounceTime',
+  operatorType: 'filtering',
   signature:
-    "public debounceTime<T>(dueTime: number, scheduler: IScheduler = async): Observable",
+    'public debounceTime<T>(dueTime: number, scheduler: IScheduler = async): Observable',
   parameters: [
     {
-      name: "dueTime",
-      type: "number",
-      attribute: "mandatory",
+      name: 'dueTime',
+      type: 'number',
+      attribute: 'mandatory',
       description: `The timeout duration in milliseconds
       (or the time unit determined internally by the optional scheduler) for the window of time required to
       wait for emission silence before emitting the most recent source value.`
     },
     {
-      name: "scheduler",
-      type: "IScheduler",
-      attribute: "optional",
+      name: 'scheduler',
+      type: 'IScheduler',
+      attribute: 'optional',
       description: `The IScheduler to use for managing the timers that handle the timeout for each value.`
     }
   ],
-  marbleUrl: "http://reactivex.io/rxjs/img/debounceTime.png",
+  marbleUrl: 'http://reactivex.io/rxjs/img/debounceTime.png',
   shortDescription: {
     description: `
     Emits a value from the source Observable only after a particular time span has passed without another source emission.
-    It's like <a class="markdown-code" href="href="/operators#delay">delay</a>
+    It's like <a class="markdown-code" href="/operators/delay">delay</a>
     , but passes only the most recent value from each burst of emissions.`,
     extras: []
   },
@@ -52,7 +52,7 @@ export const debounceTime: OperatorDoc = {
   examples: [
     {
       name:
-        "Emit the most recent value after a burst of value changes over a defined time",
+        'Emit the most recent value after a burst of value changes over a defined time',
       code: `
         const search = document.querySelector('#search');
         const output = document.querySelector('#output');
@@ -64,17 +64,17 @@ export const debounceTime: OperatorDoc = {
           .subscribe((search)=> output.textContent=search);
       `,
       externalLink: {
-        platform: "JSBin",
-        url: "http://jsbin.com/gapobakuwu/edit?js,output"
+        platform: 'JSBin',
+        url: 'http://jsbin.com/gapobakuwu/edit?js,output'
       }
     }
   ],
   relatedOperators: [
-    "auditTime",
-    "debounce",
-    "delay",
-    "sampleTime",
-    "throttleTime"
+    'auditTime',
+    'debounce',
+    'delay',
+    'sampleTime',
+    'throttleTime'
   ],
   additionalResources: []
 };

From 6e41260c7b54606e1afea50fb64131a3dd8cb7fa Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 15:34:22 +0100
Subject: [PATCH 03/26] fix(operators): Show active menu entry

---
 src/app/operators/operators.component.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/operators/operators.component.html b/src/app/operators/operators.component.html
index cc9f4f87..91046a0e 100644
--- a/src/app/operators/operators.component.html
+++ b/src/app/operators/operators.component.html
@@ -11,7 +11,8 @@
       <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
-        [routerLink]="['/operators', operator.name]">
+        [routerLink]="['/operators', operator.name]"
+        routerLinkActive="active">
         {{ operator.name }}
       </a>
     </mat-nav-list>

From 802953f695cf0e06725160f6d162a27058d2a51a Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 15:39:31 +0100
Subject: [PATCH 04/26] fix(operators): Redirect for not found operator

---
 .../components/operator/operator.component.ts    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index e1789743..79493f95 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -6,7 +6,7 @@ import {
   Inject,
   InjectionToken
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { OperatorDoc } from '../../../../operator-docs/operator.model';
 import 'rxjs/add/operator/pluck';
 
@@ -24,18 +24,26 @@ export class OperatorComponent implements OnInit {
   private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
 
   constructor(
+    private _router: Router,
     private _activatedRoute: ActivatedRoute,
     @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[]
   ) {}
 
   ngOnInit() {
     this._activatedRoute.params.pluck('operator').subscribe((name: string) => {
-      this.operator = this.operators.filter(
-        (operator: OperatorDoc) => operator.name === name
-      )[0];
+      this.operator =
+        this.operators.filter(
+          (operator: OperatorDoc) => operator.name === name
+        )[0] || this.notfound();
     });
   }
 
+  notfound() {
+    console.log('not found');
+    this._router.navigate(['/operators']);
+    return {};
+  }
+
   get operatorName() {
     return this.operator.name;
   }

From 8c9fef3886729dbaf114ae9afa942a8bed3b0d0f Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 16:24:20 +0100
Subject: [PATCH 05/26] feat(search): Add title and meta description to pages

---
 src/app/app.module.ts                         |  3 ++-
 src/app/companies/companies.component.ts      | 15 ++++++-----
 .../components/operator/operator.component.ts | 21 ++++++++++-----
 src/app/operators/operators.component.ts      |  5 +++-
 src/app/rxjs/rxjs.component.ts                |  6 ++---
 src/app/services/seo.service.spec.ts          | 18 +++++++++++++
 src/app/services/seo.service.ts               | 26 +++++++++++++++++++
 src/app/team/team.component.ts                |  6 ++---
 8 files changed, 79 insertions(+), 21 deletions(-)
 create mode 100644 src/app/services/seo.service.spec.ts
 create mode 100644 src/app/services/seo.service.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a1c48130..b167c370 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,3 +1,4 @@
+import { SeoService } from './services/seo.service';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
@@ -17,7 +18,7 @@ import { AppRoutingModule } from './app-routing.module';
     MatSidenavModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [SeoService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}
diff --git a/src/app/companies/companies.component.ts b/src/app/companies/companies.component.ts
index 0dbc9a29..081ce677 100644
--- a/src/app/companies/companies.component.ts
+++ b/src/app/companies/companies.component.ts
@@ -1,12 +1,15 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../services/seo.service';
 
 @Component({
-  selector: "app-companies",
-  templateUrl: "./companies.component.html",
-  styleUrls: ["./companies.component.scss"]
+  selector: 'app-companies',
+  templateUrl: './companies.component.html',
+  styleUrls: ['./companies.component.scss']
 })
 export class CompaniesComponent implements OnInit {
-  constructor() {}
+  constructor(private _seo: SeoService) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this._seo.setHeaders(['Companies'], this._seo.companiesDescription);
+  }
 }
diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 79493f95..34b04780 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -7,6 +7,7 @@ import {
   InjectionToken
 } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { SeoService } from '../../../services/seo.service';
 import { OperatorDoc } from '../../../../operator-docs/operator.model';
 import 'rxjs/add/operator/pluck';
 
@@ -26,7 +27,8 @@ export class OperatorComponent implements OnInit {
   constructor(
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
-    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[]
+    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[],
+    private _seo: SeoService
   ) {}
 
   ngOnInit() {
@@ -35,15 +37,15 @@ export class OperatorComponent implements OnInit {
         this.operators.filter(
           (operator: OperatorDoc) => operator.name === name
         )[0] || this.notfound();
+      this._seo.setHeaders(
+        [this.operator.name, this.operator.operatorType],
+        this.operator.shortDescription
+          ? this.operator.shortDescription.description
+          : ''
+      );
     });
   }
 
-  notfound() {
-    console.log('not found');
-    this._router.navigate(['/operators']);
-    return {};
-  }
-
   get operatorName() {
     return this.operator.name;
   }
@@ -104,4 +106,9 @@ export class OperatorComponent implements OnInit {
   get additionalResources() {
     return this.operator.additionalResources || [];
   }
+
+  private notfound() {
+    this._router.navigate(['/operators']);
+    return {};
+  }
 }
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index 5d1f5cc1..280f4a01 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -18,6 +18,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
 import { OperatorDoc } from '../../operator-docs/operator.model';
+import { SeoService } from '../services/seo.service';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
@@ -64,7 +65,8 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     private _breakpointObserver: BreakpointObserver,
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
-    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
+    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[],
+    private _seo: SeoService
   ) {}
 
   ngOnInit() {
@@ -73,6 +75,7 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     this._subscription = this._activatedRoute.fragment.subscribe(name =>
       this.scrollToOperator(name)
     );
+    this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 
   ngAfterViewInit() {
diff --git a/src/app/rxjs/rxjs.component.ts b/src/app/rxjs/rxjs.component.ts
index 0eba3544..be716a63 100644
--- a/src/app/rxjs/rxjs.component.ts
+++ b/src/app/rxjs/rxjs.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../services/seo.service';
 
 @Component({
   selector: 'app-rxjs',
@@ -6,10 +7,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./rxjs.component.scss']
 })
 export class RxjsComponent implements OnInit {
-
-  constructor() { }
+  constructor(private _seo: SeoService) {}
 
   ngOnInit() {
+    this._seo.setHeaders([], this._seo.homeDescription);
   }
-
 }
diff --git a/src/app/services/seo.service.spec.ts b/src/app/services/seo.service.spec.ts
new file mode 100644
index 00000000..4dfa501f
--- /dev/null
+++ b/src/app/services/seo.service.spec.ts
@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SeoService } from './seo.service';
+
+describe('SeoService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SeoService]
+    });
+  });
+
+  it(
+    'should be created',
+    inject([SeoService], (service: SeoService) => {
+      expect(service).toBeTruthy();
+    })
+  );
+});
diff --git a/src/app/services/seo.service.ts b/src/app/services/seo.service.ts
new file mode 100644
index 00000000..c676d3a0
--- /dev/null
+++ b/src/app/services/seo.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Title, Meta } from '@angular/platform-browser';
+
+@Injectable()
+export class SeoService {
+  // This part is happended at the end of head>title
+  private siteTitle = 'RxJS Documentation';
+
+  // head>meta>description for common pages
+  public homeDescription = 'The complete RxJS documentation...';
+  public operatorsDescription = 'All the RxJS operators...';
+  public companiesDescription = 'Companies that use RxJS...';
+  public teamDescription = 'People behind the RxJS Documentation project...';
+
+  constructor(private _title: Title, private _meta: Meta) {}
+
+  public setHeaders(titleParts: string[], description: string) {
+    this._title.setTitle([...titleParts, this.siteTitle].join(' \u2022 '));
+    if (description && description.length) {
+      this._meta.updateTag({
+        content: description,
+        name: 'description'
+      });
+    }
+  }
+}
diff --git a/src/app/team/team.component.ts b/src/app/team/team.component.ts
index 77b9fdfc..4cee8afc 100644
--- a/src/app/team/team.component.ts
+++ b/src/app/team/team.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../services/seo.service';
 
 @Component({
   selector: 'app-team',
@@ -6,10 +7,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./team.component.scss']
 })
 export class TeamComponent implements OnInit {
-
-  constructor() { }
+  constructor(private _seo: SeoService) {}
 
   ngOnInit() {
+    this._seo.setHeaders(['The Team'], this._seo.teamDescription);
   }
-
 }

From 2305d9dbd2b1fcc18bb05ecf449ff1592a02a439 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 19:12:31 +0100
Subject: [PATCH 06/26] fix(tests): Add SeoService provider for
 OperatorsComponent tests

---
 src/app/operators/specs/operators.spec.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/operators/specs/operators.spec.ts b/src/app/operators/specs/operators.spec.ts
index 9a060cca..84239e51 100644
--- a/src/app/operators/specs/operators.spec.ts
+++ b/src/app/operators/specs/operators.spec.ts
@@ -4,8 +4,13 @@ import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { LayoutModule, BreakpointObserver } from '@angular/cdk/layout';
 import { Observable } from 'rxjs/Observable';
-import { OperatorsComponent, OPERATORS_TOKEN, groupOperatorsByType } from '../operators.component';
+import {
+  OperatorsComponent,
+  OPERATORS_TOKEN,
+  groupOperatorsByType
+} from '../operators.component';
 import { OperatorDoc } from '../../../operator-docs';
+import { SeoService } from '../../services/seo.service';
 
 const mockActivatedRoute = {
   snapshot: {},
@@ -34,13 +39,14 @@ describe('Operators', () => {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        imports: [ RouterTestingModule, LayoutModule ],
-        declarations: [ OperatorsComponent ],
+        imports: [RouterTestingModule, LayoutModule],
+        declarations: [OperatorsComponent],
         providers: [
+          SeoService,
           { provide: OPERATORS_TOKEN, useValue: mockOperators },
           { provide: ActivatedRoute, useValue: mockActivatedRoute }
         ],
-        schemas: [ NO_ERRORS_SCHEMA ]
+        schemas: [NO_ERRORS_SCHEMA]
       });
     });
 

From e725a596c1cea8a9328a1b0f4d5ccd489da2fa40 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 18:53:14 +0100
Subject: [PATCH 07/26] fix(rxjs): Use lettable operators

---
 src/app/operators/components/operator/operator.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 34b04780..4cb0c5db 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -9,7 +9,7 @@ import {
 import { Router, ActivatedRoute } from '@angular/router';
 import { SeoService } from '../../../services/seo.service';
 import { OperatorDoc } from '../../../../operator-docs/operator.model';
-import 'rxjs/add/operator/pluck';
+import { pluck } from 'rxjs/operators';
 
 export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 

From 3774515762f92d79eb91bffecf5985c9db46ede9 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 18:56:05 +0100
Subject: [PATCH 08/26] fix(operators): Remove unused subscription

---
 src/app/operators/operators.component.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index 280f4a01..a70d2454 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -59,8 +59,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   public groupedOperators: OperatorDocMap;
   public categories: string[];
 
-  private _subscription: Subscription;
-
   constructor(
     private _breakpointObserver: BreakpointObserver,
     private _router: Router,
@@ -72,9 +70,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
-    this._subscription = this._activatedRoute.fragment.subscribe(name =>
-      this.scrollToOperator(name)
-    );
     this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 

From ac8a90e1316f0fe3008626e5690f8cddd8af686d Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 20:00:01 +0100
Subject: [PATCH 09/26] fix(operators): Debug lettable operators and remove
 dead code

---
 .../components/operator/operator.component.ts | 26 ++++++++++---------
 src/app/operators/operators.component.ts      | 23 +---------------
 src/app/operators/specs/operators.spec.ts     |  7 -----
 3 files changed, 15 insertions(+), 41 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 4cb0c5db..c104c31b 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -32,18 +32,20 @@ export class OperatorComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this._activatedRoute.params.pluck('operator').subscribe((name: string) => {
-      this.operator =
-        this.operators.filter(
-          (operator: OperatorDoc) => operator.name === name
-        )[0] || this.notfound();
-      this._seo.setHeaders(
-        [this.operator.name, this.operator.operatorType],
-        this.operator.shortDescription
-          ? this.operator.shortDescription.description
-          : ''
-      );
-    });
+    this._activatedRoute.params
+      .pipe(pluck('operator'))
+      .subscribe((name: string) => {
+        this.operator =
+          this.operators.filter(
+            (operator: OperatorDoc) => operator.name === name
+          )[0] || this.notfound();
+        this._seo.setHeaders(
+          [this.operator.name, this.operator.operatorType],
+          this.operator.shortDescription
+            ? this.operator.shortDescription.description
+            : ''
+        );
+      });
   }
 
   get operatorName() {
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index a70d2454..8301b5d3 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -3,7 +3,6 @@ import {
   Inject,
   InjectionToken,
   OnInit,
-  AfterViewInit,
   ChangeDetectionStrategy
 } from '@angular/core';
 import {
@@ -55,14 +54,12 @@ interface OperatorDocMap {
     ])
   ]
 })
-export class OperatorsComponent implements OnInit, AfterViewInit {
+export class OperatorsComponent implements OnInit {
   public groupedOperators: OperatorDocMap;
   public categories: string[];
 
   constructor(
     private _breakpointObserver: BreakpointObserver,
-    private _router: Router,
-    private _activatedRoute: ActivatedRoute,
     @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[],
     private _seo: SeoService
   ) {}
@@ -73,24 +70,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 
-  ngAfterViewInit() {
-    // scroll initial param when applicable
-    const name = this._activatedRoute.snapshot.fragment;
-
-    if (name) {
-      // slight delay for scroll to be accurate
-      setTimeout(() => this.scrollToOperator(name), 100);
-    }
-  }
-
-  scrollToOperator(name: string) {
-    const element = document.getElementById(name);
-
-    if (element) {
-      element.scrollIntoView();
-    }
-  }
-
   get extraSmallScreen() {
     return this._breakpointObserver.isMatched('(max-width: 601px)');
   }
diff --git a/src/app/operators/specs/operators.spec.ts b/src/app/operators/specs/operators.spec.ts
index 84239e51..e41ec0bb 100644
--- a/src/app/operators/specs/operators.spec.ts
+++ b/src/app/operators/specs/operators.spec.ts
@@ -64,13 +64,6 @@ describe('Operators', () => {
       expect(component.groupedOperators['utility'].length).toBe(2);
     });
 
-    it('should scroll to initial operator when fragment exists', () => {
-      spyOn(component, 'scrollToOperator').and.stub();
-      component.ngOnInit();
-
-      expect(component.scrollToOperator).toHaveBeenCalledWith('merge');
-    });
-
     it('should have a sidenav mode of over when on a small screen', () => {
       spyOn(breakpointService, 'isMatched').and.returnValue(true);
 

From 0cf78b327ef11e702d8cd00543b253099461dda2 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 21:12:51 +0100
Subject: [PATCH 10/26] fix(seo): Set SEO data in route config

---
 src/app/app.component.spec.ts                 |  4 +-
 src/app/app.component.ts                      | 61 +++++++++++++++----
 src/app/companies/companies-routing.module.ts |  8 ++-
 src/app/companies/companies.component.ts      | 11 +---
 src/app/operators/operators-routing.module.ts |  1 +
 src/app/operators/operators.component.ts      |  5 +-
 src/app/operators/specs/operators.spec.ts     |  2 -
 src/app/rxjs/rxjs-routing.module.ts           |  9 ++-
 src/app/rxjs/rxjs.component.ts                | 11 +---
 src/app/services/seo.service.ts               |  6 --
 src/app/team/team-routing.module.ts           | 11 +++-
 src/app/team/team.component.ts                | 11 +---
 12 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 88d1123e..25d34648 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -4,6 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { ToolbarModule } from './toolbar/toolbar.module';
 import { MatSidenavModule, MatListModule } from '@angular/material';
+import { SeoService } from './services/seo.service';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -19,7 +20,8 @@ describe('AppComponent', () => {
           MatSidenavModule,
           MatListModule
         ],
-        declarations: [AppComponent]
+        declarations: [AppComponent],
+        providers: [SeoService]
       }).compileComponents();
     })
   );
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 002b98cb..93fb5bd7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,12 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
+import {
+  Router,
+  ActivatedRoute,
+  NavigationEnd,
+  RouterEvent
+} from '@angular/router';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { SeoService } from './services/seo.service';
 
 interface Menu {
   title: string;
@@ -7,31 +15,58 @@ interface Menu {
 }
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   menus: Menu[] = [
     {
-      title: "Home",
-      link: "/",
+      title: 'Home',
+      link: '/',
       options: { exact: true }
     },
     {
-      title: "Operators",
-      link: "/operators",
+      title: 'Operators',
+      link: '/operators',
       options: { exact: false }
     },
     {
-      title: "Companies",
-      link: "/companies",
+      title: 'Companies',
+      link: '/companies',
       options: { exact: false }
     },
     {
-      title: "Team",
-      link: "/team",
+      title: 'Team',
+      link: '/team',
       options: { exact: false }
     }
   ];
+
+  constructor(
+    private _router: Router,
+    private _activatedRoute: ActivatedRoute,
+    private _seo: SeoService
+  ) {}
+
+  ngOnInit() {
+    this._router.events
+      .pipe(
+        filter((e: RouterEvent) => e instanceof NavigationEnd),
+        map(() => {
+          let route = this._activatedRoute;
+          while (route.firstChild) {
+            route = route.firstChild;
+          }
+          return route;
+        }),
+        filter(route => route.outlet === 'primary'),
+        mergeMap(route => route.data)
+      )
+      .subscribe(data => {
+        if (data !== {}) {
+          this._seo.setHeaders(data.title || [], data.description || '');
+        }
+      });
+  }
 }
diff --git a/src/app/companies/companies-routing.module.ts b/src/app/companies/companies-routing.module.ts
index 9531d7b2..c8f9cb72 100644
--- a/src/app/companies/companies-routing.module.ts
+++ b/src/app/companies/companies-routing.module.ts
@@ -3,7 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { CompaniesComponent } from './companies.component';
 
-const routes: Routes = [{ path: '', component: CompaniesComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: CompaniesComponent,
+    data: { title: ['Companies'], description: 'Companies that use RxJS...' }
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/companies/companies.component.ts b/src/app/companies/companies.component.ts
index 081ce677..cb729f61 100644
--- a/src/app/companies/companies.component.ts
+++ b/src/app/companies/companies.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { SeoService } from '../services/seo.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
   styleUrls: ['./companies.component.scss']
 })
-export class CompaniesComponent implements OnInit {
-  constructor(private _seo: SeoService) {}
-
-  ngOnInit() {
-    this._seo.setHeaders(['Companies'], this._seo.companiesDescription);
-  }
+export class CompaniesComponent {
+  constructor() {}
 }
diff --git a/src/app/operators/operators-routing.module.ts b/src/app/operators/operators-routing.module.ts
index ea38e80e..34cbaa05 100644
--- a/src/app/operators/operators-routing.module.ts
+++ b/src/app/operators/operators-routing.module.ts
@@ -8,6 +8,7 @@ const routes: Routes = [
   {
     path: '',
     component: OperatorsComponent,
+    data: { title: ['Operators'], description: 'All the RxJS operators...' },
     children: [{ path: ':operator', component: OperatorComponent }]
   }
 ];
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index 8301b5d3..8e3da660 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -17,7 +17,6 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
 import { OperatorDoc } from '../../operator-docs/operator.model';
-import { SeoService } from '../services/seo.service';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
@@ -60,14 +59,12 @@ export class OperatorsComponent implements OnInit {
 
   constructor(
     private _breakpointObserver: BreakpointObserver,
-    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[],
-    private _seo: SeoService
+    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
   ) {}
 
   ngOnInit() {
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
-    this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 
   get extraSmallScreen() {
diff --git a/src/app/operators/specs/operators.spec.ts b/src/app/operators/specs/operators.spec.ts
index e41ec0bb..fcf0629a 100644
--- a/src/app/operators/specs/operators.spec.ts
+++ b/src/app/operators/specs/operators.spec.ts
@@ -10,7 +10,6 @@ import {
   groupOperatorsByType
 } from '../operators.component';
 import { OperatorDoc } from '../../../operator-docs';
-import { SeoService } from '../../services/seo.service';
 
 const mockActivatedRoute = {
   snapshot: {},
@@ -42,7 +41,6 @@ describe('Operators', () => {
         imports: [RouterTestingModule, LayoutModule],
         declarations: [OperatorsComponent],
         providers: [
-          SeoService,
           { provide: OPERATORS_TOKEN, useValue: mockOperators },
           { provide: ActivatedRoute, useValue: mockActivatedRoute }
         ],
diff --git a/src/app/rxjs/rxjs-routing.module.ts b/src/app/rxjs/rxjs-routing.module.ts
index 3fdf4e87..d1851594 100644
--- a/src/app/rxjs/rxjs-routing.module.ts
+++ b/src/app/rxjs/rxjs-routing.module.ts
@@ -1,9 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-
 import { RxjsComponent } from './rxjs.component';
 
-const routes: Routes = [{ path: '', component: RxjsComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: RxjsComponent,
+    data: { title: [], description: 'The complete RxJS documentation...' }
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/rxjs/rxjs.component.ts b/src/app/rxjs/rxjs.component.ts
index be716a63..4036ae40 100644
--- a/src/app/rxjs/rxjs.component.ts
+++ b/src/app/rxjs/rxjs.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { SeoService } from '../services/seo.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-rxjs',
   templateUrl: './rxjs.component.html',
   styleUrls: ['./rxjs.component.scss']
 })
-export class RxjsComponent implements OnInit {
-  constructor(private _seo: SeoService) {}
-
-  ngOnInit() {
-    this._seo.setHeaders([], this._seo.homeDescription);
-  }
+export class RxjsComponent {
+  constructor() {}
 }
diff --git a/src/app/services/seo.service.ts b/src/app/services/seo.service.ts
index c676d3a0..005d0bc3 100644
--- a/src/app/services/seo.service.ts
+++ b/src/app/services/seo.service.ts
@@ -6,12 +6,6 @@ export class SeoService {
   // This part is happended at the end of head>title
   private siteTitle = 'RxJS Documentation';
 
-  // head>meta>description for common pages
-  public homeDescription = 'The complete RxJS documentation...';
-  public operatorsDescription = 'All the RxJS operators...';
-  public companiesDescription = 'Companies that use RxJS...';
-  public teamDescription = 'People behind the RxJS Documentation project...';
-
   constructor(private _title: Title, private _meta: Meta) {}
 
   public setHeaders(titleParts: string[], description: string) {
diff --git a/src/app/team/team-routing.module.ts b/src/app/team/team-routing.module.ts
index b55e24a8..627fb233 100644
--- a/src/app/team/team-routing.module.ts
+++ b/src/app/team/team-routing.module.ts
@@ -3,7 +3,16 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { TeamComponent } from './team.component';
 
-const routes: Routes = [{ path: '', component: TeamComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: TeamComponent,
+    data: {
+      title: ['The Team'],
+      description: 'People behind the RxJS Documentation project...'
+    }
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/team/team.component.ts b/src/app/team/team.component.ts
index 4cee8afc..e83fbc24 100644
--- a/src/app/team/team.component.ts
+++ b/src/app/team/team.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { SeoService } from '../services/seo.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-team',
   templateUrl: './team.component.html',
   styleUrls: ['./team.component.scss']
 })
-export class TeamComponent implements OnInit {
-  constructor(private _seo: SeoService) {}
-
-  ngOnInit() {
-    this._seo.setHeaders(['The Team'], this._seo.teamDescription);
-  }
+export class TeamComponent {
+  constructor() {}
 }

From 7842697bb2eac647945dc93613efe61a9e326000 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 21:38:19 +0100
Subject: [PATCH 11/26] fix(seo): Add a type for SEO data

---
 src/app/app.component.ts                            | 11 ++++-------
 .../components/operator/operator.component.ts       |  8 ++++----
 src/app/services/seo.service.ts                     | 13 +++++++++----
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 93fb5bd7..86515ea4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,7 +6,7 @@ import {
   RouterEvent
 } from '@angular/router';
 import { filter, map, mergeMap } from 'rxjs/operators';
-import { SeoService } from './services/seo.service';
+import { SeoService, SeoData } from './services/seo.service';
 
 interface Menu {
   title: string;
@@ -61,12 +61,9 @@ export class AppComponent implements OnInit {
           return route;
         }),
         filter(route => route.outlet === 'primary'),
-        mergeMap(route => route.data)
+        mergeMap(route => route.data),
+        filter((data: SeoData) => data.title !== undefined)
       )
-      .subscribe(data => {
-        if (data !== {}) {
-          this._seo.setHeaders(data.title || [], data.description || '');
-        }
-      });
+      .subscribe((data: SeoData) => this._seo.setHeaders(data));
   }
 }
diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index c104c31b..a08f8e1e 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -39,12 +39,12 @@ export class OperatorComponent implements OnInit {
           this.operators.filter(
             (operator: OperatorDoc) => operator.name === name
           )[0] || this.notfound();
-        this._seo.setHeaders(
-          [this.operator.name, this.operator.operatorType],
-          this.operator.shortDescription
+        this._seo.setHeaders({
+          title: [this.operator.name, this.operator.operatorType],
+          description: this.operator.shortDescription
             ? this.operator.shortDescription.description
             : ''
-        );
+        });
       });
   }
 
diff --git a/src/app/services/seo.service.ts b/src/app/services/seo.service.ts
index 005d0bc3..967ec262 100644
--- a/src/app/services/seo.service.ts
+++ b/src/app/services/seo.service.ts
@@ -1,6 +1,11 @@
 import { Injectable } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
 
+export interface SeoData {
+  title?: string[];
+  description?: string;
+}
+
 @Injectable()
 export class SeoService {
   // This part is happended at the end of head>title
@@ -8,11 +13,11 @@ export class SeoService {
 
   constructor(private _title: Title, private _meta: Meta) {}
 
-  public setHeaders(titleParts: string[], description: string) {
-    this._title.setTitle([...titleParts, this.siteTitle].join(' \u2022 '));
-    if (description && description.length) {
+  public setHeaders(data: SeoData) {
+    this._title.setTitle([...data.title, this.siteTitle].join(' \u2022 '));
+    if (data.description && data.description.length) {
       this._meta.updateTag({
-        content: description,
+        content: data.description,
         name: 'description'
       });
     }

From 4f49c3fcd704c6d6c412f9cdb96a8f6ccb7597dc Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Fri, 24 Nov 2017 07:20:54 +0100
Subject: [PATCH 12/26] fix(operator): Compute a map of operators

---
 .../components/operator/operator.component.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index a08f8e1e..9712a835 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -20,6 +20,7 @@ export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 })
 export class OperatorComponent implements OnInit {
   public operator: OperatorDoc;
+  public operatorsMap: { string?: OperatorDoc };
 
   private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
   private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
@@ -32,13 +33,23 @@ export class OperatorComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    this.operatorsMap = this.operators.reduce(
+      (acc: { string?: OperatorDoc }, value: OperatorDoc) => {
+        acc[value.name] = value;
+        return acc;
+      },
+      {}
+    );
+
     this._activatedRoute.params
       .pipe(pluck('operator'))
       .subscribe((name: string) => {
-        this.operator =
-          this.operators.filter(
-            (operator: OperatorDoc) => operator.name === name
-          )[0] || this.notfound();
+        if (name in this.operatorsMap) {
+          this.operator = this.operatorsMap[name];
+        } else {
+          this.notfound();
+          return;
+        }
         this._seo.setHeaders({
           title: [this.operator.name, this.operator.operatorType],
           description: this.operator.shortDescription

From 5a231bbb5e7990cf01f5cad8a1cb1bccdd8b43c0 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Fri, 24 Nov 2017 18:45:06 +0100
Subject: [PATCH 13/26] fix(operators): Use Map for operators map

---
 .../components/operator/operator.component.ts   | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 9712a835..b5c4b579 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -20,7 +20,7 @@ export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 })
 export class OperatorComponent implements OnInit {
   public operator: OperatorDoc;
-  public operatorsMap: { string?: OperatorDoc };
+  public operatorsMap = new Map<string, OperatorDoc>();
 
   private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
   private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
@@ -33,19 +33,14 @@ export class OperatorComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.operatorsMap = this.operators.reduce(
-      (acc: { string?: OperatorDoc }, value: OperatorDoc) => {
-        acc[value.name] = value;
-        return acc;
-      },
-      {}
-    );
-
+    this.operators.forEach((op: OperatorDoc) => {
+      this.operatorsMap.set(op.name, op);
+    });
     this._activatedRoute.params
       .pipe(pluck('operator'))
       .subscribe((name: string) => {
-        if (name in this.operatorsMap) {
-          this.operator = this.operatorsMap[name];
+        if (this.operatorsMap.has(name)) {
+          this.operator = this.operatorsMap.get(name);
         } else {
           this.notfound();
           return;

From c66aadf2b577c7388b83dec65f7f5e4a16c24767 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 10:24:43 +0100
Subject: [PATCH 14/26] refactor(operators): Separate operators in multiple
 pages

---
 .../components/operator/operator.component.ts | 44 +++++++++++-----
 src/app/operators/operators-routing.module.ts |  9 +++-
 src/app/operators/operators.component.html    |  7 +--
 src/app/operators/operators.component.ts      | 51 ++++++++++++-------
 src/app/operators/operators.module.ts         | 10 +++-
 5 files changed, 81 insertions(+), 40 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 453a59d8..e1789743 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -2,28 +2,46 @@ import {
   Component,
   Input,
   OnInit,
-  ChangeDetectionStrategy
-} from "@angular/core";
-import { OperatorDoc } from "../../../../operator-docs/operator.model";
+  ChangeDetectionStrategy,
+  Inject,
+  InjectionToken
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { OperatorDoc } from '../../../../operator-docs/operator.model';
+import 'rxjs/add/operator/pluck';
+
+export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 
 @Component({
-  selector: "app-operator",
-  templateUrl: "./operator.component.html",
-  styleUrls: ["./operator.component.scss"],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  selector: 'app-operator',
+  templateUrl: './operator.component.html',
+  styleUrls: ['./operator.component.scss']
 })
-export class OperatorComponent {
-  @Input() operator: OperatorDoc;
-
-  private readonly baseSourceUrl = "https://github.com/ReactiveX/rxjs/blob/master/src/operators/";
-  private readonly baseSpecUrl = "http://reactivex.io/rxjs/test-file/spec-js/operators";
+export class OperatorComponent implements OnInit {
+  public operator: OperatorDoc;
+
+  private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
+  private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
+
+  constructor(
+    private _activatedRoute: ActivatedRoute,
+    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[]
+  ) {}
+
+  ngOnInit() {
+    this._activatedRoute.params.pluck('operator').subscribe((name: string) => {
+      this.operator = this.operators.filter(
+        (operator: OperatorDoc) => operator.name === name
+      )[0];
+    });
+  }
 
   get operatorName() {
     return this.operator.name;
   }
 
   get signature() {
-    return this.operator.signature || "Signature Placeholder";
+    return this.operator.signature || 'Signature Placeholder';
   }
 
   get marbleUrl() {
diff --git a/src/app/operators/operators-routing.module.ts b/src/app/operators/operators-routing.module.ts
index 83354d0e..ea38e80e 100644
--- a/src/app/operators/operators-routing.module.ts
+++ b/src/app/operators/operators-routing.module.ts
@@ -2,8 +2,15 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { OperatorsComponent } from './operators.component';
+import { OperatorComponent } from './components/operator/operator.component';
 
-const routes: Routes = [{ path: '', component: OperatorsComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: OperatorsComponent,
+    children: [{ path: ':operator', component: OperatorComponent }]
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/operators/operators.component.html b/src/app/operators/operators.component.html
index ef256efa..cc9f4f87 100644
--- a/src/app/operators/operators.component.html
+++ b/src/app/operators/operators.component.html
@@ -11,15 +11,12 @@
       <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
-        [href]="'/operators#' + operator.name">
+        [routerLink]="['/operators', operator.name]">
         {{ operator.name }}
       </a>
     </mat-nav-list>
   </mat-sidenav>
-  <app-operator
-    *ngFor="let operator of operators"
-    [operator]="operator">
-  </app-operator>
+  <router-outlet></router-outlet>
 </mat-sidenav-container>
 <button
   *ngIf="smallScreen"
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index 147ab136..5d1f5cc1 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -1,5 +1,18 @@
-import { Component, Inject, InjectionToken, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
-import { trigger, state, style, animate, transition } from '@angular/animations';
+import {
+  Component,
+  Inject,
+  InjectionToken,
+  OnInit,
+  AfterViewInit,
+  ChangeDetectionStrategy
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
 import { Router, ActivatedRoute } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
@@ -21,7 +34,7 @@ interface OperatorDocMap {
   styleUrls: ['./operators.component.scss'],
   animations: [
     trigger('growInOut', [
-      state('in', style({opacity: 1})),
+      state('in', style({ opacity: 1 })),
       transition('void => *', [
         style({
           opacity: 0,
@@ -30,10 +43,13 @@ interface OperatorDocMap {
         animate(`150ms ease-in`)
       ]),
       transition('* => void', [
-        animate(`150ms ease-out`, style({
-          opacity: 0,
-          transform: 'scale3d(.3, .3, .3)'
-        }))
+        animate(
+          `150ms ease-out`,
+          style({
+            opacity: 0,
+            transform: 'scale3d(.3, .3, .3)'
+          })
+        )
       ])
     ])
   ]
@@ -49,14 +65,14 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
     @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
-  ) { }
+  ) {}
 
   ngOnInit() {
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
-    this._subscription = this._activatedRoute
-      .fragment
-      .subscribe(name => this.scrollToOperator(name));
+    this._subscription = this._activatedRoute.fragment.subscribe(name =>
+      this.scrollToOperator(name)
+    );
   }
 
   ngAfterViewInit() {
@@ -69,10 +85,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     }
   }
 
-  updateUrl(name: string) {
-    this._router.navigate([ '/operators' ], { fragment: name });
-  }
-
   scrollToOperator(name: string) {
     const element = document.getElementById(name);
 
@@ -90,20 +102,21 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   }
 
   get operatorMenuGap() {
-    return this.extraSmallScreen ? OPERATOR_MENU_GAP_SMALL : OPERATOR_MENU_GAP_LARGE;
+    return this.extraSmallScreen
+      ? OPERATOR_MENU_GAP_SMALL
+      : OPERATOR_MENU_GAP_LARGE;
   }
 
   get sidenavMode() {
     return this.smallScreen ? 'over' : 'side';
   }
-
 }
 
 export function groupOperatorsByType(operators: OperatorDoc[]): OperatorDocMap {
   return operators.reduce((acc: OperatorDocMap, curr: OperatorDoc) => {
     if (acc[curr.operatorType]) {
-      return { ...acc, [ curr.operatorType ] : [ ...acc[ curr.operatorType ], curr ] };
+      return { ...acc, [curr.operatorType]: [...acc[curr.operatorType], curr] };
     }
-    return { ...acc, [ curr.operatorType ]: [ curr ] };
+    return { ...acc, [curr.operatorType]: [curr] };
   }, {});
 }
diff --git a/src/app/operators/operators.module.ts b/src/app/operators/operators.module.ts
index 86d8c4b9..9522a00e 100644
--- a/src/app/operators/operators.module.ts
+++ b/src/app/operators/operators.module.ts
@@ -9,7 +9,10 @@ import { ClipboardModule } from 'ngx-clipboard';
 import { ALL_OPERATORS, OperatorDoc } from '../../operator-docs';
 import { OperatorsRoutingModule } from './operators-routing.module';
 import { OperatorsComponent, OPERATORS_TOKEN } from './operators.component';
-import { OperatorComponent } from './components/operator/operator.component';
+import {
+  OperatorComponent,
+  OPERATOR_TOKEN
+} from './components/operator/operator.component';
 import { OperatorHeaderComponent } from './components/operator-header/operator-header.component';
 import { OperatorParametersComponent } from './components/operator-parameters/operator-parameters.component';
 import { OperatorExamplesComponent } from './components/operator-examples/operator-examples.component';
@@ -43,7 +46,10 @@ import { SharedModule } from '../shared.module';
     ClipboardModule,
     LayoutModule
   ],
-  providers: [{ provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS }],
+  providers: [
+    { provide: OPERATORS_TOKEN, useValue: ALL_OPERATORS },
+    { provide: OPERATOR_TOKEN, useValue: ALL_OPERATORS }
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class OperatorsModule {}

From e01b233c16d3374fd98cfe80c491eb5d5de8fad5 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 15:29:33 +0100
Subject: [PATCH 15/26] refactor(operators): Adapt links for operators in
 different pages

---
 .../related-operators.component.html          |  2 +-
 src/operator-docs/combination/combineAll.ts   | 48 ++++++++++---------
 src/operator-docs/filtering/debounceTime.ts   | 40 ++++++++--------
 3 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/app/operators/components/related-operators/related-operators.component.html b/src/app/operators/components/related-operators/related-operators.component.html
index 2da9fa6f..a0b853e5 100644
--- a/src/app/operators/components/related-operators/related-operators.component.html
+++ b/src/app/operators/components/related-operators/related-operators.component.html
@@ -1,6 +1,6 @@
 <h2 class="related-operators"> Related Operators </h2>
 <ul class="section-list">
   <li *ngFor="let related of relatedOperators">
-    <a [href]="'/operators#' + related"> {{ related }} </a>
+    <a [routerLink]="['/operators', related]"> {{ related }} </a>
   </li>
 </ul>
diff --git a/src/operator-docs/combination/combineAll.ts b/src/operator-docs/combination/combineAll.ts
index 98ba45d6..7edd6e91 100644
--- a/src/operator-docs/combination/combineAll.ts
+++ b/src/operator-docs/combination/combineAll.ts
@@ -1,31 +1,31 @@
 import { OperatorDoc } from '../operator.model';
 
 export const combineAll: OperatorDoc = {
-  'name': 'combineAll',
-  'operatorType': 'combination',
-  'signature': 'public combineAll(project: function): Observable',
-  'parameters': [
+  name: 'combineAll',
+  operatorType: 'combination',
+  signature: 'public combineAll(project: function): Observable',
+  parameters: [
     {
-      'name': 'project',
-      'type': 'function',
-      'attribute': 'optional',
-      'description': `An optional function to map the most recent values from each inner Observable into a new result.
+      name: 'project',
+      type: 'function',
+      attribute: 'optional',
+      description: `An optional function to map the most recent values from each inner Observable into a new result.
       Takes each of the most recent values from each collected inner Observable as arguments, in order.`
     }
   ],
-  'marbleUrl': 'http://reactivex.io/rxjs/img/combineAll.png',
-  'shortDescription': {
-    'description': `
-      Flattens an Observable-of-Observables by applying <a href="/operators#combineLatest" class="markdown-code">combineLatest</a>
+  marbleUrl: 'http://reactivex.io/rxjs/img/combineAll.png',
+  shortDescription: {
+    description: `
+      Flattens an Observable-of-Observables by applying <a href="/operators/combineLatest" class="markdown-code">combineLatest</a>
       when the Observable-of-Observables completes.`,
-    'extras': []
+    extras: []
   },
-  'walkthrough': {
-    'description': `
+  walkthrough: {
+    description: `
       <p>
         Takes an Observable of Observables, and collects all Observables from it.
         Once the outer Observable completes, it subscribes to all collected
-        Observables and combines their values using the <a href="/operators#combineLatest" class="markdown-code">combineLatest</a>
+        Observables and combines their values using the <a href="/operators/combineLatest" class="markdown-code">combineLatest</a>
         strategy, such that:
       </p>
       <ul>
@@ -46,10 +46,11 @@ export const combineAll: OperatorDoc = {
       </ul>
     `
   },
-  'examples': [
+  examples: [
     {
-      'name': 'Map two click events to a finite interval Observable, then apply <span class="markdown-code">combineAll</span>',
-      'code': `
+      name:
+        'Map two click events to a finite interval Observable, then apply <span class="markdown-code">combineAll</span>',
+      code: `
         const clicks = Rx.Observable.fromEvent(document, 'click');
         const higherOrder = clicks.map(ev =>
           Rx.Observable.interval(Math.random()*2000).take(3)
@@ -58,9 +59,12 @@ export const combineAll: OperatorDoc = {
         const result = higherOrder.combineAll();
         result.subscribe(x => console.log(x));
       `,
-      'externalLink': { 'platform': 'JSBin', 'url': 'http://jsbin.com/peparawuvo/1/embed?js,console,output'}
+      externalLink: {
+        platform: 'JSBin',
+        url: 'http://jsbin.com/peparawuvo/1/embed?js,console,output'
+      }
     }
   ],
-  'relatedOperators': [ 'combineLatest', 'mergeAll' ],
-  'additionalResources': []
+  relatedOperators: ['combineLatest', 'mergeAll'],
+  additionalResources: []
 };
diff --git a/src/operator-docs/filtering/debounceTime.ts b/src/operator-docs/filtering/debounceTime.ts
index cabc3e4f..99a196ef 100644
--- a/src/operator-docs/filtering/debounceTime.ts
+++ b/src/operator-docs/filtering/debounceTime.ts
@@ -1,31 +1,31 @@
-import { OperatorDoc } from "../operator.model";
+import { OperatorDoc } from '../operator.model';
 
 export const debounceTime: OperatorDoc = {
-  name: "debounceTime",
-  operatorType: "filtering",
+  name: 'debounceTime',
+  operatorType: 'filtering',
   signature:
-    "public debounceTime<T>(dueTime: number, scheduler: IScheduler = async): Observable",
+    'public debounceTime<T>(dueTime: number, scheduler: IScheduler = async): Observable',
   parameters: [
     {
-      name: "dueTime",
-      type: "number",
-      attribute: "mandatory",
+      name: 'dueTime',
+      type: 'number',
+      attribute: 'mandatory',
       description: `The timeout duration in milliseconds
       (or the time unit determined internally by the optional scheduler) for the window of time required to
       wait for emission silence before emitting the most recent source value.`
     },
     {
-      name: "scheduler",
-      type: "IScheduler",
-      attribute: "optional",
+      name: 'scheduler',
+      type: 'IScheduler',
+      attribute: 'optional',
       description: `The IScheduler to use for managing the timers that handle the timeout for each value.`
     }
   ],
-  marbleUrl: "http://reactivex.io/rxjs/img/debounceTime.png",
+  marbleUrl: 'http://reactivex.io/rxjs/img/debounceTime.png',
   shortDescription: {
     description: `
     Emits a value from the source Observable only after a particular time span has passed without another source emission.
-    It's like <a class="markdown-code" href="href="/operators#delay">delay</a>
+    It's like <a class="markdown-code" href="/operators/delay">delay</a>
     , but passes only the most recent value from each burst of emissions.`,
     extras: []
   },
@@ -52,7 +52,7 @@ export const debounceTime: OperatorDoc = {
   examples: [
     {
       name:
-        "Emit the most recent value after a burst of value changes over a defined time",
+        'Emit the most recent value after a burst of value changes over a defined time',
       code: `
         const search = document.querySelector('#search');
         const output = document.querySelector('#output');
@@ -64,17 +64,17 @@ export const debounceTime: OperatorDoc = {
           .subscribe((search)=> output.textContent=search);
       `,
       externalLink: {
-        platform: "JSBin",
-        url: "http://jsbin.com/gapobakuwu/edit?js,output"
+        platform: 'JSBin',
+        url: 'http://jsbin.com/gapobakuwu/edit?js,output'
       }
     }
   ],
   relatedOperators: [
-    "auditTime",
-    "debounce",
-    "delay",
-    "sampleTime",
-    "throttleTime"
+    'auditTime',
+    'debounce',
+    'delay',
+    'sampleTime',
+    'throttleTime'
   ],
   additionalResources: []
 };

From b4c3d7c226e7e997fece2cbecadcd734269160db Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 15:34:22 +0100
Subject: [PATCH 16/26] fix(operators): Show active menu entry

---
 src/app/operators/operators.component.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/operators/operators.component.html b/src/app/operators/operators.component.html
index cc9f4f87..91046a0e 100644
--- a/src/app/operators/operators.component.html
+++ b/src/app/operators/operators.component.html
@@ -11,7 +11,8 @@
       <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
-        [routerLink]="['/operators', operator.name]">
+        [routerLink]="['/operators', operator.name]"
+        routerLinkActive="active">
         {{ operator.name }}
       </a>
     </mat-nav-list>

From 23930c8b3a3ef061742b41acf5fd13f077fcaa6a Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 15:39:31 +0100
Subject: [PATCH 17/26] fix(operators): Redirect for not found operator

---
 .../components/operator/operator.component.ts    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index e1789743..79493f95 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -6,7 +6,7 @@ import {
   Inject,
   InjectionToken
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { OperatorDoc } from '../../../../operator-docs/operator.model';
 import 'rxjs/add/operator/pluck';
 
@@ -24,18 +24,26 @@ export class OperatorComponent implements OnInit {
   private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
 
   constructor(
+    private _router: Router,
     private _activatedRoute: ActivatedRoute,
     @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[]
   ) {}
 
   ngOnInit() {
     this._activatedRoute.params.pluck('operator').subscribe((name: string) => {
-      this.operator = this.operators.filter(
-        (operator: OperatorDoc) => operator.name === name
-      )[0];
+      this.operator =
+        this.operators.filter(
+          (operator: OperatorDoc) => operator.name === name
+        )[0] || this.notfound();
     });
   }
 
+  notfound() {
+    console.log('not found');
+    this._router.navigate(['/operators']);
+    return {};
+  }
+
   get operatorName() {
     return this.operator.name;
   }

From e9704386ce8f8b13cda56492d06deb79a2653e23 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 16:24:20 +0100
Subject: [PATCH 18/26] feat(search): Add title and meta description to pages

---
 src/app/app.module.ts                         |  3 ++-
 src/app/companies/companies.component.ts      | 15 ++++++-----
 .../components/operator/operator.component.ts | 21 ++++++++++-----
 src/app/operators/operators.component.ts      |  5 +++-
 src/app/rxjs/rxjs.component.ts                |  6 ++---
 src/app/services/seo.service.spec.ts          | 18 +++++++++++++
 src/app/services/seo.service.ts               | 26 +++++++++++++++++++
 src/app/team/team.component.ts                |  6 ++---
 8 files changed, 79 insertions(+), 21 deletions(-)
 create mode 100644 src/app/services/seo.service.spec.ts
 create mode 100644 src/app/services/seo.service.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a1c48130..b167c370 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,3 +1,4 @@
+import { SeoService } from './services/seo.service';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
@@ -17,7 +18,7 @@ import { AppRoutingModule } from './app-routing.module';
     MatSidenavModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [SeoService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}
diff --git a/src/app/companies/companies.component.ts b/src/app/companies/companies.component.ts
index 0dbc9a29..081ce677 100644
--- a/src/app/companies/companies.component.ts
+++ b/src/app/companies/companies.component.ts
@@ -1,12 +1,15 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../services/seo.service';
 
 @Component({
-  selector: "app-companies",
-  templateUrl: "./companies.component.html",
-  styleUrls: ["./companies.component.scss"]
+  selector: 'app-companies',
+  templateUrl: './companies.component.html',
+  styleUrls: ['./companies.component.scss']
 })
 export class CompaniesComponent implements OnInit {
-  constructor() {}
+  constructor(private _seo: SeoService) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this._seo.setHeaders(['Companies'], this._seo.companiesDescription);
+  }
 }
diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 79493f95..34b04780 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -7,6 +7,7 @@ import {
   InjectionToken
 } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { SeoService } from '../../../services/seo.service';
 import { OperatorDoc } from '../../../../operator-docs/operator.model';
 import 'rxjs/add/operator/pluck';
 
@@ -26,7 +27,8 @@ export class OperatorComponent implements OnInit {
   constructor(
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
-    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[]
+    @Inject(OPERATOR_TOKEN) public operators: OperatorDoc[],
+    private _seo: SeoService
   ) {}
 
   ngOnInit() {
@@ -35,15 +37,15 @@ export class OperatorComponent implements OnInit {
         this.operators.filter(
           (operator: OperatorDoc) => operator.name === name
         )[0] || this.notfound();
+      this._seo.setHeaders(
+        [this.operator.name, this.operator.operatorType],
+        this.operator.shortDescription
+          ? this.operator.shortDescription.description
+          : ''
+      );
     });
   }
 
-  notfound() {
-    console.log('not found');
-    this._router.navigate(['/operators']);
-    return {};
-  }
-
   get operatorName() {
     return this.operator.name;
   }
@@ -104,4 +106,9 @@ export class OperatorComponent implements OnInit {
   get additionalResources() {
     return this.operator.additionalResources || [];
   }
+
+  private notfound() {
+    this._router.navigate(['/operators']);
+    return {};
+  }
 }
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index 5d1f5cc1..280f4a01 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -18,6 +18,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
 import { OperatorDoc } from '../../operator-docs/operator.model';
+import { SeoService } from '../services/seo.service';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
@@ -64,7 +65,8 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     private _breakpointObserver: BreakpointObserver,
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
-    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
+    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[],
+    private _seo: SeoService
   ) {}
 
   ngOnInit() {
@@ -73,6 +75,7 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     this._subscription = this._activatedRoute.fragment.subscribe(name =>
       this.scrollToOperator(name)
     );
+    this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 
   ngAfterViewInit() {
diff --git a/src/app/rxjs/rxjs.component.ts b/src/app/rxjs/rxjs.component.ts
index 0eba3544..be716a63 100644
--- a/src/app/rxjs/rxjs.component.ts
+++ b/src/app/rxjs/rxjs.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../services/seo.service';
 
 @Component({
   selector: 'app-rxjs',
@@ -6,10 +7,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./rxjs.component.scss']
 })
 export class RxjsComponent implements OnInit {
-
-  constructor() { }
+  constructor(private _seo: SeoService) {}
 
   ngOnInit() {
+    this._seo.setHeaders([], this._seo.homeDescription);
   }
-
 }
diff --git a/src/app/services/seo.service.spec.ts b/src/app/services/seo.service.spec.ts
new file mode 100644
index 00000000..4dfa501f
--- /dev/null
+++ b/src/app/services/seo.service.spec.ts
@@ -0,0 +1,18 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SeoService } from './seo.service';
+
+describe('SeoService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SeoService]
+    });
+  });
+
+  it(
+    'should be created',
+    inject([SeoService], (service: SeoService) => {
+      expect(service).toBeTruthy();
+    })
+  );
+});
diff --git a/src/app/services/seo.service.ts b/src/app/services/seo.service.ts
new file mode 100644
index 00000000..c676d3a0
--- /dev/null
+++ b/src/app/services/seo.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Title, Meta } from '@angular/platform-browser';
+
+@Injectable()
+export class SeoService {
+  // This part is happended at the end of head>title
+  private siteTitle = 'RxJS Documentation';
+
+  // head>meta>description for common pages
+  public homeDescription = 'The complete RxJS documentation...';
+  public operatorsDescription = 'All the RxJS operators...';
+  public companiesDescription = 'Companies that use RxJS...';
+  public teamDescription = 'People behind the RxJS Documentation project...';
+
+  constructor(private _title: Title, private _meta: Meta) {}
+
+  public setHeaders(titleParts: string[], description: string) {
+    this._title.setTitle([...titleParts, this.siteTitle].join(' \u2022 '));
+    if (description && description.length) {
+      this._meta.updateTag({
+        content: description,
+        name: 'description'
+      });
+    }
+  }
+}
diff --git a/src/app/team/team.component.ts b/src/app/team/team.component.ts
index 77b9fdfc..4cee8afc 100644
--- a/src/app/team/team.component.ts
+++ b/src/app/team/team.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../services/seo.service';
 
 @Component({
   selector: 'app-team',
@@ -6,10 +7,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./team.component.scss']
 })
 export class TeamComponent implements OnInit {
-
-  constructor() { }
+  constructor(private _seo: SeoService) {}
 
   ngOnInit() {
+    this._seo.setHeaders(['The Team'], this._seo.teamDescription);
   }
-
 }

From f25e238c6a0bfa63d474103a83f38e7ce40930c9 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Sun, 19 Nov 2017 19:12:31 +0100
Subject: [PATCH 19/26] fix(tests): Add SeoService provider for
 OperatorsComponent tests

---
 src/app/operators/specs/operators.spec.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/operators/specs/operators.spec.ts b/src/app/operators/specs/operators.spec.ts
index 9a060cca..84239e51 100644
--- a/src/app/operators/specs/operators.spec.ts
+++ b/src/app/operators/specs/operators.spec.ts
@@ -4,8 +4,13 @@ import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { LayoutModule, BreakpointObserver } from '@angular/cdk/layout';
 import { Observable } from 'rxjs/Observable';
-import { OperatorsComponent, OPERATORS_TOKEN, groupOperatorsByType } from '../operators.component';
+import {
+  OperatorsComponent,
+  OPERATORS_TOKEN,
+  groupOperatorsByType
+} from '../operators.component';
 import { OperatorDoc } from '../../../operator-docs';
+import { SeoService } from '../../services/seo.service';
 
 const mockActivatedRoute = {
   snapshot: {},
@@ -34,13 +39,14 @@ describe('Operators', () => {
 
     beforeEach(() => {
       TestBed.configureTestingModule({
-        imports: [ RouterTestingModule, LayoutModule ],
-        declarations: [ OperatorsComponent ],
+        imports: [RouterTestingModule, LayoutModule],
+        declarations: [OperatorsComponent],
         providers: [
+          SeoService,
           { provide: OPERATORS_TOKEN, useValue: mockOperators },
           { provide: ActivatedRoute, useValue: mockActivatedRoute }
         ],
-        schemas: [ NO_ERRORS_SCHEMA ]
+        schemas: [NO_ERRORS_SCHEMA]
       });
     });
 

From c64a5ccdadad6ad0e072787c42179f4b866ee1bf Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 18:53:14 +0100
Subject: [PATCH 20/26] fix(rxjs): Use lettable operators

---
 src/app/operators/components/operator/operator.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 34b04780..4cb0c5db 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -9,7 +9,7 @@ import {
 import { Router, ActivatedRoute } from '@angular/router';
 import { SeoService } from '../../../services/seo.service';
 import { OperatorDoc } from '../../../../operator-docs/operator.model';
-import 'rxjs/add/operator/pluck';
+import { pluck } from 'rxjs/operators';
 
 export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 

From f7d2dc39c90fe932eb6bce83c6bce4001867e534 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 18:56:05 +0100
Subject: [PATCH 21/26] fix(operators): Remove unused subscription

---
 src/app/operators/operators.component.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index 280f4a01..a70d2454 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -59,8 +59,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   public groupedOperators: OperatorDocMap;
   public categories: string[];
 
-  private _subscription: Subscription;
-
   constructor(
     private _breakpointObserver: BreakpointObserver,
     private _router: Router,
@@ -72,9 +70,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
-    this._subscription = this._activatedRoute.fragment.subscribe(name =>
-      this.scrollToOperator(name)
-    );
     this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 

From 267457e4cea24b84ae1b09a1a2345db4418b3c73 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 20:00:01 +0100
Subject: [PATCH 22/26] fix(operators): Debug lettable operators and remove
 dead code

---
 .../components/operator/operator.component.ts | 26 ++++++++++---------
 src/app/operators/operators.component.ts      | 23 +---------------
 src/app/operators/specs/operators.spec.ts     |  7 -----
 3 files changed, 15 insertions(+), 41 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 4cb0c5db..c104c31b 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -32,18 +32,20 @@ export class OperatorComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this._activatedRoute.params.pluck('operator').subscribe((name: string) => {
-      this.operator =
-        this.operators.filter(
-          (operator: OperatorDoc) => operator.name === name
-        )[0] || this.notfound();
-      this._seo.setHeaders(
-        [this.operator.name, this.operator.operatorType],
-        this.operator.shortDescription
-          ? this.operator.shortDescription.description
-          : ''
-      );
-    });
+    this._activatedRoute.params
+      .pipe(pluck('operator'))
+      .subscribe((name: string) => {
+        this.operator =
+          this.operators.filter(
+            (operator: OperatorDoc) => operator.name === name
+          )[0] || this.notfound();
+        this._seo.setHeaders(
+          [this.operator.name, this.operator.operatorType],
+          this.operator.shortDescription
+            ? this.operator.shortDescription.description
+            : ''
+        );
+      });
   }
 
   get operatorName() {
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index a70d2454..8301b5d3 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -3,7 +3,6 @@ import {
   Inject,
   InjectionToken,
   OnInit,
-  AfterViewInit,
   ChangeDetectionStrategy
 } from '@angular/core';
 import {
@@ -55,14 +54,12 @@ interface OperatorDocMap {
     ])
   ]
 })
-export class OperatorsComponent implements OnInit, AfterViewInit {
+export class OperatorsComponent implements OnInit {
   public groupedOperators: OperatorDocMap;
   public categories: string[];
 
   constructor(
     private _breakpointObserver: BreakpointObserver,
-    private _router: Router,
-    private _activatedRoute: ActivatedRoute,
     @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[],
     private _seo: SeoService
   ) {}
@@ -73,24 +70,6 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 
-  ngAfterViewInit() {
-    // scroll initial param when applicable
-    const name = this._activatedRoute.snapshot.fragment;
-
-    if (name) {
-      // slight delay for scroll to be accurate
-      setTimeout(() => this.scrollToOperator(name), 100);
-    }
-  }
-
-  scrollToOperator(name: string) {
-    const element = document.getElementById(name);
-
-    if (element) {
-      element.scrollIntoView();
-    }
-  }
-
   get extraSmallScreen() {
     return this._breakpointObserver.isMatched('(max-width: 601px)');
   }
diff --git a/src/app/operators/specs/operators.spec.ts b/src/app/operators/specs/operators.spec.ts
index 84239e51..e41ec0bb 100644
--- a/src/app/operators/specs/operators.spec.ts
+++ b/src/app/operators/specs/operators.spec.ts
@@ -64,13 +64,6 @@ describe('Operators', () => {
       expect(component.groupedOperators['utility'].length).toBe(2);
     });
 
-    it('should scroll to initial operator when fragment exists', () => {
-      spyOn(component, 'scrollToOperator').and.stub();
-      component.ngOnInit();
-
-      expect(component.scrollToOperator).toHaveBeenCalledWith('merge');
-    });
-
     it('should have a sidenav mode of over when on a small screen', () => {
       spyOn(breakpointService, 'isMatched').and.returnValue(true);
 

From 4130dcdaeb39a06685dcd552c18c20b5c1e24b51 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 21:12:51 +0100
Subject: [PATCH 23/26] fix(seo): Set SEO data in route config

---
 src/app/app.component.spec.ts                 |  4 +-
 src/app/app.component.ts                      | 61 +++++++++++++++----
 src/app/companies/companies-routing.module.ts |  8 ++-
 src/app/companies/companies.component.ts      | 11 +---
 src/app/operators/operators-routing.module.ts |  1 +
 src/app/operators/operators.component.ts      |  5 +-
 src/app/operators/specs/operators.spec.ts     |  2 -
 src/app/rxjs/rxjs-routing.module.ts           |  9 ++-
 src/app/rxjs/rxjs.component.ts                | 11 +---
 src/app/services/seo.service.ts               |  6 --
 src/app/team/team-routing.module.ts           | 11 +++-
 src/app/team/team.component.ts                | 11 +---
 12 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 88d1123e..25d34648 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -4,6 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { ToolbarModule } from './toolbar/toolbar.module';
 import { MatSidenavModule, MatListModule } from '@angular/material';
+import { SeoService } from './services/seo.service';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -19,7 +20,8 @@ describe('AppComponent', () => {
           MatSidenavModule,
           MatListModule
         ],
-        declarations: [AppComponent]
+        declarations: [AppComponent],
+        providers: [SeoService]
       }).compileComponents();
     })
   );
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 002b98cb..93fb5bd7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,12 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
+import {
+  Router,
+  ActivatedRoute,
+  NavigationEnd,
+  RouterEvent
+} from '@angular/router';
+import { filter, map, mergeMap } from 'rxjs/operators';
+import { SeoService } from './services/seo.service';
 
 interface Menu {
   title: string;
@@ -7,31 +15,58 @@ interface Menu {
 }
 
 @Component({
-  selector: "app-root",
-  templateUrl: "./app.component.html",
-  styleUrls: ["./app.component.scss"]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   menus: Menu[] = [
     {
-      title: "Home",
-      link: "/",
+      title: 'Home',
+      link: '/',
       options: { exact: true }
     },
     {
-      title: "Operators",
-      link: "/operators",
+      title: 'Operators',
+      link: '/operators',
       options: { exact: false }
     },
     {
-      title: "Companies",
-      link: "/companies",
+      title: 'Companies',
+      link: '/companies',
       options: { exact: false }
     },
     {
-      title: "Team",
-      link: "/team",
+      title: 'Team',
+      link: '/team',
       options: { exact: false }
     }
   ];
+
+  constructor(
+    private _router: Router,
+    private _activatedRoute: ActivatedRoute,
+    private _seo: SeoService
+  ) {}
+
+  ngOnInit() {
+    this._router.events
+      .pipe(
+        filter((e: RouterEvent) => e instanceof NavigationEnd),
+        map(() => {
+          let route = this._activatedRoute;
+          while (route.firstChild) {
+            route = route.firstChild;
+          }
+          return route;
+        }),
+        filter(route => route.outlet === 'primary'),
+        mergeMap(route => route.data)
+      )
+      .subscribe(data => {
+        if (data !== {}) {
+          this._seo.setHeaders(data.title || [], data.description || '');
+        }
+      });
+  }
 }
diff --git a/src/app/companies/companies-routing.module.ts b/src/app/companies/companies-routing.module.ts
index 9531d7b2..c8f9cb72 100644
--- a/src/app/companies/companies-routing.module.ts
+++ b/src/app/companies/companies-routing.module.ts
@@ -3,7 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { CompaniesComponent } from './companies.component';
 
-const routes: Routes = [{ path: '', component: CompaniesComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: CompaniesComponent,
+    data: { title: ['Companies'], description: 'Companies that use RxJS...' }
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/companies/companies.component.ts b/src/app/companies/companies.component.ts
index 081ce677..cb729f61 100644
--- a/src/app/companies/companies.component.ts
+++ b/src/app/companies/companies.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { SeoService } from '../services/seo.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
   styleUrls: ['./companies.component.scss']
 })
-export class CompaniesComponent implements OnInit {
-  constructor(private _seo: SeoService) {}
-
-  ngOnInit() {
-    this._seo.setHeaders(['Companies'], this._seo.companiesDescription);
-  }
+export class CompaniesComponent {
+  constructor() {}
 }
diff --git a/src/app/operators/operators-routing.module.ts b/src/app/operators/operators-routing.module.ts
index ea38e80e..34cbaa05 100644
--- a/src/app/operators/operators-routing.module.ts
+++ b/src/app/operators/operators-routing.module.ts
@@ -8,6 +8,7 @@ const routes: Routes = [
   {
     path: '',
     component: OperatorsComponent,
+    data: { title: ['Operators'], description: 'All the RxJS operators...' },
     children: [{ path: ':operator', component: OperatorComponent }]
   }
 ];
diff --git a/src/app/operators/operators.component.ts b/src/app/operators/operators.component.ts
index 8301b5d3..8e3da660 100644
--- a/src/app/operators/operators.component.ts
+++ b/src/app/operators/operators.component.ts
@@ -17,7 +17,6 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
 import { OperatorDoc } from '../../operator-docs/operator.model';
-import { SeoService } from '../services/seo.service';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
@@ -60,14 +59,12 @@ export class OperatorsComponent implements OnInit {
 
   constructor(
     private _breakpointObserver: BreakpointObserver,
-    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[],
-    private _seo: SeoService
+    @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
   ) {}
 
   ngOnInit() {
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
-    this._seo.setHeaders(['Operators'], this._seo.operatorsDescription);
   }
 
   get extraSmallScreen() {
diff --git a/src/app/operators/specs/operators.spec.ts b/src/app/operators/specs/operators.spec.ts
index e41ec0bb..fcf0629a 100644
--- a/src/app/operators/specs/operators.spec.ts
+++ b/src/app/operators/specs/operators.spec.ts
@@ -10,7 +10,6 @@ import {
   groupOperatorsByType
 } from '../operators.component';
 import { OperatorDoc } from '../../../operator-docs';
-import { SeoService } from '../../services/seo.service';
 
 const mockActivatedRoute = {
   snapshot: {},
@@ -42,7 +41,6 @@ describe('Operators', () => {
         imports: [RouterTestingModule, LayoutModule],
         declarations: [OperatorsComponent],
         providers: [
-          SeoService,
           { provide: OPERATORS_TOKEN, useValue: mockOperators },
           { provide: ActivatedRoute, useValue: mockActivatedRoute }
         ],
diff --git a/src/app/rxjs/rxjs-routing.module.ts b/src/app/rxjs/rxjs-routing.module.ts
index 3fdf4e87..d1851594 100644
--- a/src/app/rxjs/rxjs-routing.module.ts
+++ b/src/app/rxjs/rxjs-routing.module.ts
@@ -1,9 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-
 import { RxjsComponent } from './rxjs.component';
 
-const routes: Routes = [{ path: '', component: RxjsComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: RxjsComponent,
+    data: { title: [], description: 'The complete RxJS documentation...' }
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/rxjs/rxjs.component.ts b/src/app/rxjs/rxjs.component.ts
index be716a63..4036ae40 100644
--- a/src/app/rxjs/rxjs.component.ts
+++ b/src/app/rxjs/rxjs.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { SeoService } from '../services/seo.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-rxjs',
   templateUrl: './rxjs.component.html',
   styleUrls: ['./rxjs.component.scss']
 })
-export class RxjsComponent implements OnInit {
-  constructor(private _seo: SeoService) {}
-
-  ngOnInit() {
-    this._seo.setHeaders([], this._seo.homeDescription);
-  }
+export class RxjsComponent {
+  constructor() {}
 }
diff --git a/src/app/services/seo.service.ts b/src/app/services/seo.service.ts
index c676d3a0..005d0bc3 100644
--- a/src/app/services/seo.service.ts
+++ b/src/app/services/seo.service.ts
@@ -6,12 +6,6 @@ export class SeoService {
   // This part is happended at the end of head>title
   private siteTitle = 'RxJS Documentation';
 
-  // head>meta>description for common pages
-  public homeDescription = 'The complete RxJS documentation...';
-  public operatorsDescription = 'All the RxJS operators...';
-  public companiesDescription = 'Companies that use RxJS...';
-  public teamDescription = 'People behind the RxJS Documentation project...';
-
   constructor(private _title: Title, private _meta: Meta) {}
 
   public setHeaders(titleParts: string[], description: string) {
diff --git a/src/app/team/team-routing.module.ts b/src/app/team/team-routing.module.ts
index b55e24a8..627fb233 100644
--- a/src/app/team/team-routing.module.ts
+++ b/src/app/team/team-routing.module.ts
@@ -3,7 +3,16 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { TeamComponent } from './team.component';
 
-const routes: Routes = [{ path: '', component: TeamComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: TeamComponent,
+    data: {
+      title: ['The Team'],
+      description: 'People behind the RxJS Documentation project...'
+    }
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/team/team.component.ts b/src/app/team/team.component.ts
index 4cee8afc..e83fbc24 100644
--- a/src/app/team/team.component.ts
+++ b/src/app/team/team.component.ts
@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { SeoService } from '../services/seo.service';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-team',
   templateUrl: './team.component.html',
   styleUrls: ['./team.component.scss']
 })
-export class TeamComponent implements OnInit {
-  constructor(private _seo: SeoService) {}
-
-  ngOnInit() {
-    this._seo.setHeaders(['The Team'], this._seo.teamDescription);
-  }
+export class TeamComponent {
+  constructor() {}
 }

From 2d369a9a4257f309f6f956cf89d0642c8dd464b2 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Mon, 20 Nov 2017 21:38:19 +0100
Subject: [PATCH 24/26] fix(seo): Add a type for SEO data

---
 src/app/app.component.ts                            | 11 ++++-------
 .../components/operator/operator.component.ts       |  8 ++++----
 src/app/services/seo.service.ts                     | 13 +++++++++----
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 93fb5bd7..86515ea4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,7 +6,7 @@ import {
   RouterEvent
 } from '@angular/router';
 import { filter, map, mergeMap } from 'rxjs/operators';
-import { SeoService } from './services/seo.service';
+import { SeoService, SeoData } from './services/seo.service';
 
 interface Menu {
   title: string;
@@ -61,12 +61,9 @@ export class AppComponent implements OnInit {
           return route;
         }),
         filter(route => route.outlet === 'primary'),
-        mergeMap(route => route.data)
+        mergeMap(route => route.data),
+        filter((data: SeoData) => data.title !== undefined)
       )
-      .subscribe(data => {
-        if (data !== {}) {
-          this._seo.setHeaders(data.title || [], data.description || '');
-        }
-      });
+      .subscribe((data: SeoData) => this._seo.setHeaders(data));
   }
 }
diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index c104c31b..a08f8e1e 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -39,12 +39,12 @@ export class OperatorComponent implements OnInit {
           this.operators.filter(
             (operator: OperatorDoc) => operator.name === name
           )[0] || this.notfound();
-        this._seo.setHeaders(
-          [this.operator.name, this.operator.operatorType],
-          this.operator.shortDescription
+        this._seo.setHeaders({
+          title: [this.operator.name, this.operator.operatorType],
+          description: this.operator.shortDescription
             ? this.operator.shortDescription.description
             : ''
-        );
+        });
       });
   }
 
diff --git a/src/app/services/seo.service.ts b/src/app/services/seo.service.ts
index 005d0bc3..967ec262 100644
--- a/src/app/services/seo.service.ts
+++ b/src/app/services/seo.service.ts
@@ -1,6 +1,11 @@
 import { Injectable } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
 
+export interface SeoData {
+  title?: string[];
+  description?: string;
+}
+
 @Injectable()
 export class SeoService {
   // This part is happended at the end of head>title
@@ -8,11 +13,11 @@ export class SeoService {
 
   constructor(private _title: Title, private _meta: Meta) {}
 
-  public setHeaders(titleParts: string[], description: string) {
-    this._title.setTitle([...titleParts, this.siteTitle].join(' \u2022 '));
-    if (description && description.length) {
+  public setHeaders(data: SeoData) {
+    this._title.setTitle([...data.title, this.siteTitle].join(' \u2022 '));
+    if (data.description && data.description.length) {
       this._meta.updateTag({
-        content: description,
+        content: data.description,
         name: 'description'
       });
     }

From a7f418255c0864d0e9e4d7a4267ed165b62f18be Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Fri, 24 Nov 2017 07:20:54 +0100
Subject: [PATCH 25/26] fix(operator): Compute a map of operators

---
 .../components/operator/operator.component.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index a08f8e1e..9712a835 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -20,6 +20,7 @@ export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 })
 export class OperatorComponent implements OnInit {
   public operator: OperatorDoc;
+  public operatorsMap: { string?: OperatorDoc };
 
   private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
   private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
@@ -32,13 +33,23 @@ export class OperatorComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    this.operatorsMap = this.operators.reduce(
+      (acc: { string?: OperatorDoc }, value: OperatorDoc) => {
+        acc[value.name] = value;
+        return acc;
+      },
+      {}
+    );
+
     this._activatedRoute.params
       .pipe(pluck('operator'))
       .subscribe((name: string) => {
-        this.operator =
-          this.operators.filter(
-            (operator: OperatorDoc) => operator.name === name
-          )[0] || this.notfound();
+        if (name in this.operatorsMap) {
+          this.operator = this.operatorsMap[name];
+        } else {
+          this.notfound();
+          return;
+        }
         this._seo.setHeaders({
           title: [this.operator.name, this.operator.operatorType],
           description: this.operator.shortDescription

From 29198f555877f8f24a243dee82b2b5f51f2103d8 Mon Sep 17 00:00:00 2001
From: pmartin <contact@elol.fr>
Date: Fri, 24 Nov 2017 18:45:06 +0100
Subject: [PATCH 26/26] fix(operators): Use Map for operators map

---
 .../components/operator/operator.component.ts   | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/app/operators/components/operator/operator.component.ts b/src/app/operators/components/operator/operator.component.ts
index 9712a835..b5c4b579 100644
--- a/src/app/operators/components/operator/operator.component.ts
+++ b/src/app/operators/components/operator/operator.component.ts
@@ -20,7 +20,7 @@ export const OPERATOR_TOKEN = new InjectionToken<string>('operators');
 })
 export class OperatorComponent implements OnInit {
   public operator: OperatorDoc;
-  public operatorsMap: { string?: OperatorDoc };
+  public operatorsMap = new Map<string, OperatorDoc>();
 
   private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
   private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
@@ -33,19 +33,14 @@ export class OperatorComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.operatorsMap = this.operators.reduce(
-      (acc: { string?: OperatorDoc }, value: OperatorDoc) => {
-        acc[value.name] = value;
-        return acc;
-      },
-      {}
-    );
-
+    this.operators.forEach((op: OperatorDoc) => {
+      this.operatorsMap.set(op.name, op);
+    });
     this._activatedRoute.params
       .pipe(pluck('operator'))
       .subscribe((name: string) => {
-        if (name in this.operatorsMap) {
-          this.operator = this.operatorsMap[name];
+        if (this.operatorsMap.has(name)) {
+          this.operator = this.operatorsMap.get(name);
         } else {
           this.notfound();
           return;