Feat: SEO improvements

src/app/app.component.ts

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

src/app/components/nav-bar/nav-bar.component.html

@@ -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>

src/app/components/tab-bar/tab-bar.component.ts

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

src/index.html

@@ -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>

src/site.ts

@@ -0,0 +1 @@
+export const SITE_URL = 'https://sfucsss.org';

src/styles.scss

@@ -1,6 +1,31 @@
 /* You can add global styles to this file, and also import other style files */
 @use 'globals';
 
+/* Fonts are meant to work with the following browsers: Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+@font-face {
+  font-display: swap;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/montserrat-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/fira-code-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/inter-regular.woff2') format('woff2');
+}
+
 html {
   scroll-behavior: smooth;
 }

src/ui/csss-code/_theme.scss

@@ -2,18 +2,18 @@
 // $bg1: #333333; // activity bar
 // $bg3: #252526; // tabs bar, file explorer
 
-$bg0: #37373d; // file explorer hover
-$bg1: #111111; // activity bar
-$bg2: #2d2d2d; // unfocused tabs
-$bg3: #111111; // tabs bar, file explorer
-$bg4: #333333; // code background, focused tabs
-$bg5: #151515; // logo
-$icon: #adadad; // activity bar icons
-$code-text: #909090; // landing page text on the code section
-$accent: #3b7765; // status bar
-$outline: #1e1e1e; // outline of the menu/tabs-bar
+$bg0: oklch(33.91% 0.01 285.83); // file explorer hover
+$bg1: oklch(17.76% 0 0); // activity bar
+$bg2: oklch(29.72% 0 0); // unfocused tabs
+$bg3: oklch(17.76% 0 0); // tabs bar, file explorer
+$bg4: oklch(32.11% 0 0); // code background, focused tabs
+$bg5: oklch(19.57% 0 0); // logo
+$accent: oklch(52.33% 0.069 171.72); // status bar
+$accent1: oklch(44.61% 0.114 150.28);
+$accent2: oklch(63.5% 0.159 152.37);
+$accent3: oklch(70.1% 0.119 185deg); //
+$accent4: oklch(88.3% 0.1 146deg); //
+$icon: oklch(74.7% 0 0deg); //
+$code-text: oklch(65.3% 0 0deg); // landing page text
+$outline: oklch(23.6% 0 0deg); // outline
 $hov-glow: drop-shadow(0 0 4px rgba(255, 255, 200, 0.8)); // apply to a `filter`
-$accent1: #116530;
-$accent2: #18a558;
-$accent3: #21b6a8;
-$accent4: #acebb1;

src/ui/csss-code/list/list-item/list-item.component.html

@@ -1,3 +1 @@
-<li [ariaDisabled]="entry().isDisabled" [style.paddingLeft.em]="0.5 + depth() * 1.5">
-  <ng-content></ng-content>
-</li>
+<ng-content></ng-content>

src/ui/csss-code/list/list-item/list-item.component.ts

@@ -9,11 +9,15 @@ export interface CodeListItem<T extends CodeListItem<T>> {
 }
 
 @Component({
-  selector: 'code-list-item',
+  selector: '[code-list-item]',
   imports: [],
   templateUrl: './list-item.component.html',
   styleUrl: './list-item.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.aria-disabled]': 'entry().isDisabled',
+    '[style.paddingLeft.em]': '0.5 + depth() * 1.5'
+  }
 })
 export class CodeListItemComponent<T extends CodeListItem<T>> {
   /**