Rename global data arrays as plural by default

Easier for each loop and maps as to use singular

src/components/organisms/InteractiveGlobe.svelte

@@ -7,7 +7,7 @@
     export let scrollSmooth: number = 0.5
     export let opacity: number = 1
 
-    const { continent, location } = getContext('global')
+    const { continents, locations } = getContext('global')
 
     let globe: any
     let Globe: any
@@ -16,9 +16,9 @@
     let containerTop: number = 0, containerHeight: number = 0
     let observer: IntersectionObserver
 
-    const randomContinent = getRandomElement(continent.filter(cont => cont.countries))
+    const randomContinent = getRandomElement(continents.filter(cont => cont.countries))
     const globeResolution = windowWidth > 1440 && window.devicePixelRatio > 1 ? '4k' : '2k'
-    const locations = location.map(({ name, slug, country, coordinates: { coordinates }}: any) => ({
+    const markers = locations.map(({ name, slug, country, coordinates: { coordinates }}: any) => ({
         name,
         slug,
         countryName: country.name,
@@ -77,7 +77,7 @@
             scrollSmoothing: scrollSmooth,
             opacity,
             texture: `/images/globe-map-${globeResolution}.png`,
-            markers: locations,
+            markers,
             onLinkClicked: () => {}
         })
 

src/components/organisms/Locations.svelte

@@ -6,7 +6,7 @@
 
     export let locations: any
 
-    const { continent, settings: { explore_list }} = getContext('global')
+    const { continents, settings: { explore_list }} = getContext('global')
 </script>
 
 <div class="browse" id="locations">
@@ -15,7 +15,7 @@
     </div>
 
     <ul class="browse__continents" role="navigation">
-        {#each continent as { name, slug }}
+        {#each continents as { name, slug }}
             <li>
                 <Button tag="button" text={name} class="button--small" />
             </li>

src/components/organisms/Shop.svelte

@@ -4,9 +4,9 @@
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
 
-    const { location, shop } = getContext('global')
+    const { locations, shop } = getContext('global')
 
-    const locationsWithPoster = location
+    const locationsWithPoster = locations
         .filter((loc: any) => loc.has_poster)
         .map((loc: any) => loc.name)
 </script>

src/routes/__layout.svelte

@@ -28,16 +28,14 @@
     export async function load ({ page, session, fetch, context }) {
         const res = await fetchAPI(`
             query {
-                location (filter: { status: { _eq: "published" }}) {
+                locations: location (filter: { status: { _eq: "published" }}) {
                     name
                     slug
                     coordinates
                     country {
                         name
                         slug
-                        flag {
+                        flag { id }
-                            id
-                        }
                     }
                     date_updated
                     photos (sort: "-date_created", limit: ${import.meta.env.VITE_PREVIEW_COUNT}) {
@@ -49,24 +47,18 @@
                     has_poster
                 }
 
-                country (filter: { status: { _eq: "published" }}) {
+                countries: country (filter: { status: { _eq: "published" }}) {
                     name
                     slug
-                    flag {
+                    flag { id }
-                        id
+                    locations { id slug }
-                    }
-                    locations {
-                        slug
-                    }
                 }
 
-                continent {
+                continents: continent {
                     name
                     slug
                     rotation
-                    countries {
+                    countries { id slug }
-                        slug
-                    }
                 }
 
                 settings {
@@ -86,7 +78,10 @@
                 shop {
                     module_title
                     module_text
-                    module_image { id title }
+                    module_image {
+                        id
+                        title
+                    }
                 }
 
                 # Count
@@ -111,7 +106,7 @@
             props: {
                 data: {
                     ...data,
-                    continent: filteredContinents,
+                    continents: filteredContinents,
                 },
                 count: {
                     photos: data.photo_aggregated[0].count.id,

src/routes/index.svelte

@@ -15,7 +15,7 @@
 
     export let photos: any
 
-    const { settings, location }: any = getContext('global')
+    const { settings, locations }: any = getContext('global')
     const { path } = $page
 </script>
 
@@ -75,9 +75,7 @@
         <InteractiveGlobe />
         <p class="homepage__title--world title-huge">World</p>
 
-        <Locations
+        <Locations {locations} />
-            locations={location}
-        />
     </section>
 
     <div class="grid-modules">

src/routes/locations.svelte

@@ -10,7 +10,7 @@
 
     export let photos: any
 
-    const { location }: any = getContext('global')
+    const { locations }: any = getContext('global')
 </script>
 
 <Metas
@@ -27,10 +27,7 @@
 
     <section class="explore__locations" id="locations">
         <InteractiveGlobe />
-
+        <Locations {locations} />
-        <Locations
-            locations={location}
-        />
     </section>
 
     <section class="grid-modules grid">

src/routes/photos.svelte

@@ -24,7 +24,7 @@
 
     dayjs.extend(relativeTime)
 
-    const { country: countries }: any = getContext('global')
+    const { countries }: any = getContext('global')
 
     let buttonReset: HTMLElement
     let buttonShuffle: HTMLElement