From 5afdfe9e16eea032544fd6ff7b382c8a3b640566 Mon Sep 17 00:00:00 2001
From: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
Date: Thu, 19 Jan 2023 00:01:55 +0100
Subject: [PATCH] Apply Lighthouse suggestions (#162)

---
 src/components/photo.astro                         | 9 ++++++---
 src/components/theme-toggle.astro                  | 1 +
 src/sections/favorites/book-tile.astro             | 2 +-
 src/sections/favorites/media-tile.astro            | 2 +-
 src/sections/favorites/person-tile.astro           | 8 +++++++-
 src/sections/favorites/video-tile.astro            | 2 +-
 src/sections/main/main-section.astro               | 8 +++++++-
 src/sections/portfolio/project-timeline-item.astro | 8 +++++++-
 src/sections/testimonials/testimonial.astro        | 2 +-
 9 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/components/photo.astro b/src/components/photo.astro
index 2afdb1f..c471ecc 100644
--- a/src/components/photo.astro
+++ b/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} />
   )
 }
diff --git a/src/components/theme-toggle.astro b/src/components/theme-toggle.astro
index 4b098ca..be9fb13 100644
--- a/src/components/theme-toggle.astro
+++ b/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} />
diff --git a/src/sections/favorites/book-tile.astro b/src/sections/favorites/book-tile.astro
index 5e78a6c..7dadd49 100644
--- a/src/sections/favorites/book-tile.astro
+++ b/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}
diff --git a/src/sections/favorites/media-tile.astro b/src/sections/favorites/media-tile.astro
index 6c3fff4..6e29805 100644
--- a/src/sections/favorites/media-tile.astro
+++ b/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}
diff --git a/src/sections/favorites/person-tile.astro b/src/sections/favorites/person-tile.astro
index b9433e6..02fdf88 100644
--- a/src/sections/favorites/person-tile.astro
+++ b/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>
diff --git a/src/sections/favorites/video-tile.astro b/src/sections/favorites/video-tile.astro
index e3a3354..335caeb 100644
--- a/src/sections/favorites/video-tile.astro
+++ b/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>
diff --git a/src/sections/main/main-section.astro b/src/sections/main/main-section.astro
index 4484552..329d00f 100644
--- a/src/sections/main/main-section.astro
+++ b/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">
diff --git a/src/sections/portfolio/project-timeline-item.astro b/src/sections/portfolio/project-timeline-item.astro
index cc3221d..cdbb204 100644
--- a/src/sections/portfolio/project-timeline-item.astro
+++ b/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>
diff --git a/src/sections/testimonials/testimonial.astro b/src/sections/testimonials/testimonial.astro
index 1a27f50..57583eb 100644
--- a/src/sections/testimonials/testimonial.astro
+++ b/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>