From a51179f6f40da84e4779302e6b3edd17be6ade0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 21 Sep 2022 16:32:23 +0200
Subject: [PATCH] Add SEO share images on remaining pages

---
 src/routes/photos/+page.server.ts | 5 +++++
 src/routes/photos/+page.svelte    | 7 ++++---
 src/routes/shop/+layout.server.ts | 7 ++++++-
 src/routes/shop/+layout.svelte    | 3 ++-
 src/routes/shop/+page.svelte      | 5 +++--
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/routes/photos/+page.server.ts b/src/routes/photos/+page.server.ts
index c83f6a4..10f52a7 100644
--- a/src/routes/photos/+page.server.ts
+++ b/src/routes/photos/+page.server.ts
@@ -64,6 +64,10 @@ export const load: PageServerLoad = async ({ url, setHeaders }) => {
             )`} {
                 count { id }
             }
+
+            settings {
+                seo_image_photos { id }
+            }
         }`)
 
         if (res) {
@@ -75,6 +79,7 @@ export const load: PageServerLoad = async ({ url, setHeaders }) => {
                 photos: data.photos,
                 filteredCountryExists: data.country.length > 0,
                 totalPhotos: data.total_published[0].count.id,
+                settings: data.settings,
             }
         }
     } catch (err) {
diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte
index 2c3bbe6..e090919 100644
--- a/src/routes/photos/+page.svelte
+++ b/src/routes/photos/+page.svelte
@@ -13,8 +13,9 @@
     import relativeTime from 'dayjs/plugin/relativeTime'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/contants'
-    import { quartOut } from '$animations/easings'
     import { map, lerp, throttle } from '$utils/functions'
+    import { getAssetUrlKey } from '$utils/api'
+    import { quartOut } from '$animations/easings'
     import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -34,7 +35,7 @@
 
     let { photos, totalPhotos }: { photos: any[], totalPhotos: number } = data
     $: ({ photos, totalPhotos } = data)
-    const { filteredCountryExists }: { totalPhotos: number, filteredCountryExists: boolean } = data
+    const { filteredCountryExists, settings }: {  filteredCountryExists: boolean, settings: any } = data
     const { countries, locations }: any = getContext('global')
 
     dayjs.extend(relativeTime)
@@ -326,7 +327,7 @@
 <Metas
     title="{filterCountry === defaultCountry ? `All Photos` : `Photos of ${currentCountry.name}`} - Houses Of"
     description="Discover {totalPhotos} homes from {filterCountry === defaultCountry ? `${locations.length} places of ${countries.length} countries in the World` : currentCountry.name}"
-    image=""
+    image={getAssetUrlKey(settings.seo_image_photos.id, 'share-image')}
 />
 
 <svelte:window
diff --git a/src/routes/shop/+layout.server.ts b/src/routes/shop/+layout.server.ts
index dcf5958..0e554b2 100644
--- a/src/routes/shop/+layout.server.ts
+++ b/src/routes/shop/+layout.server.ts
@@ -47,9 +47,13 @@ export const load: PageServerLoad = async () => {
                     }
                 }
             }
+
+            settings {
+                seo_image_shop { id }
+            }
         }`)
 
-        const { data: { shop, location, posters }} = res
+        const { data: { shop, location, posters, settings }} = res
 
 
         /**
@@ -65,6 +69,7 @@ export const load: PageServerLoad = async () => {
                 locations: location,
                 posters,
                 shopProducts: shopProducts.results,
+                settings,
             }
         }
     } catch (err) {
diff --git a/src/routes/shop/+layout.svelte b/src/routes/shop/+layout.svelte
index 5c01fa1..d7a45ae 100644
--- a/src/routes/shop/+layout.svelte
+++ b/src/routes/shop/+layout.svelte
@@ -12,7 +12,7 @@
 
     export let data: PageData
 
-    const { shop, locations, posters, shopProducts } = data
+    const { shop, locations, posters, shopProducts, settings } = data
 
     let scrollY: number
 
@@ -28,6 +28,7 @@
         posters,
         shopLocations,
         shopProducts,
+        settings,
     })
 </script>
 
diff --git a/src/routes/shop/+page.svelte b/src/routes/shop/+page.svelte
index ce4da89..4781f31 100644
--- a/src/routes/shop/+page.svelte
+++ b/src/routes/shop/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { PageData } from './$types'
     import { getContext } from 'svelte'
+    import { getAssetUrlKey } from '$utils/api'
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     // Components
     import PageTransition from '$components/PageTransition.svelte'
@@ -12,7 +13,7 @@
     export let data: PageData
 
     const { product, shopProduct }: { product: any, shopProduct: any } = data
-    const { posters }: any = getContext('shop')
+    const { posters, settings }: any = getContext('shop')
 
     // Update current random product slug
     $shopCurrentProductSlug = product.location.slug
@@ -21,7 +22,7 @@
 <Metas
     title="Shop – Houses Of"
     description="Welcome to the Houses Of Shop, discover our original series of graphic posters made for lovers of design, travel and photography"
-    image=""
+    image={getAssetUrlKey(settings.seo_image_shop.id, 'share-image')}
 />