Add Klaviyo to Newsletter options.

Hey 👋 !

Full disclosure, I work for Klaviyo! With that said, I am using this template for my own website and thought I would contribute to the repo if you don't mind!

.env.example

@@ -16,4 +16,7 @@ BUTTONDOWN_API_KEY=
 CONVERTKIT_API_URL=https://api.convertkit.com/v3/
 CONVERTKIT_API_KEY=
 // curl https://api.convertkit.com/v3/forms?api_key=<your_public_api_key> to get your form ID 
-CONVERTKIT_FORM_ID= 
+CONVERTKIT_FORM_ID= 
+
+KLAVIYO_API_KEY=
+KLAVIYO_LIST_ID=

README.md

@@ -55,7 +55,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - Blog templates
 - TOC component
 - Support for nested routing of blog posts
-- Newsletter component with support for mailchimp, buttondown and convertkit
+- Newsletter component with support for mailchimp, buttondown, convertkit and klaviyo
 - Supports [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus
 - Projects page
 - SEO friendly with RSS feed, sitemaps and more!

data/siteMetadata.js

@@ -23,7 +23,7 @@ const siteMetadata = {
     googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
   },
   newsletter: {
-    // supports mailchimp, buttondown, convertkit
+    // supports mailchimp, buttondown, convertkit, klaviyo
     // Please add your .env file and modify it according to your selection
     provider: 'buttondown',
   },

pages/api/klaviyo.js

@@ -0,0 +1,33 @@
+export default async (req, res) => {
+    const { email } = req.body 
+    if (!email) {
+        return res.status(400).json({error: 'Email is required'})
+    }
+
+    try {
+        const API_KEY = process.env.KLAVIYO_API_KEY
+        const LIST_ID = process.env.KLAVIYO_LIST_ID
+        const response = await fetch(`https://a.klaviyo.com/api/v2/list/${LIST_ID}/subscribe?api_key=${API_KEY}`, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+            // You can add additional params here i.e. SMS, etc. 
+            // https://developers.klaviyo.com/en/reference/subscribe
+            body: JSON.stringify({
+                profiles: [
+                    {email: email},
+                ]
+            }),
+        })
+        if (response.status >= 400) {
+            return res.status(400).json({
+              error: `There was an error subscribing to the list.`,
+            })
+        }
+        return res.status(201).json({ error: '' })
+  } catch (error) {
+    return res.status(500).json({ error: error.message || error.toString() })
+  }
+}