Restructure utility files, Use a bundle.css to fix CSS issues

src/utils/animations.js

@@ -0,0 +1,23 @@
+// import anime from 'animejs'
+import { crossfade } from 'svelte/transition'
+import { quartOut } from 'svelte/easing'
+
+
+// Crossfade transition
+export const [crossfadeSend, crossfadeReceive] = crossfade({
+    duration: d => Math.sqrt(d * 200),
+
+    fallback(node, params) {
+        const style = getComputedStyle(node)
+        const transform = style.transform === 'none' ? '' : style.transform
+
+        return {
+            duration: 600,
+            easing: quartOut,
+            css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+        }
+    }
+})

src/utils/functions.js

@@ -0,0 +1,97 @@
+import { apiEndpoints } from './store'
+
+
+/*
+** Debounce function with a delay
+** (For scrolling or other resource demanding behaviors)
+*/
+export const debounce = (callback, wait, immediate = false) => {
+    let timeout = null
+    return function () {
+        const callNow = immediate && !timeout
+        const next = () => callback.apply(this, arguments)
+        clearTimeout(timeout)
+        timeout = setTimeout(next, wait)
+        if (callNow) next()
+    }
+}
+
+
+/*
+** Throttle function with a delay
+** (Throttling enforces a maximum number of times a function can be called over time, as in 'execute this function at most once every 100 milliseconds)
+*/
+export function throttle (fn, delay) {
+    let lastCall = 0
+    return function (...args) {
+        const now = (new Date).getTime()
+        if (now - lastCall < delay) return
+        lastCall = now
+        return fn(...args)
+    }
+}
+
+
+/*
+** Wrap string's each letters into a span
+*/
+export const lettersToSpan = string => {
+    return string
+        .replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
+        .replace(/ /g, '\u00a0')
+}
+
+
+/*
+** Check if element is in viewport
+*/
+export const isInViewport = element => {
+    const bounding = element.getBoundingClientRect()
+    return (
+        bounding.top >= 0 &&
+        bounding.left >= 0 &&
+        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+    )
+}
+
+
+
+/*
+** Smooth Scroll
+*/
+export const smoothScroll = (event, element = null) => {
+    document.querySelector(element).scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+    })
+    event.preventDefault()
+}
+
+
+
+/*
+** Random String Generator
+*/
+export const randomString = (length = 6, type = 'A') => {
+    type = type && type.toLowerCase()
+    let str = ''
+    let i = 0
+    const min = type == 'a' ? 10 : 0
+    const max = type == 'n' ? 10 : 62
+    for (; i++ < length;) {
+        let r = Math.random() * (max - min) + min << 0
+        str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
+    }
+    return str
+}
+
+
+/*
+** Get thumbnail from API
+*/
+export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
+    const ratio = 1.5
+    height = !height ? Math.round(width / ratio) : height
+    return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
+}

src/utils/store.js

@@ -0,0 +1,28 @@
+// Svelte
+import { writable } from 'svelte/store'
+
+// Define environment
+export const dev = process.env.NODE_ENV === 'development'
+
+
+/* ==========================================================================
+   Site related
+========================================================================== */
+const apiEndpoint = dev ? 'http://api.housesof.localhost/how' : 'https://api.housesof.world/_'
+export const apiEndpoints = {
+    gql: apiEndpoint + '/gql?access_token=NJk0urljsdSvApUDzWxGgoO6',
+    rest: apiEndpoint
+}
+
+// Data
+export let site = writable()
+export let continents = writable()
+export let countries = writable()
+export let locations = writable()
+
+// Derived data
+export let currentLocation = writable()
+export let currentPhotos = writable()
+
+// State
+export let loaded = writable(false)