feat(agora): migrate Footer component and utils (AG-1548)

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,32 @@ 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) => {
+        this.titleService.setTitle(data.title || '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/services/.eslintrc.json

@@ -17,7 +17,7 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "modelAd",
+            "prefix": "agora",
             "style": "camelCase"
           }
         ],

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/teams/project.json

@@ -14,6 +14,12 @@
     },
     "lint": {
       "executor": "@nx/eslint:lint"
+    },
+    "lint-fix": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "fix": true
+      }
     }
   },
   "tags": ["type:feature", "scope:agora", "language:typescript"],

libs/agora/themes/src/_index.scss

@@ -1,7 +1,7 @@
 @use 'libs/agora/not-found/src/lib-theme' as agora-not-found;
-@use 'libs/agora/ui/src/lib-theme' as agora-ui;
+// @use 'libs/agora/ui/src/lib-theme' as agora-ui;
 
 @mixin theme($theme) {
   @include agora-not-found.theme($theme);
-  @include agora-ui.theme($theme);
+  // @include agora-ui.theme($theme);
 }

libs/agora/ui/project.json

@@ -14,6 +14,12 @@
     },
     "lint": {
       "executor": "@nx/eslint:lint"
+    },
+    "lint-fix": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "fix": true
+      }
     }
   },
   "tags": ["type:feature", "scope:agora", "language:typescript"],

libs/agora/ui/src/index.ts

@@ -1,2 +1,5 @@
-export * from './lib/footer/footer.component';
-export * from './lib/loading-icon/loading-icon.component';
+// export * from './lib/components/header/header.component';
+export * from './lib/components/footer/footer.component';
+export * from './lib/components/loading-icon/loading-icon.component';
+// export * from './lib/components/modal-link/modal-link.component';
+// export * from './lib/components/svg-icon/svg-icon.component';

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

@@ -0,0 +1,32 @@
+<footer>
+  @if (navItems.length > 0) {
+    <div class="footer-nav">
+      <ul>
+        <li class="footer-logo">
+          <a routerLink="/">
+            <img [src]="footerLogoPath" alt="footer logo" />
+          </a>
+        </li>
+        @for (item of navItems; track item.url) {
+          <li>
+            @if (item.routerLink) {
+              <a [routerLink]="item.routerLink" routerLinkActive="active"
+                ><span>{{ item.label }}</span></a
+              >
+            } @else if (item.url && item.target) {
+              <a [attr.href]="item.url" [attr.target]="item.target"
+                ><span>{{ item.label }}</span></a
+              >
+            } @else {
+              <span>{{ item.label }}</span>
+            }
+          </li>
+        }
+      </ul>
+    </div>
+  }
+  <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/components/footer/footer.component.scss

@@ -0,0 +1,87 @@
+/* stylelint-disable plugin/no-unsupported-browser-features */
+
+@import 'libs/agora/styles/src/lib/constants';
+@import 'libs/agora/styles/src/lib/mixins';
+
+footer {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-primary);
+  font-weight: 300;
+  padding: var(--spacing-md);
+
+  .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;
+      }
+    }
+  }
+
+  .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;
+    }
+  }
+}

libs/agora/ui/src/lib/components/footer/footer.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { Dataversion, DataversionService } from '@sagebionetworks/agora/api-client-angular';
+import { Observable } from 'rxjs';
+import { SafeUrl } from '@angular/platform-browser';
+import { PathSanitizer } from '@sagebionetworks/agora/util';
+import { ConfigService } from '@sagebionetworks/agora/config';
+import { NavigationLink } from '../../models/navigation-link';
+
+@Component({
+  selector: 'agora-footer',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+})
+export class FooterComponent implements OnInit {
+  footerLogoPath!: SafeUrl;
+  dataVersion$!: Observable<Dataversion>;
+
+  navItems: Array<NavigationLink> = [
+    {
+      label: 'About',
+      routerLink: ['about'],
+    },
+    {
+      label: 'Help',
+      url: 'https://help.adknowledgeportal.org/apd/Agora-Resources.2646671361.html',
+      target: '_blank',
+    },
+    {
+      label: 'Terms of Service',
+      url: 'https://s3.amazonaws.com/static.synapse.org/governance/SageBionetworksSynapseTermsandConditionsofUse.pdf?v=5',
+      target: '_blank',
+    },
+  ];
+
+  constructor(
+    private readonly configService: ConfigService,
+    private dataVersionService: DataversionService,
+    private sanitizer: PathSanitizer,
+  ) {
+    this.footerLogoPath = this.sanitizer.sanitize('/agora-assets/images/footer-logo.svg');
+  }
+
+  ngOnInit(): void {
+    this.dataVersion$ = this.dataVersionService.getDataversion();
+  }
+
+  getSiteVersion() {
+    return this.configService.config.appVersion;
+  }
+
+  getDataVersion(dataVersion: Dataversion) {
+    return `${dataVersion.data_file}-${dataVersion.data_version}`;
+  }
+}