Apply Lighthouse suggestions (#162)

src/components/photo.astro

@@ -8,9 +8,12 @@ export interface Props {
   alt: string;
   class?: string;
   loading?: 'eager' | 'lazy';
+  width?: number;
+  height?: number;
 }
 
-const { src, alt, loading } = Astro.props;
+const { src, loading, ...props } = Astro.props;
+
 const className = Astro.props.class ?? '';
 
 const isRemoteImage = typeof src === 'string';
@@ -18,8 +21,8 @@ const isRemoteImage = typeof src === 'string';
 
 {
   isRemoteImage ? (
-    <img class={className} src={src} alt={alt} />
+    <img class={className} src={src} {...props} />
   ) : (
-    <Image class={className} format="webp" fit={'cover'} src={src} alt={alt} loading={loading} />
+    <Image format="webp" fit="cover" class={className} src={src} loading={loading} {...props} />
   )
 }

src/components/theme-toggle.astro

@@ -4,6 +4,7 @@ import Icon from './icon.astro';
 
 <button
   id="theme-toggle"
+  aria-label="Theme toggle"
   class="fixed bottom-3 left-3 z-10 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 text-gray-400 shadow-xl transition focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200"
 >
   <Icon class="block dark:hidden" name="ri:moon-fill" size={20} />

src/sections/favorites/book-tile.astro

@@ -13,7 +13,7 @@ const {
 ---
 
 <a href={url} class="flex w-full max-w-[200px] flex-col gap-3 transition duration-300 hover:translate-y-2">
-  <Photo src={cover} alt={title} class="aspect-[3/4] rounded-lg object-cover shadow-md'" />
+  <Photo src={cover} alt={title} class="aspect-[3/4] rounded-lg object-cover shadow-md" width={300} height={400} />
   <div class="w-full gap-1">
     <Typography variant="tile-title">
       {title}

src/sections/favorites/media-tile.astro

@@ -13,7 +13,7 @@ const {
 ---
 
 <a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
-  <Photo class="rounded-lg shadow-md aspect-square object-cover" src={image} alt={title} />
+  <Photo class="rounded-lg shadow-md aspect-square object-cover" src={image} alt={title} width={200} height={200} />
   <div class="gap-1">
     <Typography variant="tile-title">
       {title}

src/sections/favorites/person-tile.astro

@@ -13,7 +13,13 @@ const {
 ---
 
 <a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
-  <Photo class="rounded-lg shadow-md transition duration-300 aspect-square object-cover" src={image} alt={name} />
+  <Photo
+    class="rounded-lg shadow-md transition duration-300 aspect-square object-cover"
+    src={image}
+    alt={name}
+    width={200}
+    height={200}
+  />
   <Typography variant="tile-title">
     {name}
   </Typography>

src/sections/favorites/video-tile.astro

@@ -16,7 +16,7 @@ const thumbnail = `https://img.youtube.com/vi/${id}/0.jpg`;
 ---
 
 <a href={url} class="flex w-full max-w-[240px] flex-col gap-3 transition duration-300 hover:translate-y-2">
-  <Photo class="rounded-lg shadow-md aspect-video object-cover" src={thumbnail} alt={title} />
+  <Photo class="rounded-lg shadow-md aspect-video object-cover" src={thumbnail} alt={title} width={480} height={270} />
   <Typography variant="tile-title">
     {title}
   </Typography>

src/sections/main/main-section.astro

@@ -27,7 +27,13 @@ const section: SectionKey = 'main';
 <SectionCard section={section}>
   <div class="flex flex-col items-start gap-6 sm:flex-row">
     <div class="flex items-center gap-4 sm:flex-col">
-      <Photo src={image} alt={fullName} class="w-24 h-24 sm:w-36 sm:h-36 md:w-52 md:h-52 rounded-lg max-w-none" />
+      <Photo
+        src={image}
+        alt={fullName}
+        width={320}
+        height={320}
+        class="w-24 h-24 sm:w-36 sm:h-36 md:w-52 md:h-52 rounded-lg max-w-none"
+      />
       <Button href={url} download={downloadedFileName}>{label}</Button>
     </div>
     <div class="flex w-full flex-col gap-5">

src/sections/portfolio/project-timeline-item.astro

@@ -21,7 +21,13 @@ const alt = `Thumbnail for ${name} project`;
 <div class="flex flex-col gap-6">
   <div class="flex flex-col gap-4">
     <div class="flex gap-6">
-      <Photo class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden" src={image} alt={alt} />
+      <Photo
+        src={image}
+        alt={alt}
+        width={200}
+        height={200}
+        class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden"
+      />
       <div class="flex w-full flex-col gap-4">
         <div class="flex justify-between">
           <div>

src/sections/testimonials/testimonial.astro

@@ -16,7 +16,7 @@ const {
 <div class="flex w-full flex-col gap-4">
   <div class="flex justify-between">
     <div class="flex flex-col gap-4 sm:flex-row">
-      <Photo src={image} alt={author} class="w-14 h-14 rounded-lg" />
+      <Photo src={image} alt={author} class="w-14 h-14 rounded-lg" width={108} height={108} />
       <div>
         <Typography variant="item-title">{author}</Typography>
         <Typography variant="item-subtitle">{relation}</Typography>