From 2628dc127166bab0043a0b52ee9d8c86be66a2ba Mon Sep 17 00:00:00 2001 From: softsimon Date: Tue, 24 Mar 2020 00:52:08 +0700 Subject: [PATCH] Update page Title for SEO. --- frontend/src/app/app.module.ts | 2 ++ .../app/components/about/about.component.ts | 3 +++ .../components/address/address.component.ts | 3 +++ .../app/components/block/block.component.ts | 5 ++++- .../latest-blocks/latest-blocks.component.ts | 4 ++++ .../mempool-block/mempool-block.component.ts | 3 +++ .../statistics/statistics.component.ts | 3 +++ .../television/television.component.ts | 3 +++ .../transaction/transaction.component.ts | 7 ++++++- frontend/src/app/services/seo.service.ts | 21 +++++++++++++++++++ frontend/src/index.html | 2 +- 11 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 frontend/src/app/services/seo.service.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 6a29d76ef..3b4671858 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -43,6 +43,7 @@ import { FiatComponent } from './fiat/fiat.component'; import { MempoolBlockComponent } from './components/mempool-block/mempool-block.component'; import { FeeDistributionGraphComponent } from './components/fee-distribution-graph/fee-distribution-graph.component'; import { TimespanComponent } from './components/timespan/timespan.component'; +import { SeoService } from './services/seo.service'; @NgModule({ declarations: [ @@ -93,6 +94,7 @@ import { TimespanComponent } from './components/timespan/timespan.component'; WebsocketService, VbytesPipe, AudioService, + SeoService, ], bootstrap: [AppComponent] }) diff --git a/frontend/src/app/components/about/about.component.ts b/frontend/src/app/components/about/about.component.ts index 1f94f0267..7d5f52f3d 100644 --- a/frontend/src/app/components/about/about.component.ts +++ b/frontend/src/app/components/about/about.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { WebsocketService } from '../../services/websocket.service'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-about', @@ -10,9 +11,11 @@ export class AboutComponent implements OnInit { constructor( private websocketService: WebsocketService, + private seoService: SeoService, ) { } ngOnInit() { + this.seoService.setTitle('Contributors'); this.websocketService.want(['blocks']); } diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts index d0fa8a670..71169b5bb 100644 --- a/frontend/src/app/components/address/address.component.ts +++ b/frontend/src/app/components/address/address.component.ts @@ -8,6 +8,7 @@ import { StateService } from 'src/app/services/state.service'; import { AudioService } from 'src/app/services/audio.service'; import { ApiService } from 'src/app/services/api.service'; import { of } from 'rxjs'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-address', @@ -39,6 +40,7 @@ export class AddressComponent implements OnInit, OnDestroy { private stateService: StateService, private audioService: AudioService, private apiService: ApiService, + private seoService: SeoService, ) { } ngOnInit() { @@ -54,6 +56,7 @@ export class AddressComponent implements OnInit, OnDestroy { this.transactions = null; document.body.scrollTo(0, 0); this.addressString = params.get('id') || ''; + this.seoService.setTitle('Address: ' + this.addressString); this.loadAddress(this.addressString); }); diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts index 446d524b7..7eb89a612 100644 --- a/frontend/src/app/components/block/block.component.ts +++ b/frontend/src/app/components/block/block.component.ts @@ -3,8 +3,9 @@ import { ActivatedRoute, ParamMap } from '@angular/router'; import { ElectrsApiService } from '../../services/electrs-api.service'; import { switchMap, tap, debounceTime, catchError } from 'rxjs/operators'; import { Block, Transaction, Vout } from '../../interfaces/electrs.interface'; -import { of, empty } from 'rxjs'; +import { of } from 'rxjs'; import { StateService } from '../../services/state.service'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-block', @@ -27,6 +28,7 @@ export class BlockComponent implements OnInit, OnDestroy { private route: ActivatedRoute, private electrsApiService: ElectrsApiService, private stateService: StateService, + private seoService: SeoService, ) { } ngOnInit() { @@ -55,6 +57,7 @@ export class BlockComponent implements OnInit, OnDestroy { tap((block: Block) => { this.block = block; this.blockHeight = block.height; + this.seoService.setTitle('Block: #' + block.height + ': ' + block.id); this.isLoadingBlock = false; this.setBlockSubsidy(); if (block.reward) { diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.ts b/frontend/src/app/components/latest-blocks/latest-blocks.component.ts index 65afc907b..afe3c99e9 100644 --- a/frontend/src/app/components/latest-blocks/latest-blocks.component.ts +++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.ts @@ -3,6 +3,7 @@ import { ElectrsApiService } from '../../services/electrs-api.service'; import { StateService } from '../../services/state.service'; import { Block } from '../../interfaces/electrs.interface'; import { Subscription } from 'rxjs'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-latest-blocks', @@ -21,9 +22,12 @@ export class LatestBlocksComponent implements OnInit, OnDestroy { constructor( private electrsApiService: ElectrsApiService, private stateService: StateService, + private seoService: SeoService, ) { } ngOnInit() { + this.seoService.resetTitle(); + this.blockSubscription = this.stateService.blocks$ .subscribe((block) => { if (block === null || !this.blocks.length) { diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.ts b/frontend/src/app/components/mempool-block/mempool-block.component.ts index 54b84193f..45b9c71e8 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.ts +++ b/frontend/src/app/components/mempool-block/mempool-block.component.ts @@ -4,6 +4,7 @@ import { ActivatedRoute, ParamMap } from '@angular/router'; import { switchMap, map, tap } from 'rxjs/operators'; import { MempoolBlock } from 'src/app/interfaces/websocket.interface'; import { Observable } from 'rxjs'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-mempool-block', @@ -17,9 +18,11 @@ export class MempoolBlockComponent implements OnInit, OnDestroy { constructor( private route: ActivatedRoute, private stateService: StateService, + private seoService: SeoService, ) { } ngOnInit(): void { + this.seoService.setTitle('Mempool block'); this.mempoolBlock$ = this.route.paramMap .pipe( switchMap((params: ParamMap) => { diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts index 3106ba53f..b050b5a0c 100644 --- a/frontend/src/app/components/statistics/statistics.component.ts +++ b/frontend/src/app/components/statistics/statistics.component.ts @@ -12,6 +12,7 @@ import { ApiService } from '../../services/api.service'; import * as Chartist from 'chartist'; import { StateService } from 'src/app/services/state.service'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-statistics', @@ -41,6 +42,7 @@ export class StatisticsComponent implements OnInit { private websocketService: WebsocketService, private apiService: ApiService, private stateService: StateService, + private seoService: SeoService, ) { this.radioGroupForm = this.formBuilder.group({ dateSpan: '2h' @@ -48,6 +50,7 @@ export class StatisticsComponent implements OnInit { } ngOnInit() { + this.seoService.setTitle('Graphs'); const labelInterpolationFnc = (value: any, index: any) => { const nr = 6; diff --git a/frontend/src/app/components/television/television.component.ts b/frontend/src/app/components/television/television.component.ts index e704812f5..3b05492e1 100644 --- a/frontend/src/app/components/television/television.component.ts +++ b/frontend/src/app/components/television/television.component.ts @@ -7,6 +7,7 @@ import { WebsocketService } from 'src/app/services/websocket.service'; import { OptimizedMempoolStats } from '../../interfaces/node-api.interface'; import { StateService } from 'src/app/services/state.service'; import { ApiService } from 'src/app/services/api.service'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-television', @@ -26,9 +27,11 @@ export class TelevisionComponent implements OnInit { private vbytesPipe: VbytesPipe, private apiService: ApiService, private stateService: StateService, + private seoService: SeoService, ) { } ngOnInit() { + this.seoService.setTitle('TV view'); this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']); const labelInterpolationFnc = (value: any, index: any) => { diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 549d024bd..0433ff614 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -8,7 +8,7 @@ import { StateService } from '../../services/state.service'; import { WebsocketService } from '../../services/websocket.service'; import { AudioService } from 'src/app/services/audio.service'; import { ApiService } from 'src/app/services/api.service'; -import { MempoolBlock } from 'src/app/interfaces/websocket.interface'; +import { SeoService } from 'src/app/services/seo.service'; @Component({ selector: 'app-transaction', @@ -36,12 +36,14 @@ export class TransactionComponent implements OnInit, OnDestroy { private websocketService: WebsocketService, private audioService: AudioService, private apiService: ApiService, + private seoService: SeoService, ) { } ngOnInit() { this.route.paramMap.pipe( switchMap((params: ParamMap) => { this.txId = params.get('id') || ''; + this.seoService.setTitle('Transaction: ' + this.txId); this.error = undefined; this.feeRating = undefined; this.isLoadingTx = true; @@ -91,6 +93,9 @@ export class TransactionComponent implements OnInit, OnDestroy { this.audioService.playSound('magic'); this.findBlockAndSetFeeRating(); }); + + this.titleService.setTitle(''); + this.meta.addTag({name: 'description', content: 'Angular project training on rsgitech.com'}); } setMempoolBlocksSubscription() { diff --git a/frontend/src/app/services/seo.service.ts b/frontend/src/app/services/seo.service.ts new file mode 100644 index 000000000..9c919a1ad --- /dev/null +++ b/frontend/src/app/services/seo.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import { Title, Meta } from '@angular/platform-browser'; + +@Injectable({ + providedIn: 'root' +}) +export class SeoService { + defaultTitle = 'mempool - Bitcoin Explorer'; + + constructor( + private titleService: Title, + ) { } + + setTitle(newTitle: string) { + this.titleService.setTitle(newTitle + ' - ' + this.defaultTitle); + } + + resetTitle() { + this.titleService.setTitle(this.defaultTitle); + } +} diff --git a/frontend/src/index.html b/frontend/src/index.html index 19316863a..7c5a93f0c 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -2,7 +2,7 @@ - mempool - Bitcoin block explorer + mempool - Bitcoin Explorer