add metaTag at root of the app and change the title based on the page…

… that user is on
bcgov · Nov 1, 2024 · 489d414 · 489d414
1 parent 4e796c4
commit 489d414
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 26 deletions.
diff --git a/client/wfnews-war/src/main/angular/src/app/app.component.ts b/client/wfnews-war/src/main/angular/src/app/app.component.ts
@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { AppConfigService, TokenService } from '@wf1/core-ui';
 import {
@@ -156,6 +156,8 @@ export class AppComponent implements OnDestroy, OnInit, AfterViewInit {
     protected capacitorService: CapacitorService,
     protected commonUtilityService: CommonUtilityService,
     protected zone: NgZone,
+    protected titleService: Title,
+    protected metaService: Meta,
   ) {
   }
 
@@ -269,6 +271,21 @@ export class AppComponent implements OnDestroy, OnInit, AfterViewInit {
         },
       );
     }
+
+    this.setMetaTags();
+  }
+
+  setMetaTags(){
+    const imageUrl = this.appConfigService.getConfig().application.baseUrl.toString() + 'assets/images/share-wildfire.png';
+    this.titleService.setTitle('BC Wildfire Service');
+
+    this.metaService.addTags([
+      { property: 'og:title', content: 'BC Wildfire Service' },
+      { property: 'og:image', content: imageUrl },
+      { property: 'og:site_name', content: 'BC Wildfire Service' },
+      { name: 'twitter:card', content: 'BC Wildfire Service' },
+      { name: 'twitter:site', content: '@BCGovFireInfo' },
+    ]);
   }
 
   initializeDeepLinks() {

diff --git a/...s/full-details/area-restrictions-full-details/area-restrictions-full-details.component.ts b/...s/full-details/area-restrictions-full-details/area-restrictions-full-details.component.ts
@@ -14,6 +14,7 @@ import * as L from 'leaflet';
 import { setDisplayColor } from '@app/utils';
 import { WatchlistService } from '@app/services/watchlist-service';
 import { CommonUtilityService } from '@app/services/common-utility.service';
+import { Meta } from '@angular/platform-browser';
 
 export class AreaRestriction {
   public name: string;
@@ -58,7 +59,8 @@ export class AreaRestrictionsFullDetailsComponent implements OnInit {
     private publishedIncidentService: PublishedIncidentService,
     private route: Route,
     private watchlistService: WatchlistService,
-    private commonUtilityService: CommonUtilityService
+    private commonUtilityService: CommonUtilityService,
+    private metaService: Meta,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -68,6 +70,7 @@ export class AreaRestrictionsFullDetailsComponent implements OnInit {
       returnExtent: false,
     });
     this.initMap();
+    this.metaService.updateTag({ property: 'og:title', content: this.restrictionData?.name });
   }
 
   async initMap() {

diff --git a/.../angular/src/app/components/full-details/bans-full-details/bans-full-details.component.ts b/.../angular/src/app/components/full-details/bans-full-details/bans-full-details.component.ts
@@ -8,6 +8,7 @@ import { AppConfigService } from '@wf1/core-ui';
 import * as L from 'leaflet';
 import { HttpClient } from '@angular/common/http';
 import { CommonUtilityService } from '@app/services/common-utility.service';
+import { Meta } from '@angular/platform-browser';
 
 export class BanProhibition {
   public id: string;
@@ -41,7 +42,8 @@ export class BansFullDetailsComponent implements OnInit {
     private publishedIncidentService: PublishedIncidentService,
     private httpClient: HttpClient,
     private route: Route,
-    private commonUtilityService: CommonUtilityService
+    private commonUtilityService: CommonUtilityService,
+    private metaService: Meta,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -51,6 +53,7 @@ export class BansFullDetailsComponent implements OnInit {
       returnExtent: false,
     });
     this.initMap();
+    this.metaService.updateTag({ property: 'og:title', content: `Fire Ban on ${this.banData.description} Open Fires`});
   }
 
   async initMap() {

diff --git a/...omponents/full-details/danger-rating-full-details/danger-rating-full-details.component.ts b/...omponents/full-details/danger-rating-full-details/danger-rating-full-details.component.ts
@@ -7,6 +7,7 @@ import * as L from 'leaflet';
 import { ResourcesRoutes, setDisplayColor, displayDangerRatingDescription } from '@app/utils';
 import { AGOLService } from '@app/services/AGOL-service';
 import { CommonUtilityService } from '@app/services/common-utility.service';
+import { Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'wfnews-danger-rating-full-details',
@@ -28,11 +29,13 @@ export class DangerRatingFullDetailsComponent implements OnInit {
     private publishedIncidentService: PublishedIncidentService,
     private route: Route,
     private agolService: AGOLService,
-    private commonUtilityService: CommonUtilityService
+    private commonUtilityService: CommonUtilityService,
+    private metaService: Meta,
   ) {}
 
   async ngOnInit(): Promise<void> {
     this.initMap();
+    this.metaService.updateTag({ property: 'og:title', content: `${this.rating} Danger Rating`});
   }
 
   dangerDescription() {

diff --git a/.../app/components/full-details/evac-alert-full-details/evac-alert-full-details.component.ts b/.../app/components/full-details/evac-alert-full-details/evac-alert-full-details.component.ts
@@ -13,6 +13,7 @@ import { AppConfigService } from '@wf1/core-ui';
 import * as esri from 'esri-leaflet';
 import L from 'leaflet';
 import { setDisplayColor } from '../../../utils';
+import { Meta } from '@angular/platform-browser';
 
 export class EvacData {
   public name: string;
@@ -52,7 +53,7 @@ export class EvacAlertFullDetailsComponent implements OnInit {
     protected router: Router,
     private watchlistService: WatchlistService,
     private commonUtilityService: CommonUtilityService,
-
+    private metaService: Meta,
   ) { }
 
   async ngOnInit(): Promise<void> {
@@ -62,6 +63,7 @@ export class EvacAlertFullDetailsComponent implements OnInit {
       returnExtent: false,
     });
     this.initMap();
+    this.metaService.updateTag({ property: 'og:title', content: `Evacuation Alert for ${this.evacData.name}`});
   }
 
   async initMap() {

diff --git a/...p/components/public-incident-page/incident-info-header/incident-header-panel.component.ts b/...p/components/public-incident-page/incident-info-header/incident-header-panel.component.ts
@@ -36,6 +36,7 @@ import {
   setDisplayColor
 } from '../../../utils';
 import { ContactUsDialogComponent } from '../../admin-incident-form/contact-us-dialog/contact-us-dialog.component';
+import { Meta } from '@angular/platform-browser';
 
 @Component({
   selector: 'incident-header-panel',
@@ -121,6 +122,7 @@ export class IncidentHeaderPanelComponent implements AfterViewInit, OnInit {
     private commonUtilityService: CommonUtilityService,
     private http: HttpClient,
     private cdr: ChangeDetectorRef,
+    private metaService: Meta,
 
   ) {
     /* Empty, just here for injection */
@@ -147,6 +149,7 @@ export class IncidentHeaderPanelComponent implements AfterViewInit, OnInit {
         }
       }
     }
+    this.metaService.updateTag({ property: 'og:title', content: `Evacuation Alert for ${this.incident?.incidentName}`});
   }
 
   ngAfterViewInit(): void {

diff --git a/client/wfnews-war/src/main/angular/src/app/services/common-utility.service.ts b/client/wfnews-war/src/main/angular/src/app/services/common-utility.service.ts
@@ -363,7 +363,6 @@ export class CommonUtilityService {
   }
 
   shareMobile(shareTitle: string) {
-    this.setMetaTags(shareTitle);
     const currentUrl = this.appConfigService.getConfig().application.baseUrl.toString() + this.router.url.slice(1);
     // contents of the share is out of scope for wfnews-2403. Enhancment should be available in wfnews-2422
     const imageUrl = this.appConfigService.getConfig().application.baseUrl.toString() + '/assets/images/share-wildfire.png';
@@ -381,26 +380,6 @@ export class CommonUtilityService {
     });
   }
 
-  setMetaTags(shareTitle: string) {
-    const title = shareTitle;
-    const description = 'Get the latest update on BC Wildfire.';
-    const imageUrl = this.appConfigService.getConfig().application.baseUrl.toString() + '/assets/images/share-wildfire.png';
-    const pageUrl = this.appConfigService.getConfig().application.baseUrl.toString() + this.router.url.slice(1);
-    this.titleService.setTitle(title);
-
-    this.metaService.addTags([
-      { property: 'og:title', content: title },
-      { property: 'og:description', content: description },
-      { property: 'og:image', content: imageUrl },
-      { property: 'og:url', content: pageUrl },
-      { property: 'twitter:card', content: 'summary_large_image' },
-      { property: 'twitter:title', content: title },
-      { property: 'twitter:description', content: description },
-      { property: 'twitter:image', content: imageUrl },
-      { property: 'twitter:url', content: pageUrl }
-    ]);
-  }
-
   openShareWindow(type: string, incidentName: string) {
     const url = this.appConfigService.getConfig().application.baseUrl.toString() + this.router.url.slice(1);
     this.dialog.open(ShareDialogComponent, {