Merge branch 'dev'

# Conflicts:
#	svelte.config.js

package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^1.0.0",
+    "@sveltejs/adapter-cloudflare": "^1.0.0",
     "@sveltejs/adapter-node": "^1.0.0",
     "@sveltejs/adapter-vercel": "^1.0.0",
     "@sveltejs/kit": "^1.0.1",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@studio-freight/lenis': ^0.2.28
   '@sveltejs/adapter-auto': ^1.0.0
+  '@sveltejs/adapter-cloudflare': ^1.0.0
   '@sveltejs/adapter-node': ^1.0.0
   '@sveltejs/adapter-vercel': ^1.0.0
   '@sveltejs/kit': ^1.0.1
@@ -47,6 +48,7 @@ dependencies:
 
 devDependencies:
   '@sveltejs/adapter-auto': 1.0.0_@sveltejs+kit@1.0.1
+  '@sveltejs/adapter-cloudflare': 1.0.0_@sveltejs+kit@1.0.1
   '@sveltejs/adapter-node': 1.0.0_@sveltejs+kit@1.0.1
   '@sveltejs/adapter-vercel': 1.0.0_@sveltejs+kit@1.0.1
   '@sveltejs/kit': 1.0.1_svelte@3.55.0+vite@4.0.3
@@ -72,6 +74,10 @@ devDependencies:
 
 packages:
 
+  /@cloudflare/workers-types/4.20221111.1:
+    resolution: {integrity: sha512-BNV2wN8V6Zduvo7UzxcdjBbLQ906D2KhS804PDufLgx/sanGJCHVJMOIaLvS/b61JKtot1U7P/l1fjrjZ7/E3A==}
+    dev: true
+
   /@csstools/normalize.css/12.0.0:
     resolution: {integrity: sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==}
     dev: true
@@ -674,6 +680,17 @@ packages:
       import-meta-resolve: 2.2.0
     dev: true
 
+  /@sveltejs/adapter-cloudflare/1.0.0_@sveltejs+kit@1.0.1:
+    resolution: {integrity: sha512-uSFmMXI8vSM/f6duNgqfo6pkR1BBEcdzw1t1f56DsM2b/SQI0N7onY0yXpQA6LmDnWO/qdKp/TbRE0DuUt27LQ==}
+    peerDependencies:
+      '@sveltejs/kit': ^1.0.0
+    dependencies:
+      '@cloudflare/workers-types': 4.20221111.1
+      '@sveltejs/kit': 1.0.1_svelte@3.55.0+vite@4.0.3
+      esbuild: 0.16.10
+      worktop: 0.8.0-next.14
+    dev: true
+
   /@sveltejs/adapter-node/1.0.0_@sveltejs+kit@1.0.1:
     resolution: {integrity: sha512-Q8an8CXEt5XlFbyT1NBM4xELNZD8xPVZfKCcgorCfPkeBP5ftDgPaK12JIokXA5koYJ54AJcNY4ams9TZ7yGxA==}
     peerDependencies:
@@ -3010,6 +3027,11 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /regexparam/2.0.1:
+    resolution: {integrity: sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==}
+    engines: {node: '>=8'}
+    dev: true
+
   /regexpp/3.2.0:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
     engines: {node: '>=8'}
@@ -3561,6 +3583,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /worktop/0.8.0-next.14:
+    resolution: {integrity: sha512-RZgqHu1w/JcUdWOE/BUEAzarrUUHh39eWkLdX8XpA6MfgLJF6X5Vl26CV7/wcm4O/UpZvHMGJUtB9eYTqDjc9g==}
+    engines: {node: '>=12'}
+    dependencies:
+      mrmime: 1.0.1
+      regexparam: 2.0.1
+    dev: true
+
   /wrappy/1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true

src/components/molecules/EmailForm.svelte

@@ -3,8 +3,6 @@
 </style>
 
 <script lang="ts">
-    import { enhance } from '$app/forms'
-    import { dev } from '$app/environment'
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { sendEvent } from '$utils/analytics'
@@ -15,27 +13,43 @@
     export let past: boolean = false
 
     let inputInFocus = false
-    let formStatus: { error: string, success: boolean, message: string } = null
+    let formStatus: FormStatus = null
     let formMessageTimeout: ReturnType<typeof setTimeout> | number
 
+    interface FormStatus {
+        error?: string
+        success?: boolean
+        message: string
+    }
+    const formMessages = {
+        PENDING: `Almost there! Please confirm your email address through the email you'll receive soon.`,
+        MEMBER_EXISTS_WITH_EMAIL_ADDRESS: `This email address is already subscribed to the newsletter.`,
+        INVALID_EMAIL: `Woops. This email doesn't seem to be valid.`,
+    }
+
     $: isSuccess = formStatus && formStatus.success
 
     // Toggle input focus
     const toggleFocus = () => inputInFocus = !inputInFocus
 
     // Handle form submission
-    const handleForm = () => {
+    async function handleForm (event: Event | HTMLFormElement) {
-        return async ({ result, update }) => {
+        const data = new FormData(this)
-            formStatus = result.data
+        const email = data.get('email')
 
-            if (dev) {
+        if (email) {
-                console.log(result)
+            const req = await fetch(this.action, {
-            }
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email })
+            })
+            const result: FormStatus = await req.json()
+            formStatus = result
+            console.log('SK api response:', result)
 
             // If successful
-            if (result.data.success) {
+            if (formStatus.success) {
                 sendEvent('newsletterSubscribe')
-                update()
             } else {
                 // Hide message for errors
                 clearTimeout(formMessageTimeout)
@@ -47,8 +61,7 @@
 
 <div class="newsletter-form">
     {#if !isSuccess}
-        <form method="POST" action="?/subscribe"
+        <form method="POST" action="/api/newsletter" on:submit|preventDefault={handleForm}
-            use:enhance={handleForm}
             out:fly|local={{ y: -8, easing: quartOut, duration: 600 }}
         >
             <div class="newsletter-form__email" class:is-focused={inputInFocus}>
@@ -87,7 +100,7 @@
             in:fly|local={{ y: 8, easing: quartOut, duration: 600, delay: isSuccess ? 600 : 0 }}
             out:fly|local={{ y: 8, easing: quartOut, duration: 600 }}
         >
-            <p class="text-xsmall">{formStatus.message}</p>
+            <p class="text-xsmall">{formMessages[formStatus.message]}</p>
         </div>
     {/if}
 </div>

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

@@ -1,8 +1,7 @@
 import { error } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
+import type { PageServerLoad } from './$types'
 import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
 import { fetchAPI, photoFields } from '$utils/api'
-import subscribe from '$utils/forms/subscribe'
 
 
 /**
@@ -93,12 +92,3 @@ export const load: PageServerLoad = async ({ params, setHeaders }) => {
         throw error(500, err.message)
     }
 }
-
-
-/**
- * Form Data
- */
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe,
-}

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

@@ -1,8 +0,0 @@
-import type { Actions } from './$types'
-import subscribe from '$utils/forms/subscribe'
-
-
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe,
-}

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

@@ -1,8 +1,7 @@
 import { error } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public'
-import subscribe from '$utils/forms/subscribe'
 
 
 /**
@@ -90,12 +89,3 @@ export const load: PageServerLoad = async ({ url, setHeaders }) => {
         throw error(500, err.message)
     }
 }
-
-
-/**
- * Form Data
- */
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe,
-}

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

@@ -1,7 +1,6 @@
 import { error } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
-import subscribe from '$utils/forms/subscribe'
 
 
 /**
@@ -41,12 +40,3 @@ export const load: PageServerLoad = async ({ setHeaders }) => {
         throw error(500, err.message)
     }
 }
-
-
-/**
- * Form Data
- */
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe,
-}

src/routes/+page.server.ts

@@ -1,8 +1,7 @@
 import { error } from '@sveltejs/kit'
-import type { Actions, PageServerLoad } from './$types'
+import type { PageServerLoad } from './$types'
 import { fetchAPI } from '$utils/api'
 import { getRandomItems } from '$utils/functions'
-import subscribe from '$utils/forms/subscribe'
 
 
 /**
@@ -58,12 +57,3 @@ export const load: PageServerLoad = async ({ setHeaders }) => {
         throw error(500, err.message)
     }
 }
-
-
-/**
- * Form Data
- */
-export const actions: Actions = {
-    // Form newsletter subscription
-    subscribe,
-}

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

@@ -0,0 +1,40 @@
+import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
+import type { RequestHandler } from './$types'
+
+export const POST = (async ({ request, fetch }) => {
+    const data: { email: string } = await request.json()
+    const { email } = data
+
+    // No email
+    if (!email) {
+        return new Response(JSON.stringify({ message: 'NO_EMAIL' }), { status: 400 })
+    }
+    // Invalid email
+    if (!email.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
+        return new Response(JSON.stringify({ message: 'INVALID_EMAIL' }), { status: 400 })
+    }
+
+    // Newsletter API request
+    const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${NEWSLETTER_LIST_ID}/contacts`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            api_key: NEWSLETTER_API_TOKEN,
+            email_address: email,
+        })
+    })
+    const res = await req.json()
+    console.log('server API response:', res)
+
+    // Other error
+    if (res && res.status !== 'PENDING') {
+        return new Response(JSON.stringify({ message: res.error.code }), { status: 400 })
+    }
+
+    return new Response(JSON.stringify({
+        success: true,
+        message: res.status,
+    }), {
+        status: 200
+    })
+}) satisfies RequestHandler

src/utils/forms/subscribe.ts

@@ -1,49 +0,0 @@
-import { NEWSLETTER_API_TOKEN, NEWSLETTER_LIST_ID } from '$env/static/private'
-import { fail } from '@sveltejs/kit'
-
-const formMessages = {
-    PENDING: `Almost there! Please confirm your email address through the email you'll receive soon.`,
-    MEMBER_EXISTS_WITH_EMAIL_ADDRESS: `This email address is already subscribed to the newsletter.`,
-    INVALID_EMAIL: `Woops. This email doesn't seem to be valid.`,
-}
-
-
-export default async ({ request }) => {
-    const formData = await request.formData()
-    const email = formData.get('email')
-
-    // Newsletter API request
-    const req = await fetch(`https://emailoctopus.com/api/1.6/lists/${NEWSLETTER_LIST_ID}/contacts`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-            api_key: NEWSLETTER_API_TOKEN,
-            email_address: email,
-        })
-    })
-
-    const res = await req.json()
-
-    if (res) {
-        if (res && res.status !== 'PENDING') {
-            // Invalid email
-            if (!email.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
-                return fail(400, {
-                    error: 'INVALID_EMAIL',
-                    message () { return formMessages[this.error] }
-                })
-            }
-
-            // Other error
-            return fail(400, {
-                error: res.error.code,
-                message: formMessages[res.error.code],
-            })
-        }
-
-        return {
-            success: true,
-            message: formMessages[res.status],
-        }
-    }
-}

svelte.config.js

@@ -1,5 +1,5 @@
 import preprocess from 'svelte-preprocess'
-import adapter from '@sveltejs/adapter-vercel'
+import adapter from '@sveltejs/adapter-auto'
 import { fileURLToPath } from 'url'
 import { dirname } from 'path'
 
@@ -18,7 +18,7 @@ const config = {
 
     kit: {
         adapter: adapter({
-            // edge: true
+            // edge: true,
         }),
         alias: {
             $components: 'src/components',
@@ -27,7 +27,6 @@ const config = {
             $utils: 'src/utils',
             $style: 'src/style',
         },
-        csrf: false,
     }
 }
 

vercel.json

@@ -8,7 +8,11 @@
         { "key": "X-XSS-Protection", "value": "1; mode=block" },
         { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains; preload" },
         { "key": "Referrer-Policy", "value": "no-referrer-when-downgrade" },
-        { "key": "Feature-Policy", "value": "geolocation 'self'" }
+        { "key": "Feature-Policy", "value": "geolocation 'self'" },
+        { "key": "Access-Control-Allow-Credentials", "value": "true" },
+        { "key": "Access-Control-Allow-Origin", "value": "*" },
+        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
+        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
       ]
     },
     {