From 2ed411a94e2dd476ddfda0b993cc6863b4830738 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 13 Oct 2021 23:33:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Implement=20sizes=20with=20Image?=
 =?UTF-8?q?=20component=20and=20webp=20loading=20with=20`source`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/Image.svelte         | 70 ++++++++++++++++++-----
 src/components/molecules/PhotoCard.svelte | 11 +++-
 src/routes/photos.svelte                  | 11 +++-
 3 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/src/components/atoms/Image.svelte b/src/components/atoms/Image.svelte
index 0c2ab4e..78df214 100644
--- a/src/components/atoms/Image.svelte
+++ b/src/components/atoms/Image.svelte
@@ -1,25 +1,69 @@
 <script lang="ts">
     import { getAssetUrl } from '$utils/helpers'
 
-    export let id: string
-    export let alt: string
-    export let width: number
-    export let height: number
-    export let quality: number = 90
-    export let sizes: any = {}
+    export let src: string = undefined
+    export let id: string = undefined
+    export let sizes: Sizes = undefined
+    export let width: number = sizes && sizes.medium && sizes.medium.width
+    export let height: number = sizes && sizes.medium && sizes.medium.height
+    export let ratio: number = undefined
+    export let quality: number = 80
     export let fit: string = 'inside'
-    export let format: string = 'jpg'
+    export let alt: string
     export let lazy: boolean = true
 
-    // TODO:
-    // - sizes
-    // -- width
-    // -- height
+    interface Sizes {
+        small?: { width?: number, height?: number }
+        medium?: { width?: number, height?: number }
+        large?: { width?: number, height?: number }
+    }
+
+    /**
+     * Define height from origin ratio if not defined
+     */
+    const setHeightFromRatio = (w: number, r: number = ratio) => {
+        return Math.round(w / r)
+    }
+
+    if (ratio && !height) {
+        // Set height from width using ratio
+        height = setHeightFromRatio(width)
+
+        // Add height to all sizes
+        if (sizes) {
+            Object.entries(sizes).forEach(size => {
+                const [key, value]: [string, { width?: number, height?: number }] = size
+                sizes[key].height = setHeightFromRatio(value.width)
+            })
+        }
+    }
+
+
+    /**
+     * Image attributes
+     */
+    const imgWidth: number = sizes && sizes.small ? sizes.small.width : width
+    const imgHeight: number = sizes && sizes.small ? sizes.small.height : height
+    const imgSrc = id ? getAssetUrl(id, imgWidth, imgHeight, quality, fit, 'jpg') : src ? src : null
 </script>
 
-<picture class={$$props.class}>
+<picture class={$$props.class ? $$props.class : ''}>
+    <source
+        type="image/webp"
+        srcset="
+            {getAssetUrl(id, imgWidth, imgHeight, quality, fit, 'webp')} 345w,
+            {sizes && sizes.medium ? `${getAssetUrl(id, sizes.medium.width, sizes.medium.height, quality, fit, 'webp')} 768w,` : ''}
+            {sizes && sizes.large ? `${getAssetUrl(id, sizes.large.width, sizes.large.height, quality, fit, 'webp')} 1280w,` : ''}
+        "
+    >
     <img
-        src={getAssetUrl(id, width, height, quality, fit, format)}
+        src={imgSrc}
+        sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%"
+        srcset="
+            {getAssetUrl(id, imgWidth, imgHeight, quality, fit)} 300w,
+            {sizes && sizes.medium ? `${getAssetUrl(id, sizes.medium.width, sizes.medium.height, quality, fit)} 768w,` : ''}
+            {sizes && sizes.large ? `${getAssetUrl(id, sizes.large.width, sizes.large.height, quality, fit)} 1280w,` : ''}
+        "
         width={width}
         height={height}
         alt={alt}
diff --git a/src/components/molecules/PhotoCard.svelte b/src/components/molecules/PhotoCard.svelte
index ff9ae59..09ce3f1 100644
--- a/src/components/molecules/PhotoCard.svelte
+++ b/src/components/molecules/PhotoCard.svelte
@@ -6,5 +6,14 @@
 </script>
 
 <div class="photo-card">
-    <Image id={id} alt={alt} width={864} height={576} />
+    <Image
+        id={id}
+        sizes={{
+            small: { width: 224 },
+            medium: { width: 464 },
+            large: { width: 864 },
+        }}
+        ratio={1.5}
+        alt={alt}
+    />
 </div>
\ No newline at end of file
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index a4da293..5490ef2 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -253,7 +253,16 @@
                     {#each photos as { image, slug, location }}
                         <div class="photo shadow-photo">
                             <a href="/{location.country.slug}/{location.slug}/{slug}">
-                                <Image id={image.id} width={1200} height={800} alt={image.title} />
+                                <Image
+                                    id={image.id}
+                                    sizes={{
+                                        small: { width: 500 },
+                                        medium: { width: 900 },
+                                        large: { width: 1440 },
+                                    }}
+                                    ratio={1.5}
+                                    alt={image.title}
+                                />
                                 <PostCard />
                             </a>
                         </div>