feat: adds opengraph to records

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

@@ -1,15 +1,19 @@
 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.ts

@@ -1,26 +1,61 @@
-import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit,
+} 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 {
+export class RecordPageComponent implements OnDestroy, OnInit {
   metadataQualityDisplay: boolean
+  sub: Subscription
 
-  constructor(public mdViewFacade: MdViewFacade) {
+  constructor(public mdViewFacade: MdViewFacade, private meta: Meta) {
     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,6 +5,9 @@
     <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"