Feature(SEO): Dynamic meta tag support (#200)

Description:
Added dynamic description tags and a `noindex` metatag to stop web crawlers from indexing our 404 pages.

Features:
* When going to pages that exist, meta tags descriptions are added to the head for better descriptions on search engine results
* When hitting a 404, the meta tag `<meta name="robots" content="noindex">` is added, so that old pages that don't exist aren't indexed by search engines.

Author: jbriones1

src/app/app.component.ts

@@ -1,8 +1,13 @@
-/* eslint-disable @typescript-eslint/no-extraneous-class */
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { ChangeDetectionStrategy, Component, inject, OnInit } 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';
+
+const DEFAULT_DESCRIPTION =
+  "Site dedicated to and maintained by SFU's Computing Science Student Society";
 
 @Component({
   selector: 'app-root',
@@ -11,4 +16,39 @@ import { TabBarComponent } from 'components/tab-bar/tab-bar.component';
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+  private metaService = inject(Meta);
+
+  ngOnInit(): void {
+    this.router.events
+      .pipe(
+        filter(event => event instanceof NavigationEnd),
+        map(() => {
+          let route = this.route.firstChild;
+          while (route?.firstChild) {
+            route = route.firstChild;
+          }
+          return route;
+        }),
+        filter(route => route?.outlet === 'primary'),
+        mergeMap(route => route?.data ?? of({} as Data))
+      )
+      .subscribe(data => {
+        if (data['meta']) {
+          this.metaService.updateTag({
+            name: 'robots',
+            content: 'noindex'
+          });
+        } else {
+          this.metaService.removeTag("name='robots'");
+        }
+        const desc = data['description'] ?? DEFAULT_DESCRIPTION;
+        this.metaService.updateTag({
+          name: 'description',
+          content: desc
+        });
+      });
+  }
+}

src/app/app.routes.ts

@@ -15,58 +15,85 @@ export const routes: Routes = [
   {
     path: 'readme',
     loadComponent: () => import('./pages/readme/readme.component').then(m => m.ReadMeComponent),
-    title: makeTitle('README')
+    title: makeTitle('README'),
+    data: {
+      description: 'Welcome to the Computing Science Student Society!'
+    }
   },
   {
     path: 'officers',
     loadComponent: () =>
       import('./pages/officers/officers.component').then(m => m.OfficersComponent),
-    title: makeTitle('Officers')
+    title: makeTitle('Officers'),
+    data: {
+      description: 'Meet the officers that keep the CSSS running.'
+    }
   },
   {
     path: 'committees',
     loadComponent: () =>
       import('./pages/committees/committees.component').then(m => m.CommitteesComponent),
-    title: makeTitle('Committees')
+    title: makeTitle('Committees'),
+    data: {
+      description: 'Learn about the committees that make up the CSSS.'
+    }
   },
   {
     path: 'common-room',
     loadComponent: () =>
       import('./pages/common-room/common-room.component').then(m => m.CommonRoomComponent),
-    title: makeTitle('Common Room')
+    title: makeTitle('Common Room'),
+    data: {
+      description: 'Come hang out with us in the Common Room.'
+    }
   },
   {
     path: 'affiliates',
     loadComponent: () =>
       import('./pages/affiliates/affiliates.component').then(m => m.AffiliatesComponent),
-    title: makeTitle('Affiliates')
+    title: makeTitle('Affiliates'),
+    data: {
+      description: 'Find out about other societies and clubs that our members interact with'
+    }
   },
   // Events
   {
     path: 'events',
     loadComponent: () => import('./pages/events/events.component').then(m => m.EventsComponent),
-    title: makeTitle('Events')
+    title: makeTitle('Events'),
+    data: {
+      description: 'Discover the events the CSSS hosts.'
+    }
   },
   {
     path: 'event-archives',
     loadComponent: () =>
       import('pages/event-archives/event-archives.component').then(m => m.EventArchivesComponent),
-    title: makeTitle('Event Archives')
+    title: makeTitle('Event Archives'),
+    data: {
+      description: 'Explore the old event pages past executive teams created.'
+    }
   },
   // Elections
   {
     path: 'elections',
     loadComponent: () =>
       import('./pages/elections/elections.component').then(m => m.ElectionsComponent),
-    title: makeTitle('Elections')
+    title: makeTitle('Elections'),
+    data: {
+      description: 'Learn about the responsibilities of our executives and how you can become one.'
+    }
   },
   { path: '', component: HomeComponent, title: 'Computing Science Student Society' },
   // 404 will go down there
   {
     path: '**',
     loadComponent: () =>
       import('./pages/not-found/not-found.component').then(m => m.NotFoundComponent),
-    title: makeTitle('Not Found')
+    title: makeTitle('Not Found'),
+    data: {
+      meta: 'noindex'
+    }
   }
 ] as const;