From 818e1cfad42d56a3d2ab03996cb5a342a26e9899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 16 Oct 2021 22:30:56 +0200
Subject: [PATCH] Add link to photo on Homepage collage

---
 src/components/molecules/PhotoCard.svelte | 34 ++++++++++++++++-------
 src/routes/index.svelte                   | 13 +++++++--
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/PhotoCard.svelte b/src/components/molecules/PhotoCard.svelte
index 09ce3f1..3156e11 100644
--- a/src/components/molecules/PhotoCard.svelte
+++ b/src/components/molecules/PhotoCard.svelte
@@ -3,17 +3,31 @@
 
     export let id: string
     export let alt: string
+    export let url: string = undefined
+
+    const sizes = {
+        small: { width: 224 },
+        medium: { width: 464 },
+        large: { width: 864 },
+    }
 </script>
 
 <div class="photo-card">
-    <Image
-        id={id}
-        sizes={{
-            small: { width: 224 },
-            medium: { width: 464 },
-            large: { width: 864 },
-        }}
-        ratio={1.5}
-        alt={alt}
-    />
+    {#if url}
+    <a href={url}>
+        <Image
+            id={id}
+            {sizes}
+            ratio={1.5}
+            alt={alt}
+        />
+    </a>
+    {:else}
+        <Image
+            id={id}
+            {sizes}
+            ratio={1.5}
+            alt={alt}
+        />
+    {/if}
 </div>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 6607175..098ac5d 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -40,8 +40,12 @@
 
     <section class="homepage__photos">
         <div class="homepage__collage">
-            {#each photos as { image: { id, title } }}
-                <PhotoCard id={id} alt={title} />
+            {#each photos as { slug, location: { slug: locationSlug, country }, image: { id, title } }}
+                <PhotoCard
+                    id={id}
+                    alt={title}
+                    url="/{country.slug}/{locationSlug}/{slug}"
+                />
             {/each}
         </div>
     </section>
@@ -96,6 +100,11 @@
         const res = await fetchAPI(`
             query {
                 photo (limit: 11, sort: ["-date_created"]) {
+                    slug
+                    location {
+                        slug
+                        country { slug }
+                    }
                     image {
                         id
                         title