feat(search): Add title and meta description to pages

Author: feloy

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 {}

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);
+  }
 }

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 {};
+  }
 }

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() {

src/app/rxjs/rxjs.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../services/seo.service';
 
 @Component({
   selector: 'app-rxjs',
   templateUrl: './rxjs.component.html',
   styleUrls: ['./rxjs.component.scss']
 })
 export class RxjsComponent implements OnInit {
-
-  constructor() { }
+  constructor(private _seo: SeoService) {}
 
   ngOnInit() {
+    this._seo.setHeaders([], this._seo.homeDescription);
   }
-
 }

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();
+    })
+  );
+});

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'
+      });
+    }
+  }
+}

src/app/team/team.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import { SeoService } from '../services/seo.service';
 
 @Component({
   selector: 'app-team',
   templateUrl: './team.component.html',
   styleUrls: ['./team.component.scss']
 })
 export class TeamComponent implements OnInit {
-
-  constructor() { }
+  constructor(private _seo: SeoService) {}
 
   ngOnInit() {
+    this._seo.setHeaders(['The Team'], this._seo.teamDescription);
   }
-
 }