Skip to content

Commit 6244342

Browse files
whitep4nth3rwhitep4nth3r
authored
Merge pull request #35 from ishythefishy/meta-updates
Use a bespoke meta service to generate dynamic home page meta titles …
2 parents e765a8a + df85f4c commit 6244342

File tree

5 files changed

+159
-25
lines changed

5 files changed

+159
-25
lines changed

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { MetaService } from './meta.service';
3+
import { FretMapService } from '../fret-map/fret-map.service';
4+
5+
describe('MetaService', () => {
6+
let fretMapService: FretMapService;
7+
let metaService: MetaService;
8+
9+
beforeEach(() => {
10+
fretMapService = TestBed.inject(FretMapService);
11+
metaService = new MetaService(fretMapService);
12+
});
13+
14+
it('should be created', () => {
15+
expect(metaService).toBeTruthy();
16+
});
17+
18+
it('should return the base title', () => {
19+
const result = metaService.getBaseTitle();
20+
expect(result).toBe('Fretonator - the ultimate interactive free guitar theory tool');
21+
})
22+
23+
it('should return a generic end description', () => {
24+
const result = metaService.getGenericEndDescription();
25+
expect(result).toBe('Choose a starting note, pick a mode, check out the fretboard and have a jam!')
26+
})
27+
28+
it('should return a home page url from given parameters', () => {
29+
const result = metaService.generateHomePageUrl('c', 'natural', 'lydian');
30+
expect(result).toBe('https://www.fretonator.com/c/natural/lydian');
31+
})
32+
33+
it('should call the fret map service for the title and return the correct string', () => {
34+
const result = metaService.generateHomePageTitle('c', 'natural', 'lydian');
35+
expect(result).toBe('Fretonator - the ultimate interactive free guitar theory tool | C Lydian');
36+
});
37+
38+
it('should call the fret map service for the description and return the correct string', () => {
39+
const result = metaService.generateHomePageMetaDescription('c', 'natural', 'lydian');
40+
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!');
41+
});
42+
});

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Injectable } from '@angular/core';
2+
import { FretMapService } from '../fret-map/fret-map.service';
3+
4+
@Injectable({
5+
providedIn: 'root'
6+
})
7+
export class MetaService {
8+
9+
constructor(private fretMapService: FretMapService) {
10+
}
11+
12+
getBaseTitle = (): string => {
13+
return 'Fretonator - the ultimate interactive free guitar theory tool';
14+
};
15+
16+
getGenericEndDescription = (): string => {
17+
return 'Choose a starting note, pick a mode, check out the fretboard and have a jam!';
18+
};
19+
20+
generateHomePageUrl = (note,
21+
noteExtenderString,
22+
mode): string => {
23+
return 'https://www.fretonator.com/' + note + '/' + noteExtenderString + '/' + mode;
24+
};
25+
26+
generateHomePageTitle = (note,
27+
noteExtenderString,
28+
mode): string => {
29+
return this.getBaseTitle() + ' | ' +
30+
this.fretMapService.convertFretMapConfigurationToDisplayString(
31+
note,
32+
noteExtenderString,
33+
mode
34+
);
35+
};
36+
37+
generateHomePageMetaDescription = (note,
38+
noteExtenderString,
39+
mode): string => {
40+
return 'Learn the ' + this.fretMapService.convertFretMapConfigurationToDisplayString(
41+
note,
42+
noteExtenderString,
43+
mode
44+
) + ' mode on the guitar and play along to a jam track with the Fretonator. ' + this.getGenericEndDescription();
45+
};
46+
}

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,38 @@ import { Meta, Title } from '@angular/platform-browser';
77
styleUrls: ['./about-index.component.scss']
88
})
99
export class AboutIndexComponent implements OnInit {
10+
pageDescription = 'Thanks for checking out the Fretonator! I’m a qualified music teacher that (somehow) ended up working as a lead software engineer (it’s a long story), and I built this for my husband.';
11+
pageTitle = 'About the Fretonator - the ultimate interactive free guitar theory tool';
12+
pageUrl = 'https://www.fretonator.com/about'
13+
1014
constructor(private title: Title, private meta: Meta) {
1115
}
1216

1317
ngOnInit(): void {
14-
this.title.setTitle('About the Fretonator - the ultimate interactive free guitar theory tool');
18+
this.title.setTitle(this.pageTitle);
1519
this.meta.updateTag({
1620
name: 'description',
17-
content: "Thanks for checking out the Fretonator! I’m a qualified music teacher that (somehow) ended up working as a lead software engineer (it’s a long story), and I built this for my husband."
21+
content: this.pageDescription
22+
});
23+
24+
this.meta.updateTag({
25+
property: 'og:url',
26+
content: this.pageUrl
27+
});
28+
29+
this.meta.updateTag({
30+
name: 'twitter:description',
31+
content: this.pageDescription
32+
});
33+
34+
this.meta.updateTag({
35+
property: 'og:description',
36+
content: this.pageDescription
37+
});
38+
39+
this.meta.updateTag({
40+
property: 'og:title',
41+
content: this.pageTitle
1842
});
1943
}
2044
}

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

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Meta, Title } from '@angular/platform-browser';
55
import { AbstractDataService } from '../../../common/abstract-data/abstract-data.service';
66
import { ActivatedRoute } from '@angular/router';
77
import { FretMapService } from '../../../common/fret-map/fret-map.service';
8+
import { MetaService } from '../../../common/meta/meta.service';
89

910
@Component({
1011
selector: 'app-home-index',
@@ -20,24 +21,21 @@ export class HomeIndexComponent implements OnInit {
2021
modeSelectorObjects = ModeSelectorObjects;
2122
octave = Octave;
2223
showHowTo;
23-
metaExtender;
2424

2525
constructor(
2626
private title: Title,
2727
private meta: Meta,
2828
private localStorage: AbstractDataService,
2929
private activatedRoute: ActivatedRoute,
30-
private fretMapService: FretMapService
31-
) {}
30+
private fretMapService: FretMapService,
31+
private metaService: MetaService
32+
) {
33+
}
3234

3335
ngOnInit(): void {
3436
this.activatedRoute.params.subscribe(() => this.onRouteChange());
35-
36-
this.title.setTitle('Fretonator - the ultimate interactive free guitar theory tool' + this.metaExtender);
37-
this.meta.updateTag({
38-
name: 'description',
39-
content: 'The ultimate interactive free guitar theory tool. Choose a starting note, pick a mode, check out the fretboard and have a jam!'
40-
});
37+
this.setHomePageTitle();
38+
this.setHomePageMeta();
4139

4240
const _showHowTo = this.localStorage.getItem('showHowTo');
4341
switch (_showHowTo) {
@@ -71,21 +69,45 @@ export class HomeIndexComponent implements OnInit {
7169
this.noteExtender = NoteExtenderSymbol.natural;
7270
}
7371

74-
this.metaExtender =
75-
' | ' +
76-
this.fretMapService.convertFretMapConfigurationToDisplayString(
77-
this.note,
78-
this.noteExtenderString,
79-
this.mode
80-
);
81-
this.title.setTitle(
82-
'Fretonator - the ultimate interactive free guitar theory tool' +
83-
this.metaExtender
84-
);
72+
this.setHomePageTitle();
73+
this.setHomePageMeta();
8574
}
8675

8776
toggleHowTo() {
8877
this.showHowTo = !this.showHowTo;
8978
this.localStorage.setItem('showHowTo', this.showHowTo);
9079
}
80+
81+
setHomePageTitle() {
82+
this.title.setTitle(
83+
this.metaService.generateHomePageTitle(this.note, this.noteExtenderString, this.mode)
84+
);
85+
}
86+
87+
setHomePageMeta() {
88+
this.meta.updateTag({
89+
name: 'description',
90+
content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)
91+
});
92+
93+
this.meta.updateTag({
94+
name: 'twitter:description',
95+
content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)
96+
});
97+
98+
this.meta.updateTag({
99+
property: 'og:description',
100+
content: this.metaService.generateHomePageMetaDescription(this.note, this.noteExtenderString, this.mode)
101+
});
102+
103+
this.meta.updateTag({
104+
property: 'og:title',
105+
content: this.metaService.generateHomePageTitle(this.note, this.noteExtenderString, this.mode)
106+
});
107+
108+
this.meta.updateTag({
109+
property: 'og:url',
110+
content: this.metaService.generateHomePageUrl(this.note, this.noteExtenderString, this.mode)
111+
});
112+
}
91113
}

‎apps/fretonator-web/src/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8"/>
5-
<title>Fretonator</title>
6-
<base href="/"/>
75
<meta name="viewport" content="width=device-width, initial-scale=1"/>
6+
<base href="/"/>
7+
<title>Fretonator - the ultimate interactive free guitar theory tool</title>
8+
<meta name="description" content="Choose a starting note, pick a mode, check out the fretboard and have a jam!">
89
<meta property="og:type" content="website">
910
<meta property="og:title" content="Fretonator - the ultimate free guitar theory tool"/>
1011
<meta property="og:description"
@@ -26,7 +27,6 @@
2627
<link rel="manifest" href="manifest.webmanifest">
2728
<meta name="theme-color" content="#1a1a1a">
2829

29-
3030
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-167450036-1"></script>
3131
<script>
3232
window.dataLayer = window.dataLayer || [];

0 commit comments

Comments
 (0)