feat: adds opengraph to records

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>

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"')
+  }
+}