Merge pull request #2523 from mempool/nymkappa/bugfix/fix-ln-seo

Fix missing seo in lightning pages

frontend/src/app/lightning/channel/channel.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { Observable, of, zip } from 'rxjs';
-import { catchError, map, shareReplay, switchMap } from 'rxjs/operators';
+import { catchError, map, shareReplay, switchMap, tap } from 'rxjs/operators';
 import { IChannel } from 'src/app/interfaces/node-api.interface';
 import { ElectrsApiService } from 'src/app/services/electrs-api.service';
 import { SeoService } from 'src/app/services/seo.service';
@@ -31,9 +31,11 @@ export class ChannelComponent implements OnInit {
       .pipe(
         switchMap((params: ParamMap) => {
           this.error = null;
-          this.seoService.setTitle(`Channel: ${params.get('short_id')}`);
           return this.lightningApiService.getChannel$(params.get('short_id'))
             .pipe(
+              tap((value) => {
+                this.seoService.setTitle(`Channel: ${value.short_id}`);
+              }),
               catchError((err) => {
                 this.error = err;
                 return of(null);

frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts

@@ -47,7 +47,9 @@ export class NodesPerISPChartComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.seoService.setTitle($localize`Lightning nodes per ISP`);
+    if (!this.widget) {
+      this.seoService.setTitle($localize`Lightning nodes per ISP`);
+    }
 
     this.nodesPerAsObservable$ = combineLatest([
       this.sortBySubject.pipe(startWith(true)),

frontend/src/app/lightning/nodes-ranking/oldest-nodes/oldest-nodes.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
+import { SeoService } from 'src/app/services/seo.service';
 import { IOldestNodes } from '../../../interfaces/node-api.interface';
 import { LightningApiService } from '../../lightning-api.service';
 
@@ -16,9 +17,16 @@ export class OldestNodes implements OnInit {
   oldestNodes$: Observable<IOldestNodes[]>;
   skeletonRows: number[] = [];
 
-  constructor(private apiService: LightningApiService) {}
+  constructor(
+    private apiService: LightningApiService,
+    private seoService: SeoService
+  ) {}
 
   ngOnInit(): void {
+    if (!this.widget) {
+      this.seoService.setTitle($localize`Oldest lightning nodes`);
+    }
+
     for (let i = 1; i <= (this.widget ? 10 : 100); ++i) {
       this.skeletonRows.push(i);
     }

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { INodesRanking, ITopNodesPerCapacity } from 'src/app/interfaces/node-api.interface';
+import { SeoService } from 'src/app/services/seo.service';
 import { isMobile } from 'src/app/shared/common.utils';
 import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 import { LightningApiService } from '../../lightning-api.service';
@@ -18,9 +19,16 @@ export class TopNodesPerCapacity implements OnInit {
   topNodesPerCapacity$: Observable<ITopNodesPerCapacity[]>;
   skeletonRows: number[] = [];
 
-  constructor(private apiService: LightningApiService) {}
+  constructor(
+    private apiService: LightningApiService,
+    private seoService: SeoService
+  ) {}
 
   ngOnInit(): void {
+    if (!this.widget) {
+      this.seoService.setTitle($localize`Liquidity Ranking`);
+    }
+
     for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 7) : 100); ++i) {
       this.skeletonRows.push(i);
     }

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { map, Observable } from 'rxjs';
 import { INodesRanking, ITopNodesPerChannels } from 'src/app/interfaces/node-api.interface';
+import { SeoService } from 'src/app/services/seo.service';
 import { isMobile } from 'src/app/shared/common.utils';
 import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
 import { LightningApiService } from '../../lightning-api.service';
@@ -18,9 +19,16 @@ export class TopNodesPerChannels implements OnInit {
   topNodesPerChannels$: Observable<ITopNodesPerChannels[]>;
   skeletonRows: number[] = [];
 
-  constructor(private apiService: LightningApiService) {}
+  constructor(
+    private apiService: LightningApiService,
+    private seoService: SeoService
+  ) {}
 
   ngOnInit(): void {
+    if (!this.widget) {
+      this.seoService.setTitle($localize`Connectivity Ranking`);
+    }
+
     for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 7) : 100); ++i) {
       this.skeletonRows.push(i);
     }