Migrate organizer and speaker images

src/components/Event.astro

@@ -14,9 +14,9 @@ const event = inflateEvent(baseEvent)
 {event.sponsors.length > 0 && <h4>Thanks to our Sponsors ❤️</h4>}
 {event.sponsors.map(sponsor => <Sponsor sponsor={sponsor} />)}
 <div class="cta">
-  <a target="_blank" href={event.link}
-    >More Info & Tickets <i class="fa-solid fa-ticket"></i></a
-  >
+  <a target="_blank" href={event.link ?? 'https://lu.ma/seattlejs'}>
+    More Info & Tickets <i class="fa-solid fa-ticket"></i>
+  </a>
 </div>
 
 <div class="talks">

src/components/Header.astro

@@ -7,13 +7,7 @@ import logoSrc from '@/images/logo.png'
   <nav>
     <div id="logo">
       <a href="/">
-        <Image
-          src={logoSrc}
-          alt="SeattleJS logo"
-          width="32"
-          height="32"
-          loading="eager"
-        />
+        <Image src={logoSrc} alt="SeattleJS logo" loading="eager" />
       </a>
     </div>
     <button
@@ -83,6 +77,7 @@ import logoSrc from '@/images/logo.png'
   #logo img {
     display: block;
     height: 32px;
+    width: auto;
     border: 1px solid #fff;
   }
 

src/components/Organizers.astro

@@ -1,38 +1,71 @@
 ---
+import { Image } from 'astro:assets'
 import type { Links } from '@/data/types'
+import { parseFileName } from '@/utils/data'
 import SocialLinks from './SocialLinks.astro'
+import type { ImageMetadata } from 'astro'
+
+interface Props {
+  organizers: Organizer[]
+}
 
 interface Organizer {
   id: string
   full_name: string
   role?: string
-  links: Links
+  links?: Links
 }
 
-const organizers = Astro.props.organizers as Organizer[]
+const organizers = Astro.props.organizers
+const imageGlob = await import.meta.glob<{ default: ImageMetadata }>(
+  '@/images/organizers/*.jpg',
+  {
+    eager: true,
+  }
+)
+
+const organizerImages = new Map<string, ImageMetadata>()
+for (const [key, value] of Object.entries(imageGlob)) {
+  const filename = parseFileName(key)
+  if (!filename) throw new Error(`Invalid filename: ${key}`)
+  organizerImages.set(filename, value.default)
+}
 ---
 
 <div class="organizers">
   {
-    organizers.map(o => (
-      <div class="organizer">
-        <p>
-          <img
-            src={`/_public/images/organizers/${o.id}.jpg`}
-            alt={`photo of ${o.full_name}`}
-          />
-        </p>
-        <p>
-          <div class="name">{o.full_name}</div>
-          {o.role && (
-            <>
-              {o.role} <br />
-            </>
+    organizers.map(o => {
+      const imgData = organizerImages.get(o.id)
+      console.log(imgData)
+      return (
+        <div class="organizer">
+          {imgData && (
+            <p>
+              <Image src={imgData} alt={`head shot of ${o.full_name}`} />
+            </p>
+          )}
+          {!imgData && (
+            <p>
+              <Image
+                src={`/_public/images/organizers/${o.id}.jpg`}
+                alt={`head shot of ${o.full_name}`}
+                width={500}
+                height={500}
+              />
+            </p>
           )}
-          <SocialLinks links={o.links} />
-        </p>
-      </div>
-    ))
+          <p>
+            <div class="name">{o.full_name}</div>
+            {o.role && (
+              <>
+                {o.role} <br />
+              </>
+            )}
+            {o.links && <SocialLinks links={o.links} />}
+          </p>
+        </div>
+      )
+    })
   }
 </div>
 

src/components/Sponsor.astro

@@ -1,5 +1,7 @@
 ---
+import { Image } from 'astro:assets'
 import type { Sponsor } from '@/data/types'
+import { parseFileName } from '@/utils/data'
 
 const props = Astro.props as { sponsor?: Sponsor } & Partial<Sponsor>
 
@@ -9,14 +11,32 @@ let sponsor = {
 } as Sponsor
 
 const { tier, name, url, image } = sponsor
+
+const sponsorId = image.replace(/\.\w+$/, '')
+const imageGlob = import.meta.glob<{ default: ImageMetadata }>(
+  '@/images/sponsors/*.{jpeg,jpg,png,gif,webp,svg}'
+)
+
+let imageMetadata: ImageMetadata | null = null
+for (const [key, value] of Object.entries(imageGlob)) {
+  if (parseFileName(key) === sponsorId) {
+    imageMetadata = (await value()).default
+  }
+}
+
+if (!imageMetadata) {
+  throw new Error(`Image not found for sponsor ${name}`)
+}
 ---
 
 <style>
   .platinum img {
+    width: auto;
     height: 200px;
   }
 
   .gold img {
+    width: auto;
     height: 75px;
   }
 
@@ -27,10 +47,7 @@ const { tier, name, url, image } = sponsor
 </style>
 
 <div class={tier}>
-  <a href={url} target="_new"
-    ><img
-      src={`/_public/images/sponsors/${image}`}
-      alt={`logo for ${name}`}
-    /></a
-  >
+  <a href={url} target="_new">
+    <Image layout="responsive" src={imageMetadata} alt={`logo for ${name}`} />
+  </a>
 </div>

src/components/TalkCard.astro

@@ -79,7 +79,10 @@ let { name, company, photo } = speaker
 <div class="speaker">
   <a href={url ? url : `/talks/${id}`}>
     <div class="photo">
-      <img src={`/_public/images/speakers/${photo}`} alt={`photo of ${name}`} />
+      <img
+        src={`/_public/images/speakers/${photo}`}
+        alt={`head shot of ${name}`}
+      />
       <div class="overlay">
         <div class="text">{type === 'lightning' ? '⚡️ ' : ''}{title}</div>
       </div>

src/layouts/BaseLayout.astro

@@ -74,7 +74,5 @@ const description =
     <script>
       hljs.highlightAll()
     </script> -->
-    <!--script src="https://unpkg.com/@mux/mux-player"></script-->
-    <!--script src="/_public/scripts/app.js"></script-->
   </body>
 </html>

src/pages/conf.astro

@@ -194,8 +194,8 @@ import { toHTML } from '@/utils/markdown'
         <tito-widget event="event-loop/seattlejs-conf-2023"></tito-widget>
       </section>
     </div>
-    <Footer />
   </div>
+  <Footer />
 </BaseLayout>
 
 <script is:inline src="https://js.tito.io/v2" async></script>

src/pages/index.astro

@@ -79,6 +79,7 @@ const futureEvents = [events.at(-1)]
 
   .sponsors :global(img) {
     height: 80px;
+    width: auto;
   }
 
   @media only screen and (min-width: 768px) {

src/pages/live.astro

@@ -38,6 +38,8 @@ import PageLayout from '@/layouts/PageLayout.astro'
   }
 </style>
 
+<!-- <script src="https://unpkg.com/@mux/mux-player"></script> -->
+
 <PageLayout
   pageTitle="SeattleJS Conf"
   description="SeattleJS Conf is a very special 1-day conference bringing together ~300 web developers to learn, network and have fun!"

src/utils/data.ts

@@ -8,6 +8,10 @@ import type {
   Sponsor,
 } from '@/data/types'
 
+export function parseFileName(srcPath: string): string | null {
+  return srcPath.match(/([^/]+)\.[\w]+$/)?.[1] ?? null
+}
+
 export function inflateEvent(event: SJSEvent): InflatedEvent {
   let inflatedEvent: InflatedEvent = { ...event, talks: [], sponsors: [] }
   if (event.talks) {
@@ -19,7 +23,7 @@ export function inflateEvent(event: SJSEvent): InflatedEvent {
   return inflatedEvent
 }
 
-export function inflateSponsors(sponsor_id: string): Sponsor {
+function inflateSponsors(sponsor_id: string): Sponsor {
   let sponsor = sponsors.find(s => s.id === sponsor_id)
   if (!sponsor) throw new Error(`Sponsor not found: ${sponsor_id}`)
   return sponsor