flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

🚧 Migrate to new SvelteKit routing system

Browse Source 
A bit annoying but for the best I guess?
This commit is contained in:
Félix Péault
2022-08-16 15:54:15 +02:00
parent cf2becc931
commit 5e5c08ddd1
40 changed files with 775 additions and 774 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@@ -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",
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"@sveltejs/kit": "^1.0.0-next.410",
"@typescript-eslint/eslint-plugin": "^5.33.1",
"@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": [

270
pnpm-lock.yaml generated
View File

@@ -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
'@typescript-eslint/eslint-plugin': ^5.33.0
'@typescript-eslint/parser': ^5.33.0
'@sveltejs/kit': ^1.0.0-next.410
'@typescript-eslint/eslint-plugin': ^5.33.1
'@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
'@typescript-eslint/eslint-plugin': 5.33.0_njno5y7ry2l2lcmiu4tywxkwnq
'@typescript-eslint/parser': 5.33.0_qugx7qdu5zevzvxaiqyxfiwquq
'@sveltejs/kit': 1.0.0-next.410_svelte@3.49.0+vite@3.0.8
'@typescript-eslint/eslint-plugin': 5.33.1_vsoshirnpb7xw6mr7xomgfas2i
'@typescript-eslint/parser': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
browserslist: 4.21.3
cssnano: 5.1.13_postcss@8.4.16
eslint: 8.21.0
eslint-plugin-svelte3: 4.0.0_a7wk4ghvg4hia4trwaglu7p6cq
eslint: 8.22.0
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:
resolution: {integrity: sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==}
/@sveltejs/kit/1.0.0-next.410_svelte@3.49.0+vite@3.0.8:
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:
resolution: {integrity: sha512-LJgzOEwWuMTBxHzgBR/fhhBOWrvBjvO+zPteUgbbuQi80rYIZHrk1mNbRUqPZqSLP2H7Rwt1EFLL/tNLD1Xx/w==}
/@types/node/18.7.5:
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:
resolution: {integrity: sha512-jHvZNSW2WZ31OPJ3enhLrEKvAZNyAFWZ6rx9tUwaessTc4sx9KmgMNhVcqVAl1ETnT5rU5fpXTLmY9YvC1DCNg==}
/@typescript-eslint/eslint-plugin/5.33.1_vsoshirnpb7xw6mr7xomgfas2i:
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/scope-manager': 5.33.0
'@typescript-eslint/type-utils': 5.33.0_qugx7qdu5zevzvxaiqyxfiwquq
'@typescript-eslint/utils': 5.33.0_qugx7qdu5zevzvxaiqyxfiwquq
'@typescript-eslint/parser': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
'@typescript-eslint/scope-manager': 5.33.1
'@typescript-eslint/type-utils': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
'@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:
resolution: {integrity: sha512-cgM5cJrWmrDV2KpvlcSkelTBASAs1mgqq+IUGKJvFxWrapHpaRy5EXPQz9YaKF3nZ8KY18ILTiVpUtbIac86/w==}
/@typescript-eslint/parser/5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq:
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/types': 5.33.0
'@typescript-eslint/typescript-estree': 5.33.0_typescript@4.7.4
'@typescript-eslint/scope-manager': 5.33.1
'@typescript-eslint/types': 5.33.1
'@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:
resolution: {integrity: sha512-/Jta8yMNpXYpRDl8EwF/M8It2A9sFJTubDo0ATZefGXmOqlaBffEw0ZbkbQ7TNDK6q55NPHFshGBPAZvZkE8Pw==}
/@typescript-eslint/scope-manager/5.33.1:
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/visitor-keys': 5.33.0
'@typescript-eslint/types': 5.33.1
'@typescript-eslint/visitor-keys': 5.33.1
dev: true
/@typescript-eslint/type-utils/5.33.0_qugx7qdu5zevzvxaiqyxfiwquq:
resolution: {integrity: sha512-2zB8uEn7hEH2pBeyk3NpzX1p3lF9dKrEbnXq1F7YkpZ6hlyqb2yZujqgRGqXgRBTHWIUG3NGx/WeZk224UKlIA==}
/@typescript-eslint/type-utils/5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq:
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:
resolution: {integrity: sha512-nIMt96JngB4MYFYXpZ/3ZNU4GWPNdBbcB5w2rDOCpXOVUkhtNlG2mmm8uXhubhidRZdwMaMBap7Uk8SZMU/ppw==}
/@typescript-eslint/types/5.33.1:
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:
resolution: {integrity: sha512-tqq3MRLlggkJKJUrzM6wltk8NckKyyorCSGMq4eVkyL5sDYzJJcMgZATqmF8fLdsWrW7OjjIZ1m9v81vKcaqwQ==}
/@typescript-eslint/typescript-estree/5.33.1_typescript@4.7.4:
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/visitor-keys': 5.33.0
'@typescript-eslint/types': 5.33.1
'@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:
resolution: {integrity: sha512-JxOAnXt9oZjXLIiXb5ZIcZXiwVHCkqZgof0O8KPgz7C7y0HS42gi75PdPlqh1Tf109M0fyUw45Ao6JLo7S5AHw==}
/@typescript-eslint/utils/5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq:
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/types': 5.33.0
'@typescript-eslint/typescript-estree': 5.33.0_typescript@4.7.4
eslint: 8.21.0
'@typescript-eslint/scope-manager': 5.33.1
'@typescript-eslint/types': 5.33.1
'@typescript-eslint/typescript-estree': 5.33.1_typescript@4.7.4
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:
resolution: {integrity: sha512-/XsqCzD4t+Y9p5wd9HZiptuGKBlaZO5showwqODii5C0nZawxWLF+Q6k5wYHBrQv96h6GYKyqqMHCSTqta8Kiw==}
/@typescript-eslint/visitor-keys/5.33.1:
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
electron-to-chromium: 1.4.218
caniuse-lite: 1.0.30001377
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:
resolution: {integrity: sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==}
/caniuse-lite/1.0.30001377:
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:
resolution: {integrity: sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA==}
/cssdb/7.0.0:
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:
resolution: {integrity: sha512-INDylKH//YIf2w67D+IjkfVnGVrZ/D94DAU/FPPm6T4jEPbEDQvo9r2wTj0ncFdtJH8+V8BggZTaN8Rzk5wkgw==}
/electron-to-chromium/1.4.221:
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:
resolution: {integrity: sha512-/XJ1+Qurf1T9G2M5IHrsjp+xrGT73RZf23xA1z5wB1ZzzEAWSZKvRwhWxTFp1rvkvCfwcvAUNAP31bhKTTGfDA==}
/eslint/8.22.0:
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:
resolution: {integrity: sha512-1q0ih7EDsZmCb/FMDRvosna7Gsbdx8CvYO5hYT120hcp2ZAuOHpSzibujZ4JpIUcAC02PG6b+eftxqjTFh5BNA==}
/postcss-preset-env/7.8.0_postcss@8.4.16:
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:
resolution: {integrity: sha512-dILhvKba1mbP1wCezVQx/qhEK7/+jVn9ciadEcyKMMhZpsuAi/eWZfJRMkmYlkSFG7Qq9NvJbgFq4XOBxugJsA==}
/vite/3.0.8_sass@1.54.4:
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

14
src/app.d.ts vendored
View File

@@ -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

25
src/components/organisms/Cart.svelte
View File

@@ -27,30 +27,27 @@
})
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({
action: 'createCart'
})
const newCart = await fetch('/api/swell', {
method: 'POST',
body: JSON.stringify({
action: 'createCart'
})
if (newCart.ok) {
const cart = await newCart.json()
// Save new cart
$cartId = cart.id
$cartData = cart
}
})
if (newCart.ok) {
const cart = await newCart.json()
// Save new cart
$cartId = cart.id
$cartData = cart
}
}
}

27
src/routes/__error.svelte → src/routes/+error.svelte
View File

@@ -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>
@@ -82,18 +79,4 @@
</div>
</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>
</PageTransition>

104
src/routes/+layout.server.ts Normal file
View File

@@ -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')
}
}

90
src/routes/+layout.svelte Normal file
View File

@@ -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}

16
src/routes/index.ts → src/routes/+page.server.ts
View File

@@ -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,
}
photos,
}
}
} catch (error) {
return {
status: 404,
body: error,
}
} catch (err) {
throw error(500, err)
}
}

10
src/routes/index.svelte → src/routes/+page.svelte
View File

@@ -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"

28
src/routes/[country]/[location]/index.ts → src/routes/[country]/[location]/+page.server.ts
View File

@@ -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 {
status: 404,
body: Error("This location is not available… yet!"),
}
throw error(404, "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 (error) {
return {
status: 404,
body: error,
location: location[0],
photos,
totalPhotos: photos.length ? total_published[0].count.location : 0,
product: product[0],
}
} catch (err) {
throw error(500, err)
}
}

20
src/routes/[country]/[location]/index.svelte → src/routes/[country]/[location]/+page.svelte
View File

@@ -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 photos: any[]
export let totalPhotos: number
export let product: any = undefined
dayjs.extend(relativeTime)
export let data: PageData
export let errors: Errors
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

19
src/routes/[country]/[location]/[photo].ts → src/routes/[country]/[location]/[photo]/+page.server.ts
View File

@@ -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
const currentIndex = data.photos.findIndex((photo: any) => photo.slug === params.photo)
return {
body: {
if (data) {
const currentIndex = data.photos.findIndex((photo: any) => photo.slug === params.photo)
return {
photos: data.photos,
location: data.location[0],
currentIndex,
@@ -87,10 +89,7 @@ export async function GET ({ params }: RequestEvent): Promise<RequestHandlerOutp
offset,
}
}
} catch (error) {
return {
status: 404,
body: error,
}
} catch (err) {
throw error(500, err)
}
}

14
src/routes/[country]/[location]/[photo].svelte → src/routes/[country]/[location]/[photo]/+page.svelte
View File

@@ -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 location: any
export let currentIndex: number
export let countPhotos: number
export let limit: number
export let offset: number
export let data: PageData
export let errors: Errors
let { photos, currentIndex }: { photos: any[], currentIndex: number } = data
const { location, countPhotos, limit, offset }: { location: any, countPhotos: number, limit: number, offset: number } = data
enum directions { PREV, NEXT }

199
src/routes/__layout.svelte
View File

@@ -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>

20
src/routes/about.ts → src/routes/about/+page.server.ts
View File

@@ -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> {
}
`)
const { data: { photo: photos }} = photosRes
if (photosRes) {
const { data: { photo: photos }} = photosRes
return {
body: {
data: about,
return {
about,
photos,
}
}
} catch (error) {
return {
status: 404,
body: error,
}
} catch (err) {
throw error(500, err)
}
}

29
src/routes/about.svelte → src/routes/about/+page.svelte
View File

@@ -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 photos: PhotoGridAbout[]
export let data: PageData
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>
<p class="text-normal">{data.process_subtitle}</p>
<h2 class="title-big">{data.about.process_title}</h2>
<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>

44
src/routes/api/newsletter.ts
View File

@@ -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,
}
}
}

29
src/routes/api/newsletter/+server.ts Normal file
View File

@@ -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)
}
}

75
src/routes/api/swell.ts
View File

@@ -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`
}
}
}

52
src/routes/api/swell/+server.ts Normal file
View File

@@ -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`)
}
}

16
src/routes/credits.ts → src/routes/credits/+page.server.ts
View File

@@ -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
}
}
} catch (error) {
return {
status: 404,
body: error,
...data
}
} catch (err) {
throw error(500, err)
}
}

8
src/routes/credits.svelte → src/routes/credits/+page.svelte
View File

@@ -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(() => {

2
src/routes/locations.svelte → src/routes/locations/+page.svelte
View File

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

20
src/routes/photos.ts → src/routes/photos/+page.server.ts
View File

@@ -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 (error) {
return {
status: 404,
body: error,
photos: data.photos,
filteredCountryExists: data.country.length > 0,
totalPhotos: data.total_published[0].count.id,
}
} catch (err) {
throw error(500, err)
}
}

16
src/routes/photos.svelte → src/routes/photos/+page.svelte
View File

@@ -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 totalPhotos: number
export let filteredCountryExists: boolean
export let data: PageData
export let errors: Errors
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

23
src/routes/shop/__error.svelte → src/routes/shop/+error.svelte
View File

@@ -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>
</PageTransition>

73
src/routes/shop/+layout.server.ts Normal file
View File

@@ -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)
}
}

50
src/routes/shop/+layout.svelte Normal file
View File

@@ -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 />

20
src/routes/shop/index.ts → src/routes/shop/+page.server.ts
View File

@@ -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,
}
product: randomPoster,
shopProduct,
}
}
}
} catch (error) {
return {
status: 404,
body: error,
}
} catch (err) {
throw error(500, err)
}
}

6
src/routes/shop/index.svelte → src/routes/shop/+page.svelte
View File

@@ -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 shopProduct: any
export let data: PageData
export let errors: Errors
const { product, shopProduct } = data
const { posters } = getContext('shop')
// Update current random product slug

18
src/routes/shop/[type]-[name].ts → src/routes/shop/[type]-[name]/+page.server.ts
View File

@@ -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,
}
product: poster,
shopProduct,
}
}
}
} catch (error) {
return {
status: 404,
body: error,
}
} catch (err) {
throw error(404, err)
}
}

13
src/routes/shop/[type]-[name].svelte → src/routes/shop/[type]-[name]/+page.svelte
View File

@@ -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 shopProduct: any
export let data: PageData
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}
shopProduct={shopProduct}
product={data.product}
shopProduct={data.shopProduct}
/>
<PostersGrid {posters} />

132
src/routes/shop/__layout.svelte
View File

@@ -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>

18
src/routes/subscribe.ts → src/routes/subscribe/+page.server.ts
View File

@@ -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: data.settings,
issues: data.newsletter,
}
}
} catch (error) {
return {
status: 404,
body: error,
...data.settings,
issues: data.newsletter,
}
} catch (err) {
throw error(500, err)
}
}

13
src/routes/subscribe.svelte → src/routes/subscribe/+page.svelte
View File

@@ -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 issues: any[]
export let data: PageData
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>

4
src/style/pages/_shop.scss
View File

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

2
src/utils/functions/notifications.ts
View File

@@ -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

2
src/utils/functions/shop.ts
View File

@@ -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)

14
tsconfig.json
View File

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

2
vite.config.js
View File

@@ -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 = {