feat: add blog newsletter form

components/MDXComponents.js

@@ -5,12 +5,14 @@ import Image from './Image'
 import CustomLink from './Link'
 import TOCInline from './TOCInline'
 import Pre from './Pre'
+import { BlogNewsletterForm } from './NewsletterForm'
 
 export const MDXComponents = {
   Image,
   TOCInline,
   a: CustomLink,
   pre: Pre,
+  BlogNewsletterForm: BlogNewsletterForm,
   wrapper: ({ components, layout, ...rest }) => {
     const Layout = require(`../layouts/${layout}`).default
     return <Layout {...rest} />

components/NewsletterForm.js

@@ -2,7 +2,7 @@ import { useRef, useState } from 'react'
 
 import siteMetadata from '@/data/siteMetadata'
 
-const FormSubscribe = () => {
+const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
   const inputEl = useRef(null)
   const [error, setError] = useState(false)
   const [message, setMessage] = useState('')
@@ -36,9 +36,7 @@ const FormSubscribe = () => {
 
   return (
     <div>
-      <div className="pb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">
-        Subscribe to the newsletter
-      </div>
+      <div className="pb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">{title}</div>
       <form className="flex flex-col sm:flex-row" onSubmit={subscribe}>
         <div>
           <label className="sr-only" htmlFor="email-input">
@@ -58,7 +56,7 @@ const FormSubscribe = () => {
         </div>
         <div className="flex w-full mt-2 rounded-md shadow-sm sm:mt-0 sm:ml-3">
           <button
-            className={`w-full bg-primary-500 px-4 py-2 rounded-md font-medium text-white ${
+            className={`py-2 sm:py-0 w-full bg-primary-500 px-4 rounded-md font-medium text-white ${
               subscribed ? 'cursor-default' : 'hover:bg-primary-700 dark:hover:bg-primary-400'
             } focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 dark:ring-offset-black`}
             type="submit"
@@ -69,10 +67,18 @@ const FormSubscribe = () => {
         </div>
       </form>
       {error && (
-        <p className="pt-2 text-sm text-red-500 w-72 sm:w-96 dark:text-red-400">{message}</p>
+        <div className="pt-2 text-sm text-red-500 w-72 sm:w-96 dark:text-red-400">{message}</div>
       )}
     </div>
   )
 }
 
-export { FormSubscribe }
+export default NewsletterForm
+
+export const BlogNewsletterForm = ({ title }) => (
+  <div className="flex items-center justify-center">
+    <div className="p-6 bg-gray-100 dark:bg-gray-800 sm:px-14 sm:py-8">
+      <NewsletterForm title={title} />
+    </div>
+  </div>
+)

data/blog/new-features-in-v1.mdx

@@ -1,6 +1,7 @@
 ---
 title: 'New features in v1'
-date: 2021-09-08T15:32:14Z
+date: 2021-08-07T15:32:14Z
+lastmod: '2021-09-11'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
@@ -328,6 +329,31 @@ To modify the styles, change the following class selectors in the `tailwind.css`
 }
 ```
 
+## Newletter component
+
+Introduced in v1.1.3, the newsletter component gives you a easy way to build an audience. It integrates with the following providers:
+
+- [Mailchimp](https://mailchimp.com/)
+- [Buttondown](https://buttondown.email/)
+- [Convertkit](https://convertkit.com/)
+
+To use it, specify the provider which you are using in the config file and add the necessary environmental variables to the `.env` file.
+For more information on the required variables, check out `.env.sample.`
+
+Two components are exported, a default `NewsletterForm` and a `BlogNewsletterForm` component, which is also passed in as an MDX component
+and can be used in a blog post:
+
+```jsx
+<BlogNewsletterForm title="Like what you are reading?" />
+```
+
+<BlogNewsletterForm title="Like what you are reading?" />
+
+The component relies on nextjs's [API routes](https://nextjs.org/docs/api-routes/introduction) which requires a server-side instance of nextjs to be setup
+and is not compatible with a 100% static site export. Users should either self-host or use a compatible platform like Vercel or Netlify which supports this functionality.
+
+A static site compatible alternative is to substitute the route in the newsletter component with a form API endpoint provider.
+
 ## Upgrade guide
 
 There are significant portions of the code that has been changed from v0 to v1 including support for layouts and a new mdx engine.

pages/index.js

@@ -5,7 +5,7 @@ import siteMetadata from '@/data/siteMetadata'
 import { getAllFilesFrontMatter } from '@/lib/mdx'
 import formatDate from '@/lib/utils/formatDate'
 
-import { FormSubscribe } from '@/components/FormSubscribe'
+import NewsletterForm from '@/components/NewsletterForm'
 
 const MAX_DISPLAY = 5
 
@@ -93,7 +93,7 @@ export default function Home({ posts }) {
       )}
       {siteMetadata.newsletter.provider !== '' && (
         <div className="flex items-center justify-center pt-4">
-          <FormSubscribe />
+          <NewsletterForm />
         </div>
       )}
     </>