From f14b5d29a9cab1e11dde6e78a5fe3e3e6988f7f7 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Fri, 15 Nov 2024 15:28:24 +0100
Subject: [PATCH] feat: adds opengraph to records

---
 apps/datahub/src/app/app.component.ts         |  4 ++
 .../record-page/record-page.component.ts      | 41 +++++++++++++++++--
 apps/datahub/src/index.html                   |  3 ++
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/apps/datahub/src/app/app.component.ts b/apps/datahub/src/app/app.component.ts
index 1f69e6ed3e..afeca72649 100644
--- a/apps/datahub/src/app/app.component.ts
+++ b/apps/datahub/src/app/app.component.ts
@@ -1,6 +1,7 @@
 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',
@@ -8,8 +9,11 @@ import { ThemeService } from '@geonetwork-ui/util/shared'
   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 })
   }
 }
diff --git a/apps/datahub/src/app/record/record-page/record-page.component.ts b/apps/datahub/src/app/record/record-page/record-page.component.ts
index dbe43824ce..edb54cdf1a 100644
--- a/apps/datahub/src/app/record/record-page/record-page.component.ts
+++ b/apps/datahub/src/app/record/record-page/record-page.component.ts
@@ -1,9 +1,16 @@
-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',
@@ -11,10 +18,11 @@ import {
   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)
@@ -22,5 +30,32 @@ export class RecordPageComponent implements OnDestroy {
   }
   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(),
+            })
+          }
+        }
+      }
+    })
   }
 }
diff --git a/apps/datahub/src/index.html b/apps/datahub/src/index.html
index 3b1d0309a6..93471c7ab6 100644
--- a/apps/datahub/src/index.html
+++ b/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"