Feature: Image optimizations and minor fixes

src/app/pages/officers/officers.component.html

@@ -16,10 +16,18 @@ <h1>Officers</h1>
   <section>
     <h2>Our Executives</h2>
     <div class="gallery">
-      @for (exec of currentAdministration()?.members; track $index) {
-        <div class="card">
+      @for (exec of currentAdministration()?.members; track exec.photoName; let i = $index) {
+        <div class="card" [style.visibility]="areImagesLoaded() ? 'visible' : 'hidden'">
           <div class="card__frame">
-            <img class="card__img" [src]="exec.photoName" [alt]="exec.photoName" />
+            <img
+              class="card__img"
+              [ngSrc]="exec.photoName"
+              width="300"
+              height="400"
+              [alt]="exec.photoName"
+              [priority]="i < PRIORITY"
+              (load)="onLoad(i)"
+            />
             <div class="card__info">
               <div class="card__name">
                 <strong class="card__text">{{ exec.name }}</strong>

src/app/pages/officers/officers.component.scss

@@ -12,12 +12,12 @@
   justify-content: center;
 
   &__frame {
-    width: max(300px, 100%);
+    width: max(18.75rem, 100%);
     position: relative;
   }
 
   &__img {
-    width: 300px;
+    width: 18.75rem;
     aspect-ratio: 3 / 4;
     box-shadow: 10px 10px 5px black;
   }

src/app/pages/officers/officers.component.ts

@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { CodeArticleComponent } from '@csss-code/article/article.component';
 import { ExternalLinkComponent } from 'components/url/external-link/external-link.component';
@@ -6,12 +7,13 @@ import { ExecutiveAdministration, executives } from './officers.data';
 
 @Component({
   selector: 'cs-officers',
-  imports: [CodeArticleComponent, RouteLinkComponent, ExternalLinkComponent],
+  imports: [CodeArticleComponent, RouteLinkComponent, ExternalLinkComponent, NgOptimizedImage],
   templateUrl: './officers.component.html',
   styleUrl: './officers.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class OfficersComponent {
+  protected PRIORITY = 10;
   /**
    * The year currently selected.
    */
@@ -46,4 +48,16 @@ export class OfficersComponent {
    * Will probably need some way to remove older cached entries if memory becomes an issue.
    */
   private cachedAdmins = new Map<number, ExecutiveAdministration>();
+
+  private loadedImages = signal(new Set<number>());
+
+  areImagesLoaded = computed(
+    () =>
+      this.loadedImages().size >= (this.currentAdministration()?.members ?? []).length ||
+      this.loadedImages().size >= this.PRIORITY
+  );
+
+  onLoad(id: number): void {
+    this.loadedImages.update(ids => new Set([...ids, id]));
+  }
 }

src/app/pages/readme/readme.component.html

@@ -1,6 +1,6 @@
 <div class="parallax">
   <hgroup>
-    <img class="mural" src="images/mural.png" alt="Mural" />
+    <img class="mural" ngSrc="images/mural.jpg" alt="Mural" fill priority disableOptimizedSrcset />
     <h1>
       Welcome to the
       <om-typewriter
@@ -15,7 +15,7 @@ <h1>
   <article class="content">
     <section id="intro" class="pres-container">
       <div class="pres-image-container">
-        <img src="images/president.png" alt="President of the CSSS" />
+        <img ngSrc="images/president.png" alt="President of the CSSS" height="480" width="320" />
       </div>
       <div class="pres-content">
         <h2>President's Address</h2>

src/app/pages/readme/readme.component.scss

@@ -58,6 +58,7 @@ hgroup {
   max-width: 60rem;
 
   & > section {
+    padding-top: 10svh;
     margin-bottom: 5rem;
     width: 90%;
   }
@@ -97,7 +98,7 @@ hgroup {
       place-items: center;
       height: 100%;
       width: 100%;
-      gap: 1rem;
+      gap: 2rem;
 
       & > a {
         @include g.no-select;

src/app/pages/readme/readme.component.ts

@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CardComponent } from '@csss-code/card/card.component';
@@ -15,7 +16,8 @@ import { RouteLinkComponent } from 'components/url/route-link/route-link.compone
     FontAwesomeModule,
     ExternalLinkComponent,
     RouteLinkComponent,
-    NgxTypewriterComponent
+    NgxTypewriterComponent,
+    NgOptimizedImage
   ],
   templateUrl: './readme.component.html',
   styleUrl: './readme.component.scss',
@@ -28,7 +30,7 @@ export class ReadMeComponent {
   scrollTo(id: string): void {
     const target = document.getElementById(id);
     if (target) {
-      target.scrollIntoView({ behavior: 'smooth' });
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
   }
 }

src/index.html

@@ -10,7 +10,13 @@
       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="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin />
+    <link
+      rel="preload"
+      href="/fonts/montserrat-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" />

src/styles.scss

@@ -7,23 +7,47 @@
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/montserrat-regular.woff2') format('woff2');
+  src: url('/fonts/montserrat-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/montserrat-latin-700.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');
+  src: url('/fonts/fira-code-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/fira-code-latin-700.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');
+  font-weight: 100;
+  src: url('/fonts/inter-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 900;
+  src: url('/fonts/inter-latin-700.woff2') format('woff2');
 }
 
 html {

src/ui/csss-code/card/card.component.html

@@ -1 +1,2 @@
+<img [ngSrc]="bgImg()" alt="card" fill />
 <ng-content></ng-content>

src/ui/csss-code/card/card.component.scss

@@ -1,9 +1,6 @@
 :host {
   display: block;
   position: relative;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 
   height: 100%;
   width: 100%;

src/ui/csss-code/card/card.component.ts

@@ -1,36 +1,18 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostBinding,
-  inject,
-  input
-} from '@angular/core';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-import { pathToCssUrl } from 'utils/string-utils';
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, inject, input } from '@angular/core';
 
 @Component({
   selector: 'code-card',
+  imports: [NgOptimizedImage],
   templateUrl: './card.component.html',
   styleUrl: './card.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.hoverable]': 'isHoverOn()'
+  }
 })
 export class CardComponent {
-  /**
-   * The CSS background image URL.
-   */
-  @HostBinding('style.background-image') protected get backgroundImage(): SafeStyle {
-    return this.sanitizer.bypassSecurityTrustStyle(pathToCssUrl(this.bgImg()));
-  }
-
-  /**
-   * The CSS class that enables this to be hoverable.
-   */
-  @HostBinding('class.hoverable') get hoverable(): boolean {
-    return this.isHoverOn();
-  }
-
-  public elementRef = inject(ElementRef);
+  elementRef = inject(ElementRef);
 
   /**
    * URL of the image to use.
@@ -45,9 +27,4 @@ export class CardComponent {
    * false makes the card have no hover effects.
    */
   public isHoverOn = input(true);
-
-  /**
-   * Sanitizes inputs for Angular.
-   */
-  private sanitizer = inject(DomSanitizer);
 }