Optimize remaining homepage images; add lighthouse CI

.github/workflows/ci.yml

@@ -0,0 +1,13 @@
+name: Lighthouse CI
+on: [push]
+jobs:
+    lighthouseci:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                node-version: 18
+            - run: npm install && npm install -g @lhci/cli@0.11.x
+            - run: npm run build
+            - run: lhci autorun

astro-imagetools.config.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from "astro-imagetools/config";
+
+export default defineConfig({
+    fadeInTransition: false
+});

src/components/Footer.astro

@@ -1,6 +1,12 @@
+---
+import { Picture } from "astro-imagetools/components";
+---
 <div class="footer row text-center mx-0 my-0">
     <div class="footer-col col-md-6 my-4">
-        <img id="footer-logo" class="center img-fluid h-auto" src="/img/base/logo-monochrome-dark.png" alt="FAMNM" />
+        <Picture attributes={{picture: {
+            id: "footer-logo",
+            class: "center img-fluid h-auto"
+        }}} alt="FAMNM logo" src="/img/base/logo-monochrome-dark.png" breakpoints={[750, 1500]} placeholder="none" format={["webp", "png"]} />
         <div id="copyright-text">
             &copy; 2023 <i>FIRST</i> Alumni and Mentors Network at Michigan
         </div>
@@ -61,7 +67,7 @@
         <!--End Mailchimp Signup Form-->
     </div>
     <div class="footer-col col-md-6 my-4">
-        <h3>Sponsors and Affiliates</h3>
+        <h1 class="h3">Sponsors and Affiliates</h1>
         <ul>
             <li><a href="https://engin.umich.edu" target="_blank" rel="noopener">University of Michigan College of Engineering</a></li>
             <li><a href="https://esg.engin.umich.edu" target="_blank" rel="noopener">Engineering Student Government</a></li>

src/components/Header.astro

@@ -1,7 +1,8 @@
 <nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-famnm-blue w-100">
     <div class="container-fluid px-3">
         <a class="navbar-brand" href="/">
-            <img alt="FAMNM logo" src="/img/base/icon-monochrome-dark.png" height={22} id="navbar-logo" />
+            <img alt="FAMNM logo" src="/img/base/icon-monochrome-dark.png"
+                width={22} height={22} id="navbar-logo" />
         </a>
         <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>

src/components/index/carousel/Carousel.astro

@@ -17,7 +17,7 @@ const { id, images, class: className } = Astro.props;
             <CarouselIndicator id={id} i={i} active={i === 0} />
         )}
     </div>
-    <div class="carousel-inner" role="listbox">
+    <div class="carousel-inner" role="listbox" aria-label="Carousel elements">
         {images.map(({ src, title, description }, i) => 
             <CarouselItem src={src} title={title} description={description} active={i === 0} />
         )}

src/components/index/carousel/CarouselItem.astro

@@ -13,7 +13,7 @@ const { src, title, description, active } = Astro.props;
 const itemClass = active ? "carousel-item active" : "carousel-item";
 ---
 
-<div class={itemClass}>
+<div class={itemClass} role="option" aria-label=`${title}`>
     <Img src={src} attributes={{img: {class: "carousel-back-image", "aria-hidden": "true"}}} alt="" format="webp" placeholder="none" />
     <Img src={src} alt={title} format="webp" objectFit="scale-down" />
     <div class="carousel-caption d-none d-md-block">

src/pages/index.astro

@@ -2,6 +2,7 @@
 import BaseLayout from "../layouts/BaseLayout.astro";
 import Announcements from "../components/index/Announcements.astro";
 import Carousel from "../components/index/carousel/Carousel.astro";
+import { Img } from "astro-imagetools/components";
 
 const images = [
     {
@@ -42,8 +43,9 @@ const images = [
         <div class="container p-4">
             <div class="row align-items-center">
                 <div class="col-sm-12">
-                    <img id="frontpage-logo" class="center img-fluid" src="img/logo.png"
-                    alt="Logo for FIRST Alumni and Mentors Network at Michigan"/>
+                    <Img attributes={{img: {id: "frontpage-logo", class: "center img-fluid"}}}
+                        src="img/logo.png" alt="Logo for FIRST Alumni and Mentors Network at Michigan"
+                        placeholder="none" format="webp" height={512} />
                 </div>
                 <div class="col-sm-12 col-md">
                     <p class="text-description text-center">
@@ -77,7 +79,9 @@ const images = [
                     </a>
                 </div>
             </div>
-            <iframe class="w-100" height="600" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRqrg5Jl1sd2KBdCbKdu-IZlGacSHeSQ17J0uV9P8T8466u-sppaKvunt4TXbOYDnh6coyNYffbQGab/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false"></iframe>
+            <iframe class="w-100" height="600" title="FRC event volunteering sign-up spreadsheet"
+                src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRqrg5Jl1sd2KBdCbKdu-IZlGacSHeSQ17J0uV9P8T8466u-sppaKvunt4TXbOYDnh6coyNYffbQGab/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false">
+            </iframe>
         </section>
     </main>
 
@@ -93,6 +97,7 @@ const images = [
 
         #frontpage-logo {
             max-height: 16em;
+            object-fit: contain;
         }
 
         .feature-img {

src/style/main.scss

@@ -256,12 +256,12 @@ iframe {
 }
 
 .famnm-btn-secondary {
-    background-color: #3b8ac3;
+    background-color: #2A6593;
     color: #f3f3f3;
 }
 
 .famnm-btn-secondary:hover {
-    background-color: #59a9e3;
+    background-color: #2F74A7;
     color: #f3f3f3;
 }