From a05db51baf10692f4480d21c0388103a075ff07c Mon Sep 17 00:00:00 2001 From: sagely1 <114952739+sagely1@users.noreply.github.com> Date: Thu, 26 Sep 2024 17:14:46 +0000 Subject: [PATCH] adding footer component --- apps/agora/app/src/app/app.component.html | 6 +- apps/agora/app/src/app/app.component.ts | 40 ++++- apps/agora/app/src/app/app.routes.ts | 18 +++ libs/agora/config/src/lib/app.config.ts | 1 + libs/agora/home/src/lib/home.component.ts | 23 ++- .../src/lib/not-found.component.html | 2 - libs/agora/styles/src/_index.scss | 3 +- libs/agora/ui/src/index.ts | 3 + .../ui/src/lib/footer/footer.component.html | 56 +++---- .../ui/src/lib/footer/footer.component.scss | 140 ++++++++++-------- .../ui/src/lib/footer/footer.component.ts | 50 ++++++- libs/agora/util/src/index.ts | 1 + libs/agora/util/src/lib/app-helpers.spec.ts | 9 ++ libs/agora/util/src/lib/app-helpers.ts | 3 + libs/agora/util/src/lib/path-sanitizer.ts | 13 ++ 15 files changed, 244 insertions(+), 124 deletions(-) create mode 100644 libs/agora/util/src/lib/app-helpers.spec.ts create mode 100644 libs/agora/util/src/lib/app-helpers.ts create mode 100644 libs/agora/util/src/lib/path-sanitizer.ts diff --git a/apps/agora/app/src/app/app.component.html b/apps/agora/app/src/app/app.component.html index ec0f9fa004..c4921b6488 100644 --- a/apps/agora/app/src/app/app.component.html +++ b/apps/agora/app/src/app/app.component.html @@ -1,3 +1,3 @@ -
- -
+ + + diff --git a/apps/agora/app/src/app/app.component.ts b/apps/agora/app/src/app/app.component.ts index 1c7b079e5b..ad9f4a242a 100644 --- a/apps/agora/app/src/app/app.component.ts +++ b/apps/agora/app/src/app/app.component.ts @@ -1,6 +1,8 @@ -import { Component } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { Component, inject, OnInit } from '@angular/core'; +import { Meta, Title } from '@angular/platform-browser'; +import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router'; import { FooterComponent } from '@sagebionetworks/agora/ui'; +import { filter } from 'rxjs'; @Component({ standalone: true, @@ -9,6 +11,36 @@ import { FooterComponent } from '@sagebionetworks/agora/ui'; templateUrl: './app.component.html', styleUrl: './app.component.scss', }) -export class AppComponent { - title = 'agora-app'; +export class AppComponent implements OnInit { + router = inject(Router); + activatedRoute = inject(ActivatedRoute); + titleService = inject(Title); + metaService = inject(Meta); + + ngOnInit(): void { + this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => { + const route = this.getChildRoute(this.activatedRoute); + route.data.subscribe((data: any) => { + if (data.title) { + this.titleService.setTitle(data.title); + } else { + this.titleService.setTitle('Agora'); + } + + if (data.description) { + this.metaService.updateTag({ name: 'description', content: data.description }); + } else { + this.metaService.removeTag("name='description'"); + } + }); + }); + } + + getChildRoute(activatedRoute: ActivatedRoute): ActivatedRoute { + if (activatedRoute.firstChild) { + return this.getChildRoute(activatedRoute.firstChild); + } else { + return activatedRoute; + } + } } diff --git a/apps/agora/app/src/app/app.routes.ts b/apps/agora/app/src/app/app.routes.ts index dca237263d..d29df3b851 100644 --- a/apps/agora/app/src/app/app.routes.ts +++ b/apps/agora/app/src/app/app.routes.ts @@ -13,18 +13,36 @@ export const routes: Route[] = [ { path: 'about', loadChildren: () => import('@sagebionetworks/agora/about').then((routes) => routes.routes), + data: { + title: 'About Agora', + description: + 'Agora is funded by the National Institute on Aging, and is developed and maintained by Sage Bionetworks.', + }, }, { path: 'news', loadChildren: () => import('@sagebionetworks/agora/news').then((routes) => routes.routes), + data: { + title: 'News | Agora Releases', + description: "See what's new in Agora, from new features to our latest data updates.", + }, }, { path: 'not-found', loadChildren: () => import('@sagebionetworks/agora/not-found').then((routes) => routes.routes), + data: { + title: 'Page not found', + description: '', + }, }, { path: 'teams', loadChildren: () => import('@sagebionetworks/agora/teams').then((routes) => routes.teamsRoutes), + data: { + title: 'Contributing Teams', + description: + 'Find information about the NIA-funded and community research teams that have contributed evidence to Agora.', + }, }, { path: '**', diff --git a/libs/agora/config/src/lib/app.config.ts b/libs/agora/config/src/lib/app.config.ts index 24d38a1822..4dd498a475 100644 --- a/libs/agora/config/src/lib/app.config.ts +++ b/libs/agora/config/src/lib/app.config.ts @@ -1,5 +1,6 @@ export interface AppConfig { appVersion: string; + dataVersion: string; csrApiUrl: string; isPlatformServer: boolean; ssrApiUrl: string; diff --git a/libs/agora/home/src/lib/home.component.ts b/libs/agora/home/src/lib/home.component.ts index 0bd4a59f12..7ae48d4f77 100644 --- a/libs/agora/home/src/lib/home.component.ts +++ b/libs/agora/home/src/lib/home.component.ts @@ -1,6 +1,7 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import { SafeUrl } from '@angular/platform-browser'; +import { PathSanitizer } from '@sagebionetworks/agora/util'; @Component({ selector: 'agora-home', @@ -18,26 +19,24 @@ export class HomeComponent { nominatedTargetsIconPath!: SafeUrl; arrowPath!: SafeUrl; - constructor(private sanitizer: DomSanitizer) { + constructor(private sanitizer: PathSanitizer) { this.loadBackgroundImages(); this.loadIcons(); } loadBackgroundImages() { - this.backgroundBox1Path = this.sanitize('/agora-assets/images/background1.svg'); - this.backgroundBox2Path = this.sanitize('/agora-assets/images/background2.svg'); - this.backgroundBox3Path = this.sanitize('/agora-assets/images/background3.svg'); + this.backgroundBox1Path = this.sanitizer.sanitize('/agora-assets/images/background1.svg'); + this.backgroundBox2Path = this.sanitizer.sanitize('/agora-assets/images/background2.svg'); + this.backgroundBox3Path = this.sanitizer.sanitize('/agora-assets/images/background3.svg'); } loadIcons() { - this.geneComparisonIconPath = this.sanitize('/agora-assets/images/gene-comparison-icon.svg'); - this.nominatedTargetsIconPath = this.sanitize( + this.geneComparisonIconPath = this.sanitizer.sanitize( + '/agora-assets/images/gene-comparison-icon.svg', + ); + this.nominatedTargetsIconPath = this.sanitizer.sanitize( '/agora-assets/images/nominated-targets-icon.svg', ); - this.arrowPath = this.sanitize('/agora-assets/images/card-arrow.svg'); - } - - sanitize(path: string) { - return this.sanitizer.bypassSecurityTrustUrl(path); + this.arrowPath = this.sanitizer.sanitize('/agora-assets/images/card-arrow.svg'); } } diff --git a/libs/agora/not-found/src/lib/not-found.component.html b/libs/agora/not-found/src/lib/not-found.component.html index 3eac5d2c4d..8cd8cac8a4 100644 --- a/libs/agora/not-found/src/lib/not-found.component.html +++ b/libs/agora/not-found/src/lib/not-found.component.html @@ -30,5 +30,3 @@

Wiki page fetched with Synapse API Client for Angular

> - - diff --git a/libs/agora/styles/src/_index.scss b/libs/agora/styles/src/_index.scss index 51638287de..3342ca3bf6 100644 --- a/libs/agora/styles/src/_index.scss +++ b/libs/agora/styles/src/_index.scss @@ -1,5 +1,6 @@ -@use 'libs/shared/typescript/styles/src/index'; +// @use 'libs/shared/typescript/styles/src/index'; @use './lib/constants'; @use './lib/general'; +@use './lib/mixins'; @use './lib/variables'; diff --git a/libs/agora/ui/src/index.ts b/libs/agora/ui/src/index.ts index 1f2df71139..ede95a862d 100644 --- a/libs/agora/ui/src/index.ts +++ b/libs/agora/ui/src/index.ts @@ -1,2 +1,5 @@ +// export * from './lib/header/header.component'; export * from './lib/footer/footer.component'; export * from './lib/loading-icon/loading-icon.component'; +// export * from './lib/modal-link/modal-link.component'; +// export * from './lib/svg-icon/svg-icon.component'; diff --git a/libs/agora/ui/src/lib/footer/footer.component.html b/libs/agora/ui/src/lib/footer/footer.component.html index c25df3da85..9588285ff0 100644 --- a/libs/agora/ui/src/lib/footer/footer.component.html +++ b/libs/agora/ui/src/lib/footer/footer.component.html @@ -1,39 +1,23 @@ -