feat: adds opengraph to records (#1042)

apps/datahub/src/app/app.module.ts

@@ -13,6 +13,7 @@ import {
   FeatureRecordModule,
   GN_UI_VERSION,
   WEB_COMPONENT_EMBEDDER_URL,
+  RecordMetaComponent,
 } from '@geonetwork-ui/feature/record'
 import {
   DefaultRouterModule,
@@ -188,6 +189,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     CarouselComponent,
     BlockListComponent,
     PreviousNextButtonsComponent,
+    RecordMetaComponent,
     LetDirective,
     // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone
     NgIconsModule.withIcons({

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/index.ts

@@ -7,3 +7,4 @@ export * from './lib/data-view-share/data-view-share.component'
 export * from './lib/data-view-web-component/data-view-web-component.component'
 export * from './lib/external-viewer-button/external-viewer-button.component'
 export * from './lib/map-view/map-view.component'
+export * from './lib/record-meta/record-meta.component'

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

@@ -79,6 +79,7 @@ import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline'
     DataViewPermalinkComponent,
     DataViewWebComponentComponent,
     DataViewShareComponent,
+    ExternalViewerButtonComponent,
   ],
 })
 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('RecordMetaComponent', () => {
+  let component: RecordMetaComponent
+  let fixture: ComponentFixture<RecordMetaComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [],
+      imports: [RecordMetaComponent],
+      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,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+} from '@angular/core'
+import { Meta } from '@angular/platform-browser'
+import { DatasetRecord } from '@geonetwork-ui/common/domain/model/record'
+
+@Component({
+  selector: 'gn-ui-record-meta',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+})
+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"')
+  }
+}