feat: image cards now use NgOptimizedImage

Author: jbriones1

public/images/mural.jpg

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

@@ -98,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.scss

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

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

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

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

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

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