🚧 Migrate env variables to use internal SvelteKit system

Some API fetching function rewriting needed as privates cannot be included into public code

src/components/molecules/Location.svelte

@@ -7,6 +7,7 @@
     import { spring } from 'svelte/motion'
     import dayjs from 'dayjs'
     import { lerp } from '$utils/functions'
+    import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
     // Components
     import Image from '$components/atoms/Image.svelte'
     import Badge from '$components/atoms/Badge.svelte'
@@ -48,7 +49,7 @@
         }))
 
         // Change photo index from mouse position percentage
-        photoIndex = Math.round(lerp(0, Number(import.meta.env.VITE_PREVIEW_COUNT) - 1, moveProgress))
+        photoIndex = Math.round(lerp(0, Number(PUBLIC_PREVIEW_COUNT) - 1, moveProgress))
     }
 
     // Leaving mouseover

src/routes/+layout.server.ts

@@ -1,6 +1,7 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
+import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
 
 
 export const load: PageServerLoad = async () => {
@@ -21,7 +22,7 @@ export const load: PageServerLoad = async () => {
                     date_updated
                     photos (
                         sort: "-date_created",
-                        limit: ${import.meta.env.VITE_PREVIEW_COUNT}
+                        limit: ${PUBLIC_PREVIEW_COUNT}
                     ) {
                         image {
                             id
@@ -87,14 +88,14 @@ export const load: PageServerLoad = async () => {
         `)
 
         if (res) {
-            const { data } = res
+            const { data: { countPhotos, countLocations, countCountries, ...rest }} = res
 
             return {
-                ...data,
+                ...rest,
                 count: {
-                    photos: data.countPhotos[0].count.id,
+                    photos: countPhotos[0].count.id,
-                    locations: data.countLocations[0].count.id,
+                    locations: countLocations[0].count.id,
-                    countries: data.countCountries[0].count.id,
+                    countries: countCountries[0].count.id,
                 },
             }
         }

src/routes/+layout.svelte

@@ -9,6 +9,7 @@
     import { pageLoading, previousPage } from '$utils/stores'
     import { DURATION } from '$utils/contants'
     import '$utils/polyfills'
+    import { PUBLIC_ANALYTICS_KEY, PUBLIC_ANALYTICS_URL } from '$env/static/public'
     // Components
     import SVGSprite from '$components/SVGSprite.svelte'
     import SmoothScroll from '$components/SmoothScroll.svelte'
@@ -84,7 +85,7 @@
 
 {#if browser}
     <Analytics
-        appKey={import.meta.env.VITE_ANALYTICS_KEY}
+        appKey={PUBLIC_ANALYTICS_KEY}
-        url={import.meta.env.VITE_ANALYTICS_URL}
+        url={PUBLIC_ANALYTICS_URL}
     />
 {/if}

src/routes/[country]/[location]/+page.server.ts

@@ -1,5 +1,6 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
+import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
 import { fetchAPI } from '$utils/api'
 
 export const photoFields = `
@@ -56,7 +57,7 @@ export const load: PageServerLoad = async ({ params }) => {
                         location: { slug: { _eq: "${slug}" }}
                     },
                     sort: "-date_created",
-                    limit: ${import.meta.env.VITE_LIST_AMOUNT},
+                    limit: ${PUBLIC_LIST_AMOUNT},
                     page: 1,
                 ) {
                     ${photoFields}

src/routes/[country]/[location]/+page.svelte

@@ -10,9 +10,10 @@
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime'
     import { quartOut } from '$animations/easings'
-    import { fetchAPI, getAssetUrlKey } from '$utils/api'
+    import { getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/contants'
     import { photoFields } from './+page.server'
+    import { PUBLIC_LIST_INCREMENT } from '$env/static/public'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -61,7 +62,7 @@
             photos = [...photos, ...newPhotos]
 
             // Define actions if the number of new photos is the expected ones
-            if (newPhotos.length === Number(import.meta.env.VITE_LIST_INCREMENT)) {
+            if (newPhotos.length === Number(PUBLIC_LIST_INCREMENT)) {
                 // Increment the current page
                 currentPage++
             }
@@ -71,24 +72,27 @@
         }
     }
 
-    // [function] Load photos helper
+    // Load photos helper
     const loadPhotos = async (page?: number) => {
-        const res = fetchAPI(`
+        const res = await fetch('/api/data', {
-            query {
+            method: 'POST',
-                photos: photo (
+            body: `
-                    filter: {
+                query {
-                        location: { slug: { _eq: "${params.location}" }},
+                    photos: photo (
-                        status: { _eq: "published" },
+                        filter: {
-                    },
+                            location: { slug: { _eq: "${params.location}" }},
-                    sort: "-date_created",
+                            status: { _eq: "published" },
-                    limit: ${import.meta.env.VITE_LIST_INCREMENT},
+                        },
-                    page: ${page},
+                        sort: "-date_created",
-                ) {
+                        limit: ${PUBLIC_LIST_INCREMENT},
-                    ${photoFields}
+                        page: ${page},
+                    ) {
+                        ${photoFields}
+                    }
                 }
-            }
+            `,
-        `)
+        })
-        const { data: { photos }} = await res
+        const { data: { photos }} = await res.json()
 
         if (photos) {
             // Return new photos

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

@@ -12,7 +12,7 @@
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import { stagger, timeline } from 'motion'
-    import { fetchAPI, getAssetUrlKey } from '$utils/api'
+    import { getAssetUrlKey } from '$utils/api'
     import { previousPage } from '$utils/stores'
     import { DELAY } from '$utils/contants'
     import { throttle } from '$utils/functions'
@@ -151,30 +151,33 @@
 
         // Load new prev or next photos
         const isPrev = direction === directions.PREV
-        const res = await fetchAPI(`
+        const res = await fetch('/api/data', {
-            query {
+            method: 'POST',
-                photos: photo (
+            body: `
-                    filter: {
+                query {
-                        location: { slug: { _eq: "${location.slug}" }},
+                    photos: photo (
-                        id: { _${isPrev ? 'gt' : 'lt'}: ${id} },
+                        filter: {
-                        status: { _eq: "published" },
+                            location: { slug: { _eq: "${location.slug}" }},
-                    },
+                            id: { _${isPrev ? 'gt' : 'lt'}: ${id} },
-                    sort: "${isPrev ? '' : '-'}id",
+                            status: { _eq: "published" },
-                    limit: ${limit},
+                        },
-                ) {
+                        sort: "${isPrev ? '' : '-'}id",
-                    id
+                        limit: ${limit},
-                    title
+                    ) {
-                    slug
-                    date_taken
-                    image {
                         id
                         title
+                        slug
+                        date_taken
+                        image {
+                            id
+                            title
+                        }
+                        city
                     }
-                    city
                 }
-            }
+            `,
-        `)
+        })
-        const { data: { photos: newPhotos }} = res
+        const { data: { photos: newPhotos }} = await res.json()
 
         // Not loading anymore
         isLoading = false

src/routes/api/data/+server.ts

@@ -0,0 +1,23 @@
+import { error } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import { fetchAPI } from '$utils/api'
+
+
+export const POST: RequestHandler = async ({ request }) => {
+    try {
+        const body = await request.text()
+
+        if (body) {
+            const req = await fetchAPI(body)
+            const res = await req
+
+            if (res) {
+                return new Response(JSON.stringify({
+                    ...res
+                }))
+            }
+        }
+    } catch (err) {
+        throw error(500, err)
+    }
+}

src/routes/api/newsletter/+server.ts

@@ -1,5 +1,6 @@
 import { error } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
+import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
 
 
 export const POST: RequestHandler = async ({ request }) => {
@@ -7,11 +8,11 @@ export const POST: RequestHandler = async ({ request }) => {
         const body = await request.text()
 
         if (body) {
-            const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${import.meta.env.VITE_NEWSLETTER_LIST_ID}/contacts`, {
+            const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${NEWSLETTER_LIST_ID}/contacts`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    api_key: import.meta.env.VITE_NEWSLETTER_API_TOKEN,
+                    api_key: NEWSLETTER_API_TOKEN,
                     email_address: body,
                 })
             })

src/routes/photos/+page.server.ts

@@ -1,16 +1,14 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
+import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public'
 
-// Default filters values
-const defaultCountry = String(import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY)
-const defaultSort = String(import.meta.env.VITE_FILTERS_DEFAULT_SORT)
 
 export const load: PageServerLoad = async ({ url }) => {
     try {
         // Query parameters
-        const queryCountry = url.searchParams.get('country') || defaultCountry
+        const queryCountry = url.searchParams.get('country') || PUBLIC_FILTERS_DEFAULT_COUNTRY
-        const querySort = url.searchParams.get('sort') || defaultSort
+        const querySort = url.searchParams.get('sort') || PUBLIC_FILTERS_DEFAULT_SORT
 
         // Query
         const res = await fetchAPI(`
@@ -21,7 +19,7 @@ export const load: PageServerLoad = async ({ url }) => {
                         status: { _eq: "published" },
                     },
                     sort: "${querySort === 'latest' ? '-' : ''}date_created",
-                    limit: ${import.meta.env.VITE_GRID_AMOUNT},
+                    limit: ${PUBLIC_GRID_AMOUNT},
                     page: 1,
                 ) {
                     id

src/routes/photos/+page.svelte

@@ -13,9 +13,9 @@
     import relativeTime from 'dayjs/plugin/relativeTime'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/contants'
-    import { fetchAPI } from '$utils/api'
     import { quartOut } from '$animations/easings'
     import { map, lerp, throttle } from '$utils/functions'
+    import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -57,8 +57,8 @@
     /**
      * Filters
      */
-    const defaultCountry: string = import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY
+    const defaultCountry: string = PUBLIC_FILTERS_DEFAULT_COUNTRY
-    const defaultSort: string = import.meta.env.VITE_FILTERS_DEFAULT_SORT
+    const defaultSort: string = PUBLIC_FILTERS_DEFAULT_SORT
     const urlFiltersParams = new URLSearchParams()
     let filtered: boolean
     let filterCountry = $page.url.searchParams.get('country') || defaultCountry
@@ -158,39 +158,43 @@
      */
     // [function] Load photos helper
     const loadPhotos = async (page: number) => {
-        const res = fetchAPI(`
+        const res = await fetch('/api/data', {
-            query {
+            method: 'POST',
-                photos: photo (
+            body: `
-                    filter: {
+                query {
-                        ${filterCountry !== 'all' ? `location: { country: { slug: { _eq: "${filterCountry}" }} },` : ''}
+                    photos: photo (
-                        status: { _eq: "published" },
+                        filter: {
-                    },
+                            ${filterCountry !== 'all' ? `location: { country: { slug: { _eq: "${filterCountry}" }} },` : ''}
-                    sort: "${filterSort === 'latest' ? '-' : ''}date_created",
+                            status: { _eq: "published" },
-                    limit: ${import.meta.env.VITE_GRID_INCREMENT},
+                        },
-                    page: ${page},
+                        sort: "${filterSort === 'latest' ? '-' : ''}date_created",
-                ) {
+                        limit: ${PUBLIC_GRID_INCREMENT},
-                    id
+                        page: ${page},
-                    title
+                    ) {
-                    slug
-                    image {
                         id
                         title
-                    }
-                    location {
                         slug
-                        name
+                        image {
-                        region
+                            id
-                        country {
+                            title
+                        }
+                        location {
                             slug
                             name
-                            flag { id }
+                            region
+                            country {
+                                slug
+                                name
+                                flag { id }
+                            }
                         }
+                        city
                     }
-                    city
                 }
-            }
+            `,
-        `)
+        })
-        const { data: { photos }} = await res
+
+        const { data: { photos }} = await res.json()
 
         if (photos) {
             // Return new photos
@@ -209,7 +213,7 @@
             photos = [...photos, ...newPhotos]
 
             // Define actions if the number of new photos is the expected ones
-            if (newPhotos.length === Number(import.meta.env.VITE_GRID_INCREMENT)) {
+            if (newPhotos.length === Number(PUBLIC_GRID_INCREMENT)) {
                 // Increment the current page
                 currentPage++
             }

src/utils/api.ts

@@ -1,7 +1,8 @@
+import { env } from '$env/dynamic/private'
+import { PUBLIC_API_URL_DEV, PUBLIC_API_URL_PROD, PUBLIC_API_GRAPHQL_PATH } from '$env/static/public'
+
 // Define API URL from environment
-export const API_URL = import.meta.env.DEV
+export const API_URL = env.DEV ? PUBLIC_API_URL_DEV : PUBLIC_API_URL_PROD
-    ? `${import.meta.env.VITE_API_URL_DEV}`
-    : `${import.meta.env.VITE_API_URL_PROD}`
 
 
 /**
@@ -9,7 +10,7 @@ export const API_URL = import.meta.env.DEV
  */
 export const fetchAPI = async (query: string) => {
     try {
-        const res = await fetch(`${API_URL}${import.meta.env.VITE_API_GRAPHQL_PATH}`, {
+        const res = await fetch(`${API_URL}${PUBLIC_API_GRAPHQL_PATH}`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -25,7 +26,7 @@ export const fetchAPI = async (query: string) => {
             return data
         }
     } catch (error) {
-        console.error(error)
+        throw Error(error)
     }
 }
 

src/utils/functions/swell.ts

@@ -1,7 +1,8 @@
 import swell from 'swell-node'
+import { SWELL_API_TOKEN, SWELL_STORE_ID } from '$env/static/private'
 
 // Init Swell
-swell.init(import.meta.env.VITE_SWELL_STORE_ID, import.meta.env.VITE_SWELL_API_TOKEN)
+swell.init(SWELL_STORE_ID, SWELL_API_TOKEN)