🚧 Migrate to new SvelteKit routing system

A bit annoying but for the best I guess?

package.json

@@ -28,17 +28,17 @@
     "@sveltejs/adapter-auto": "^1.0.0-next.64",
     "@sveltejs/adapter-node": "^1.0.0-next.86",
     "@sveltejs/adapter-vercel": "^1.0.0-next.66",
-    "@sveltejs/kit": "^1.0.0-next.405",
+    "@sveltejs/kit": "^1.0.0-next.410",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.1",
     "browserslist": "^4.21.3",
     "cssnano": "^5.1.13",
-    "eslint": "^8.21.0",
+    "eslint": "^8.22.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "postcss": "^8.4.16",
     "postcss-focus-visible": "^7.1.0",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.7.2",
+    "postcss-preset-env": "^7.8.0",
     "postcss-sort-media-queries": "^4.2.1",
     "sass": "^1.54.4",
     "svelte": "^3.49.0",
@@ -47,7 +47,7 @@
     "swell-node": "^4.0.10",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "vite": "^3.0.7"
+    "vite": "^3.0.8"
   },
   "type": "module",
   "browserslist": [

pnpm-lock.yaml

@@ -5,14 +5,14 @@ specifiers:
   '@sveltejs/adapter-auto': ^1.0.0-next.64
   '@sveltejs/adapter-node': ^1.0.0-next.86
   '@sveltejs/adapter-vercel': ^1.0.0-next.66
-  '@sveltejs/kit': ^1.0.0-next.405
+  '@sveltejs/kit': ^1.0.0-next.410
-  '@typescript-eslint/eslint-plugin': ^5.33.0
+  '@typescript-eslint/eslint-plugin': ^5.33.1
-  '@typescript-eslint/parser': ^5.33.0
+  '@typescript-eslint/parser': ^5.33.1
   browserslist: ^4.21.3
   cssnano: ^5.1.13
   dayjs: ^1.11.5
   embla-carousel: ^7.0.0
-  eslint: ^8.21.0
+  eslint: ^8.22.0
   eslint-plugin-svelte3: ^4.0.0
   focus-visible: ^5.2.0
   motion: ^10.13.3
@@ -20,7 +20,7 @@ specifiers:
   postcss: ^8.4.16
   postcss-focus-visible: ^7.1.0
   postcss-normalize: ^10.0.1
-  postcss-preset-env: ^7.7.2
+  postcss-preset-env: ^7.8.0
   postcss-sort-media-queries: ^4.2.1
   sanitize.css: ^13.0.0
   sass: ^1.54.4
@@ -31,7 +31,7 @@ specifiers:
   tslib: ^2.4.0
   tweakpane: ^3.1.0
   typescript: ^4.7.4
-  vite: ^3.0.7
+  vite: ^3.0.8
 
 dependencies:
   '@studio-freight/lenis': 0.1.13
@@ -47,17 +47,17 @@ devDependencies:
   '@sveltejs/adapter-auto': 1.0.0-next.64
   '@sveltejs/adapter-node': 1.0.0-next.86
   '@sveltejs/adapter-vercel': 1.0.0-next.66
-  '@sveltejs/kit': 1.0.0-next.405_svelte@3.49.0+vite@3.0.7
+  '@sveltejs/kit': 1.0.0-next.410_svelte@3.49.0+vite@3.0.8
-  '@typescript-eslint/eslint-plugin': 5.33.0_njno5y7ry2l2lcmiu4tywxkwnq
+  '@typescript-eslint/eslint-plugin': 5.33.1_vsoshirnpb7xw6mr7xomgfas2i
-  '@typescript-eslint/parser': 5.33.0_qugx7qdu5zevzvxaiqyxfiwquq
+  '@typescript-eslint/parser': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
   browserslist: 4.21.3
   cssnano: 5.1.13_postcss@8.4.16
-  eslint: 8.21.0
+  eslint: 8.22.0
-  eslint-plugin-svelte3: 4.0.0_a7wk4ghvg4hia4trwaglu7p6cq
+  eslint-plugin-svelte3: 4.0.0_laaqauvsmoyypsiqkozwyi2fn4
   postcss: 8.4.16
   postcss-focus-visible: 7.1.0_postcss@8.4.16
   postcss-normalize: 10.0.1_mu2kzpkteq3ketk6piffleamkq
-  postcss-preset-env: 7.7.2_postcss@8.4.16
+  postcss-preset-env: 7.8.0_postcss@8.4.16
   postcss-sort-media-queries: 4.2.1_postcss@8.4.16
   sass: 1.54.4
   svelte: 3.49.0
@@ -66,7 +66,7 @@ devDependencies:
   swell-node: 4.0.10
   tslib: 2.4.0
   typescript: 4.7.4
-  vite: 3.0.7_sass@1.54.4
+  vite: 3.0.8_sass@1.54.4
 
 packages:
 
@@ -142,6 +142,16 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: true
 
+  /@csstools/postcss-nested-calc/1.0.0_postcss@8.4.16:
+    resolution: {integrity: sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.2
+    dependencies:
+      postcss: 8.4.16
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /@csstools/postcss-normalize-display-values/1.0.1_postcss@8.4.16:
     resolution: {integrity: sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==}
     engines: {node: ^12 || ^14 || >=16}
@@ -183,6 +193,16 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /@csstools/postcss-text-decoration-shorthand/1.0.0_postcss@8.4.16:
+    resolution: {integrity: sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.2
+    dependencies:
+      postcss: 8.4.16
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /@csstools/postcss-trigonometric-functions/1.0.2_postcss@8.4.16:
     resolution: {integrity: sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==}
     engines: {node: ^14 || >=16}
@@ -378,6 +398,10 @@ packages:
       fastq: 1.13.0
     dev: true
 
+  /@polka/url/1.0.0-next.21:
+    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
+    dev: true
+
   /@rollup/pluginutils/4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -437,8 +461,8 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.405_svelte@3.49.0+vite@3.0.7:
+  /@sveltejs/kit/1.0.0-next.410_svelte@3.49.0+vite@3.0.8:
-    resolution: {integrity: sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==}
+    resolution: {integrity: sha512-/EGeitdSnm0GlAL6fH9vDtzYZsrXSEzSmDE9eoOQa6XfFZMPmgeV8fPReJtqlp+oLR4Q5I/eSV21yrvtoR+reQ==}
     engines: {node: '>=16.9'}
     hasBin: true
     requiresBuild: true
@@ -446,18 +470,27 @@ packages:
       svelte: ^3.44.0
       vite: ^3.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.1_svelte@3.49.0+vite@3.0.7
+      '@sveltejs/vite-plugin-svelte': 1.0.1_svelte@3.49.0+vite@3.0.8
       chokidar: 3.5.3
+      cookie: 0.5.0
+      devalue: 2.0.1
+      kleur: 4.1.5
+      magic-string: 0.26.2
+      mime: 3.0.0
+      node-fetch: 3.2.10
       sade: 1.8.1
+      set-cookie-parser: 2.5.1
+      sirv: 2.0.2
       svelte: 3.49.0
       tiny-glob: 0.2.9
-      vite: 3.0.7_sass@1.54.4
+      undici: 5.8.2
+      vite: 3.0.8_sass@1.54.4
     transitivePeerDependencies:
       - diff-match-patch
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte/1.0.1_svelte@3.49.0+vite@3.0.7:
+  /@sveltejs/vite-plugin-svelte/1.0.1_svelte@3.49.0+vite@3.0.8:
     resolution: {integrity: sha512-PorCgUounn0VXcpeJu+hOweZODKmGuLHsLomwqSj+p26IwjjGffmYQfVHtiTWq+NqaUuuHWWG7vPge6UFw4Aeg==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
@@ -475,7 +508,7 @@ packages:
       magic-string: 0.26.2
       svelte: 3.49.0
       svelte-hmr: 0.14.12_svelte@3.49.0
-      vite: 3.0.7_sass@1.54.4
+      vite: 3.0.8_sass@1.54.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -489,8 +522,8 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
-  /@types/node/18.7.3:
+  /@types/node/18.7.5:
-    resolution: {integrity: sha512-LJgzOEwWuMTBxHzgBR/fhhBOWrvBjvO+zPteUgbbuQi80rYIZHrk1mNbRUqPZqSLP2H7Rwt1EFLL/tNLD1Xx/w==}
+    resolution: {integrity: sha512-NcKK6Ts+9LqdHJaW6HQmgr7dT/i3GOHG+pt6BiWv++5SnjtRd4NXeiuN2kA153SjhXPR/AhHIPHPbrsbpUVOww==}
     dev: true
 
   /@types/pug/2.0.6:
@@ -500,11 +533,11 @@ packages:
   /@types/sass/1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
-      '@types/node': 18.7.3
+      '@types/node': 18.7.5
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.33.0_njno5y7ry2l2lcmiu4tywxkwnq:
+  /@typescript-eslint/eslint-plugin/5.33.1_vsoshirnpb7xw6mr7xomgfas2i:
-    resolution: {integrity: sha512-jHvZNSW2WZ31OPJ3enhLrEKvAZNyAFWZ6rx9tUwaessTc4sx9KmgMNhVcqVAl1ETnT5rU5fpXTLmY9YvC1DCNg==}
+    resolution: {integrity: sha512-S1iZIxrTvKkU3+m63YUOxYPKaP+yWDQrdhxTglVDVEVBf+aCSw85+BmJnyUaQQsk5TXFG/LpBu9fa+LrAQ91fQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -514,12 +547,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.33.0_qugx7qdu5zevzvxaiqyxfiwquq
+      '@typescript-eslint/parser': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
-      '@typescript-eslint/scope-manager': 5.33.0
+      '@typescript-eslint/scope-manager': 5.33.1
-      '@typescript-eslint/type-utils': 5.33.0_qugx7qdu5zevzvxaiqyxfiwquq
+      '@typescript-eslint/type-utils': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
-      '@typescript-eslint/utils': 5.33.0_qugx7qdu5zevzvxaiqyxfiwquq
+      '@typescript-eslint/utils': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
       debug: 4.3.4
-      eslint: 8.21.0
+      eslint: 8.22.0
       functional-red-black-tree: 1.0.1
       ignore: 5.2.0
       regexpp: 3.2.0
@@ -530,8 +563,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.33.0_qugx7qdu5zevzvxaiqyxfiwquq:
+  /@typescript-eslint/parser/5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq:
-    resolution: {integrity: sha512-cgM5cJrWmrDV2KpvlcSkelTBASAs1mgqq+IUGKJvFxWrapHpaRy5EXPQz9YaKF3nZ8KY18ILTiVpUtbIac86/w==}
+    resolution: {integrity: sha512-IgLLtW7FOzoDlmaMoXdxG8HOCByTBXrB1V2ZQYSEV1ggMmJfAkMWTwUjjzagS6OkfpySyhKFkBw7A9jYmcHpZA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -540,26 +573,26 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.33.0
+      '@typescript-eslint/scope-manager': 5.33.1
-      '@typescript-eslint/types': 5.33.0
+      '@typescript-eslint/types': 5.33.1
-      '@typescript-eslint/typescript-estree': 5.33.0_typescript@4.7.4
+      '@typescript-eslint/typescript-estree': 5.33.1_typescript@4.7.4
       debug: 4.3.4
-      eslint: 8.21.0
+      eslint: 8.22.0
       typescript: 4.7.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.33.0:
+  /@typescript-eslint/scope-manager/5.33.1:
-    resolution: {integrity: sha512-/Jta8yMNpXYpRDl8EwF/M8It2A9sFJTubDo0ATZefGXmOqlaBffEw0ZbkbQ7TNDK6q55NPHFshGBPAZvZkE8Pw==}
+    resolution: {integrity: sha512-8ibcZSqy4c5m69QpzJn8XQq9NnqAToC8OdH/W6IXPXv83vRyEDPYLdjAlUx8h/rbusq6MkW4YdQzURGOqsn3CA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.33.0
+      '@typescript-eslint/types': 5.33.1
-      '@typescript-eslint/visitor-keys': 5.33.0
+      '@typescript-eslint/visitor-keys': 5.33.1
     dev: true
 
-  /@typescript-eslint/type-utils/5.33.0_qugx7qdu5zevzvxaiqyxfiwquq:
+  /@typescript-eslint/type-utils/5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq:
-    resolution: {integrity: sha512-2zB8uEn7hEH2pBeyk3NpzX1p3lF9dKrEbnXq1F7YkpZ6hlyqb2yZujqgRGqXgRBTHWIUG3NGx/WeZk224UKlIA==}
+    resolution: {integrity: sha512-X3pGsJsD8OiqhNa5fim41YtlnyiWMF/eKsEZGsHID2HcDqeSC5yr/uLOeph8rNF2/utwuI0IQoAK3fpoxcLl2g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -568,22 +601,22 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.33.0_qugx7qdu5zevzvxaiqyxfiwquq
+      '@typescript-eslint/utils': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
       debug: 4.3.4
-      eslint: 8.21.0
+      eslint: 8.22.0
       tsutils: 3.21.0_typescript@4.7.4
       typescript: 4.7.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.33.0:
+  /@typescript-eslint/types/5.33.1:
-    resolution: {integrity: sha512-nIMt96JngB4MYFYXpZ/3ZNU4GWPNdBbcB5w2rDOCpXOVUkhtNlG2mmm8uXhubhidRZdwMaMBap7Uk8SZMU/ppw==}
+    resolution: {integrity: sha512-7K6MoQPQh6WVEkMrMW5QOA5FO+BOwzHSNd0j3+BlBwd6vtzfZceJ8xJ7Um2XDi/O3umS8/qDX6jdy2i7CijkwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.33.0_typescript@4.7.4:
+  /@typescript-eslint/typescript-estree/5.33.1_typescript@4.7.4:
-    resolution: {integrity: sha512-tqq3MRLlggkJKJUrzM6wltk8NckKyyorCSGMq4eVkyL5sDYzJJcMgZATqmF8fLdsWrW7OjjIZ1m9v81vKcaqwQ==}
+    resolution: {integrity: sha512-JOAzJ4pJ+tHzA2pgsWQi4804XisPHOtbvwUyqsuuq8+y5B5GMZs7lI1xDWs6V2d7gE/Ez5bTGojSK12+IIPtXA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -591,8 +624,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.33.0
+      '@typescript-eslint/types': 5.33.1
-      '@typescript-eslint/visitor-keys': 5.33.0
+      '@typescript-eslint/visitor-keys': 5.33.1
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -603,29 +636,29 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.33.0_qugx7qdu5zevzvxaiqyxfiwquq:
+  /@typescript-eslint/utils/5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq:
-    resolution: {integrity: sha512-JxOAnXt9oZjXLIiXb5ZIcZXiwVHCkqZgof0O8KPgz7C7y0HS42gi75PdPlqh1Tf109M0fyUw45Ao6JLo7S5AHw==}
+    resolution: {integrity: sha512-uphZjkMaZ4fE8CR4dU7BquOV6u0doeQAr8n6cQenl/poMaIyJtBu8eys5uk6u5HiDH01Mj5lzbJ5SfeDz7oqMQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
-      '@typescript-eslint/scope-manager': 5.33.0
+      '@typescript-eslint/scope-manager': 5.33.1
-      '@typescript-eslint/types': 5.33.0
+      '@typescript-eslint/types': 5.33.1
-      '@typescript-eslint/typescript-estree': 5.33.0_typescript@4.7.4
+      '@typescript-eslint/typescript-estree': 5.33.1_typescript@4.7.4
-      eslint: 8.21.0
+      eslint: 8.22.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.21.0
+      eslint-utils: 3.0.0_eslint@8.22.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.33.0:
+  /@typescript-eslint/visitor-keys/5.33.1:
-    resolution: {integrity: sha512-/XsqCzD4t+Y9p5wd9HZiptuGKBlaZO5showwqODii5C0nZawxWLF+Q6k5wYHBrQv96h6GYKyqqMHCSTqta8Kiw==}
+    resolution: {integrity: sha512-nwIxOK8Z2MPWltLKMLOEZwmfBZReqUdbEoHQXeCpa+sRVARe5twpJGHCB4dk9903Yaf0nMAlGbQfaAH92F60eg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.33.0
+      '@typescript-eslint/types': 5.33.1
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -738,7 +771,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.21.3
-      caniuse-lite: 1.0.30001375
+      caniuse-lite: 1.0.30001377
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -784,8 +817,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001375
+      caniuse-lite: 1.0.30001377
-      electron-to-chromium: 1.4.218
+      electron-to-chromium: 1.4.221
       node-releases: 2.0.6
       update-browserslist-db: 1.0.5_browserslist@4.21.3
     dev: true
@@ -803,13 +836,13 @@ packages:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
       browserslist: 4.21.3
-      caniuse-lite: 1.0.30001375
+      caniuse-lite: 1.0.30001377
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
     dev: true
 
-  /caniuse-lite/1.0.30001375:
+  /caniuse-lite/1.0.30001377:
-    resolution: {integrity: sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==}
+    resolution: {integrity: sha512-I5XeHI1x/mRSGl96LFOaSk528LA/yZG3m3iQgImGujjO8gotd/DL8QaI1R1h1dg5ATeI2jqPblMpKq4Tr5iKfQ==}
     dev: true
 
   /chalk/4.1.2:
@@ -873,6 +906,11 @@ packages:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
     dev: true
 
+  /cookie/0.5.0:
+    resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -946,8 +984,8 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /cssdb/6.6.3:
+  /cssdb/7.0.0:
-    resolution: {integrity: sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA==}
+    resolution: {integrity: sha512-HmRYATZ4Gf8naf6sZmwKEyf7MXAC0ZxjsamtNNgmuWpQgoO973zsE/1JMIohEYsSi5e3n7vQauCLv7TWSrOlrw==}
     dev: true
 
   /cssesc/3.0.0:
@@ -1022,6 +1060,11 @@ packages:
       css-tree: 1.1.3
     dev: true
 
+  /data-uri-to-buffer/4.0.0:
+    resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
+    engines: {node: '>= 12'}
+    dev: true
+
   /dayjs/1.11.5:
     resolution: {integrity: sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==}
     dev: false
@@ -1061,6 +1104,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /devalue/2.0.1:
+    resolution: {integrity: sha512-I2TiqT5iWBEyB8GRfTDP0hiLZ0YeDJZ+upDxjBfOC2lebO5LezQMv7QvIUTzdb64jQyAKLf1AHADtGN+jw6v8Q==}
+    dev: true
+
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1102,8 +1149,8 @@ packages:
       domhandler: 4.3.1
     dev: true
 
-  /electron-to-chromium/1.4.218:
+  /electron-to-chromium/1.4.221:
-    resolution: {integrity: sha512-INDylKH//YIf2w67D+IjkfVnGVrZ/D94DAU/FPPm6T4jEPbEDQvo9r2wTj0ncFdtJH8+V8BggZTaN8Rzk5wkgw==}
+    resolution: {integrity: sha512-aWg2mYhpxZ6Q6Xvyk7B2ziBca4YqrCDlXzmcD7wuRs65pVEVkMT1u2ifdjpAQais2O2o0rW964ZWWWYRlAL/kw==}
     dev: true
 
   /embla-carousel/7.0.0:
@@ -1341,13 +1388,13 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-plugin-svelte3/4.0.0_a7wk4ghvg4hia4trwaglu7p6cq:
+  /eslint-plugin-svelte3/4.0.0_laaqauvsmoyypsiqkozwyi2fn4:
     resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
     peerDependencies:
       eslint: '>=8.0.0'
       svelte: ^3.2.0
     dependencies:
-      eslint: 8.21.0
+      eslint: 8.22.0
       svelte: 3.49.0
     dev: true
 
@@ -1367,13 +1414,13 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.21.0:
+  /eslint-utils/3.0.0_eslint@8.22.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.21.0
+      eslint: 8.22.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -1387,8 +1434,8 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint/8.21.0:
+  /eslint/8.22.0:
-    resolution: {integrity: sha512-/XJ1+Qurf1T9G2M5IHrsjp+xrGT73RZf23xA1z5wB1ZzzEAWSZKvRwhWxTFp1rvkvCfwcvAUNAP31bhKTTGfDA==}
+    resolution: {integrity: sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -1402,7 +1449,7 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.21.0
+      eslint-utils: 3.0.0_eslint@8.22.0
       eslint-visitor-keys: 3.3.0
       espree: 9.3.3
       esquery: 1.4.0
@@ -1510,6 +1557,14 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /fetch-blob/3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.2.1
+    dev: true
+
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1552,6 +1607,13 @@ packages:
     resolution: {integrity: sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==}
     dev: false
 
+  /formdata-polyfill/4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+    dependencies:
+      fetch-blob: 3.2.0
+    dev: true
+
   /fraction.js/4.2.0:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
     dev: true
@@ -1860,6 +1922,12 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /mime/3.0.0:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    dev: true
+
   /min-indent/1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -1938,6 +2006,11 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
+  /node-domexception/1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    dev: true
+
   /node-fetch/2.6.7:
     resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
     engines: {node: 4.x || >=6.0.0}
@@ -1950,6 +2023,15 @@ packages:
       whatwg-url: 5.0.0
     dev: true
 
+  /node-fetch/3.2.10:
+    resolution: {integrity: sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      data-uri-to-buffer: 4.0.0
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+    dev: true
+
   /node-gyp-build/4.5.0:
     resolution: {integrity: sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==}
     hasBin: true
@@ -2599,8 +2681,8 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-preset-env/7.7.2_postcss@8.4.16:
+  /postcss-preset-env/7.8.0_postcss@8.4.16:
-    resolution: {integrity: sha512-1q0ih7EDsZmCb/FMDRvosna7Gsbdx8CvYO5hYT120hcp2ZAuOHpSzibujZ4JpIUcAC02PG6b+eftxqjTFh5BNA==}
+    resolution: {integrity: sha512-leqiqLOellpLKfbHkD06E04P6d9ZQ24mat6hu4NSqun7WG0UhspHR5Myiv/510qouCjoo4+YJtNOqg5xHaFnCA==}
     engines: {node: ^12 || ^14 || >=16}
     peerDependencies:
       postcss: ^8.2
@@ -2611,10 +2693,12 @@ packages:
       '@csstools/postcss-hwb-function': 1.0.2_postcss@8.4.16
       '@csstools/postcss-ic-unit': 1.0.1_postcss@8.4.16
       '@csstools/postcss-is-pseudo-class': 2.0.7_postcss@8.4.16
+      '@csstools/postcss-nested-calc': 1.0.0_postcss@8.4.16
       '@csstools/postcss-normalize-display-values': 1.0.1_postcss@8.4.16
       '@csstools/postcss-oklab-function': 1.1.1_postcss@8.4.16
       '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.16
       '@csstools/postcss-stepped-value-functions': 1.0.1_postcss@8.4.16
+      '@csstools/postcss-text-decoration-shorthand': 1.0.0_postcss@8.4.16
       '@csstools/postcss-trigonometric-functions': 1.0.2_postcss@8.4.16
       '@csstools/postcss-unset-value': 1.0.2_postcss@8.4.16
       autoprefixer: 10.4.8_postcss@8.4.16
@@ -2622,7 +2706,7 @@ packages:
       css-blank-pseudo: 3.0.3_postcss@8.4.16
       css-has-pseudo: 3.0.4_postcss@8.4.16
       css-prefers-color-scheme: 6.0.3_postcss@8.4.16
-      cssdb: 6.6.3
+      cssdb: 7.0.0
       postcss: 8.4.16
       postcss-attribute-case-insensitive: 5.0.2_postcss@8.4.16
       postcss-clamp: 4.1.0_postcss@8.4.16
@@ -2929,6 +3013,15 @@ packages:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
 
+  /sirv/2.0.2:
+    resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.21
+      mrmime: 1.0.1
+      totalist: 3.0.0
+    dev: true
+
   /slash/3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -3177,6 +3270,11 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /totalist/3.0.0:
+    resolution: {integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /tr46/0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: true
@@ -3220,6 +3318,11 @@ packages:
     hasBin: true
     dev: true
 
+  /undici/5.8.2:
+    resolution: {integrity: sha512-3KLq3pXMS0Y4IELV045fTxqz04Nk9Ms7yfBBHum3yxsTR4XNn+ZCaUbf/mWitgYDAhsplQ0B1G4S5D345lMO3A==}
+    engines: {node: '>=12.18'}
+    dev: true
+
   /update-browserslist-db/1.0.5_browserslist@4.21.3:
     resolution: {integrity: sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==}
     hasBin: true
@@ -3257,8 +3360,8 @@ packages:
       tiny-emitter: 2.1.0
     dev: false
 
-  /vite/3.0.7_sass@1.54.4:
+  /vite/3.0.8_sass@1.54.4:
-    resolution: {integrity: sha512-dILhvKba1mbP1wCezVQx/qhEK7/+jVn9ciadEcyKMMhZpsuAi/eWZfJRMkmYlkSFG7Qq9NvJbgFq4XOBxugJsA==}
+    resolution: {integrity: sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -3285,6 +3388,11 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /web-streams-polyfill/3.2.1:
+    resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /webidl-conversions/3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: true

src/app.d.ts

@@ -1,13 +1,15 @@
-/// <reference types="@sveltejs/kit" />
-
-
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+// and what to do when importing types
 declare namespace App {
-	// interface Locals {}
+	interface Locals {
+		userid: string;
+	}
+
 	// interface Platform {}
+	// interface PrivateEnv {}
+	// interface PublicEnv {}
 	// interface Session {}
-	// interface Stuff {}
 }
 
 
@@ -40,7 +42,7 @@ declare interface PhotoGridAbout {
 /**
  * Notifcation
  */
-declare interface Notification {
+declare interface ShopNotification {
     title: string
     name: string
     image: string

src/components/organisms/Cart.svelte

@@ -27,18 +27,16 @@
             })
             if (existantCart.ok) {
                 const cart = await existantCart.json()
-                // console.log('Fetched existant cart:', $cartId, $cartData)
 
                 // Cart is active / has not been ordered
                 if (cart.active || !cart.order_id) {
                     // Keep current cart
                     $cartId = cart.id
                     $cartData = cart
+                    return
                 }
 
                 // Cart is inactive / has been ordered
-                else {
-                    // Fetch a new cart
                 const newCart = await fetch('/api/swell', {
                     method: 'POST',
                     body: JSON.stringify({
@@ -53,7 +51,6 @@
                 }
             }
         }
-        }
         // Cart doesn't exists
         else {
             // Create a new cart and store it

src/routes/+error.svelte

@@ -4,8 +4,8 @@
 
 <script lang="ts">
     import { getContext } from 'svelte'
-    // Components
     import { page } from '$app/stores'
+    // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
@@ -16,9 +16,6 @@
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
-    export let status: number
-    export let message: string = undefined
-
     const { locations }: any = getContext('global')
     const errors = {
         404: {
@@ -30,17 +27,17 @@
             message: 'Server error…',
         },
     }
-    const defaultMessage = 'But you are welcome to explore our locations or discover our shop.'
+    const defaultMessage = 'You are welcome to explore our locations or discover our shop.'
 </script>
 
 <Metas
-    title="{errors[status].title} – Houses Of"
+    title="{errors[$page.status].title} – Houses Of"
 />
 
 <PageTransition name="page-error">
     <div class="page-error__top">
         <Heading
-            text="{message ?? errors[status].message} <br>{defaultMessage}"
+            text="{$page.error.message ?? errors[$page.status].message} <br>{defaultMessage}"
         />
 
         <ListCTAs>
@@ -83,17 +80,3 @@
         </div>
     </div>
 </PageTransition>
-
-
-<script context="module" lang="ts">
-    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
-
-    export async function load ({ status, error: { message } }: LoadEvent): Promise<LoadOutput> {
-        return {
-            props: {
-                status,
-                message,
-            },
-        }
-    }
-</script>

src/routes/+layout.server.ts

@@ -0,0 +1,104 @@
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+import { fetchAPI } from '$utils/api'
+
+
+export const load: PageServerLoad = async () => {
+    try {
+        const res = await fetchAPI(`
+            query {
+                locations: location (filter: { status: { _eq: "published" }}) {
+                    id
+                    name
+                    slug
+                    coordinates
+                    country {
+                        name
+                        slug
+                        flag { id }
+                        continent { slug }
+                    }
+                    date_updated
+                    photos (
+                        sort: "-date_created",
+                        limit: ${import.meta.env.VITE_PREVIEW_COUNT}
+                    ) {
+                        image {
+                            id
+                            title
+                        }
+                        date_created
+                    }
+                    has_poster
+                    globe_close
+                }
+
+                countries: country (filter: { status: { _eq: "published" }}) {
+                    id
+                    name
+                    slug
+                    flag { id }
+                    locations { id slug }
+                }
+
+                continents: continent (filter: { countries: { slug: { _neq: "_empty" }}}) {
+                    name
+                    slug
+                    rotation
+                }
+
+                settings {
+                    seo_name
+                    seo_title
+                    seo_description
+                    description
+                    explore_list
+                    limit_new
+                    instagram
+                    footer_links
+                    switcher_links
+                    newsletter_subtitle
+                    newsletter_text
+                }
+
+                shop {
+                    enabled
+                    module_title
+                    module_text
+                    module_images {
+                        directus_files_id {
+                            id
+                            title
+                        }
+                    }
+                }
+
+                # Count
+                countPhotos: photo_aggregated (filter: { status: { _eq: "published" }}) {
+                    count { id }
+                }
+                countLocations: location_aggregated (filter: { status: { _eq: "published" }}) {
+                    count { id }
+                }
+                countCountries: country_aggregated (filter: { status: { _eq: "published" }}) {
+                    count { id }
+                }
+            }
+        `)
+
+        if (res) {
+            const { data } = res
+
+            return {
+                ...data,
+                count: {
+                    photos: data.countPhotos[0].count.id,
+                    locations: data.countLocations[0].count.id,
+                    countries: data.countCountries[0].count.id,
+                },
+            }
+        }
+    } catch (err) {
+        throw error(500, err || 'Failed to fetch data')
+    }
+}

src/routes/+layout.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import '../style/global.scss'
+
+    import { browser } from '$app/env'
+    import { navigating, page } from '$app/stores'
+    import { beforeNavigate } from '$app/navigation'
+    import type { PageData, Errors } from './$types'
+    import { onMount, setContext } from 'svelte'
+    import { pageLoading, previousPage } from '$utils/stores'
+    import { DURATION } from '$utils/contants'
+    import '$utils/polyfills'
+    // Components
+    import SVGSprite from '$components/SVGSprite.svelte'
+    import SmoothScroll from '$components/SmoothScroll.svelte'
+    import Analytics from '$components/Analytics.svelte'
+    import Switcher from '$components/molecules/Switcher.svelte'
+    import Footer from '$components/organisms/Footer.svelte'
+
+    export let data: PageData
+    export let errors: Errors
+
+
+    // Fonts to preload
+    const fonts = [
+        'G-Light',
+        'G-Regular',
+        'G-Medium',
+        'G-Semibold',
+        'J-Extralight',
+        'J-Light',
+    ]
+
+    // Set global data
+    setContext('global', data)
+
+
+    /**
+     * On page change
+     */
+    // Store previous page (for photo Viewer close button)
+    beforeNavigate(({ from }) => {
+        $previousPage = from.pathname
+    })
+
+    // Define page loading from navigating store
+    navigating.subscribe((store: any) => {
+        if (store) {
+            $pageLoading = true
+
+            // Turn page loading when changing page
+            setTimeout(() => {
+                $pageLoading = false
+            }, DURATION.PAGE_IN * 1.25)
+        }
+    })
+
+    onMount(() => {
+        // Avoid FOUC
+        document.body.style.opacity = '1'
+    })
+</script>
+
+<svelte:head>
+    {#each fonts as font}
+        <link rel="preload" href="/fonts/{font}.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    {/each}
+</svelte:head>
+
+
+<Switcher isOver={!!$page.params.location && !!$page.params.photo} />
+
+<slot />
+
+{#if !$page.params.photo}
+    <Footer />
+{/if}
+
+{#if $pageLoading}
+    <div class="page-loading" />
+{/if}
+
+<SVGSprite />
+<SmoothScroll />
+
+{#if browser}
+    <Analytics
+        appKey={import.meta.env.VITE_ANALYTICS_KEY}
+        url={import.meta.env.VITE_ANALYTICS_URL}
+    />
+{/if}

src/routes/+page.server.ts

@@ -1,8 +1,9 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItems } from '$utils/functions'
 
-export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async () => {
     try {
         // Get total of published photos
         const totalRes = await fetchAPI(`
@@ -47,15 +48,10 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
 
         if (photos) {
             return {
-                body: {
                 photos,
             }
         }
-        }
+    } catch (err) {
-    } catch (error) {
+        throw error(500, err)
-        return {
-            status: 404,
-            body: error,
-        }
     }
 }

src/routes/+page.svelte

@@ -3,7 +3,8 @@
 </style>
 
 <script lang="ts">
-    import { page, navigating } from '$app/stores'
+    import { navigating } from '$app/stores'
+    import type { PageData, Errors } from './$types'
     import { getContext, onMount } from 'svelte'
     import { timeline, stagger } from 'motion'
     import { DELAY } from '$utils/contants'
@@ -26,7 +27,8 @@
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
-    export let photos: any
+    export let data: PageData
+    export let errors: Errors
 
     const { settings, locations }: any = getContext('global')
 
@@ -109,7 +111,7 @@
     </section>
 
     <section class="homepage__photos">
-        <Collage {photos} />
+        <Collage photos={data.photos} />
     </section>
 
     <div class="homepage__ctas">
@@ -118,7 +120,7 @@
         <ListCTAs>
             <li>
                 <BoxCTA
-                    url="{$page.url.pathname}"
+                    url="#locations"
                     icon="globe"
                     label="Discover locations"
                     alt="Globe"

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

@@ -1,4 +1,5 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
 export const photoFields = `
@@ -14,7 +15,7 @@ export const photoFields = `
     date_created
 `
 
-export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({ params }) => {
     try {
         const { location: slug } = params
 
@@ -76,27 +77,20 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
                 }
             }
         `)
+
         const { data: { location: location, photos, total_published, product }} = res
 
         if (!location.length || location.length && params.country !== location[0].country.slug) {
-            return {
+            throw error(404, "This location is not available… yet!")
-                status: 404,
-                body: Error("This location is not available… yet!"),
-            }
         }
 
         return {
-            body: {
             location: location[0],
             photos,
             totalPhotos: photos.length ? total_published[0].count.location : 0,
             product: product[0],
         }
-        }
+    } catch (err) {
-    } catch (error) {
+        throw error(500, err)
-        return {
-            status: 404,
-            body: error,
-        }
     }
 }

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

@@ -4,14 +4,15 @@
 
 <script lang="ts">
     import { page, navigating } from '$app/stores'
+    import type { PageData, Errors } from './$types'
     import { onMount } from 'svelte'
-    import { timeline } from 'motion'
+    import { stagger, timeline } from 'motion'
     import dayjs from 'dayjs'
-    import relativeTime from 'dayjs/plugin/relativeTime.js'
+    import relativeTime from 'dayjs/plugin/relativeTime'
     import { quartOut } from '$animations/easings'
     import { fetchAPI, getAssetUrlKey } from '$utils/api'
     import { DELAY } from '$utils/contants'
-    import { photoFields } from '.'
+    import { photoFields } from './+page.server'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -23,14 +24,14 @@
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
     import ShopModule from '$components/organisms/ShopModule.svelte'
 
-    export let location: any
+    export let data: PageData
-    export let photos: any[]
+    export let errors: Errors
-    export let totalPhotos: number
-    export let product: any = undefined
-
-    dayjs.extend(relativeTime)
 
     const { params } = $page
+    let { photos }: { photos: any[] } = data
+    const { location, totalPhotos, product = undefined }: { location: any, totalPhotos: number, product: any } = data
+
+    dayjs.extend(relativeTime)
 
     let introEl: HTMLElement
     let photosListEl: HTMLElement
@@ -152,6 +153,7 @@
                 y: ['110%', 0],
             }, {
                 at: 0.2,
+                delay: stagger(0.4)
             }],
 
             // Illustration

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

@@ -1,7 +1,8 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
-export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({ params }) => {
     try {
         // Get the first photo ID
         const firstPhoto = await fetchAPI(`
@@ -75,10 +76,11 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
         `)
 
         const { data } = res
+
+        if (data) {
             const currentIndex = data.photos.findIndex((photo: any) => photo.slug === params.photo)
 
             return {
-            body: {
                 photos: data.photos,
                 location: data.location[0],
                 currentIndex,
@@ -87,10 +89,7 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
                 offset,
             }
         }
-    } catch (error) {
+    } catch (err) {
-        return {
+        throw error(500, err)
-            status: 404,
-            body: error,
-        }
     }
 }

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

@@ -1,11 +1,12 @@
 <style lang="scss">
-    @import "../../../style/pages/viewer";
+    @import "../../../../style/pages/viewer";
 </style>
 
 <script lang="ts">
     import { browser } from '$app/env'
     import { page, navigating } from '$app/stores'
     import { goto } from '$app/navigation'
+    import type { PageData, Errors } from './$types'
     import { onMount, tick } from 'svelte'
     import { fade, scale } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
@@ -25,12 +26,11 @@
     import IconArrow from '$components/atoms/IconArrow.svelte'
     import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
-    export let photos: any[]
+    export let data: PageData
-    export let location: any
+    export let errors: Errors
-    export let currentIndex: number
+
-    export let countPhotos: number
+    let { photos, currentIndex }: { photos: any[], currentIndex: number } = data
-    export let limit: number
+    const { location, countPhotos, limit, offset }: { location: any, countPhotos: number, limit: number, offset: number } = data
-    export let offset: number
 
     enum directions { PREV, NEXT }
 

src/routes/__layout.svelte

@@ -1,199 +0,0 @@
-<script lang="ts">
-    import '../style/global.scss'
-
-    import { browser } from '$app/env'
-    import { navigating, page } from '$app/stores'
-    import { beforeNavigate } from '$app/navigation'
-    import { onMount, setContext } from 'svelte'
-    import { pageLoading, previousPage } from '$utils/stores'
-    import { DURATION } from '$utils/contants'
-    import '$utils/polyfills'
-    // Components
-    import SVGSprite from '$components/SVGSprite.svelte'
-    import SmoothScroll from '$components/SmoothScroll.svelte'
-    import Analytics from '$components/Analytics.svelte'
-    import Switcher from '$components/molecules/Switcher.svelte'
-    import Footer from '$components/organisms/Footer.svelte'
-
-    export let data: any
-    export let count: any
-
-    // Fonts to preload
-    const fonts = [
-        'G-Light',
-        'G-Regular',
-        'G-Medium',
-        'G-Semibold',
-        'J-Extralight',
-        'J-Light',
-    ]
-
-    // Set global data
-    setContext('global', {
-        ...data,
-        count,
-    })
-
-
-    /**
-     * On page change
-     */
-    // Store previous page (for photo Viewer close button)
-    beforeNavigate(({ from }) => {
-        $previousPage = from.pathname
-    })
-
-    // Define page loading from navigating store
-    navigating.subscribe((store: any) => {
-        if (store) {
-            $pageLoading = true
-
-            // Turn page loading when changing page
-            setTimeout(() => {
-                $pageLoading = false
-            }, DURATION.PAGE_IN * 1.25)
-        }
-    })
-
-    onMount(() => {
-        // Avoid FOUC
-        document.body.style.opacity = '1'
-    })
-</script>
-
-<svelte:head>
-    {#each fonts as font}
-        <link rel="preload" href="/fonts/{font}.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-    {/each}
-</svelte:head>
-
-
-<Switcher isOver={!!$page.params.location && !!$page.params.photo} />
-
-<slot />
-
-{#if !$page.params.photo}
-    <Footer />
-{/if}
-
-{#if $pageLoading}
-    <div class="page-loading" />
-{/if}
-
-<SVGSprite />
-<SmoothScroll />
-
-{#if browser}
-    <Analytics
-        appKey={import.meta.env.VITE_ANALYTICS_KEY}
-        url={import.meta.env.VITE_ANALYTICS_URL}
-    />
-{/if}
-
-
-<script context="module" lang="ts">
-    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
-    import { fetchAPI } from '$utils/api'
-
-    export async function load ({}: LoadEvent): Promise<LoadOutput> {
-        const res = await fetchAPI(`
-            query {
-                locations: location (filter: { status: { _eq: "published" }}) {
-                    id
-                    name
-                    slug
-                    coordinates
-                    country {
-                        name
-                        slug
-                        flag { id }
-                        continent { slug }
-                    }
-                    date_updated
-                    photos (
-                        sort: "-date_created",
-                        limit: ${import.meta.env.VITE_PREVIEW_COUNT}
-                    ) {
-                        image {
-                            id
-                            title
-                        }
-                        date_created
-                    }
-                    has_poster
-                    globe_close
-                }
-
-                countries: country (filter: { status: { _eq: "published" }}) {
-                    id
-                    name
-                    slug
-                    flag { id }
-                    locations { id slug }
-                }
-
-                continents: continent (filter: { countries: { slug: { _neq: "_empty" }}}) {
-                    name
-                    slug
-                    rotation
-                }
-
-                settings {
-                    seo_name
-                    seo_title
-                    seo_description
-                    description
-                    explore_list
-                    limit_new
-                    instagram
-                    footer_links
-                    switcher_links
-                    newsletter_subtitle
-                    newsletter_text
-                }
-
-                shop {
-                    enabled
-                    module_title
-                    module_text
-                    module_images {
-                        directus_files_id {
-                            id
-                            title
-                        }
-                    }
-                }
-
-                # Count
-                countPhotos: photo_aggregated (filter: { status: { _eq: "published" }}) {
-                    count { id }
-                }
-                countLocations: location_aggregated (filter: { status: { _eq: "published" }}) {
-                    count { id }
-                }
-                countCountries: country_aggregated (filter: { status: { _eq: "published" }}) {
-                    count { id }
-                }
-            }
-        `)
-
-        if (res) {
-            const { data } = res
-
-            return {
-                props: {
-                    data,
-                    count: {
-                        photos: data.countPhotos[0].count.id,
-                        locations: data.countLocations[0].count.id,
-                        countries: data.countCountries[0].count.id,
-                    },
-                },
-            }
-        }
-
-        return {
-            status: 500,
-        }
-    }
-</script>

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

@@ -1,8 +1,9 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItems } from '$utils/functions'
 
-export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async () => {
     try {
         // Get data and total of published photos
         const res = await fetchAPI(`
@@ -76,18 +77,15 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
             }
         `)
 
+        if (photosRes) {
             const { data: { photo: photos }} = photosRes
 
             return {
-            body: {
+                about,
-                data: about,
                 photos,
             }
         }
-    } catch (error) {
+    } catch (err) {
-        return {
+        throw error(500, err)
-            status: 404,
-            body: error,
-        }
     }
 }

src/routes/about/+page.svelte

@@ -1,9 +1,10 @@
 <style lang="scss">
-    @import "../style/pages/about";
+    @import "../../style/pages/about";
 </style>
 
 <script lang="ts">
     import { onMount, afterUpdate } from 'svelte'
+    import type { PageData, Errors } from './$types'
     import { map } from '$utils/functions'
     import { scroll, animate, inView, type ScrollOptions } from 'motion'
     // Components
@@ -16,8 +17,8 @@
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
-    export let data: any
+    export let data: PageData
-    export let photos: PhotoGridAbout[]
+    export let errors: Errors
 
     // console.log(data)
 
@@ -45,7 +46,7 @@
          * Steps scroll animation
          */
         const cards = stepsEl.querySelectorAll('.step')
-        const cardsAmount = data.process_steps.length
+        const cardsAmount = data.about.process_steps.length
 
         cards.forEach((card: HTMLElement, i: number) => {
             const index = i + 1
@@ -86,13 +87,13 @@
 
 <PageTransition name="about">
     <Heading
-        text={data.description}
+        text={data.about.description}
     />
 
     <section class="about__purpose" bind:this={purposeEl}>
         <div class="container-wide">
             <div class="text title-xl" role="heading">
-                {@html data.purpose_text}
+                {@html data.about.purpose_text}
             </div>
 
             <div class="background" />
@@ -102,21 +103,21 @@
     <section class="about__process">
         <div class="container grid">
             <div class="title">
-                <h2 class="title-big">{data.process_title}</h2>
+                <h2 class="title-big">{data.about.process_title}</h2>
-                <p class="text-normal">{data.process_subtitle}</p>
+                <p class="text-normal">{data.about.process_subtitle}</p>
             </div>
 
             <div class="steps" bind:this={stepsEl}
-                style:--cards-amount={data.process_steps.length}
+                style:--cards-amount={data.about.process_steps.length}
             >
-                {#each data.process_steps as step, index}
+                {#each data.about.process_steps as step, index}
                     <ProcessStep {...step} index={index} />
                 {/each}
             </div>
 
             <div class="intention">
                 <p class="intention__content title-medium">
-                    {data.process_intention}
+                    {data.about.process_intention}
                 </p>
             </div>
         </div>
@@ -125,7 +126,7 @@
     <section class="about__photos" bind:this={photosGridEl}>
         <div class="container-wide">
             <div class="photos-grid" style:--parallax-y="{parallaxPhotos}px">
-                {#each photos as { image: { id }, title }, index}
+                {#each data.photos as { image: { id }, title }, index}
                     <AboutGridPhoto class="about-grid-photo"
                         {id}
                         alt={title}
@@ -138,10 +139,10 @@
 
     <div class="about__bottom container grid">
         <section class="about__interest grid">
-            <h2 class="title-xl">{data.contact_title}</h2>
+            <h2 class="title-xl">{data.about.contact_title}</h2>
 
             <div class="blocks">
-                {#each data.contact_blocks as { title, text, link, button }}
+                {#each data.about.contact_blocks as { title, text, link, button }}
                     <div class="block">
                         <h3 class="text-label">{title}</h3>
                         <p class="text-normal">{text}</p>

src/routes/api/newsletter.ts

@@ -1,44 +0,0 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
-
-
-// Block GET requests
-export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
-    return {
-        status: 403,
-        body: 'nope!'
-    }
-}
-
-
-/**
- * POST request
- */
-export async function POST ({ request }: RequestEvent): Promise<RequestHandlerOutput> {
-    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`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                api_key: import.meta.env.VITE_NEWSLETTER_API_TOKEN,
-                email_address: body,
-            })
-        })
-        const res = await req.json()
-
-        if (res && res.email_address && res.status === 'PENDING') {
-            return {
-                status: 200,
-                body: {
-                    code: 'PENDING'
-                },
-            }
-        }
-
-        return {
-            status: 403,
-            body: res.error,
-        }
-    }
-}

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

@@ -0,0 +1,29 @@
+import { error } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+
+
+export const POST: RequestHandler = async ({ request }) => {
+    try {
+        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`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    api_key: import.meta.env.VITE_NEWSLETTER_API_TOKEN,
+                    email_address: body,
+                })
+            })
+            const res = await req.json()
+
+            if (res && res.email_address && res.status === 'PENDING') {
+                return new Response(JSON.stringify({
+                    code: 'PENDING'
+                }))
+            }
+        }
+    } catch (err) {
+        throw error(403, err)
+    }
+}

src/routes/api/swell.ts

@@ -1,75 +0,0 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
-import {
-    getProducts,
-    getProduct,
-    createCart,
-    fetchCart,
-    addToCart,
-    updateCartItem,
-    removeCartItem,
-} from '$utils/functions/swell'
-
-
-// Block GET requests
-export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
-    return {
-        status: 403,
-        body: 'nope!'
-    }
-}
-
-
-/**
- * POST request
- */
-export async function POST ({ request }: RequestEvent): Promise<RequestHandlerOutput> {
-    try {
-        const body = await request.json()
-        const { action, cartId, productId } = body
-        let result = {}
-
-        if (body) {
-            switch (action) {
-                case 'getProducts': {
-                    result = await getProducts(body.category)
-                    break
-                }
-                case 'getProduct': {
-                    result = await getProduct(productId)
-                    break
-                }
-                case 'createCart': {
-                    result = await createCart()
-                    break
-                }
-                case 'fetchCart': {
-                    result = await fetchCart(cartId)
-                    break
-                }
-                case 'addToCart': {
-                    result = await addToCart(cartId, productId, body.quantity)
-                    break
-                }
-                case 'updateCartItem': {
-                    result = await updateCartItem(cartId, productId, body.quantity)
-                    break
-                }
-                case 'removeCartItem': {
-                    result = await removeCartItem(cartId, productId)
-                    break
-                }
-                default: break
-            }
-        }
-        return {
-            status: 200,
-            body: result,
-        }
-    }
-    catch (error) {
-        return {
-            status: error.status || 500,
-            body: error.message || error.text || `Can't fetch query`
-        }
-    }
-}

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

@@ -0,0 +1,52 @@
+import { error } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+import * as swell from '$utils/functions/swell'
+
+
+export const POST: RequestHandler = async ({ request }) => {
+    try {
+        const body = await request.json()
+        const { action, cartId, productId } = body
+        let result = {}
+
+        if (body) {
+            switch (action) {
+                case 'getProducts': {
+                    result = await swell.getProducts(body.category)
+                    break
+                }
+                case 'getProduct': {
+                    result = await swell.getProduct(productId)
+                    break
+                }
+                case 'createCart': {
+                    result = await swell.createCart()
+                    break
+                }
+                case 'fetchCart': {
+                    result = await swell.fetchCart(cartId)
+                    break
+                }
+                case 'addToCart': {
+                    result = await swell.addToCart(cartId, productId, body.quantity)
+                    break
+                }
+                case 'updateCartItem': {
+                    result = await swell.updateCartItem(cartId, productId, body.quantity)
+                    break
+                }
+                case 'removeCartItem': {
+                    result = await swell.removeCartItem(cartId, productId)
+                    break
+                }
+                default: break
+            }
+
+            return new Response(JSON.stringify({
+                ...result
+            }))
+        }
+    } catch (err) {
+        throw error(500, err.message || `Can't fetch query`)
+    }
+}

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

@@ -1,7 +1,8 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
-export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async () => {
     try {
         const res = await fetchAPI(`
             query {
@@ -32,14 +33,9 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
         const { data } = res
 
         return {
-            body: {
+            ...data
-                data
-            }
-        }
-    } catch (error) {
-        return {
-            status: 404,
-            body: error,
         }
+    } catch (err) {
+        throw error(500, err)
     }
 }

src/routes/credits/+page.svelte

@@ -1,10 +1,11 @@
 <style lang="scss">
-    @import "../style/pages/credits";
+    @import "../../style/pages/credits";
 </style>
 
 <script lang="ts">
-    import { onMount } from 'svelte'
     import { navigating } from '$app/stores'
+    import type { PageData, Errors } from './$types'
+    import { onMount } from 'svelte'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/contants'
     import { quartOut } from 'svelte/easing'
@@ -15,7 +16,8 @@
     import Heading from '$components/molecules/Heading.svelte'
     import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
 
-    export let data: any
+    export let data: PageData
+    export let errors: Errors
 
 
     onMount(() => {

src/routes/locations/+page.svelte

@@ -1,5 +1,5 @@
 <style lang="scss">
-    @import "../style/pages/explore";
+    @import "../../style/pages/explore";
 </style>
 
 <script lang="ts">

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

@@ -1,11 +1,12 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
 // Default filters values
 const defaultCountry = String(import.meta.env.VITE_FILTERS_DEFAULT_COUNTRY)
 const defaultSort = String(import.meta.env.VITE_FILTERS_DEFAULT_SORT)
 
-export async function GET ({ url }: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({ url }) => {
     try {
         // Query parameters
         const queryCountry = url.searchParams.get('country') || defaultCountry
@@ -63,16 +64,11 @@ export async function GET ({ url }: RequestEvent): Promise<RequestHandlerOutput>
         const { data } = res
 
         return {
-            body: {
             photos: data.photos,
             filteredCountryExists: data.country.length > 0,
             totalPhotos: data.total_published[0].count.id,
         }
-        }
+    } catch (err) {
-    } catch (error) {
+        throw error(500, err)
-        return {
-            status: 404,
-            body: error,
-        }
     }
 }

src/routes/photos/+page.svelte

@@ -1,15 +1,16 @@
 <style lang="scss">
-    @import "../style/pages/photos";
+    @import "../../style/pages/photos";
 </style>
 
 <script lang="ts">
     import { page, navigating } from '$app/stores'
     import { goto } from '$app/navigation'
+    import type { PageData, Errors } from './$types'
     import { getContext, onMount } from 'svelte'
     import { fly } from 'svelte/transition'
     import { quartOut as quartOutSvelte } from 'svelte/easing'
     import dayjs from 'dayjs'
-    import relativeTime from 'dayjs/plugin/relativeTime.js'
+    import relativeTime from 'dayjs/plugin/relativeTime'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/contants'
     import { fetchAPI } from '$utils/api'
@@ -29,14 +30,15 @@
     import ShopModule from '$components/organisms/ShopModule.svelte'
     import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
 
-    export let photos: any[]
+    export let data: PageData
-    export let totalPhotos: number
+    export let errors: Errors
-    export let filteredCountryExists: boolean
+
+    let { photos }: { photos: any[] } = data
+    const { totalPhotos, filteredCountryExists }: { totalPhotos: number, filteredCountryExists: boolean } = data
+    const { countries, locations }: any = getContext('global')
 
     dayjs.extend(relativeTime)
 
-    const { countries, locations }: any = getContext('global')
-
     let photosContentEl: HTMLElement
     let photosGridEl: HTMLElement
     let observerPhotos: IntersectionObserver

src/routes/shop/+error.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
     import { getContext } from 'svelte'
+    import { page } from '$app/stores'
+    // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
     import ShopHeader from '$components/organisms/ShopHeader.svelte'
     import PostersGrid from '$components/organisms/PostersGrid.svelte'
 
-    export let status: number
-
     const { posters } = getContext('shop')
     const errors = {
         404: {
@@ -21,7 +21,7 @@
 </script>
 
 <Metas
-    title="{errors[status].title} – Houses Of"
+    title="{errors[$page.status].title} – Houses Of"
 />
 
 
@@ -32,23 +32,10 @@
         <div class="container grid">
             <div class="inner">
                 <h2 class="title-big">Uh oh!</h2>
-                <p class="text-medium">{errors[status].message}</p>
+                <p class="text-medium">{errors[$page.status].message}</p>
             </div>
         </div>
     </section>
 
     <PostersGrid {posters} />
 </PageTransition>
-
-
-<script context="module" lang="ts">
-    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
-
-    export async function load ({ status }: LoadEvent): Promise<LoadOutput> {
-        return {
-            props: {
-                status,
-            },
-        }
-    }
-</script>

src/routes/shop/+layout.server.ts

@@ -0,0 +1,73 @@
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
+import { fetchAPI } from '$utils/api'
+import { getProducts } from '$utils/functions/swell'
+
+export const load: PageServerLoad = async () => {
+    try {
+        // Get content from API
+        const res = await fetchAPI(`
+            query {
+                shop {
+                    page_heroimage { id }
+                }
+
+                location (
+                    filter: {
+                        has_poster: { _eq: true },
+                        status: { _eq: "published" },
+                    },
+                    sort: "name"
+                ) {
+                    name
+                    slug
+                }
+
+                posters: product (
+                    filter: { status: { _eq: "published" }}
+                ) {
+                    name
+                    type
+                    description
+                    details
+                    location {
+                        name
+                        slug
+                    }
+                    product_id
+                    photos_product {
+                        directus_files_id {
+                            id
+                            title
+                        }
+                    }
+                    photos_preview {
+                        directus_files_id {
+                            id
+                            title
+                        }
+                    }
+                }
+            }
+        `)
+
+        const { data: { shop, location, posters }} = res
+
+
+        /**
+         * Get products data from Swell
+         */
+        const shopProducts = await getProducts('posters')
+
+        if (shopProducts) {
+            return {
+                shop,
+                locations: location,
+                posters,
+                shopProducts: shopProducts.results,
+            }
+        }
+    } catch (err) {
+        throw error(500, err)
+    }
+}

src/routes/shop/+layout.svelte

@@ -0,0 +1,50 @@
+<style lang="scss">
+    @import "../../style/pages/shop";
+</style>
+
+<script lang="ts">
+    import type { PageData, Errors } from './$types'
+    import { setContext } from 'svelte'
+    import { cartNotifications } from '$utils/stores/shop'
+    // Components
+    import Cart from '$components/organisms/Cart.svelte'
+    import NotificationCart from '$components/molecules/NotificationCart.svelte'
+
+    export let data: PageData
+    export let errors: Errors
+
+    const { shop, locations, posters, shopProducts } = data
+
+    let scrollY: number
+
+    // Locations with an existing poster product
+    const shopLocations = locations.filter(({ slug }: any) => {
+        if (posters.find((poster: any) => poster.location.slug === slug)) {
+            return true
+        }
+    })
+
+    setContext('shop', {
+        shop,
+        posters,
+        shopLocations,
+        shopProducts,
+    })
+</script>
+
+<svelte:window bind:scrollY />
+
+
+<Cart />
+
+<div class="notifications" class:is-top={scrollY <= 100}>
+    {#each $cartNotifications as { id, title, name, image } (id)}
+        <NotificationCart
+            title={title}
+            name={name}
+            image={image}
+        />
+    {/each}
+</div>
+
+<slot />

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

@@ -1,9 +1,10 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import { getRandomItem } from '$utils/functions'
 import { getProduct } from '$utils/functions/swell'
+import { getRandomItem } from '$utils/functions'
 
-export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({}) => {
     try {
         // Get content from API
         const data = await fetchAPI(`
@@ -44,17 +45,12 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
 
             if (shopProduct) {
                 return {
-                    body: {
                     product: randomPoster,
                     shopProduct,
                 }
             }
         }
-        }
+    } catch (err) {
-    } catch (error) {
+        throw error(500, err)
-        return {
-            status: 404,
-            body: error,
-        }
     }
 }

src/routes/shop/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { PageData, Errors } from './$types'
     import { getContext } from 'svelte'
     import { shopCurrentProductSlug } from '$utils/stores/shop'
     // Components
@@ -8,9 +9,10 @@
     import ShopHeader from '$components/organisms/ShopHeader.svelte'
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
 
-    export let product: any
+    export let data: PageData
-    export let shopProduct: any
+    export let errors: Errors
 
+    const { product, shopProduct } = data
     const { posters } = getContext('shop')
 
     // Update current random product slug

src/routes/shop/[type]-[name]/+page.server.ts

@@ -1,8 +1,9 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getProduct } from '$utils/functions/swell'
 
-export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async ({ params }) => {
     try {
         // Get content from API
         const data = await fetchAPI(`
@@ -41,17 +42,12 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
 
             if (shopProduct) {
                 return {
-                    body: {
                     product: poster,
                     shopProduct,
                 }
             }
         }
-        }
+    } catch (err) {
-    } catch (error) {
+        throw error(404, err)
-        return {
-            status: 404,
-            body: error,
-        }
     }
 }

src/routes/shop/[type]-[name]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { PageData, Errors } from './$types'
     import { getContext } from 'svelte'
     import { capitalizeFirstLetter } from '$utils/functions'
     // Components
@@ -8,25 +9,25 @@
     import PostersGrid from '$components/organisms/PostersGrid.svelte'
     import PosterLayout from '$components/layouts/PosterLayout.svelte'
 
-    export let product: any
+    export let data: PageData
-    export let shopProduct: any
+    export let errors: Errors
 
     const { posters } = getContext('shop')
 </script>
 
 <Metas
-    title="{product.location.name} {capitalizeFirstLetter(product.type)} – Houses Of"
+    title="{data.product.location.name} {capitalizeFirstLetter(data.product.type)} – Houses Of"
     description=""
     image=""
 />
 
 
 <PageTransition name="shop-page">
-    <ShopHeader {product} />
+    <ShopHeader product={data.product} />
 
     <PosterLayout
-        product={product}
+        product={data.product}
-        shopProduct={shopProduct}
+        shopProduct={data.shopProduct}
     />
 
     <PostersGrid {posters} />

src/routes/shop/__layout.svelte

@@ -1,132 +0,0 @@
-<style lang="scss">
-    @import "../../style/pages/shop";
-</style>
-
-<script lang="ts">
-    import { setContext } from 'svelte'
-    import { cartNotifications } from '$utils/stores/shop'
-    // Components
-    import Cart from '$components/organisms/Cart.svelte'
-    import NotificationCart from '$components/molecules/NotificationCart.svelte'
-
-    export let shop: any
-    export let locations: any
-    export let posters: any
-    export let shopProducts: any
-
-    // Locations with an existing poster product
-    const shopLocations = locations.filter(({ slug }: any) => {
-        if (posters.find((poster: any) => poster.location.slug === slug)) {
-            return true
-        }
-    })
-
-    setContext('shop', {
-        shop,
-        posters,
-        shopLocations,
-        shopProducts,
-    })
-</script>
-
-
-<Cart />
-
-<div class="notifications">
-    {#each $cartNotifications as { id, title, name, image } (id)}
-        <NotificationCart
-            title={title}
-            name={name}
-            image={image}
-        />
-    {/each}
-</div>
-
-<slot />
-
-
-<script context="module" lang="ts">
-    import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
-    import { fetchAPI } from '$utils/api'
-
-    export async function load ({ fetch }: LoadEvent): Promise<LoadOutput> {
-        // Get content from API
-        const res = await fetchAPI(`
-            query {
-                shop {
-                    page_heroimage { id }
-                }
-
-                location (
-                    filter: {
-                        has_poster: { _eq: true },
-                        status: { _eq: "published" },
-                    },
-                    sort: "name"
-                ) {
-                    name
-                    slug
-                }
-
-                posters: product (
-                    filter: { status: { _eq: "published" }}
-                ) {
-                    name
-                    type
-                    description
-                    details
-                    location {
-                        name
-                        slug
-                    }
-                    product_id
-                    photos_product {
-                        directus_files_id {
-                            id
-                            title
-                        }
-                    }
-                    photos_preview {
-                        directus_files_id {
-                            id
-                            title
-                        }
-                    }
-                }
-            }
-        `)
-
-        const { data: { shop, location, posters }} = res
-
-
-        /**
-         * Get products data from Swell
-         */
-        let shopProducts: any
-
-        const shopProductRes = await fetch('/api/swell', {
-            method: 'POST',
-            body: JSON.stringify({
-                action: 'getProducts',
-                category: 'posters',
-            })
-        })
-        if (shopProductRes.ok) {
-            // Set all products
-            const { results } = await shopProductRes.json()
-            if (results) {
-                shopProducts = results
-            }
-        }
-
-
-        return {
-            props: {
-                shop,
-                locations: location,
-                posters,
-                shopProducts,
-            },
-        }
-    }
-</script>

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

@@ -1,7 +1,8 @@
-import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit'
+import { error } from '@sveltejs/kit'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 
-export async function GET({}: RequestEvent): Promise<RequestHandlerOutput> {
+export const load: PageServerLoad = async () => {
     try {
         const res = await fetchAPI(`
             query {
@@ -26,15 +27,10 @@ export async function GET({}: RequestEvent): Promise<RequestHandlerOutput> {
         const { data } = res
 
         return {
-            body: {
+            ...data.settings,
-                data: data.settings,
             issues: data.newsletter,
         }
-        }
+    } catch (err) {
-    } catch (error) {
+        throw error(500, err)
-        return {
-            status: 404,
-            body: error,
-        }
     }
 }

src/routes/subscribe/+page.svelte

@@ -1,9 +1,10 @@
 <style lang="scss">
-    @import "../style/pages/subscribe";
+    @import "../../style/pages/subscribe";
 </style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'
+    import type { PageData, Errors } from './$types'
     import { onMount } from 'svelte'
     import { stagger, timeline } from 'motion'
     import { DELAY } from '$utils/contants'
@@ -16,10 +17,10 @@
     import NewsletterIssue from '$components/molecules/NewsletterIssue.svelte'
     import InteractiveGlobe2 from '$components/organisms/InteractiveGlobe2.svelte'
 
-    export let data: any
+    export let data: PageData
-    export let issues: any[]
+    export let errors: Errors
 
-    const latestIssue = issues[0]
+    const latestIssue = data.issues[0]
 
 
     onMount(() => {
@@ -80,10 +81,10 @@
             <NewsletterIssue size="large" date={latestIssue.date_sent} {...latestIssue} />
         </div>
 
-        {#if issues.length > 1}
+        {#if data.issues.length > 1}
             <h2 class="title-small">Past Issues</h2>
             <ul>
-                {#each issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
+                {#each data.issues.slice(1) as { issue, title, date_sent: date, link, thumbnail }}
                     <li class="issue-container">
                         <NewsletterIssue {issue} {title} {link} {thumbnail} {date} />
                     </li>

src/style/pages/_shop.scss

@@ -69,6 +69,10 @@
         right: 32px;
     }
 
+    &.is-top {
+        top: 20px;
+    }
+
     & > :global(*) {
         &:not(:last-child) {
             margin-bottom: 8px;

src/utils/functions/notifications.ts

@@ -4,7 +4,7 @@ import { cartNotifications } from '$utils/stores/shop'
 /**
  * Add a notification
  */
-export const addNotification = (notification: Notification) => {
+export const addNotification = (notification: ShopNotification) => {
     const id = Math.floor(Math.random() * 10000)
 
     // Add ID and default timeout

src/utils/functions/shop.ts

@@ -2,7 +2,6 @@ import { addNotification } from '$utils/functions/notifications'
 import { cartData } from '$utils/stores/shop'
 
 
-
 /**
  * Add a product to a cart
  */
@@ -17,6 +16,7 @@ export const addToCart = async (cartId: string, product: any, quantity: number =
                 quantity,
             })
         })
+
         if (updatedCart.ok) {
             const newCart = await updatedCart.json()
             cartData.set(newCart)

tsconfig.json

@@ -1,15 +1,7 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"allowJs": true,
+		"allowSyntheticDefaultImports": true
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": false,
-		"allowSyntheticDefaultImports": true,
 	},
-	"exclude": ["./src/modules/globe/**"]
+	"exclude": ["./src/modules/globe/**/*"],
 }

vite.config.js

@@ -1,5 +1,5 @@
 import { sveltekit } from '@sveltejs/kit/vite'
-import { scssImports } from './svelte.config.js'
+import { scssImports } from './svelte.config'
 
 /** @type {import('vite').UserConfig} */
 const config = {