Add Fullscreen in viewer, Track links with Google Analytics, Use .env file

- Fullscreen is a component that watches a store value set by the Carousel component on a picture click
- Use a .env file for API and website related settings and informations
- Google Analytics is now in place, tracking each routes link and viewer photo change

src/utils/AnalyticsTracker.svelte

@@ -0,0 +1,27 @@
+<script>
+    import { analyticsUpdate } from '../utils/functions'
+
+    // Props
+    export let stores
+    export let id
+
+    // Variables
+    const { page } = stores()
+
+    // Init Google Analytics
+    if (typeof window !== 'undefined') {
+        window.dataLayer = window.dataLayer || []
+        window.gtag = function gtag() {
+            window.dataLayer.push(arguments)
+        }
+        window.gtag('js', new Date())
+        window.gtag('config', id)
+    }
+
+    // Push new page to GA
+    $: analyticsUpdate($page.path, id)
+</script>
+
+<svelte:head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id={id}"></script>
+</svelte:head>

src/utils/functions.js

@@ -175,3 +175,15 @@ export const parallaxAnime = (element, anime) => {
         }
     }
 }
+
+
+/*
+** Google Analytics send page
+*/
+export const analyticsUpdate = (page, id = process.env.CONFIG.GA_TRACKER_ID) => {
+    if (typeof gtag !== 'undefined') {
+        window.gtag('config', id, {
+            page_path: page
+        })
+    }
+}

src/utils/store.js

@@ -8,10 +8,9 @@ export const dev = process.env.NODE_ENV === 'development'
 /* ==========================================================================
    Site related
 ========================================================================== */
-const apiEndpoint = dev ? 'http://api.housesof.localhost/how' : 'https://api.housesof.world/_'
-const apiAccessToken = 'NJk0urljsdSvApUDzWxGgoO6'
+const apiEndpoint = dev ? process.env.CONFIG.API_URL_DEV : process.env.CONFIG.API_URL_PROD
 export const apiEndpoints = {
-    gql: `${apiEndpoint}/gql?access_token=${apiAccessToken}`,
+    gql: `${apiEndpoint}/gql?access_token=${process.env.CONFIG.API_TOKEN}`,
     rest: apiEndpoint
 }
 
@@ -30,6 +29,7 @@ export let pageReady = writable(false)
 export const pageTransition = {
    onAnimationEnd () {}
 }
+export let fullscreen = writable()
 
 
 /* ==========================================================================