Use a bespoke meta service to generate dynamic home page meta titles and meta descriptions

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/meta/meta.service.spec.ts

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { MetaService } from './meta.service';
+import { FretMapService } from '../fret-map/fret-map.service';
+
+describe('MetaService', () => {
+  let fretMapService: FretMapService;
+  let metaService: MetaService;
+
+  beforeEach(() => {
+    fretMapService = TestBed.inject(FretMapService);
+    metaService = new MetaService(fretMapService);
+  });
+
+  it('should be created', () => {
+    expect(metaService).toBeTruthy();
+  });
+
+  it('should call the fret map service for the title and return the correct string', () => {
+    const result = metaService.generateHomePageTitle('c', 'natural', 'lydian');
+    expect(result).toBe('Fretonator - the ultimate interactive free guitar theory tool | C Lydian');
+  });
+
+  it('should call the fret map service for the description and return the correct string', () => {
+    const result = metaService.generateHomePageMetaDescription('c', 'natural', 'lydian');
+    expect(result).toBe('Learn the C Lydian mode on the guitar and play along to a jam track with the Fretonator. Choose a starting note, pick a mode, check out the fretboard and have a jam!');
+  });
+});

apps/fretonator-web/src/app/common/meta/meta.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { FretMapService } from '../fret-map/fret-map.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MetaService {
+
+  constructor(private fretMapService: FretMapService) {
+  }
+
+  getBaseTitle = (): string => {
+    return 'Fretonator - the ultimate interactive free guitar theory tool';
+  };
+
+  getGenericEndDescription = (): string => {
+    return 'Choose a starting note, pick a mode, check out the fretboard and have a jam!';
+  }
+
+  generateHomePageTitle = (note,
+                           noteExtenderString,
+                           mode): string => {
+    return this.getBaseTitle() + ' | ' +
+      this.fretMapService.convertFretMapConfigurationToDisplayString(
+        note,
+        noteExtenderString,
+        mode
+      );
+  };
+
+  generateHomePageMetaDescription = (note,
+                                     noteExtenderString,
+                                     mode): string => {
+    return 'Learn the ' + this.fretMapService.convertFretMapConfigurationToDisplayString(
+      note,
+      noteExtenderString,
+      mode
+    ) + ' mode on the guitar and play along to a jam track with the Fretonator. ' + this.getGenericEndDescription();
+  };
+}

apps/fretonator-web/src/app/pages/home/home-index/home-index.component.ts

@@ -5,6 +5,7 @@ import { Meta, Title } from '@angular/platform-browser';
 import { AbstractDataService } from '../../../common/abstract-data/abstract-data.service';
 import { ActivatedRoute } from '@angular/router';
 import { FretMapService } from '../../../common/fret-map/fret-map.service';
+import { MetaService } from '../../../common/meta/meta.service';
 
 @Component({
   selector: 'app-home-index',
@@ -20,24 +21,21 @@ export class HomeIndexComponent implements OnInit {
   modeSelectorObjects = ModeSelectorObjects;
   octave = Octave;
   showHowTo;
-  metaExtender;
-
+  
   constructor(
     private title: Title,
     private meta: Meta,
     private localStorage: AbstractDataService,
     private activatedRoute: ActivatedRoute,
-    private fretMapService: FretMapService
-  ) {}
+    private fretMapService: FretMapService,
+    private metaService: MetaService
+  ) {
+  }
 
   ngOnInit(): void {
     this.activatedRoute.params.subscribe(() => this.onRouteChange());
-
-    this.title.setTitle('Fretonator - the ultimate interactive free guitar theory tool' + this.metaExtender);
-    this.meta.updateTag({
-      name: 'description',
-      content: 'The ultimate interactive free guitar theory tool. Choose a starting note, pick a mode, check out the fretboard and have a jam!'
-    });
+    this.setHomePageTitle();
+    this.setHomePageMetaDescription();
 
     const _showHowTo = this.localStorage.getItem('showHowTo');
     switch (_showHowTo) {
@@ -71,21 +69,25 @@ export class HomeIndexComponent implements OnInit {
         this.noteExtender = NoteExtenderSymbol.natural;
     }
 
-    this.metaExtender =
-      ' | ' +
-      this.fretMapService.convertFretMapConfigurationToDisplayString(
-        this.note,
-        this.noteExtenderString,
-        this.mode
-      );
-    this.title.setTitle(
-      'Fretonator - the ultimate interactive free guitar theory tool' +
-        this.metaExtender
-    );
+    this.setHomePageTitle();
+    this.setHomePageMetaDescription();
   }
 
   toggleHowTo() {
     this.showHowTo = !this.showHowTo;
     this.localStorage.setItem('showHowTo', this.showHowTo);
   }
+
+  setHomePageTitle() {
+    this.title.setTitle(
+      this.metaService.generateHomePageTitle(this.note, this.noteExtenderString, this.mode)
+    );
+  }
+
+  setHomePageMetaDescription() {
+    this.meta.updateTag({
+      name: 'description',
+      content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)
+    });
+  }
 }