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 @@
-