From 7d0d7c2e6c1c35ebd2b1370f3f424c3a497056d5 Mon Sep 17 00:00:00 2001 From: amontenegro Date: Mon, 4 Sep 2023 10:04:34 -0600 Subject: [PATCH 1/8] Set the canonical URL to public pages --- .../pages/my-orcid/my-orcid.component.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/app/record/pages/my-orcid/my-orcid.component.ts b/src/app/record/pages/my-orcid/my-orcid.component.ts index 18012b96d1..8b72743df2 100644 --- a/src/app/record/pages/my-orcid/my-orcid.component.ts +++ b/src/app/record/pages/my-orcid/my-orcid.component.ts @@ -21,6 +21,8 @@ import { WINDOW } from 'src/app/cdk/window' import { TogglzService } from 'src/app/core/togglz/togglz.service' import { HelpHeroService } from 'src/app/core/help-hero/help-hero.service' import { ScriptService } from '../../../core/crazy-egg/script.service' +import { DOCUMENT } from '@angular/common' +import { environment } from 'src/environments/environment' @Component({ selector: 'app-my-orcid', @@ -80,7 +82,8 @@ export class MyOrcidComponent implements OnInit, OnDestroy { @Inject(WINDOW) private window: Window, private _togglz: TogglzService, private _scriptService: ScriptService, - private _changeDetectorRef: ChangeDetectorRef + private _changeDetectorRef: ChangeDetectorRef, + @Inject(DOCUMENT) private doc: any ) {} private checkIfThisIsAPublicOrcid() { @@ -106,6 +109,9 @@ export class MyOrcidComponent implements OnInit, OnDestroy { ngOnInit(): void { this.checkIfThisIsAPublicOrcid() this.affiliations = 0 + if(this.publicOrcid) { + this.setCanonicalUrl(); + } // Remove fragment temporally, to adding back when items have loaded this.route.fragment.pipe(take(1)).subscribe((fragment) => { if (fragment) { @@ -148,7 +154,7 @@ export class MyOrcidComponent implements OnInit, OnDestroy { } this.userNotFound = userRecord?.userInfo?.USER_NOT_FOUND - this.userRecord = userRecord + this.userRecord = userRecord if (!this.publicOrcid && userRecord?.userInfo) { this.setMyOrcidIdQueryParameter() @@ -292,4 +298,12 @@ export class MyOrcidComponent implements OnInit, OnDestroy { }) this.loadingUserRecord = !!missingValues.length } + + setCanonicalUrl() { + let canonicalUrl = 'https:' + environment.BASE_URL + (environment.BASE_URL.endsWith('/') ? this.publicOrcid : '/' + this.publicOrcid) + let link: HTMLLinkElement = this.doc.createElement('link'); + link.setAttribute('rel', 'canonical'); + link.setAttribute('href', canonicalUrl); + this.doc.head.appendChild(link); + } } From 0a432c858bbbc6275baf3a69bc00b0944b5ab6f6 Mon Sep 17 00:00:00 2001 From: amontenegro Date: Mon, 4 Sep 2023 10:25:49 -0600 Subject: [PATCH 2/8] Set canonical link --- .../record/pages/my-orcid/my-orcid.component.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/app/record/pages/my-orcid/my-orcid.component.ts b/src/app/record/pages/my-orcid/my-orcid.component.ts index 8b72743df2..d4cd9b9732 100644 --- a/src/app/record/pages/my-orcid/my-orcid.component.ts +++ b/src/app/record/pages/my-orcid/my-orcid.component.ts @@ -109,9 +109,15 @@ export class MyOrcidComponent implements OnInit, OnDestroy { ngOnInit(): void { this.checkIfThisIsAPublicOrcid() this.affiliations = 0 + + // Set the canonical URL only on public pages if(this.publicOrcid) { this.setCanonicalUrl(); + } else { + // Remove the canonical URL if it is not a public page + this.removeCanonicalUrl(); } + // Remove fragment temporally, to adding back when items have loaded this.route.fragment.pipe(take(1)).subscribe((fragment) => { if (fragment) { @@ -300,10 +306,21 @@ export class MyOrcidComponent implements OnInit, OnDestroy { } setCanonicalUrl() { + // Just in case there is another canonical link already + this.removeCanonicalUrl(); let canonicalUrl = 'https:' + environment.BASE_URL + (environment.BASE_URL.endsWith('/') ? this.publicOrcid : '/' + this.publicOrcid) let link: HTMLLinkElement = this.doc.createElement('link'); link.setAttribute('rel', 'canonical'); link.setAttribute('href', canonicalUrl); this.doc.head.appendChild(link); } + + removeCanonicalUrl() { + this.doc.head.querySelectorAll("link").forEach(link => { + let attributeRel = link.getAttribute('rel') + if(attributeRel && attributeRel == 'canonical') { + link.parentNode.removeChild(link); + } + }) + } } From 5758534acc2fb945e00a8033e30e2fd52115bdf2 Mon Sep 17 00:00:00 2001 From: amontenegro Date: Mon, 4 Sep 2023 10:46:51 -0600 Subject: [PATCH 3/8] Remove the canonical url when user goes to other page --- .../pages/my-orcid/my-orcid.component.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/app/record/pages/my-orcid/my-orcid.component.ts b/src/app/record/pages/my-orcid/my-orcid.component.ts index d4cd9b9732..f903772823 100644 --- a/src/app/record/pages/my-orcid/my-orcid.component.ts +++ b/src/app/record/pages/my-orcid/my-orcid.component.ts @@ -5,7 +5,7 @@ import { OnDestroy, OnInit, } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' +import { ActivatedRoute, NavigationEnd, Router } from '@angular/router' import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info' import { ORCID_REGEXP } from 'src/app/constants' import { first, switchMap, take, takeUntil, tap } from 'rxjs/operators' @@ -23,6 +23,7 @@ import { HelpHeroService } from 'src/app/core/help-hero/help-hero.service' import { ScriptService } from '../../../core/crazy-egg/script.service' import { DOCUMENT } from '@angular/common' import { environment } from 'src/environments/environment' +import { filter, map} from 'rxjs/operators' @Component({ selector: 'app-my-orcid', @@ -113,10 +114,18 @@ export class MyOrcidComponent implements OnInit, OnDestroy { // Set the canonical URL only on public pages if(this.publicOrcid) { this.setCanonicalUrl(); - } else { - // Remove the canonical URL if it is not a public page - this.removeCanonicalUrl(); - } + } + + // Verify the canonical URL is removed on non public pages + this._router.events.pipe( + filter((event) => event instanceof NavigationEnd), + map((event: NavigationEnd) => event as NavigationEnd) + ).subscribe((event) => { + if(event?.url.startsWith('/my-orcid') || + !ORCID_REGEXP.test(event?.url)) { + this.removeCanonicalUrl(); + } + }); // Remove fragment temporally, to adding back when items have loaded this.route.fragment.pipe(take(1)).subscribe((fragment) => { From 7151d0b42262a54d19b748fd12e2f0ddc99d8997 Mon Sep 17 00:00:00 2001 From: amontenegro Date: Mon, 4 Sep 2023 10:53:45 -0600 Subject: [PATCH 4/8] Set the canonical url or unset it --- src/app/record/pages/my-orcid/my-orcid.component.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/record/pages/my-orcid/my-orcid.component.ts b/src/app/record/pages/my-orcid/my-orcid.component.ts index f903772823..9a44448017 100644 --- a/src/app/record/pages/my-orcid/my-orcid.component.ts +++ b/src/app/record/pages/my-orcid/my-orcid.component.ts @@ -110,19 +110,21 @@ export class MyOrcidComponent implements OnInit, OnDestroy { ngOnInit(): void { this.checkIfThisIsAPublicOrcid() this.affiliations = 0 - + // Set the canonical URL only on public pages if(this.publicOrcid) { this.setCanonicalUrl(); - } + } - // Verify the canonical URL is removed on non public pages this._router.events.pipe( filter((event) => event instanceof NavigationEnd), map((event: NavigationEnd) => event as NavigationEnd) ).subscribe((event) => { - if(event?.url.startsWith('/my-orcid') || - !ORCID_REGEXP.test(event?.url)) { + if(ORCID_REGEXP.test(event?.url)) { + // Set the canonical url on public pages + this.setCanonicalUrl(); + } else { + // Verify the canonical url is not set on other pages this.removeCanonicalUrl(); } }); From a185cd806c14c5e7c3c9c233c442daf0d42c2652 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Date: Mon, 4 Sep 2023 14:52:31 -0600 Subject: [PATCH 5/8] Move canonical link logic to a service --- src/app/app.module.ts | 4 +- .../canonocal-url.service.spec.ts | 16 +++++ .../canonocal-url/canonocal-url.service.ts | 60 +++++++++++++++++++ .../pages/my-orcid/my-orcid.component.ts | 46 ++++---------- 4 files changed, 91 insertions(+), 35 deletions(-) create mode 100644 src/app/core/canonocal-url/canonocal-url.service.spec.ts create mode 100644 src/app/core/canonocal-url/canonocal-url.service.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ece0ffd47e..f3703ec8d1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,7 +17,7 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http' @NgModule({ declarations: [AppComponent], imports: [ - BrowserModule, + BrowserModule.withServerTransition({ appId: 'serverApp' }), AppRoutingModule, CoreModule, BrowserAnimationsModule, @@ -44,6 +44,8 @@ export class AppModule { private initializeApp() { environment.BASE_URL = this.getCurrentDomain() + + console.log('>>>>>>>>>>>>> ', environment.BASE_URL) } getCurrentDomain() { diff --git a/src/app/core/canonocal-url/canonocal-url.service.spec.ts b/src/app/core/canonocal-url/canonocal-url.service.spec.ts new file mode 100644 index 0000000000..c8d5348657 --- /dev/null +++ b/src/app/core/canonocal-url/canonocal-url.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing' + +import { CanonocalUrlService } from './canonocal-url.service' + +describe('CanonocalUrlService', () => { + let service: CanonocalUrlService + + beforeEach(() => { + TestBed.configureTestingModule({}) + service = TestBed.inject(CanonocalUrlService) + }) + + it('should be created', () => { + expect(service).toBeTruthy() + }) +}) diff --git a/src/app/core/canonocal-url/canonocal-url.service.ts b/src/app/core/canonocal-url/canonocal-url.service.ts new file mode 100644 index 0000000000..76355115a8 --- /dev/null +++ b/src/app/core/canonocal-url/canonocal-url.service.ts @@ -0,0 +1,60 @@ +import { DOCUMENT } from '@angular/common' +import { Inject, Injectable } from '@angular/core' +import { NavigationEnd, Router } from '@angular/router' +import { filter, map } from 'rxjs/operators' +import { ORCID_REGEXP } from 'src/app/constants' +import { environment } from 'src/environments/environment' + +@Injectable({ + providedIn: 'root', +}) +export class CanonocalUrlService { + constructor(@Inject(DOCUMENT) private doc: any, private _router: Router) { + this.init() + } + + init() { + this._router.events + .pipe( + filter((event) => event instanceof NavigationEnd), + map((event: NavigationEnd) => event as NavigationEnd) + ) + .subscribe((event) => { + if ( + event?.url.startsWith('/my-orcid') || + !ORCID_REGEXP.test(event?.url) + ) { + // Remove canonical url if the route is not public page + this.removeCanonicalUrl() + } + }) + } + + setCanonicalUrl(publicOrcid) { + // Just in case there is another canonical link already + this.removeCanonicalUrl() + let canonicalUrl = + 'https:' + + environment.BASE_URL + + (environment.BASE_URL.endsWith('/') ? publicOrcid : '/' + publicOrcid) + let link: HTMLLinkElement = this.doc.createElement('link') + + console.log( + '__________________________ canonical url __________________________' + ) + console.log(environment.BASE_URL) + console.log(canonicalUrl) + + link.setAttribute('rel', 'canonical') + link.setAttribute('href', canonicalUrl) + this.doc.head.appendChild(link) + } + removeCanonicalUrl() { + this.doc.head.querySelectorAll('link').forEach((link) => { + let attributeRel = link.getAttribute('rel') + if (attributeRel && attributeRel == 'canonical') { + link.parentNode.removeChild(link) + } + }) + } +} diff --git a/src/app/record/pages/my-orcid/my-orcid.component.ts b/src/app/record/pages/my-orcid/my-orcid.component.ts index 9a44448017..e708201277 100644 --- a/src/app/record/pages/my-orcid/my-orcid.component.ts +++ b/src/app/record/pages/my-orcid/my-orcid.component.ts @@ -23,7 +23,8 @@ import { HelpHeroService } from 'src/app/core/help-hero/help-hero.service' import { ScriptService } from '../../../core/crazy-egg/script.service' import { DOCUMENT } from '@angular/common' import { environment } from 'src/environments/environment' -import { filter, map} from 'rxjs/operators' +import { filter, map } from 'rxjs/operators' +import { CanonocalUrlService } from 'src/app/core/canonocal-url/canonocal-url.service' @Component({ selector: 'app-my-orcid', @@ -84,7 +85,8 @@ export class MyOrcidComponent implements OnInit, OnDestroy { private _togglz: TogglzService, private _scriptService: ScriptService, private _changeDetectorRef: ChangeDetectorRef, - @Inject(DOCUMENT) private doc: any + @Inject(DOCUMENT) private doc: any, + private _canonocalUrlService: CanonocalUrlService ) {} private checkIfThisIsAPublicOrcid() { @@ -110,24 +112,10 @@ export class MyOrcidComponent implements OnInit, OnDestroy { ngOnInit(): void { this.checkIfThisIsAPublicOrcid() this.affiliations = 0 - - // Set the canonical URL only on public pages - if(this.publicOrcid) { - this.setCanonicalUrl(); - } - this._router.events.pipe( - filter((event) => event instanceof NavigationEnd), - map((event: NavigationEnd) => event as NavigationEnd) - ).subscribe((event) => { - if(ORCID_REGEXP.test(event?.url)) { - // Set the canonical url on public pages - this.setCanonicalUrl(); - } else { - // Verify the canonical url is not set on other pages - this.removeCanonicalUrl(); - } - }); + if (this.publicOrcid) { + this._canonocalUrlService.setCanonicalUrl(this.publicOrcid) + } // Remove fragment temporally, to adding back when items have loaded this.route.fragment.pipe(take(1)).subscribe((fragment) => { @@ -171,7 +159,7 @@ export class MyOrcidComponent implements OnInit, OnDestroy { } this.userNotFound = userRecord?.userInfo?.USER_NOT_FOUND - this.userRecord = userRecord + this.userRecord = userRecord if (!this.publicOrcid && userRecord?.userInfo) { this.setMyOrcidIdQueryParameter() @@ -316,22 +304,12 @@ export class MyOrcidComponent implements OnInit, OnDestroy { this.loadingUserRecord = !!missingValues.length } - setCanonicalUrl() { - // Just in case there is another canonical link already - this.removeCanonicalUrl(); - let canonicalUrl = 'https:' + environment.BASE_URL + (environment.BASE_URL.endsWith('/') ? this.publicOrcid : '/' + this.publicOrcid) - let link: HTMLLinkElement = this.doc.createElement('link'); - link.setAttribute('rel', 'canonical'); - link.setAttribute('href', canonicalUrl); - this.doc.head.appendChild(link); - } - removeCanonicalUrl() { - this.doc.head.querySelectorAll("link").forEach(link => { + this.doc.head.querySelectorAll('link').forEach((link) => { let attributeRel = link.getAttribute('rel') - if(attributeRel && attributeRel == 'canonical') { - link.parentNode.removeChild(link); + if (attributeRel && attributeRel == 'canonical') { + link.parentNode.removeChild(link) } - }) + }) } } From 13245bed8e6aba8331f0e562ba818fba62b9062b Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Date: Mon, 4 Sep 2023 14:53:16 -0600 Subject: [PATCH 6/8] remove logs --- src/app/app.module.ts | 2 -- src/app/core/canonocal-url/canonocal-url.service.ts | 6 ------ 2 files changed, 8 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f3703ec8d1..ac81014fa8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -44,8 +44,6 @@ export class AppModule { private initializeApp() { environment.BASE_URL = this.getCurrentDomain() - - console.log('>>>>>>>>>>>>> ', environment.BASE_URL) } getCurrentDomain() { diff --git a/src/app/core/canonocal-url/canonocal-url.service.ts b/src/app/core/canonocal-url/canonocal-url.service.ts index 76355115a8..02aa2f326f 100644 --- a/src/app/core/canonocal-url/canonocal-url.service.ts +++ b/src/app/core/canonocal-url/canonocal-url.service.ts @@ -39,12 +39,6 @@ export class CanonocalUrlService { (environment.BASE_URL.endsWith('/') ? publicOrcid : '/' + publicOrcid) let link: HTMLLinkElement = this.doc.createElement('link') - console.log( - '__________________________ canonical url __________________________' - ) - console.log(environment.BASE_URL) - console.log(canonicalUrl) - link.setAttribute('rel', 'canonical') link.setAttribute('href', canonicalUrl) this.doc.head.appendChild(link) From e119491b32920c2e236648d35714398d6ed00245 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Date: Mon, 4 Sep 2023 14:55:51 -0600 Subject: [PATCH 7/8] clean up --- src/app/app.module.ts | 2 +- src/app/core/canonocal-url/canonocal-url.service.ts | 2 +- src/app/record/pages/my-orcid/my-orcid.component.ts | 9 --------- 3 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ac81014fa8..ece0ffd47e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,7 +17,7 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http' @NgModule({ declarations: [AppComponent], imports: [ - BrowserModule.withServerTransition({ appId: 'serverApp' }), + BrowserModule, AppRoutingModule, CoreModule, BrowserAnimationsModule, diff --git a/src/app/core/canonocal-url/canonocal-url.service.ts b/src/app/core/canonocal-url/canonocal-url.service.ts index 02aa2f326f..ea3cc7102e 100644 --- a/src/app/core/canonocal-url/canonocal-url.service.ts +++ b/src/app/core/canonocal-url/canonocal-url.service.ts @@ -13,7 +13,7 @@ export class CanonocalUrlService { this.init() } - init() { + private init() { this._router.events .pipe( filter((event) => event instanceof NavigationEnd), diff --git a/src/app/record/pages/my-orcid/my-orcid.component.ts b/src/app/record/pages/my-orcid/my-orcid.component.ts index e708201277..ca676582f5 100644 --- a/src/app/record/pages/my-orcid/my-orcid.component.ts +++ b/src/app/record/pages/my-orcid/my-orcid.component.ts @@ -303,13 +303,4 @@ export class MyOrcidComponent implements OnInit, OnDestroy { }) this.loadingUserRecord = !!missingValues.length } - - removeCanonicalUrl() { - this.doc.head.querySelectorAll('link').forEach((link) => { - let attributeRel = link.getAttribute('rel') - if (attributeRel && attributeRel == 'canonical') { - link.parentNode.removeChild(link) - } - }) - } } From f98c15145d13d2eb4af499a11a150a18a33ef6cf Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Date: Mon, 4 Sep 2023 14:57:45 -0600 Subject: [PATCH 8/8] clean up --- src/app/record/pages/my-orcid/my-orcid.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/record/pages/my-orcid/my-orcid.component.ts b/src/app/record/pages/my-orcid/my-orcid.component.ts index ca676582f5..df00ce5585 100644 --- a/src/app/record/pages/my-orcid/my-orcid.component.ts +++ b/src/app/record/pages/my-orcid/my-orcid.component.ts @@ -84,8 +84,6 @@ export class MyOrcidComponent implements OnInit, OnDestroy { @Inject(WINDOW) private window: Window, private _togglz: TogglzService, private _scriptService: ScriptService, - private _changeDetectorRef: ChangeDetectorRef, - @Inject(DOCUMENT) private doc: any, private _canonocalUrlService: CanonocalUrlService ) {}