.env.example

@@ -4,7 +4,16 @@ NEXT_PUBLIC_GISCUS_CATEGORY=
 NEXT_PUBLIC_GISCUS_CATEGORY_ID=
 NEXT_PUBLIC_UTTERANCES_REPO=
 NEXT_PUBLIC_DISQUS_SHORTNAME=
-NEXT_PUBLIC_MAILCHIMP_API_KEY=
+
-NEXT_PUBLIC_MAILCHIMP_API_SERVER=
+
-NEXT_PUBLIC_MAILCHIMP_AUDIENCE_ID=
+MAILCHIMP_API_KEY=
-NEXT_PUBLIC_BUTTONDOWN=
+MAILCHIMP_API_SERVER=
+MAILCHIMP_AUDIENCE_ID=
+
+BUTTONDOWN_API_URL=https://api.buttondown.email/v1/
+BUTTONDOWN_API_KEY=
+
+CONVERTKIT_API_URL=https://api.convertkit.com/v3/
+CONVERTKIT_API_KEY=
+CONVERTKIT_TIPS_FORM_ID=
+CONVERTKIT_MONTHLY_FORM_ID=

components/FormSuscribe.js

@@ -46,7 +46,7 @@ const FormSubscribe = () => {
             className="appearance-none w-full px-4 py-2 border border-neutrals-cool-grey-300 text-base rounded-md text-neutrals-cool-grey-900 bg-white dark:bg-black placeholder-gray-500 focus:outline-none focus:ring-primary-400 dark:focus:border-primary-600 lg:max-w-xs"
             id="email-input"
             name="email"
-            placeholder="Enter your email"
+            placeholder={subscribed ? "You're subscribed !" : 'Enter your email'}
             ref={inputEl}
             required
             type="email"

data/siteMetadata.js

@@ -23,13 +23,9 @@ const siteMetadata = {
     googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
   },
   newsletter: {
-    provider: 'mailchimp', // supported providers: mailchimp, buttondown
+    // supports mailchimp, buttondown, convertkit
-    mailChimpConfig: {
+    // Please add  your .env file and modify it according to your selection
-      apiKey: process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY,
+    provider: 'mailchimp',
-      apiServer: process.env.NEXT_PUBLIC_MAILCHIMP_API_SERVER,
-      audienceId: process.env.NEXT_PUBLIC_MAILCHIMP_AUDIENCE_ID,
-    },
-    buttondownConfig: process.env.NEXT_PUBLIC_BUTTONDOWN,
   },
   comment: {
     // Select a provider and use the environment variables associated to it

pages/api/buttondown.js

@@ -1,15 +1,15 @@
 // eslint-disable-next-line import/no-anonymous-default-export
 export default async (req, res) => {
   const { email } = req.body
-
-  console.log('hello 1')
   if (!email) {
     return res.status(400).json({ error: 'Email is required' })
   }
 
   try {
-    const API_KEY = process.env.NEXT_PUBLIC_BUTTONDOWN
+    const API_KEY = process.env.BUTTONDOWN_API_KEY
-    const response = await fetch(`https://api.buttondown.email/v1/subscribers`, {
+    const buttondownRoute = `${process.env.BUTTONDOWN_API_URL}subscribers`
+    console.log('route : ', buttondownRoute)
+    const response = await fetch(buttondownRoute, {
       body: JSON.stringify({
         email,
       }),
@@ -19,10 +19,9 @@ export default async (req, res) => {
       },
       method: 'POST',
     })
-    const responseMessage = await response.json()
 
     if (response.status >= 400) {
-      return res.status(500).json({ error: responseMessage[0] })
+      return res.status(500).json({ error: `There was an error subscribing to the list.` })
     }
 
     return res.status(201).json({ error: '' })

pages/api/convertkit.js

@@ -0,0 +1,42 @@
+/* eslint-disable import/no-anonymous-default-export */
+export default async (req, res) => {
+  const { email, list } = req.query
+
+  if (!email) {
+    return res.status(400).json({ error: 'Email is required' })
+  }
+
+  if (!list) {
+    return res.status(400).json({ error: 'List is required' })
+  }
+
+  try {
+    const FORM_ID =
+      list === '12-tips-production-apps'
+        ? process.env.CONVERTKIT_TIPS_FORM_ID
+        : process.env.CONVERTKIT_MONTHLY_FORM_ID
+    const API_KEY = process.env.CONVERTKIT_API_KEY
+    const API_URL = process.env.CONVERTKIT_API_URL
+
+    // Send request to ConvertKit
+    const data = { email, api_key: API_KEY }
+
+    const response = await fetch(`${API_URL}forms/${FORM_ID}/subscribe`, {
+      body: JSON.stringify(data),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    })
+
+    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() })
+  }
+}

pages/api/mailchimp.js

@@ -1,8 +1,8 @@
 import mailchimp from '@mailchimp/mailchimp_marketing'
 
 mailchimp.setConfig({
-  apiKey: process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY,
+  apiKey: process.env.MAILCHIMP_API_KEY,
-  server: process.env.NEXT_PUBLIC_MAILCHIMP_API_SERVER, // E.g. us1
+  server: process.env.MAILCHIMP_API_SERVER, // E.g. us1
 })
 
 // eslint-disable-next-line import/no-anonymous-default-export
@@ -14,13 +14,10 @@ export default async (req, res) => {
   }
 
   try {
-    const test = await mailchimp.lists.addListMember(
+    const test = await mailchimp.lists.addListMember(process.env.MAILCHIMP_AUDIENCE_ID, {
-      process.env.NEXT_PUBLIC_MAILCHIMP_AUDIENCE_ID,
-      {
       email_address: email,
       status: 'subscribed',
-      }
+    })
-    )
     return res.status(201).json({ error: '' })
   } catch (error) {
     return res.status(500).json({ error: error.message || error.toString() })