Feat: SEO improvements (#250)

Description:
Various SEO improvements, based on best SEO practices and Lighthouse suggestions. One suggestion ignored for stylistic reasons.

Features:
* Added canonical URLs and OpenGraph links
* Fonts are now hosted on the server
* Removed incorrect aria descriptor on tab bar
* Added an aria label to the home button
* Updated main theme colours to use `oklch` instead of `hex`
* Navbar items are now list item elements inside the navbar list element
* Added a background colour to the main HTML page to remove the flashbang

Author: jbriones1

public/fonts/fira-code-regular.woff2

@@ -1,10 +1,12 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { Meta } from '@angular/platform-browser';
 import { ActivatedRoute, Data, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { NavBarComponent } from 'components/nav-bar/nav-bar.component';
 import { TabBarComponent } from 'components/tab-bar/tab-bar.component';
 import { of } from 'rxjs';
 import { filter, map, mergeMap } from 'rxjs/operators';
+import { SITE_URL } from 'site';
 
 const DEFAULT_DESCRIPTION =
   "Site dedicated to and maintained by SFU's Computing Science Student Society";
@@ -20,8 +22,10 @@ export class AppComponent implements OnInit {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private metaService = inject(Meta);
+  private platformId = inject(PLATFORM_ID);
 
   ngOnInit(): void {
+    // Updates the meta description tag and robots tag based on the route's data
     this.router.events
       .pipe(
         filter(event => event instanceof NavigationEnd),
@@ -49,6 +53,18 @@ export class AppComponent implements OnInit {
           name: 'description',
           content: desc
         });
+
+        // Canonical URL
+        if (isPlatformBrowser(this.platformId)) {
+          const canonicalLink = `${SITE_URL}${this.router.url}`;
+          let link = document.querySelector("link[rel='canonical']");
+          if (!link) {
+            link = document.createElement('link');
+            link.setAttribute('rel', 'canonical');
+            document.head.appendChild(link);
+          }
+          link.setAttribute('href', canonicalLink);
+        }
       });
   }
 }

public/fonts/inter-regular.woff2

@@ -1,5 +1,5 @@
 <aside class="activity-list" #activityList>
-  <a class="<activity-list__home></activity-list__home> clickable" routerLink="/"
+  <a class="activity-list__home clickable" routerLink="/" aria-label="Go to home"
     ><fa-icon class="csss-logo" [icon]="csssIcon" size="2x"
   /></a>
   <div
@@ -17,7 +17,7 @@ <h1 class="navbar__heading">SFU CSSS</h1>
   <nav>
     <ul class="navbar__list">
       @for (entry of navEntries(); track entry.key) {
-        <code-list-item [entry]="entry">
+        <li code-list-item [entry]="entry">
           <button class="nav-entry" type="button" (click)="toggleDirectory(entry.key)">
             <fa-icon
               class="nav-entry__icon"
@@ -26,37 +26,40 @@ <h1 class="navbar__heading">SFU CSSS</h1>
             />
             <span>{{ entry.label }}</span>
           </button>
-        </code-list-item>
+        </li>
         @if (entry.isOpen && entry.children?.length) {
-          <ul class="navbar__list">
-            @for (subItem of entry.children; track subItem.key) {
-              <code-list-item
-                [entry]="subItem"
-                [depth]="1"
-                routerLinkActive="active"
-                [routerLinkActiveOptions]="{ exact: true }"
-              >
-                @if (subItem.route) {
-                  <!-- For routes on the site -->
-                  <a
-                    class="nav-entry"
-                    (click)="navigate(subItem)"
-                    [routerLink]="subItem.route"
-                    [class.clickable]="!subItem.isDisabled"
-                  >
-                    <fa-icon class="nav-entry__icon" [icon]="subItem.icon" [fixedWidth]="true" />
-                    <span>{{ subItem.label }}</span>
-                  </a>
-                } @else {
-                  <!-- For external links -->
-                  <a class="nav-entry clickable" [href]="subItem.href" target="_blank">
-                    <fa-icon class="nav-entry__icon" [icon]="subItem.icon" [fixedWidth]="true" />
-                    <span>{{ subItem.label }}</span>
-                  </a>
-                }
-              </code-list-item>
-            }
-          </ul>
+          <li>
+            <ul class="navbar__list">
+              @for (subItem of entry.children; track subItem.key) {
+                <li
+                  code-list-item
+                  [entry]="subItem"
+                  [depth]="1"
+                  routerLinkActive="active"
+                  [routerLinkActiveOptions]="{ exact: true }"
+                >
+                  @if (subItem.route) {
+                    <!-- For routes on the site -->
+                    <a
+                      class="nav-entry"
+                      (click)="navigate(subItem)"
+                      [routerLink]="subItem.route"
+                      [class.clickable]="!subItem.isDisabled"
+                    >
+                      <fa-icon class="nav-entry__icon" [icon]="subItem.icon" [fixedWidth]="true" />
+                      <span>{{ subItem.label }}</span>
+                    </a>
+                  } @else {
+                    <!-- For external links -->
+                    <a class="nav-entry clickable" [href]="subItem.href" target="_blank">
+                      <fa-icon class="nav-entry__icon" [icon]="subItem.icon" [fixedWidth]="true" />
+                      <span>{{ subItem.label }}</span>
+                    </a>
+                  }
+                </li>
+              }
+            </ul>
+          </li>
         }
       }
     </ul>

public/fonts/montserrat-regular.woff2

@@ -24,10 +24,6 @@ export interface TabBarItem {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TabBarComponent {
-  @HostBinding('attr.aria-role') get ariaRole(): string {
-    return 'tablist';
-  }
-
   @HostBinding('style.height')
   get height(): string {
     return this.isHidden() ? '0px' : STRUCTURE_MAP['tab-bar-h'];

public/static/fonts/DarumadropOne-Regular.ttf

@@ -10,13 +10,18 @@
       content="Site dedicated to and maintained by SFU's Computing Science Student Society"
     />
     <link rel="icon" type="image/x-icon" href="static/icons/favicon_colourful.svg" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Questrial&display=swap"
-      rel="stylesheet"
-    />
+    <link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin />
     <meta name="google-site-verification" content="cqWcS1zaOJ2pgBionnStXvsaOEvnyCylR_lZGVaKgyk" />
+    <meta property="og:title" content="SFU Computing Science Student Society" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://sfucsss.org" />
+    <meta property="og:image" content="https://sfucsss.org/static/icons/favicon_colourful.svg" />
+    <style>
+      body {
+        /* This is defined in `src/ui/csss-code/_theme.scss` as `$bg1` and `$bg3` */
+        background-color: oklch(17.76% 0 0);
+      }
+    </style>
   </head>
 
   <body>