Refactor: Multiple GUI updates (#176)

* closes #95: updated the CS department contact email
* updated the links to have a uniform colour and indicate if they're routing to something external
* moved fonts style variables to their own partial sass file
* updated multiple pages to use the new link style in their content
* updated the executive at large information on the Elections page
* Added router links to bring users to the proper route in the app

Author: jbriones1

src/app/app.routes.ts

@@ -1,6 +1,11 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from 'pages/home/home.component';
 
+/**
+ * Formats the title on the web browser's tab/window.
+ * @param pageTitle - Title of the page
+ * @returns Formatted page title.
+ */
 function makeTitle(pageTitle: string): string {
   return `${pageTitle} | CSSS`;
 }
@@ -50,5 +55,24 @@ export const routes: Routes = [
     title: makeTitle('Elections')
   },
   { path: '', component: HomeComponent, title: 'Computing Science Student Society' },
+  // 404 will go down there
   { path: '**', component: HomeComponent }
-];
+] as const;
+
+const BASE_ROUTES = routes.reduce((acc, route) => {
+  if (!route.path || route.path === '**') {
+    return acc;
+  }
+  acc.push(route.path);
+  return acc;
+}, [] as string[]);
+
+/**
+ * Gets the base route as a string.
+ *
+ * @param route - Route to get
+ * @returns The route if it exists or 404
+ */
+export function getBaseRoute(route: string): string {
+  return BASE_ROUTES.find(r => r === route) ?? '404';
+}

src/app/components/external-link/link.component.html

@@ -6,6 +6,7 @@ import {
   faRoadBarrier,
   faUpRightFromSquare
 } from '@fortawesome/free-solid-svg-icons';
+import { EXTERNAL_LINKS } from 'components/url/links.data';
 
 export interface NavItem extends CodeListItem<NavItem> {
   route?: string; // Internal route
@@ -129,7 +130,7 @@ export const NAVBAR_ENTRIES: NavItem[] = [
         key: 'documentation.constitution',
         label: 'Constitution',
         icon: faUpRightFromSquare,
-        href: 'https://github.com/CSSS/public-docs/tree/master/constitutions'
+        href: EXTERNAL_LINKS['constitution']
       },
       {
         key: 'documentation.policies',
@@ -141,7 +142,7 @@ export const NAVBAR_ENTRIES: NavItem[] = [
         key: 'documentation.sfss-minutes',
         label: 'SFSS Minutes',
         icon: faUpRightFromSquare,
-        href: 'https://sfss.ca/about/meeting-times-minutes/council/'
+        href: 'https://sfss.ca/about/meeting-times-minutes/council'
       }
     ]
   }

src/app/components/external-link/link.component.scss

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { capitalize } from 'utils/string-utils';
+import { CsssLink } from './links.data';
+
+@Component({
+  selector: 'cs-external-link',
+  imports: [FontAwesomeModule],
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export abstract class BaseLinkComponent<T extends CsssLink> {
+  /**
+   * The link that should be used from `links.ts`
+   */
+  key = input.required<T>();
+
+  /**
+   * Overrides the label that is displayed.
+   */
+  label = input<string>();
+
+  /**
+   * Label that is displayed in the element.
+   */
+  protected _label = computed(() => this.label() ?? capitalize(this.key()));
+
+  /**
+   * The href used to move the user to the external link/route.
+   */
+  protected abstract _href: Signal<string>;
+
+  protected externalLinkIcon = faUpRightFromSquare;
+}

src/app/components/external-link/link.component.ts

@@ -0,0 +1,3 @@
+<a class="csss-link" [href]="_href()" target="_blank">
+  {{ _label() }}
+</a>

src/app/components/external-link/links.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmailLinkComponent } from './email-link.component';
+
+describe('EmailLinkComponent', () => {
+  let component: EmailLinkComponent;
+  let fixture: ComponentFixture<EmailLinkComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EmailLinkComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EmailLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});