fix(website): configure Vercel serverless functions (pmndrs#1433)

* fix(website): configure Vercel serverless functions

* fix(website): remove console.log

* fix(website): add api dir

* fix(website): remove Gatsby function path from Vercel config

website/api/contact.js

@@ -0,0 +1,33 @@
+import * as postmark from 'postmark';
+
+const client = new postmark.ServerClient(process.env.POSTMARK_API_TOKEN);
+
+export default async function handler(request, response) {
+  const body = request.body;
+
+  if (!body.name || !body.email || !body.message) {
+    return response.status(400).json({ data: 'Invalid' });
+  }
+
+  const subject = `Message from ${body.name} (${body.email}) via jotai.org`;
+
+  const message = `
+    Name: ${body.name}\r\n
+    Email: ${body.email}\r\n
+    Message: ${body.message}
+  `;
+
+  try {
+    client.sendEmail({
+      From: '[email protected]',
+      To: process.env.EMAIL_RECIPIENTS,
+      Subject: subject,
+      ReplyTo: body.email,
+      TextBody: message,
+    });
+
+    response.status(200).json({ status: 'Sent' });
+  } catch (error) {
+    response.status(500).json({ status: 'Not sent' });
+  }
+}

website/package.json

@@ -23,28 +23,28 @@
     "@mdx-js/react": "^1.6.22",
     "@radix-ui/react-dialog": "^1.0.0",
     "algoliasearch": "^4.13.1",
-    "classnames": "^2.3.1",
-    "gatsby": "^4.22.1",
+    "classnames": "^2.3.2",
+    "gatsby": "^4.23.0",
     "gatsby-plugin-algolia": "^0.26.0",
-    "gatsby-plugin-google-gtag": "^4.22.0",
+    "gatsby-plugin-google-gtag": "^4.23.0",
     "gatsby-plugin-mdx": "^3.17.0",
-    "gatsby-plugin-postcss": "^5.22.0",
-    "gatsby-plugin-sitemap": "^5.22.0",
+    "gatsby-plugin-postcss": "^5.23.0",
+    "gatsby-plugin-sitemap": "^5.23.0",
     "gatsby-plugin-use-dark-mode": "^1.5.0",
-    "gatsby-source-filesystem": "^4.22.0",
-    "jotai": "^1.8.3",
+    "gatsby-source-filesystem": "^4.23.0",
+    "jotai": "^1.8.4",
     "just-kebab-case": "^4.1.1",
     "just-throttle": "^4.1.1",
     "prism-react-renderer": "^1.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-instantsearch-hooks-web": "^6.32.1",
+    "react-instantsearch-hooks-web": "^6.33.0",
     "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
-    "autoprefixer": "^10.4.9",
-    "babel-preset-gatsby": "^2.22.1",
+    "autoprefixer": "^10.4.11",
+    "babel-preset-gatsby": "^2.23.0",
     "postcss": "^8.4.16",
     "postcss-import": "^15.0.0",
     "postmark": "^3.0.14",

website/src/components/support.js

@@ -34,7 +34,7 @@ export const Support = () => {
 
     const response = await fetch(endpoint, options);
 
-    if (response.status === 'Sent') {
+    if (response.status === 200) {
       setHasReceived(true);
       setName('');
       setEmail('');
@@ -136,7 +136,7 @@ export const Support = () => {
           </div>
           {hasSubmitted && (
             <div className="absolute inset-0 z-10 flex h-full w-full items-center justify-center bg-gray-100 text-3xl font-bold leading-tight text-gray-350 dark:bg-gray-900 dark:text-gray-200 lg:text-4xl">
-              <span>Thanks!</span>
+              {hasReceived ? <span>Thanks!</span> : <span>Sending...</span>}
             </div>
           )}
         </div>

website/vercel.json

@@ -0,0 +1,9 @@
+{
+  "functions": {
+    "api/*.js": {
+      "memory": 128,
+      "maxDuration": 30
+    }
+  },
+  "trailingSlash": false
+}