Add city to House info if existing

src/routes/[country]/[location]/[photo].svelte

@@ -119,8 +119,8 @@
             <div class="viewer-photo__info">
                 <h1 class="title-medium">{currentPhoto.title}</h1>
 
-                <div class="detail text-date">
-                    <Icon class="icon" icon="map-pin" label="Map pin" /><span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
+                <div class="detail text-info">
+                    <Icon class="icon" icon="map-pin" label="Map pin" /> <span>{location.name}, {location.country.name}</span> <span class="sep">&middot;</span> <time datetime={dayjs(currentPhoto.date_taken).format('YYYY-MM-DD')}>{dayjs(currentPhoto.date_taken).format('MMMM, Do YYYY')}</time>
                 </div>
             </div>
         </div>

src/routes/[country]/[location]/index.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { page } from '$app/stores'
+    import { getAssetUrlKey } from '$utils/helpers'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
-    import { getAssetUrlKey } from '$utils/helpers'
     // Components
     import Metas from '$components/Metas.svelte'
+    import Icon from '$components/atoms/Icon.svelte'
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -20,10 +21,10 @@
     dayjs.extend(relativeTime)
 
     const { params } = $page
-    let descriptionEl: HTMLElement
     let currentPage: number = 1
     let ended: boolean
     let currentPhotosAmount: number
+
     $: latestPhoto = photos[0]
     $: currentPhotosAmount = photos.length
     $: ended = currentPhotosAmount === totalPhotos
@@ -66,6 +67,7 @@
                 ) {
                     title
                     slug
+                    city
                     image {
                         id
                         title
@@ -111,7 +113,7 @@
             </strong>
         </h1>
 
-        <div class="location-page__description grid" bind:this={descriptionEl}>
+        <div class="location-page__description grid">
             <div class="wrap">
                 <div class="text-medium">
                     Houses of {location.name} {location.description}
@@ -155,17 +157,18 @@
 
     {#if photos.length}
         <section class="location-page__houses grid">
-            {#each photos as { title, image: { id, title: alt }, slug, date_taken }, index}
+            {#each photos as { title, image: { id, title: alt }, slug, city, date_taken }, index}
                 <div class="house grid">
                     <div class="house__info">
-                        <a href="/{params.country}/{params.location}/{slug}">
-                            <h2 class="title-image">
-                                {title}
-                            </h2>
-                            <time class="text-date" datetime={dayjs(date_taken).format('YYYY-MM-DD')}>
+                        <h2 class="title-image">
+                            {title}
+                        </h2>
+                        <p class="info text-info">
+                            {#if city}<Icon class="icon" icon="map-pin" label="Map pin" /> {city} <span class="sep">·</span>{/if}
+                            <time datetime={dayjs(date_taken).format('YYYY-MM-DD')}>
                                 {dayjs(date_taken).format('MMMM, Do YYYY')}
                             </time>
-                        </a>
+                        </p>
                     </div>
                     <figure class="house__photo">
                         <a href="/{params.country}/{params.location}/{slug}">
@@ -263,6 +266,7 @@
                 ) {
                     title
                     slug
+                    city
                     image {
                         id
                         title