From 98c8ce21801ba0d00b4cc97ec4a6cee46c19f27c Mon Sep 17 00:00:00 2001
From: Chris Dill <chris.rj.dill@gmail.com>
Date: Sun, 21 Feb 2021 10:37:03 +0000
Subject: [PATCH] Update thumbnail component - Pass in img size to help with
 load times and reduce layout shifts. - Rename gameProjectThumb.svelte to
 thumbnail.svelte.

---
 .../{gameProjectThumb.svelte => thumbnail.svelte}        | 7 ++++---
 src/routes/index.svelte                                  | 9 +++++----
 2 files changed, 9 insertions(+), 7 deletions(-)
 rename src/components/{gameProjectThumb.svelte => thumbnail.svelte} (63%)

diff --git a/src/components/gameProjectThumb.svelte b/src/components/thumbnail.svelte
similarity index 63%
rename from src/components/gameProjectThumb.svelte
rename to src/components/thumbnail.svelte
index ca5ae83..1c2988f 100644
--- a/src/components/gameProjectThumb.svelte
+++ b/src/components/thumbnail.svelte
@@ -1,15 +1,16 @@
 <script>
     export let name;
     export let link;
-    export let src = "https://placehold.it/600x300";
-    export let description;
+    export let img = "https://placehold.it/600x300";
     export let imgClass = "img-fluid mb-3 mb-md-0";
+    export let size = { width: 600, height: 300 };
+    export let description;
 </script>
 
 <div class="row">
     <div class="thumb col-md-7">
         <a href="{link}">
-            <img class={imgClass} {src} alt={name}>
+            <img class={imgClass} src={img} alt={name} width={size.width} height={size.height}>
         </a>
     </div>
     <div class="blurb col-md-5">
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index a8d6e09..5aa23b5 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,20 +1,21 @@
 <script>
     import {onMount} from 'svelte';
-    import Thumb from '../components/gameProjectThumb.svelte'
+    import Thumb from '../components/thumbnail.svelte'
     import Banner from '../components/banner.svelte'
 
     let games = [
         {
             name: "Sirius",
             link: "./sirius",
-            thumb: "https://placehold.it/600x300",
+            img: "https://placehold.it/600x300",
+            size: { width: 600, height: 300 },
             description: "A 2D game about a wannabe space captain exploring the galaxy.",
-            imgClass: "img-fluid mb-3 mb-md-0"
         },
         {
             name: "Quartz",
             link: "./sirius",
-            thumb: "https://placehold.it/600x300",
+            img: "https://placehold.it/600x300",
+            size: { width: 600, height: 300 },
             description: ""
         }
     ]