feat: adds opengraph to records with specific component

apps/datahub/src/app/app.component.ts

@@ -1,19 +1,15 @@
 import { Component, OnInit } from '@angular/core'
 import { getThemeConfig } from '@geonetwork-ui/util/app-config'
 import { ThemeService } from '@geonetwork-ui/util/shared'
-import { Meta } from '@angular/platform-browser'
 
 @Component({
   selector: 'datahub-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
-  constructor(private meta: Meta) {}
-
   ngOnInit(): void {
     const favicon = getThemeConfig().FAVICON
     if (favicon) ThemeService.setFavicon(favicon)
-    this.meta.updateTag({ property: 'og:url', content: window.location.origin })
   }
 }

apps/datahub/src/app/record/record-page/record-page.component.html

@@ -1,4 +1,7 @@
 <div id="record-page" class="overflow-hidden">
+  <gn-ui-record-meta
+    [metadata]="mdViewFacade.metadata$ | async"
+  ></gn-ui-record-meta>
   <datahub-header-record
     [metadata]="mdViewFacade.metadata$ | async"
   ></datahub-header-record>

apps/datahub/src/app/record/record-page/record-page.component.ts

@@ -1,61 +1,26 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnDestroy,
-  OnInit,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
-import { Meta } from '@angular/platform-browser'
 import {
   MetadataQualityConfig,
   getMetadataQualityConfig,
 } from '@geonetwork-ui/util/app-config'
-import { Subscription } from 'rxjs'
 
 @Component({
   selector: 'datahub-record-page',
   templateUrl: './record-page.component.html',
   styleUrls: ['./record-page.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RecordPageComponent implements OnDestroy, OnInit {
+export class RecordPageComponent implements OnDestroy {
   metadataQualityDisplay: boolean
-  sub: Subscription
 
-  constructor(public mdViewFacade: MdViewFacade, private meta: Meta) {
+  constructor(public mdViewFacade: MdViewFacade) {
     document.documentElement.classList.add('record-page-active')
     const cfg: MetadataQualityConfig =
       getMetadataQualityConfig() || ({} as MetadataQualityConfig)
     this.metadataQualityDisplay = cfg.ENABLED
   }
   ngOnDestroy() {
     document.documentElement.classList.remove('record-page-active')
-    this.meta.updateTag({ property: 'og:title', content: 'Datahub' })
-    this.meta.updateTag({
-      property: 'og:url',
-      content: window.location.href.toString(),
-    })
-    this.meta.removeTag('property="og:image"')
-    this.sub.unsubscribe()
-  }
-
-  ngOnInit(): void {
-    this.sub = this.mdViewFacade.metadata$.subscribe((metadata) => {
-      if (metadata) {
-        this.meta.updateTag({ property: 'og:title', content: metadata.title })
-        this.meta.updateTag({
-          property: 'og:url',
-          content: window.location.href.toString(),
-        })
-        if (metadata.overviews.length > 0) {
-          for (const overview of metadata.overviews) {
-            this.meta.addTag({
-              property: 'og:image',
-              content: overview.url.toString(),
-            })
-          }
-        }
-      }
-    })
   }
 }

apps/datahub/src/index.html

@@ -5,9 +5,6 @@
     <title>Datahub</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta property="og:title" content="Datahub" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="" />
     <link rel="stylesheet" href="assets/css/materials-symbols-outline.css" />
     <link
       rel="preload"

libs/feature/record/src/lib/feature-record.module.ts

@@ -33,6 +33,7 @@ import { DataViewWebComponentComponent } from './data-view-web-component/data-vi
 import { DataViewShareComponent } from './data-view-share/data-view-share.component'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
 import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline'
+import { RecordMetaComponent } from './record-meta/record-meta.component'
 
 @NgModule({
   declarations: [
@@ -42,6 +43,7 @@ import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline'
     DataViewPermalinkComponent,
     DataViewWebComponentComponent,
     DataViewShareComponent,
+    RecordMetaComponent,
   ],
   imports: [
     CommonModule,
@@ -79,6 +81,8 @@ import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline'
     DataViewPermalinkComponent,
     DataViewWebComponentComponent,
     DataViewShareComponent,
+    ExternalViewerButtonComponent,
+    RecordMetaComponent,
   ],
 })
 export class FeatureRecordModule {}

libs/feature/record/src/lib/record-meta/record-meta.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { RecordMetaComponent } from './record-meta.component'
+
+describe('ExternalViewerButtonComponent', () => {
+  let component: RecordMetaComponent
+  let fixture: ComponentFixture<RecordMetaComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RecordMetaComponent],
+      imports: [],
+      providers: [],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecordMetaComponent)
+    component = fixture.componentInstance
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

libs/feature/record/src/lib/record-meta/record-meta.component.ts

@@ -0,0 +1,48 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+} from '@angular/core'
+import { Meta } from '@angular/platform-browser'
+import {
+  DatasetRecord,
+  ServiceRecord,
+} from '@geonetwork-ui/common/domain/model/record'
+
+@Component({
+  selector: 'gn-ui-record-meta',
+  template: '<>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RecordMetaComponent implements OnDestroy, OnChanges {
+  @Input() metadata: DatasetRecord
+
+  constructor(private meta: Meta) {}
+
+  ngOnChanges() {
+    if (this.metadata?.title) {
+      this.meta.addTag({ property: 'og:title', content: this.metadata.title })
+      this.meta.addTag({
+        property: 'og:url',
+        content: window.location.href.toString(),
+      })
+      if (this.metadata?.overviews?.length > 0) {
+        for (const overview of this.metadata.overviews) {
+          this.meta.addTag({
+            property: 'og:image',
+            content: overview.url.toString(),
+          })
+        }
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    this.meta.removeTag('property="og:image"')
+    this.meta.removeTag('property="og:url"')
+    this.meta.removeTag('property="og:title"')
+  }
+}