.env.example

@@ -4,3 +4,6 @@ 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=

components/FormSuscribe.js

@@ -0,0 +1,70 @@
+import { useRef, useState } from 'react'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const FormSuscribe = () => {
+  const inputEl = useRef(null)
+  const [message, setMessage] = useState('')
+
+  const subscribe = async (e) => {
+    e.preventDefault()
+
+    const res = await fetch(`/api/${siteMetadata.newsletter.provider}`, {
+      body: JSON.stringify({
+        email: inputEl.current.value,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    })
+
+    const { error } = await res.json()
+
+    if (error) {
+      setMessage('You are already subscribed!')
+      return
+    }
+
+    inputEl.current.value = ''
+    setMessage('Successfully! 🎉 You are now subscribed.')
+  }
+
+  return (
+    <div>
+      <form
+        className="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-begin"
+        onSubmit={subscribe}
+      >
+        <div>
+          <label className="sr-only" htmlFor="email-input">
+            Email address
+          </label>
+          <input
+            autoComplete="email"
+            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"
+            ref={inputEl}
+            required
+            type="email"
+          />
+        </div>
+        <div className="mt-2 flex-shrink-0 w-full flex rounded-md shadow-sm sm:mt-0 sm:ml-3 sm:w-auto sm:inline-flex">
+          <button
+            className="w-full bg-primary-500 dark:bg-primary-400 px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-primary-700 dark:hover:bg-primary-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:primary-700 sm:w-auto sm:inline-flex"
+            type="submit"
+          >
+            {message ? 'Thank you!' : 'Sign up'}
+          </button>
+        </div>
+      </form>
+      <p className="text-sm text-gray-500 dark:text-gray-400 pt-2 flex flex-col sm:flex-row lg:mt-0 lg:justify-begin">
+        {message ? message : 'Enter your email address to be notified of new posts'}
+      </p>
+    </div>
+  )
+}
+
+export { FormSuscribe }

data/siteMetadata.js

@@ -22,6 +22,14 @@ const siteMetadata = {
     simpleAnalytics: false, // true or false
     googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
   },
+  newsletter: {
+    provider: 'mailchimp', // supported providers: mailchimp
+    mailChimpConfig: {
+      apiKey: process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY,
+      apiServer: process.env.NEXT_PUBLIC_MAILCHIMP_API_SERVER,
+      audienceId: process.env.NEXT_PUBLIC_MAILCHIMP_AUDIENCE_ID,
+    },
+  },
   comment: {
     // Select a provider and use the environment variables associated to it
     // https://vercel.com/docs/environment-variables

package.json

@@ -12,12 +12,14 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@mailchimp/mailchimp_marketing": "^3.0.58",
     "@tailwindcss/forms": "^0.3.2",
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.5",
     "esbuild": "^0.12.15",
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
+    "mailchimp": "^1.2.1",
     "mdx-bundler": "^6.0.1",
     "next": "11.1.0",
     "next-themes": "^0.0.14",

pages/api/mailchimp copy.js

@@ -0,0 +1,27 @@
+import mailchimp from '@mailchimp/mailchimp_marketing'
+
+mailchimp.setConfig({
+  apiKey: process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY,
+  server: process.env.NEXT_PUBLIC_MAILCHIMP_API_SERVER, // E.g. us1
+})
+
+export default async (req, res) => {
+  const { email } = req.body
+
+  if (!email) {
+    return res.status(400).json({ error: 'Email is required' })
+  }
+
+  try {
+    const test = await mailchimp.lists.addListMember(
+      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() })
+  }
+}

pages/api/mailchimp.js

@@ -0,0 +1,27 @@
+import mailchimp from '@mailchimp/mailchimp_marketing'
+
+mailchimp.setConfig({
+  apiKey: process.env.NEXT_PUBLIC_MAILCHIMP_API_KEY,
+  server: process.env.NEXT_PUBLIC_MAILCHIMP_API_SERVER, // E.g. us1
+})
+
+export default async (req, res) => {
+  const { email } = req.body
+
+  if (!email) {
+    return res.status(400).json({ error: 'Email is required' })
+  }
+
+  try {
+    const test = await mailchimp.lists.addListMember(
+      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() })
+  }
+}

pages/index.js

@@ -5,6 +5,8 @@ import siteMetadata from '@/data/siteMetadata'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import formatDate from '@/lib/utils/formatDate'
 
+import { FormSuscribe } from '@/components/FormSuscribe'
+
 const MAX_DISPLAY = 5
 
 export async function getStaticProps() {
@@ -17,6 +19,7 @@ export default function Home({ posts }) {
   return (
     <>
       <PageSEO title={siteMetadata.title} description={siteMetadata.description} />
+      {siteMetadata.newsletter.provider !== '' && <FormSuscribe />}
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
         <div className="pt-6 pb-8 space-y-2 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">