Fix build + image sizing issues

src/components/footer.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from 'astro:assets';
+import { Picture } from 'astro:assets';
 import LogoLight from '../assets/logo-light.png';
 
 import {
@@ -51,12 +51,12 @@ const hash = childProcess
     }
 
   </style>
-  <Image src={LogoLight} alt="" style="width: 5rem;"/>
+  <Picture densities={[1.5, 2]} formats={['avif', 'webp']} src={LogoLight} alt="" width={96} />
 
   <div style="display: flex; gap: 2rem; padding: 1rem;">
     {socialLinks.map((link) => (
-      <a href={link.href} class="social">
-        <Image src={link.icon} alt={link.name + ' logo'} />
+      <a style={{alignSelf: 'center', width: 'max-content'}} href={link.href} class="social">
+        <Picture densities={[1.5, 2]} formats={['avif', 'webp']} src={link.icon} alt={link.name + ' logo'} />
       </a>
     ))}
   </div>
@@ -69,8 +69,8 @@ const hash = childProcess
   <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: center;">
     {
       sponsorLinks.map((link) => (
-        <a href={link.href} class="sponsor">
-          <Image loading="lazy" src={link.icon} alt={link.name + ' logo'} />
+        <a style={{alignSelf: 'center', width: 'max-content'}} href={link.href} class="sponsor">
+          <Picture densities={[1.5, 2]} formats={['avif', 'webp']} width={100} src={link.icon} alt={link.name + ' logo'} />
         </a>
       ))
     }

src/components/home/summary.astro

@@ -8,12 +8,14 @@ import IMG_4798 from "../../assets/home/IMG_4798.jpg";
   <style>
     img {
       width: 50%;
+      height: 50%;
       border-radius: 1rem;
     }
 
     @media (max-width: 480px) {
       img {
         width: 100%;
+        height: 100%;
       }
     }
   </style>
@@ -30,6 +32,7 @@ import IMG_4798 from "../../assets/home/IMG_4798.jpg";
     </div>
     <Image
       alt="The University Rover Challenge team engages in a discussion whilst working on laptops and tablets at the Makerspace."
+
       src={IMG_4798}
     />
   </div>

src/components/join.astro

@@ -54,7 +54,7 @@ const options: {title: string, description: string, url: string}[] = [
       fontSize: '1.25rem'
     }}>
       Interested in getting involved in a project team? Come to a meeting and talk to a project manager or officer about how you can join. Our general meetings are on <strong
-        >Mondays at 7pm*</strong
+        >Mondays at 7pm<sup>*</sup></strong
       > at the <strong>UTDesign Makerspace.</strong>
     </p>
     <div class="join-content" style={{ display: 'flex', gap: '2rem' }}>
@@ -82,6 +82,6 @@ const options: {title: string, description: string, url: string}[] = [
 
     </div>
 
-    <small id="meeting-footnote" style="font-family: 'Open Sans Variable', sans-serif; font-size: 1rem;">* We only officially meet when UT Dallas is in session during the fall and spring semesters, but many of us frequently meet at the Makerspace during breaks as well - join the <a href={discordInvite} rel="noreferrer" target="_blank">Discord</a> for updates.</small>
+    <small id="meeting-footnote" style="font-family: 'Open Sans Variable', sans-serif; font-size: 1rem;">* We only officially meet when UT Dallas is in session during the fall and spring semesters, but many of us frequently meet at the Makerspace during breaks as well - join the <a style="color: inherit" href={discordInvite} rel="noreferrer" target="_blank">Discord</a> for updates.</small>
 
 </div>

src/components/navbar.tsx

@@ -1,9 +1,19 @@
 import { Bars3Icon } from '@heroicons/react/24/solid'
-import Wordmark from "../assets/wordmark.png"
+import { getImage } from 'astro:assets'
+
 import { useEffect, useRef } from 'react'
 import { HOME_LINK, discordInvite, mainNavLinks } from '../data'
 import useMedia from '../utils/useMediaQuery'
 
+// TODO: do this for the vex poster image on hero, and for CSS background images on division component
+const Wordmark = await getImage({
+  width: 150,
+  src: import('../assets/wordmark.png'),
+  densities: [1.5, 2],
+  quality: 'max',
+  formats: ['avif', 'webp'],
+})
+
 const menuBg = 'var(--text-dark)'
 const gradBg = 'linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.00) 100%)'
 const styles = `
@@ -73,7 +83,8 @@ function Navbar() {
         <a href={HOME_LINK.href} className="no-decoration">
           <img
             src={Wordmark.src}
-            width={150}
+            srcSet={Wordmark.srcSet.attribute}
+            {...Wordmark.attributes}
           />
         </a>
         {mobile

src/pages/index.astro

@@ -5,13 +5,13 @@ import Summary from '../components/home/summary.astro'
 import Division from '../components/home/division.astro'
 import Join from '../components/join.astro'
 
-import DSC02235 from '../assets/home/DSC02235.JPG'
+import DSC02235 from '../assets/home/DSC02235.jpg'
 import Edit_20240219_EWeekCombatBlocks_DSC03650 from '../assets/home/Edit_20240219_EWeekCombatBlocks_DSC03650.jpeg'
-import DSC05965 from '../assets/home/DSC05965.JPG'
-import DSC04247 from '../assets/home/DSC04247.JPG'
-import DSC07439 from '../assets/home/DSC07439.JPG'
-import DSC07331 from '../assets/home/DSC07331.JPG'
-import DSC03983 from '../assets/home/DSC03983.JPG'
+import DSC05965 from '../assets/home/DSC05965.jpg'
+import DSC04247 from '../assets/home/DSC04247.jpg'
+import DSC07439 from '../assets/home/DSC07439.jpg'
+import DSC07331 from '../assets/home/DSC07331.jpg'
+import DSC03983 from '../assets/home/DSC03983.jpg'
 import PlantWithSparks from '../assets/home/plants-with-sparks.jpg'
 ---
 <BaseLayout title="Home">
@@ -22,7 +22,7 @@ import PlantWithSparks from '../assets/home/plants-with-sparks.jpg'
     backgroundPosition="40% 10%"
     divisionName="Combat Robotics"
     divisionDescription="We're all about sparks, fire and spilling robot guts. The excitement around the sport is perfect for spreading awareness of robotics. Our Combat Robotics division promises something for everyone, with entry-level programs and lots of upward mobility."
-    divisionOverview="Ever wanted to build a battle bot, like the TV show? Combat Robotics is the place to be. Originally started with ’The Blender‘, our 120lb world championship winning BattleBot, combat robotics at UT Dallas has history going back to 2004. Since the clubs’ revival in 2021, we have expanded to dozens of 1lb, 3lb, and 12lb weight class projects."
+    divisionOverview="Ever wanted to build a battle bot, like the TV show? Combat Robotics is the place to be.\nOriginally started with ’The Blender‘, our 120lb world championship winning BattleBot, combat robotics at UT Dallas has history going back to 2004. Since the clubs’ revival in 2021, we have expanded to dozens of 1lb, 3lb, and 12lb weight class projects."
     images={[{alt:'A group examines electronic components and 3D-printed parts on a table, with one person in red demonstrating.',src:DSC02235},{alt:'An individual is working on assembling robot  components at a table.',src:Edit_20240219_EWeekCombatBlocks_DSC03650},{alt:'A person wearing safety glasses is using a power tool to cut a part on a robot, producing a shower of sparks.',src:DSC05965}, ]}
   />
   <Division