it all builds and runs and looks correct with these changes

adamjohnwright · adamjohnwright · commit 003446265d20 · 2026-03-18T15:16:17.000-04:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -22,7 +22,7 @@ jobs:
           node-version: 20
           cache: npm
 
-      - name: Determine version and base href
+      - name: Determine version
         id: version
         run: |
           PROD_VERSION=$(curl -sf https://reactome.org/ContentService/data/database/version)
@@ -42,7 +42,7 @@ jobs:
       - name: Build
         run: |
           npx ng build reactome-cytoscape-style
-          npx ng build reactome --configuration production --base-href /${{ steps.version.outputs.version }}/website/
+          npx ng build reactome --configuration production
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v4
diff --git a/projects/website-angular/src/app/home-page/home-latest-news/home-latest-news.component.html b/projects/website-angular/src/app/home-page/home-latest-news/home-latest-news.component.html
@@ -1,6 +1,6 @@
 <h1 class="news-title">Latest News</h1>
 <ul class="news-list">
     <li *ngFor="let article of newsList" class="news-list-option">
-        <a class="news-link" [href]="(navOptions['about']?.dropdownLinks?.['news']?.link || '/content/latest-news') + '/' + article.slug" >{{ formatD(article.date) }} - {{ article.title }}</a>
+        <a class="news-link" [routerLink]="(navOptions['about']?.dropdownLinks?.['news']?.link || '/about/news') + '/' + article.slug" >{{ formatD(article.date) }} - {{ article.title }}</a>
     </li>
 </ul>
diff --git a/projects/website-angular/src/app/home-page/home-latest-news/home-latest-news.component.ts b/projects/website-angular/src/app/home-page/home-latest-news/home-latest-news.component.ts
@@ -1,6 +1,7 @@
 import { Component, inject, Input, OnInit } from '@angular/core';
 import { ArticleIndexItem } from '../../../types/article';
 import { NgForOf, NgFor } from '@angular/common';
+import { RouterModule } from '@angular/router';
 import formatDate from '../../../utils/formatDate';
 import { ContentService } from '../../../services/content.service';
 import { mapNavOptions } from '../../../utils/nav-options-mapper';
@@ -9,7 +10,7 @@ import { NavOption } from '../../../types/link';
 @Component({
   selector: 'app-home-latest-news',
   standalone: true,
-  imports: [NgForOf, NgFor],
+  imports: [NgForOf, NgFor, RouterModule],
   templateUrl: './home-latest-news.component.html',
   styleUrl: './home-latest-news.component.scss'
 })
diff --git a/projects/website-angular/src/app/home-page/home-spotlight/home-spotlight.component.html b/projects/website-angular/src/app/home-page/home-spotlight/home-spotlight.component.html
@@ -1,6 +1,6 @@
 <h1 class="home-spotlight-title">Reactome Research Spotlight</h1>
 <span class="home-spotlight-text">{{ "[" + formatD(spotLightArticle.date) + "] " + spotLightArticle.title}}</span>
 <p class="home-spotlight-text" [innerHTML]="renderedContent"></p>
-<a [href]="(navOptions['content']?.dropdownLinks?.['reactome-research-spotlight']?.link || '/content/reactome-research-spotlight') + '/' + spotLightArticle.slug" class="home-spotlight-link">
+<a [routerLink]="(navOptions['content']?.dropdownLinks?.['reactome-research-spotlight']?.link || '/content/reactome-research-spotlight') + '/' + spotLightArticle.slug" class="home-spotlight-link">
     <app-button style="width: fit-content; height: min-content; padding: 16px;">Learn More</app-button>
 </a>
diff --git a/projects/website-angular/src/app/home-page/home-spotlight/home-spotlight.component.ts b/projects/website-angular/src/app/home-page/home-spotlight/home-spotlight.component.ts
@@ -1,4 +1,5 @@
 import { Component, inject, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { ButtonComponent } from "../../reactome-components/button/button.component";
 import { mapNavOptions } from '../../../utils/nav-options-mapper';
 import { ArticleIndexItem } from '../../../types/article';
@@ -12,7 +13,7 @@ import { NavOption } from '../../../types/link';
 @Component({
   selector: 'app-home-spotlight',
   standalone: true,
-  imports: [ButtonComponent],
+  imports: [RouterModule, ButtonComponent],
   templateUrl: './home-spotlight.component.html',
   styleUrl: './home-spotlight.component.scss'
 })
diff --git a/projects/website-angular/src/app/navigation-bar/navigation-bar.component.html b/projects/website-angular/src/app/navigation-bar/navigation-bar.component.html
@@ -1,6 +1,6 @@
 <header class="navbar-header">
   <div class="navbar-logo">
-    <a href="/" class="logo-link">
+    <a routerLink="/" class="logo-link">
       <img
         src="assets/logo/logo.png"
         alt="Reactome Pathway Database"
@@ -23,6 +23,28 @@
         <ng-container *ngIf="asNavOption(option.value) as navOption">
           <div class="nav-link-wrapper">
             <a
+              *ngIf="!navOption.external"
+              [routerLink]="(windowWidth > 768 || navOption.label == 'Download') ? navOption.link : null"
+              class="nav-link"
+              [class.has-dropdown]="
+                navOption.dropdownLinks && (navOption.dropdownLinks | keyvalue:preserveOrder).length > 0
+              "
+            >
+              <mat-icon>
+                {{ navOption.icon }}
+              </mat-icon>
+              {{ navOption.label }}
+              <mat-icon
+                *ngIf="
+                  navOption.dropdownLinks && (navOption.dropdownLinks | keyvalue:preserveOrder).length > 0
+                "
+                class="dropdown-arrow"
+              >
+                  keyboard_arrow_down
+              </mat-icon>
+            </a>
+            <a
+              *ngIf="navOption.external"
               [attr.href]="(windowWidth > 768 || navOption.label == 'Download') ? navOption.link : null"
               class="nav-link"
               [class.has-dropdown]="
@@ -80,6 +102,15 @@
           "
         >
           <a
+            *ngIf="!navLink.external"
+            [routerLink]="navLink.link"
+            class="dropdown-link"
+            [class.nested-dropdown-link]="level > 0"
+          >
+            {{ navLink.label }}
+          </a>
+          <a
+            *ngIf="navLink.external"
             [href]="navLink.link"
             class="dropdown-link"
             [class.nested-dropdown-link]="level > 0"
diff --git a/projects/website-angular/src/app/navigation-bar/navigation-bar.component.ts b/projects/website-angular/src/app/navigation-bar/navigation-bar.component.ts
@@ -43,12 +43,36 @@ export class NavigationBarComponent implements OnInit, AfterViewInit {
   }
 
   loadNavOptions() {
-    // Load nav options from the JSON file
-    import('../../config/nav-options.json').then((data) => {
-      this.navOptions = mapNavOptions(data.default);
+    Promise.all([
+      import('../../config/nav-options.json'),
+      import('../../config/config.json')
+    ]).then(([navData, configData]) => {
+      this.navOptions = mapNavOptions(navData.default);
+      this.resolveExternalLinks(configData.default.baseUrl);
     });
   }
 
+  /**
+   * Prepend baseUrl to external links so they resolve to the correct domain
+   */
+  private resolveExternalLinks(baseUrl: string) {
+    const resolve = (links: Record<string, NavLink> | undefined) => {
+      if (!links) return;
+      for (const link of Object.values(links)) {
+        if (link.external) {
+          link.link = baseUrl + link.link;
+        }
+        resolve(link.dropdownLinks);
+      }
+    };
+    for (const option of Object.values(this.navOptions)) {
+      if (option.external) {
+        option.link = baseUrl + option.link;
+      }
+      resolve(option.dropdownLinks);
+    }
+  }
+
   toggleHamburgerMenu() {
     this.activeHamburgerMenu = !this.activeHamburgerMenu;
   }
diff --git a/projects/website-angular/src/config/nav-options.json b/projects/website-angular/src/config/nav-options.json
@@ -279,11 +279,13 @@
         },
         "analysis-service": {
             "label": "Analysis Service",
-            "link": "/AnalysisService"
+            "link": "/AnalysisService",
+            "external": true
         },
         "content-service": {
             "label": "Content Service",
-            "link": "/ContentService"
+            "link": "/ContentService",
+            "external": true
         },
         "reactome-fiviz": {
             "label": "ReactomeFIViz",
diff --git a/projects/website-angular/src/services/stats.service.ts b/projects/website-angular/src/services/stats.service.ts
@@ -64,9 +64,7 @@ export class StatsService {
       return of(defaultStats);
     }
 
-    // In the browser, use the /reactome proxy path to avoid CORS.
-    // In SSR (server.ts), requests to /reactome/* are proxied server-side.
-    const baseUrl = this.isBrowser ? '/reactome' : await this.getDownloadBaseUrl();
+    const baseUrl = await this.getDownloadBaseUrl();
     const version = await this.getVersion();
 
     const url = `${baseUrl}/${version}/stats/summary_stats.json`;
diff --git a/projects/website-angular/src/types/link.ts b/projects/website-angular/src/types/link.ts
@@ -4,6 +4,7 @@ export interface ExternalLink {
 }
 
 export interface NavLink extends ExternalLink {
+  external?: boolean;
   dropdownLinks?: Record<string, NavLink>;
 }
 
diff --git a/projects/website-angular/src/utils/nav-options-mapper.ts b/projects/website-angular/src/utils/nav-options-mapper.ts
@@ -14,11 +14,12 @@ function mapDropdownLinks(raw: any): Record<string, NavLink> | undefined {
       mapped[key] = {
         label: value.label || '',
         link: value.link || '',
+        external: value.external || false,
         dropdownLinks: mapDropdownLinks(value['dropdown-links'])
       };
     }
   });
-  
+
   return Object.keys(mapped).length > 0 ? mapped : undefined;
 }
 
@@ -27,13 +28,14 @@ function mapDropdownLinks(raw: any): Record<string, NavLink> | undefined {
  */
 export function mapNavOptions(raw: Record<string, any>): Record<string, NavOption> {
   const mapped: Record<string, NavOption> = {};
-  
+
   Object.entries(raw).forEach(([key, value]: [string, any]) => {
     if (value && typeof value === 'object') {
       mapped[key] = {
         label: value.label || '',
         link: value.link || '',
         icon: value.icon,
+        external: value.external || false,
         dropdownLinks: mapDropdownLinks(value['dropdown-links'])
       };
     }

Original file line number	Diff line number	Diff line change
`@@ -64,9 +64,7 @@ export class StatsService {`
`64`	`64`	`return of(defaultStats);`
`65`	`65`	`}`
`66`	`66`
`67`		`- // In the browser, use the /reactome proxy path to avoid CORS.`
`68`		`- // In SSR (server.ts), requests to /reactome/* are proxied server-side.`
`69`		`- const baseUrl = this.isBrowser ? '/reactome' : await this.getDownloadBaseUrl();`
	`67`	`+ const baseUrl = await this.getDownloadBaseUrl();`
`70`	`68`	`const version = await this.getVersion();`
`71`	`69`
`72`	`70`	const url = `${baseUrl}/${version}/stats/summary_stats.json`;
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@ export interface ExternalLink {`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`export interface NavLink extends ExternalLink {`
	`7`	`+ external?: boolean;`
`7`	`8`	`dropdownLinks?: Record<string, NavLink>;`
`8`	`9`	`}`
`9`	`10`