adding footer component

apps/agora/app/src/app/app.component.html

@@ -1,3 +1,3 @@
-<div class="container">
-  <router-outlet></router-outlet>
-</div>
+<!-- <agora-header></agora-header> -->
+<router-outlet></router-outlet>
+<agora-footer></agora-footer>

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;
+    }
+  }
 }

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: '**',

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;

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');
   }
 }

libs/agora/not-found/src/lib/not-found.component.html

@@ -30,5 +30,3 @@ <h4>Wiki page fetched with Synapse API Client for Angular</h4>
     >
   </div>
 </main>
-
-<agora-footer [appVersion]="appVersion" [apiDocsUrl]="apiDocsUrl" />

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';

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';

libs/agora/ui/src/lib/footer/footer.component.html

@@ -1,39 +1,23 @@
-<footer class="mat-typography">
-  <div class="row">
-    <div class="col-8 about-oc">
-      <img class="logo" src="/agora-assets/images/agora-color.svg" alt="Agora logo" />
-      <ul class="footer-link-group">
-        <li><a routerLink="/about">About</a></li>
-        <li><a routerLink="/team">Meet Our Team</a></li>
-        <li>
-          <a
-            [href]="apiDocsUrl"
-            title="Interactive documentation for OC API"
-            rel="noopener noreferrer"
-            target="_blank"
-            >API Docs</a
-          >
-        </li>
-        <li>
-          <a
-            href="https://github.com/Sage-Bionetworks/sage-monorepo/issues/new/choose"
-            title="Share feedback about the OC app"
-            rel="noopener noreferrer"
-            target="_blank"
-            >Submit a Feature/Bug</a
-          >
-        </li>
-      </ul>
-    </div>
-    <div class="col-4 app-info">
-      <ul>
-        <li>App version: {{ appVersion }}</li>
-      </ul>
-    </div>
+<footer>
+  <div class="footer-nav" *ngIf="navItems.length">
+    <ul>
+      <li class="footer-logo">
+        <a routerLink="/">
+          <img [src]="footerLogoPath" alt="footer logo" />
+        </a>
+      </li>
+      <li *ngFor="let item of navItems">
+        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" routerLinkActive="active"
+          ><span>{{ item.label }}</span></a
+        >
+        <a *ngIf="item.url" [attr.href]="item.url" [attr.target]="item.target"
+          ><span>{{ item.label }}</span></a
+        >
+      </li>
+    </ul>
   </div>
-  <div class="footer-bottom">
-    <span class="footer-links">
-      <a href="https://www.sagebionetworks.org">Powered by Sage Bionetworks</a>
-    </span>
+  <div class="footer-metas" *ngIf="dataVersion$ | async as dataVersion">
+    <div class="site-version">Site Version {{ getSiteVersion() }}</div>
+    <div class="data-version">Data Version {{ getDataVersion(dataVersion) }}</div>
   </div>
 </footer>

libs/agora/ui/src/lib/footer/footer.component.scss

@@ -1,71 +1,87 @@
-@use 'libs/agora/styles/src/lib/constants';
+/* stylelint-disable plugin/no-unsupported-browser-features */
+
+@import 'libs/agora/styles/src/lib/constants';
+@import 'libs/agora/styles/src/lib/mixins';
 
 footer {
-  width: 100%;
-  height: constants.$footer-height;
-  position: relative;
-  padding: 42px 52px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   box-sizing: border-box;
-}
-.footer-link-group {
-  width: 420px;
-  height: 30px;
-  padding: 0;
-  display: flex;
-  justify-content: space-between;
-  list-style: none;
-}
-.footer-link-group li {
-  flex: 0 0 auto;
-}
-.app-info {
-  text-align: right;
-  align-self: center;
-}
-.app-info ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-.footer-bottom {
-  bottom: 0;
-  left: 0px;
-  width: 100%;
-  height: 70px;
   display: flex;
-  position: absolute;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-}
-.footer-links,
-.footer-links a {
-  text-decoration: none;
-}
-.footer-links a:hover {
-  text-decoration: underline;
-}
-.logo {
-  height: 56px;
-}
+  justify-content: space-between;
+  background-color: var(--color-primary);
+  font-weight: 300;
+  padding: var(--spacing-md);
 
-@media only screen and (max-width: constants.$md-breakpoint) {
-  footer {
-    height: 410px;
-  }
-  .about-oc,
-  .app-info,
-  .footer-link-group {
-    width: 100%;
-    text-align: center;
-    justify-content: space-around;
-  }
-  .footer-link-group li {
-    flex: 1;
+  .footer-nav {
+    ul {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      list-style: none;
+      gap: var(--spacing-xl);
+      padding: 0;
+      margin: 0;
+
+      @include respond-to('small') {
+        justify-content: flex-start;
+      }
+
+      > :first-child {
+        display: none;
+
+        @include respond-to('small') {
+          display: block;
+        }
+      }
+
+      li {
+        &:first-child a {
+          line-height: 0;
+        }
+
+        a {
+          display: block;
+        }
+      }
+    }
+
+    a {
+      color: var(--color-gray-100);
+      font-size: var(--font-size-md);
+      text-decoration: none;
+
+      &.active,
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
-  .app-info {
-    margin-top: 45px;
+
+  .footer-metas {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: stretch;
+
+    @include respond-to('ex-small') {
+      margin: 10px 0;
+    }
+
+    @include respond-to('small') {
+      margin: 10px 0;
+    }
+
+    div {
+      display: flex;
+      flex-direction: row;
+      gap: var(--spacing-sm);
+      font-size: var(--font-size-xs);
+      color: var(--color-gray-100);
+    }
+
+    .site-version {
+      margin-right: 50px;
+    }
   }
 }