From f14b5d29a9cab1e11dde6e78a5fe3e3e6988f7f7 Mon Sep 17 00:00:00 2001 From: Florian Necas Date: Fri, 15 Nov 2024 15:28:24 +0100 Subject: [PATCH 1/3] 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 @@ Datahub + + + Date: Tue, 19 Nov 2024 10:33:42 +0100 Subject: [PATCH 2/3] feat: adds opengraph to records with specific component --- apps/datahub/src/app/app.component.ts | 4 -- .../record-page/record-page.component.html | 3 ++ .../record-page/record-page.component.ts | 41 ++-------------- apps/datahub/src/index.html | 3 -- .../record/src/lib/feature-record.module.ts | 4 ++ .../record-meta/record-meta.component.spec.ts | 24 ++++++++++ .../lib/record-meta/record-meta.component.ts | 48 +++++++++++++++++++ 7 files changed, 82 insertions(+), 45 deletions(-) create mode 100644 libs/feature/record/src/lib/record-meta/record-meta.component.spec.ts create mode 100644 libs/feature/record/src/lib/record-meta/record-meta.component.ts diff --git a/apps/datahub/src/app/app.component.ts b/apps/datahub/src/app/app.component.ts index afeca72649..1f69e6ed3e 100644 --- a/apps/datahub/src/app/app.component.ts +++ b/apps/datahub/src/app/app.component.ts @@ -1,7 +1,6 @@ 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', @@ -9,11 +8,8 @@ import { Meta } from '@angular/platform-browser' 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.html b/apps/datahub/src/app/record/record-page/record-page.component.html index 139097e05a..1ba9c5c7f6 100644 --- a/apps/datahub/src/app/record/record-page/record-page.component.html +++ b/apps/datahub/src/app/record/record-page/record-page.component.html @@ -1,4 +1,7 @@
+ 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 edb54cdf1a..dbe43824ce 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,16 +1,9 @@ -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', @@ -18,11 +11,10 @@ import { Subscription } from 'rxjs' 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) @@ -30,32 +22,5 @@ export class RecordPageComponent implements OnDestroy, OnInit { } 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 93471c7ab6..3b1d0309a6 100644 --- a/apps/datahub/src/index.html +++ b/apps/datahub/src/index.html @@ -5,9 +5,6 @@ Datahub - - - { + let component: RecordMetaComponent + let fixture: ComponentFixture + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RecordMetaComponent], + imports: [], + providers: [], + }).compileComponents() + }) + + beforeEach(() => { + fixture = TestBed.createComponent(RecordMetaComponent) + component = fixture.componentInstance + }) + + it('should create', () => { + expect(component).toBeTruthy() + }) +}) diff --git a/libs/feature/record/src/lib/record-meta/record-meta.component.ts b/libs/feature/record/src/lib/record-meta/record-meta.component.ts new file mode 100644 index 0000000000..eb4ac70489 --- /dev/null +++ b/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"') + } +} From 8c010a23d29f2d88cfbdb182e56292ae71706a8e Mon Sep 17 00:00:00 2001 From: Florian Necas Date: Tue, 19 Nov 2024 11:52:31 +0100 Subject: [PATCH 3/3] feat: set standalone comp, remove template --- apps/datahub/src/app/app.module.ts | 2 ++ libs/feature/record/src/index.ts | 1 + libs/feature/record/src/lib/feature-record.module.ts | 3 --- .../src/lib/record-meta/record-meta.component.spec.ts | 6 +++--- .../record/src/lib/record-meta/record-meta.component.ts | 9 +++------ 5 files changed, 9 insertions(+), 12 deletions(-) diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts index 37e7513ca7..03555b3475 100644 --- a/apps/datahub/src/app/app.module.ts +++ b/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({ diff --git a/libs/feature/record/src/index.ts b/libs/feature/record/src/index.ts index 5cd2bfe857..7c48021576 100644 --- a/libs/feature/record/src/index.ts +++ b/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' diff --git a/libs/feature/record/src/lib/feature-record.module.ts b/libs/feature/record/src/lib/feature-record.module.ts index 48451c7dcd..855a62e344 100644 --- a/libs/feature/record/src/lib/feature-record.module.ts +++ b/libs/feature/record/src/lib/feature-record.module.ts @@ -33,7 +33,6 @@ 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: [ @@ -43,7 +42,6 @@ import { RecordMetaComponent } from './record-meta/record-meta.component' DataViewPermalinkComponent, DataViewWebComponentComponent, DataViewShareComponent, - RecordMetaComponent, ], imports: [ CommonModule, @@ -82,7 +80,6 @@ import { RecordMetaComponent } from './record-meta/record-meta.component' DataViewWebComponentComponent, DataViewShareComponent, ExternalViewerButtonComponent, - RecordMetaComponent, ], }) export class FeatureRecordModule {} diff --git a/libs/feature/record/src/lib/record-meta/record-meta.component.spec.ts b/libs/feature/record/src/lib/record-meta/record-meta.component.spec.ts index 8e7d8cdfe9..a3cdc592c7 100644 --- a/libs/feature/record/src/lib/record-meta/record-meta.component.spec.ts +++ b/libs/feature/record/src/lib/record-meta/record-meta.component.spec.ts @@ -1,14 +1,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' import { RecordMetaComponent } from './record-meta.component' -describe('ExternalViewerButtonComponent', () => { +describe('RecordMetaComponent', () => { let component: RecordMetaComponent let fixture: ComponentFixture beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [RecordMetaComponent], - imports: [], + declarations: [], + imports: [RecordMetaComponent], providers: [], }).compileComponents() }) diff --git a/libs/feature/record/src/lib/record-meta/record-meta.component.ts b/libs/feature/record/src/lib/record-meta/record-meta.component.ts index eb4ac70489..d26bf23c57 100644 --- a/libs/feature/record/src/lib/record-meta/record-meta.component.ts +++ b/libs/feature/record/src/lib/record-meta/record-meta.component.ts @@ -1,5 +1,4 @@ import { - AfterViewInit, ChangeDetectionStrategy, Component, Input, @@ -7,15 +6,13 @@ import { OnDestroy, } from '@angular/core' import { Meta } from '@angular/platform-browser' -import { - DatasetRecord, - ServiceRecord, -} from '@geonetwork-ui/common/domain/model/record' +import { DatasetRecord } from '@geonetwork-ui/common/domain/model/record' @Component({ selector: 'gn-ui-record-meta', - template: '<>', + template: '', changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, }) export class RecordMetaComponent implements OnDestroy, OnChanges { @Input() metadata: DatasetRecord