Merge branch 'dev'

apps/website/.eslintignore

@@ -0,0 +1,15 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+*.d.ts
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

apps/website/.eslintrc.cjs

@@ -1,20 +1 @@
-module.exports = {
+module.exports = require('config/eslintrc.config.cjs')
-	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2019
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-}

apps/website/package.json

@@ -20,26 +20,27 @@
     "embla-carousel": "^7.0.9",
     "focus-visible": "^5.2.0",
     "motion": "^10.15.5",
-    "ogl": "^0.0.104",
+    "ogl": "^0.0.110",
     "sanitize.css": "^13.0.0",
-    "swell-js": "3.19.5",
+    "swell-js": "3.19.8",
-    "tweakpane": "^3.1.4"
+    "tweakpane": "^3.1.4",
+    "utils": "workspace:*"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^1.0.2",
+    "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-cloudflare": "^2.0.1",
-    "@sveltejs/adapter-node": "^1.1.4",
+    "@sveltejs/adapter-vercel": "^2.0.2",
-    "@sveltejs/adapter-vercel": "^1.0.6",
+    "@sveltejs/kit": "^1.5.3",
-    "@sveltejs/kit": "^1.3.7",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.51.0",
-    "@typescript-eslint/parser": "^5.50.0",
     "base-64": "^1.0.0",
     "browserslist": "^4.21.5",
+    "config": "workspace:*",
     "cssnano": "^5.1.14",
     "eslint": "^8.33.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^2.16.0",
     "postcss": "^8.4.21",
-    "postcss-focus-visible": "^8.0.1",
+    "postcss-focus-visible": "^8.0.2",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^8.0.1",
     "postcss-sort-media-queries": "^4.3.0",
@@ -49,7 +50,7 @@
     "svelte-preprocess": "^5.0.1",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5",
-    "vite": "^4.0.4"
+    "vite": "^4.1.1"
   },
   "type": "module",
   "browserslist": [

apps/website/postcss.config.js

@@ -1,12 +1,11 @@
-const cssnano = require('cssnano')
+import cssnano from 'cssnano'
-const presetEnv = require('postcss-preset-env')
+import presetEnv from 'postcss-preset-env'
-const focusVisible = require('postcss-focus-visible')
+import focusVisible from 'postcss-focus-visible'
-// const sortMediaQueries = require('postcss-sort-media-queries')
+// import sortMediaQueries from 'postcss-sort-media-queries'
-const normalize = require('postcss-normalize')
+import normalize from 'postcss-normalize'
 
-const dev = process.env.NODE_ENV !== 'development'
 
-module.exports = {
+export default {
     plugins: [
         // Preset Env
         presetEnv({
@@ -25,7 +24,7 @@ module.exports = {
         normalize({}),
 
         // CSS Nano
-        !dev && cssnano({
+        !process.env.DEV && cssnano({
             preset: ['default', {
                 autoprefixer: true,
                 discardComments: { removeAll: true },

apps/website/src/components/PageTransition.svelte

@@ -2,7 +2,7 @@
     import { page } from '$app/stores'
     import { afterUpdate } from 'svelte'
     import { fade } from 'svelte/transition'
-    import { scrollToTop } from '$utils/functions'
+    import { scrollToTop } from 'utils/scroll'
     import { pageLoading } from '$utils/stores'
     import { DELAY, DURATION } from '$utils/constants'
 

apps/website/src/components/SplitText.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { splitText } from '$utils/functions'
+    import { splitText } from 'utils/text'
 
     export let text: string
     export let mode: string = undefined
@@ -17,7 +17,6 @@
                 <span class="text-split__line" aria-hidden={index === 1}>
                     {#each split as word, i}
                         <span class="word" style:--i-w={i}>{word}</span>{#if word.includes('\n')}<br>{/if}
-                        <!-- svelte-ignore empty-block -->
                         {#if i < split.length - 1}{/if}
                     {/each}
                 </span>

apps/website/src/components/atoms/Button.svelte

@@ -45,7 +45,6 @@
         href={url} class={classes}
         {target} {rel}
         data-sveltekit-noscroll={isExternal || isProtocol ? 'off' : ''}
-        {disabled}
         tabindex="0"
         on:click
     >

apps/website/src/components/atoms/Image.svelte

@@ -10,7 +10,7 @@
     export let ratio: number = undefined
     export let alt: string
     export let lazy = true
-    export let decoding: "auto" | "sync" | "async" = "auto"
+    export let decoding: 'auto' | 'sync' | 'async' = 'auto'
 
     interface Sizes {
         small?: { width?: number, height?: number }
@@ -50,16 +50,16 @@
     $: imgSrc = id ? getAssetUrlKey(id, `${sizeKey}-small-jpg`) : src ? src : undefined
     $: srcSet = {
         // WebP
-        webp:
+        webp: sizes
-            sizes ? [
+            ? [
                 `${getAssetUrlKey(id, `${sizeKey}-small-webp`)} 345w`,
                 sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-webp`)} 768w` : null,
                 sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-webp`)} 1280w` : null,
             ]
             : [getAssetUrlKey(id, `${sizeKey}-webp`)],
         // JPG
-        jpg:
+        jpg: sizes
-            sizes ? [
+            ? [
                 `${getAssetUrlKey(id, `${sizeKey}-small-jpg`)} 345w`,
                 sizes.medium ? `${getAssetUrlKey(id, `${sizeKey}-medium-jpg`)} 768w` : null,
                 sizes.large ? `${getAssetUrlKey(id, `${sizeKey}-large-jpg`)} 1280w` : null,

apps/website/src/components/atoms/ScrollingTitle.svelte

@@ -8,7 +8,7 @@
 </style>
 
 <script lang="ts">
-    import { map } from '$utils/functions'
+    import { map } from 'utils/math'
     import reveal from '$animations/reveal'
 
     export let tag: string

apps/website/src/components/layouts/PosterLayout.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import { addToCart } from '$utils/functions/shop'
-    import { capitalizeFirstLetter } from '$utils/functions'
+    import { capitalizeFirstLetter } from 'utils/string'
     // Components
     import SplitText from '$components/SplitText.svelte'
     import Button from '$components/atoms/Button.svelte'

apps/website/src/components/molecules/Location.svelte

@@ -6,7 +6,7 @@
     import { getContext } from 'svelte'
     import { spring } from 'svelte/motion'
     import dayjs from 'dayjs'
-    import { lerp } from '$utils/functions'
+    import { lerp } from 'utils/math'
     import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
     import { seenLocations } from '$utils/stores'
     // Components
@@ -31,7 +31,7 @@
 
         // Detect if location has new content
         const seenLocationDate = dayjs(parsedSeenLocations[location.id])
-        const isLocationSeen = parsedSeenLocations?.hasOwnProperty(location.id)
+        const isLocationSeen = location.id in parsedSeenLocations
 
         // Define if location is has new photos
         if (seenLocationDate && isLocationSeen) {

apps/website/src/components/molecules/NotificationCart.svelte

@@ -19,8 +19,9 @@
 </script>
 
 <div class="notification-cart shadow-small"
-    on:click={closeNotification}
     transition:fly={{ y: 20, duration: 700, easing: quartOut }}
+    on:click={closeNotification}
+    on:keydown
 >
     <div class="notification-cart__left">
         <img src={image} width={58} height={88} alt={title}>

apps/website/src/components/molecules/ProcessStep.svelte

@@ -36,7 +36,7 @@
                 alt={image.title}
             />
         {:else if video && video.mp4 && video.webm}
-            <video muted loop playsinline autoplay allow="autoplay">
+            <video muted loop playsinline autoplay>
                 <source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
                 <source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
                 <track kind="captions" />

apps/website/src/components/molecules/Select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher } from 'svelte'
 
     interface Option {
         value: string

apps/website/src/components/organisms/Cart.svelte

@@ -10,12 +10,12 @@
     import { smoothScroll } from '$utils/stores'
     import { cartOpen, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop'
     import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop'
+    import { sendEvent } from '$utils/analytics'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Icon from '$components/atoms/Icon.svelte'
     import CartItem from '$components/molecules/CartItem.svelte'
     import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
-    import { sendEvent } from '$utils/analytics';
 
 
     // Block scroll if cart is open
@@ -151,5 +151,6 @@
     <div class="cart-overlay"
         transition:fade={{ duration: 600, easing: quartOut }}
         on:click={handleCloseCart}
+        on:keydown
     />
 {/if}

apps/website/src/components/organisms/InteractiveGlobe.svelte

@@ -7,7 +7,8 @@
     import { fade, fly as flySvelte } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { Globe, type Marker } from '$modules/globe'
-    import { getRandomItem, debounce } from '$utils/functions'
+    import { getRandomItem } from 'utils/array'
+    import { debounce } from 'utils/actions'
     import { revealSplit } from '$animations/transitions'
     // Components
     import SplitText from '$components/SplitText.svelte'

apps/website/src/components/organisms/Locations.svelte

@@ -8,7 +8,7 @@
     import { quartOut } from 'svelte/easing'
     import reveal from '$animations/reveal'
     import { send, receive } from '$animations/crossfade'
-    import { throttle } from '$utils/functions'
+    import { throttle } from 'utils/actions'
     import { sendEvent } from '$utils/analytics'
     // Components
     import Button from '$components/atoms/Button.svelte'

apps/website/src/components/organisms/PostersGrid.svelte

@@ -7,7 +7,7 @@
     import EmblaCarousel, { type EmblaCarouselType } from 'embla-carousel'
     // Components
     import Poster from '$components/molecules/Poster.svelte'
-    import { debounce } from '$utils/functions'
+    import { debounce } from 'utils/actions'
 
     export let posters: any = []
 

apps/website/src/modules/globe/index.ts

@@ -16,21 +16,10 @@ export class Globe {
         this.markers = options.markers || []
         this.zoom = 1.3075
 
-        // Calculate the current sun position from a given location
+        // Calculate local time for sun position
-        // const locations = [
+        const date = new Date()
-        //     {
+        const localHour = date.getHours() + date.getTimezoneOffset() / 60
-        //         lat: -37.840935,
+        this.options.sunAngle = (localHour - 12) / 12
-        //         lng: 144.946457,
-        //         tz: 'Australia/Melbourne',
-        //     },
-        //     {
-        //         lat: 48.856614,
-        //         lng: 2.3522219,
-        //         tz: 'Europe/Paris',
-        //     }
-        // ]
-        // const location = locations[1]
-        // const localDate = new Date(new Date().toLocaleString('en-US', { timeZone: location.tz }))
 
         // Parameters
         this.params = {
@@ -39,7 +28,6 @@ export class Globe {
             enableMarkers: options.enableMarkers,
             enableMarkersLinks: options.enableMarkersLinks,
             sunAngle: options.sunAngle || 0,
-            sunAngleDelta: 1.8,
         }
 
         // Misc
@@ -121,11 +109,10 @@ export class Globe {
         imgDark.src = this.options.mapFileDark
 
         // Create light
-        const lightD = degToRad(7 * 360 / 24)
         const sunPosition = new Vec3(
-            Math.cos(lightD),
+            Math.cos(this.params.sunAngle),
-            Math.sin(lightD) * Math.sin(0),
+            Math.sin(this.params.sunAngle) * Math.sin(0),
-            Math.sin(lightD) * Math.cos(0)
+            Math.sin(this.params.sunAngle) * Math.cos(0)
         )
 
         // Create program
@@ -362,7 +349,7 @@ export type Marker = {
 /**
  * Detect WebGL support
  */
-function WebGLSupport () {
+const WebGLSupport = (): boolean => {
     try {
         const canvas = document.createElement('canvas')
         return !!window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))

apps/website/src/modules/globe/pane.ts

@@ -47,9 +47,10 @@ export const createPane = (ctx: any) => {
         title: 'Misc',
     })
     // Sun position
-    misc.addInput(ctx.params, 'sunAngleDelta', {
+    misc.addInput(ctx.params, 'sunAngle', {
-        label: 'Sun angle delta',
+        label: 'Sun angle',
         min: 0,
-        max: 2 * Math.PI,
+        max: 1,
+        step: 0.01,
     })
 }

apps/website/src/routes/(shop)/shop/+error.svelte

@@ -15,7 +15,7 @@
         },
         500: {
             title: 'Server error',
-            message: "That is embarassing, the problem is on our side.",
+            message: 'That is embarassing, the problem is on our side.',
         },
     }
 </script>

apps/website/src/routes/(shop)/shop/+layout.server.ts

@@ -3,6 +3,10 @@ import type { LayoutServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { fetchSwell } from '$utils/functions/shopServer'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async () => {
     try {
         // Get content from API

apps/website/src/routes/(shop)/shop/+page.server.ts

@@ -1,9 +1,13 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import { getRandomItem } from '$utils/functions'
+import { getRandomItem } from 'utils/array'
 import { fetchSwell } from '$utils/functions/shopServer'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async ({ setHeaders }) => {
     try {
         // Get content from API

apps/website/src/routes/(shop)/shop/[type]-[name]/+page.server.ts

@@ -3,6 +3,10 @@ import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { fetchSwell } from '$utils/functions/shopServer'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async ({ params, setHeaders }) => {
     try {
         // Get content from API

apps/website/src/routes/(shop)/shop/[type]-[name]/+page.svelte

@@ -3,7 +3,7 @@
     import { getContext } from 'svelte'
     import { getAssetUrlKey } from '$utils/api'
     import { shopCurrentProductSlug } from '$utils/stores/shop'
-    import { capitalizeFirstLetter } from '$utils/functions'
+    import { capitalizeFirstLetter } from 'utils/string'
     // Components
     import PageTransition from '$components/PageTransition.svelte'
     import Metas from '$components/Metas.svelte'

apps/website/src/routes/(site)/[country]/[location]/+page.server.ts

@@ -3,6 +3,10 @@ import type { PageServerLoad } from './$types'
 import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
 import { fetchAPI, photoFields } from '$utils/api'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async ({ params, setHeaders }) => {
     try {
         const { location: slug } = params
@@ -73,7 +77,7 @@ export const load = (async ({ params, setHeaders }) => {
         const { data: { location: location, photos, total_published, product } } = res
 
         if (!location.length || location.length && params.country !== location[0].country.slug) {
-            throw error(404, "This location is not available… yet!")
+            throw error(404, 'This location is not available… yet!')
         }
 
         setHeaders({ 'Cache-Control': 'public, max-age=1, stale-while-revalidate=604799' })

apps/website/src/routes/(site)/[country]/[location]/+page.svelte

@@ -219,7 +219,6 @@
 />
 
 
-
 <PageTransition>
     <main class="location-page">
         <section class="location-page__intro grid" bind:this={introEl}>
@@ -302,7 +301,7 @@
                         location={location.name}
                         ratio={width / height}
                         date={date_taken}
-                        index={(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
+                        index="{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}"
                     />
                 {/each}
             </section>
@@ -312,7 +311,7 @@
                     ended={ended}
                     current={currentPhotosAmount}
                     total={totalPhotos}
-                    on:click={!ended && loadMorePhotos}
+                    on:click={() => !ended && loadMorePhotos()}
                 >
                     {#if !ended}
                         <p class="more">See more photos</p>

apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.server.ts

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async ({ params, setHeaders }) => {
     try {
         // Get the first photo ID

apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte

@@ -15,7 +15,7 @@
     import { getAssetUrlKey } from '$utils/api'
     import { previousPage } from '$utils/stores'
     import { DELAY } from '$utils/constants'
-    import { throttle } from '$utils/functions'
+    import { throttle } from 'utils/actions'
     import { swipe } from '$utils/interactions/swipe'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -93,10 +93,10 @@
     const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => {
         if (defaultPrevented) return
         switch (key) {
-            case 'ArrowLeft': goToPrevious(); break;
+            case 'ArrowLeft': goToPrevious(); break
-            case 'ArrowRight': goToNext(); break;
+            case 'ArrowRight': goToNext(); break
-            case 'Escape': closeViewer(); break;
+            case 'Escape': closeViewer(); break
-            default: return;
+            default: return
         }
     }
 
@@ -105,15 +105,15 @@
         // Swipe up and down on mobile/small screens
         if (innerWidth < 992) {
             switch (detail) {
-                case '-y': goToNext(); break;
+                case '-y': goToNext(); break
-                case 'y': goToPrevious(); break;
+                case 'y': goToPrevious(); break
             }
         }
         // Swipe left and right on larger screens
         else {
             switch (detail) {
-                case '-x': goToNext(); break;
+                case '-x': goToNext(); break
-                case 'x': goToPrevious(); break;
+                case 'x': goToPrevious(); break
             }
         }
     }
@@ -320,7 +320,11 @@
             </ButtonCircle>
 
             <div class="photo-page__carousel">
-                <div class="photo-page__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
+                <div class="photo-page__images"
+                    use:swipe
+                    on:swipe={handleSwipe}
+                    on:tap={toggleFullscreen}
+                >
                     {#each visiblePhotos as { id, image, title }, index (id)}
                         <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
                             <Image
@@ -377,7 +381,8 @@
         </div>
 
         {#if isFullscreen}
-            <div class="photo-page__fullscreen" bind:this={fullscreenEl} on:click={toggleFullscreen}
+            <div class="photo-page__fullscreen" bind:this={fullscreenEl}
+                on:click={toggleFullscreen} on:keydown
                 in:fade={{ easing: quartOut, duration: 1000 }}
                 out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}
             >

apps/website/src/routes/(site)/about/+page.server.ts

@@ -1,7 +1,11 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import { getRandomItems } from '$utils/functions'
+import { getRandomItems } from 'utils/array'
+
+export const config = {
+    runtime: 'edge'
+}
 
 export const load = (async ({ setHeaders }) => {
     try {

apps/website/src/routes/(site)/about/+page.svelte

@@ -3,15 +3,17 @@
 </style>
 
 <script lang="ts">
-    import { navigating, page } from '$app/stores'
+    import { navigating } from '$app/stores'
     import { onMount, afterUpdate } from 'svelte'
     import { quartOut as quartOutSvelte } from 'svelte/easing'
     import { fade, fly } from 'svelte/transition'
     import type { PageData } from './$types'
     import { animate, inView, stagger, timeline } from 'motion'
-    import { mailtoClipboard, map } from '$utils/functions'
+    import { mailtoClipboard } from '$utils/functions'
     import { getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/constants'
+    import { map } from 'utils/math'
+    import { sendEvent } from '$utils/analytics'
     import { quartOut } from '$animations/easings'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -21,7 +23,6 @@
     import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
     import ProcessStep from '$components/molecules/ProcessStep.svelte'
     import Banner from '$components/organisms/Banner.svelte'
-    import { sendEvent } from '$utils/analytics';
 
     export let data: PageData
     const { about, photos } = data
@@ -223,7 +224,7 @@
                         {about.intro_firstphoto_caption}<br>
                         in
                         <a href="/{about.intro_firstlocation.country.slug}/{about.intro_firstlocation.slug}" data-sveltekit-noscroll>
-                            <img src="{getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')}" width="32" height="32" alt="{about.intro_firstlocation.country.flag.title}">
+                            <img src={getAssetUrlKey(about.intro_firstlocation.country.flag.id, 'square-small-jpg')} width="32" height="32" alt={about.intro_firstlocation.country.flag.title}>
                             <span>Naarm Australia (Melbourne)</span>
                         </a>
                     </figcaption>

apps/website/src/routes/(site)/api/data/+server.ts

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
 import { fetchAPI } from '$utils/api'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const POST = (async ({ request, setHeaders }) => {
     try {
         const body = await request.text()

apps/website/src/routes/(site)/credits/+page.server.ts

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async ({ setHeaders }) => {
     try {
         const res = await fetchAPI(`query {

apps/website/src/routes/(site)/feed/products.xml/+server.ts

@@ -3,6 +3,10 @@ import type { RequestHandler } from './$types'
 import { fetchSwell } from '$utils/functions/shopServer'
 import { fetchAPI, getAssetUrlKey } from '$utils/api'
 
+export const config = {
+    runtime: 'edge'
+}
+
 const gCategories = [
     {
         id: '61851d83cd16416c78a8e5ef',

apps/website/src/routes/(site)/locations/+page.server.ts

@@ -0,0 +1,3 @@
+export const config = {
+    runtime: 'edge'
+}

apps/website/src/routes/(site)/locations/+page.svelte

@@ -14,7 +14,7 @@
     import Heading from '$components/molecules/Heading.svelte'
 
     const { locations }: any = getContext('global')
-    const text = "Explore the globe to discover unique locations across the world"
+    const text = 'Explore the globe to discover unique locations across the world'
 </script>
 
 <Metas

apps/website/src/routes/(site)/photos/+page.server.ts

@@ -3,6 +3,10 @@ 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'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async ({ url, setHeaders }) => {
     try {
         // Query parameters

apps/website/src/routes/(site)/photos/+page.svelte

@@ -13,7 +13,8 @@
     import relativeTime from 'dayjs/plugin/relativeTime'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/constants'
-    import { map, lerp, throttle } from '$utils/functions'
+    import { map, lerp } from 'utils/math'
+    import { throttle } from 'utils/actions'
     import { getAssetUrlKey } from '$utils/api'
     import { quartOut } from '$animations/easings'
     import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'

apps/website/src/routes/(site)/subscribe/+page.server.ts

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async ({ setHeaders }) => {
     try {
         const res = await fetchAPI(`query {

apps/website/src/routes/(site)/terms/+page.server.ts

@@ -2,6 +2,10 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const load = (async ({ setHeaders }) => {
     try {
         const res = await fetchAPI(`query {

apps/website/src/routes/+layout.server.ts

@@ -3,6 +3,9 @@ import type { LayoutServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
 
+export const config = {
+    runtime: 'edge'
+}
 
 export const load = (async () => {
     try {

apps/website/src/routes/+page.server.ts

@@ -1,8 +1,11 @@
 import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import { getRandomItems } from '$utils/functions'
+import { getRandomItems } from 'utils/array'
 
+export const config = {
+    runtime: 'edge'
+}
 
 export const load = (async ({ setHeaders }) => {
     try {

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

@@ -1,6 +1,10 @@
 import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
 import type { RequestHandler } from './$types'
 
+export const config = {
+    runtime: 'edge'
+}
+
 export const POST = (async ({ request, fetch }) => {
     const data: { email: string } = await request.json()
     const { email } = data

apps/website/src/routes/sitemap.xml/+server.ts

@@ -2,6 +2,9 @@ import { error } from '@sveltejs/kit'
 import type { RequestHandler } from './$types'
 import { fetchAPI } from '$utils/api'
 
+export const config = {
+    runtime: 'edge'
+}
 
 export const GET = (async ({ url, setHeaders }) => {
     try {

apps/website/src/service-workers.ts

@@ -15,12 +15,11 @@ const cached = build.concat(files);
             .then(cache => cache.addAll(cached))
             .then(() => {
                 // if you use typescript:
-                (self as unknown as ServiceWorkerGlobalScope).skipWaiting();
+                (self as unknown as ServiceWorkerGlobalScope).skipWaiting()
                 // self.skipWaiting();
             })
-        );
+    )
-    }
+});
-);
 
 // self.addEventListener(
 // if you use typescript:
@@ -38,7 +37,7 @@ const cached = build.concat(files);
             (self as unknown as ServiceWorkerGlobalScope).clients.claim()
             // self.clients.claim()
         })
-    );
+    )
 })
 
 
@@ -110,5 +109,4 @@ async function fetchAndCache(request: Request) {
             return cachedAsset || fetchAndCache(event.request)
         })()
     )
-    }
+})
-)

apps/website/src/utils/functions/index.ts

@@ -1,150 +1,6 @@
 import { sendEvent } from '$utils/analytics'
 
 
-/**
- * Debounce a function with a given amount of time
- * @description  For scrolling or other resource demanding behaviors
- */
-export const debounce = (callback: (...args: any[]) => any, wait: number, immediate = false) => {
-    let timeout: ReturnType<typeof setTimeout> | number = 0
-    return (...args: any[]) => {
-        const callNow: boolean = immediate && !timeout
-        const next = () => callback(...args)
-        clearTimeout(timeout)
-        timeout = setTimeout(next, wait)
-        if (callNow) next()
-    }
-}
-
-
-/**
- * Throttle a function by a given amount of time
- * @description 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 const throttle = (fn: (...args: any[]) => any, delay: number) => {
-    let lastCall = 0
-    return (...args: unknown[]) => {
-        const now = performance.now()
-        if (now - lastCall < delay) return
-        lastCall = now
-        requestAnimationFrame(() => fn(...args))
-    }
-}
-
-
-/**
- * Split text
- * @description Split a string into words or characters
- * @returns string[]
- */
-export const splitText = (text: string, mode = 'words'): string[] => {
-    // Split by words
-    if (mode === 'words') {
-        const words = text
-            .replace(/\\n/g, '\n')
-            .replace(/\s+/g, m => m.includes('\n') ? '\n ' : ' ')
-            .trim()
-            .split(' ')
-
-        return words
-    }
-    // Split by chars
-    else if (mode === 'chars') {
-        const chars = Array.from(text).map(char => char === ' ' ? '\xa0' : char)
-        return chars
-    }
-}
-
-
-/**
- * Capitalize first letter
- */
-export const capitalizeFirstLetter = (string: string) => {
-    return string[0].toUpperCase() + string.slice(1)
-}
-
-
-/**
- * Create a delay
- */
-export const sleep = (milliseconds: number) => {
-    return new Promise(resolve => setTimeout(resolve, milliseconds))
-}
-
-
-/**
- * Linear Interpolation
- */
-export const lerp = (start: number, end: number, amount: number): number => {
-    return (1 - amount) * start + amount * end
-}
-
-
-/**
- * Re-maps a number from one range to another
- * @param value the incoming value to be converted
- * @param start1 lower bound of the value's current range
- * @param stop1 upper bound of the value's current range
- * @param start2 lower bound of the value's target range
- * @param stop2 upper bound of the value's target range
- * @param [withinBounds] constrain the value to the newly mapped range
- * @return remapped number
- */
-export const map = (n: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds: boolean): number => {
-    const value = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2
-    if (!withinBounds) return value
-    if (start2 < stop2) {
-        return clamp(value, start2, stop2)
-    } else {
-        return clamp(value, stop2, start2)
-    }
-}
-
-
-/**
- * Clamp a number
- */
-export const clamp = (num: number, a: number, b: number) => {
-    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b))
-}
-
-
-/**
- * Return random elements from an array
- */
-export const getRandomItems = <T> (array: T[], amount: number): T[] => {
-    const shuffled = array.slice()
-    for (let i = shuffled.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
-    }
-    return shuffled.slice(0, amount)
-}
-
-
-/**
- * Return a random element from an array
- */
-export const getRandomItem = <T extends Array<unknown>> (array: T): T[0] => {
-    return getRandomItems(array, 1)[0]
-}
-
-
-
-/**
- * Scroll back to top after page transition
- */
-export const scrollToTop = (delay?: number) => {
-    const scroll = () => window.scrollTo(0,0)
-
-    if (delay && delay > 0) {
-        setTimeout(scroll, delay)
-    } else {
-        return scroll()
-    }
-}
-
-
 /**
  * Copy mailto links to clipboard and show message
  */

apps/website/svelte.config.js

@@ -18,7 +18,7 @@ const config = {
 
     kit: {
         adapter: adapter({
-            // edge: true,
+            edge: true,
         }),
         alias: {
             $components: 'src/components',

apps/website/tsconfig.json

@@ -11,5 +11,6 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		// "strict": true
-	}
+	},
+	"exclude": [],
 }

package.json

@@ -1,9 +1,10 @@
 {
   "name": "housesof",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": true,
   "workspaces": [
-    "apps/*"
+    "apps/*",
+    "packages/*"
   ],
   "scripts": {
     "dev": "turbo run dev --parallel",
@@ -11,12 +12,12 @@
     "lint": "turbo run lint"
   },
   "devDependencies": {
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
-    "turbo": "^1.7.1"
+    "turbo": "^1.7.4"
   },
   "type": "module",
   "engines": {
     "node": ">=16.0.0"
   },
-  "packageManager": "^pnpm@7.0.0"
+  "packageManager": "^pnpm@7.27.0"
 }

packages/config/eslintrc.config.cjs

@@ -0,0 +1,78 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        es2017: true,
+        node: true,
+    },
+    parserOptions: {
+        sourceType: 'module',
+        ecmaVersion: 2020,
+        project: './*/tsconfig.json',
+        extraFileExtensions: ['.svelte']
+    },
+    parser: '@typescript-eslint/parser',
+    plugins: [
+        '@typescript-eslint'
+    ],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:svelte/recommended',
+    ],
+    ignorePatterns: [
+        '*.d.ts',
+        '**/build/**', '**/node_modules/**', '**/.svelte-kit/**', '**/dist/**'
+    ],
+    overrides: [
+        {
+            'files': ['*.svelte'],
+            'parser': 'svelte-eslint-parser',
+            'parserOptions': {
+                'parser': '@typescript-eslint/parser'
+            }
+        },
+    ],
+    rules: {
+        /* Javascript / Typescript
+        ========================================= */
+        // Use spaces over tabs
+        'no-tabs': 'error',
+        indent: ['error', 4, { SwitchCase: 1 }],
+        // Use single quote in javascript
+        quotes: ['error', 'single', {
+            avoidEscape: true,
+            allowTemplateLiterals: true
+        }],
+        // Avoid semicolons
+        semi: ['error', 'never'],
+        // Avoid ==
+        eqeqeq: 'error',
+        // Avoid trailing spaces
+        'no-trailing-spaces': ['error', { skipBlankLines: true }],
+        // Add a space between curlies
+        'object-curly-spacing': ['error', 'always'],
+        // Require a line at end of file
+        'eol-last': ['error', 'always'],
+        // Allow ts exceptions
+        '@typescript-eslint/ban-ts-comment': ['error', {
+            'ts-ignore': false,
+            'ts-nocheck': false,
+            'ts-expect-error': 'allow-with-description',
+        }],
+
+        /* Svelte
+        ========================================= */
+        // Use double quotes
+        'svelte/html-quotes': ['error', {
+            prefer: 'double',
+            dynamic: {
+                quoted: false,
+                avoidInvalidUnquotedInHTML: false,
+            }
+        }],
+    },
+    settings: {
+    },
+}

packages/config/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "config",
+  "version": "0.0.0",
+  "private": true
+}

packages/utils/actions.ts

@@ -0,0 +1,29 @@
+/**
+ * Debounce a function with a given amount of time
+ * @description  For scrolling or other resource demanding behaviors
+ */
+export const debounce = (callback: (...args: any[]) => any, wait: number, immediate = false) => {
+    let timeout: ReturnType<typeof setTimeout> | number = 0
+    return (...args: any[]) => {
+        const callNow: boolean = immediate && !timeout
+        const next = () => callback(...args)
+        clearTimeout(timeout)
+        timeout = setTimeout(next, wait)
+        if (callNow) next()
+    }
+}
+
+
+/**
+ * Throttle a function by a given amount of time
+ * @description 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 const throttle = (fn: (...args: any[]) => any, delay: number) => {
+    let lastCall = 0
+    return (...args: unknown[]) => {
+        const now = performance.now()
+        if (now - lastCall < delay) return
+        lastCall = now
+        requestAnimationFrame(() => fn(...args))
+    }
+}

packages/utils/array.ts

@@ -0,0 +1,19 @@
+/**
+ * Return random elements from an array
+ */
+export const getRandomItems = <T> (array: T[], amount: number): T[] => {
+    const shuffled = array.slice()
+    for (let i = shuffled.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
+    }
+    return shuffled.slice(0, amount)
+}
+
+
+/**
+ * Return a random element from an array
+ */
+export const getRandomItem = <T extends Array<unknown>> (array: T): T[0] => {
+    return getRandomItems(array, 1)[0]
+}

packages/utils/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Create a delay
+ */
+export const sleep = (milliseconds: number) => {
+    return new Promise(resolve => setTimeout(resolve, milliseconds))
+}
+
+
+/**
+ * Check if an object is empty
+ */
+export const isEmpty = (obj: Object) => {
+    if (obj === null || obj === undefined) {
+        throw new Error('Error: Given object is not an object')
+    }
+    return Object.keys(obj).length === 0 && obj.constructor === Object
+}

packages/utils/math.ts

@@ -0,0 +1,35 @@
+/**
+ * Linear Interpolation
+ */
+export const lerp = (start: number, end: number, amount: number): number => {
+    return (1 - amount) * start + amount * end
+}
+
+
+/**
+ * Clamp a number
+ */
+export const clamp = (num: number, a: number, b: number) => {
+    return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b))
+}
+
+
+/**
+ * Re-maps a number from one range to another
+ * @param value the incoming value to be converted
+ * @param start1 lower bound of the value's current range
+ * @param stop1 upper bound of the value's current range
+ * @param start2 lower bound of the value's target range
+ * @param stop2 upper bound of the value's target range
+ * @param [withinBounds] constrain the value to the newly mapped range
+ * @return remapped number
+ */
+export const map = (n: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds: boolean): number => {
+    const value = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2
+    if (!withinBounds) return value
+    if (start2 < stop2) {
+        return clamp(value, start2, stop2)
+    } else {
+        return clamp(value, stop2, start2)
+    }
+}

packages/utils/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "utils",
+    "version": "0.0.0",
+    "private": true,
+    "module": "index.ts"
+}

packages/utils/scroll.ts

@@ -0,0 +1,12 @@
+/**
+ * Scroll back to top after page transition
+ */
+export const scrollToTop = (delay?: number) => {
+    const scroll = () => window.scrollTo(0,0)
+
+    if (delay && delay > 0) {
+        return setTimeout(scroll, delay)
+    } else {
+        return scroll()
+    }
+}

packages/utils/string.ts

@@ -0,0 +1,6 @@
+/**
+ * Capitalize first letter
+ */
+export const capitalizeFirstLetter = (string: string) => {
+    return string[0].toUpperCase() + string.slice(1)
+}

packages/utils/text.ts

@@ -0,0 +1,24 @@
+/**
+ * Split text
+ * @description Split a string into words or characters
+ * @returns string[]
+ */
+export const splitText = (text: string, mode = 'words'): string[] => {
+    // Split by words
+    if (mode === 'words') {
+        const words = text
+            .replace(/\\n/g, '\n')
+            .replace(/\s+/g, m => m.includes('\n') ? '\n ' : ' ')
+            .trim()
+            .split(' ')
+
+        return words
+    }
+    // Split by chars
+    else if (mode === 'chars') {
+        const chars = Array.from(text).map(char => char === ' ' ? '\xa0' : char)
+        return chars
+    }
+
+    return []
+}

pnpm-workspace.yaml

@@ -1,2 +1,3 @@
 packages:
   - "apps/*"
+  - "packages/*"