feat: (docusaurus) Footer newsletter

docusaurus.config.ts

@@ -24,6 +24,9 @@ const config: Config = {
     defaultLocale: 'en',
     locales: ['en'],
   },
+  customFields: {
+    'BREVO_API_KEY': process.env.BREVO_API_KEY
+  },
   scripts: [
     // kapa.ai script
     {

src/components/newsletter/FooterNewsletterForm.tsx

@@ -0,0 +1,170 @@
+import React, { useRef, useState } from 'react'
+import styled from 'styled-components'
+import styles from "./styles.module.css"
+import { Icon } from '../Icon'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+
+namespace S {
+  export const Container = styled.div`
+    form {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      margin-bottom: 48px;
+      @media only screen and (min-width: 768px) {
+        flex-direction: row;
+        margin-bottom: 0;
+      }
+    }
+    .input-name {
+      margin-bottom: 24px;
+      width: 100%;
+      @media only screen and (min-width: 768px) {
+        max-width: 264px;
+        width: auto;
+      }
+    }
+    .input-email {
+      margin-bottom: 32px;
+      width: 100%;
+      @media only screen and (min-width: 768px) {
+        width: auto;
+        max-width: 312px;
+      }
+    }
+    .input-name,
+    .input-email {
+      position: relative;
+      width: 100%;
+      .leading-icon {
+        left: 24px;
+        display: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        @media only screen and (min-width: 360px) {
+          display: flex;
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        margin-right: 24px;
+        margin-bottom: 0;
+        width: auto;
+      }
+    }
+    .input-el {
+      background: white;
+      box-sizing: border-box;
+      width: 100%;
+      font-size: 18px;
+      height: 48px;
+      border: none;
+      border-radius: 10px;
+      padding: 12px 25px 12px 58px;
+
+      &:focus {
+        outline: 1px solid
+      }
+
+      &::placeholder {
+      }
+    }
+    button {
+      content: 'Subscribe for updates';
+      max-height: 48px;
+      white-space: nowrap;
+      width: 100%;
+      @media only screen and (min-width: 768px) {
+        width: max-content;
+      }
+      .button {
+        background-color: transparent;
+        background-image: none;
+        color: inherit;
+        cursor: pointer;
+        font-weight: inherit;
+        line-height: inherit;
+        font-size: 100%;
+        margin: 0;
+        padding: 0;
+        border: 0;
+      }
+    }
+  `
+}
+
+const icon = (name: string) => <Icon size="1.125rem" color="rgb(113, 128, 150)" icon={name} />
+type ColorType = 'indigo' | 'teal' | 'white' | undefined
+
+type FooterNewsletterFormProps = {
+  theme?: any
+  color?: ColorType
+}
+
+export const FooterNewsletterForm = ({ theme, color = 'indigo' }: FooterNewsletterFormProps) => {
+  const [email, setEmail] = useState<string>('')
+  const [submitted, setSubmitted] = useState<boolean>(false)
+  const mailchimpForm = useRef(null)
+  const { siteConfig: { customFields } } = useDocusaurusContext();
+
+  const setFormSubmitted = (event: any) => {
+    const options = {
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json',
+        // Add API key to cloudfare deployment
+        'api-key': customFields.BREVO_API_KEY,
+      },
+      body: JSON.stringify({
+        email: email,
+        attributes: {
+          EMAIL: email,
+          SOURCE: 'website',
+        },
+        includeListIds: [15],
+        templateId: 36,
+        redirectionUrl: 'https://prisma.io',
+      }),
+    }
+    //@ts-ignore
+    fetch('https://api.brevo.com/v3/contacts/doubleOptinConfirmation', options)
+
+    setTimeout(() => {
+      setEmail('')
+      setSubmitted(true)
+    }, 200)
+  }
+
+  return (
+    <S.Container theme={theme}>
+      <form target="hiddenFrame" ref={mailchimpForm} onSubmit={setFormSubmitted}>
+        <label className="input-email" htmlFor="MERGE0">
+          <div className="leading-icon">{icon('fa-light fa-envelope')}</div>
+          <input
+            type="email"
+            className="input-el"
+            name="EMAIL"
+            id="MERGE0"
+            value={email}
+            placeholder="Email Address"
+            onChange={(e) => setEmail(e.target.value)}
+            autoCapitalize="off"
+            autoCorrect="off"
+          />
+        </label>
+        <button className={styles.formBtn} color={color === 'white' ? 'indigo' : color}>
+          <input
+            type="submit"
+            value={submitted ? 'Thank you!' : 'Subscribe for updates'}
+            name="subscribe"
+            id="mc-embedded-subscribe"
+            className="button"
+          />
+        </button>
+      </form>
+      <iframe name="hiddenFrame" src="about:blank" style={{ display: 'none' }}></iframe>
+    </S.Container>
+  )
+}

src/components/newsletter/styles.module.css

@@ -0,0 +1,25 @@
+.formBtn {
+    display: inline-flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    max-width: 100%;
+    text-align: left;
+    z-index: 1;
+    margin: 4px;
+    width: max-content;
+    -webkit-box-align: center;
+    align-items: center;
+    box-sizing: border-box;
+    border-radius: 6px;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    line-height: 1;
+    transition: background-color 0.1s ease 0s, color 0.2s ease 0s;
+    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-weight: 700;
+    font-size: 18px;
+    border: 1px solid rgb(90, 103, 216);
+    background-color: rgb(90, 103, 216);
+    color: white;
+}

src/css/custom.css

@@ -693,12 +693,6 @@ footer > .container {
   margin: 0;
 }
 
-.footer__bottom {
-  margin-top: 64px;
-  padding-top: 64px;
-  border-top: 1px solid #2d3748;
-}
-
 .footer__bottom > div:not(.footer__copyright) { 
   margin-bottom: 0 !important;
   display: flex;
@@ -717,15 +711,27 @@ footer > .container {
 
 .footer__col:last-child {
   position: absolute;
-  top: calc(100% + 128px);
   height: var(--footer-bottom-height);
   display: flex;
   align-items: center;
+  top: calc(100% + 308px);
   justify-content: flex-end;
   padding: 0;
   width: auto;
   right: 0;
 }
+@media (min-width: 768px) {
+  .footer__col:last-child {
+    top: calc(100% + 348px);
+  }
+}
+@media (min-width: 1040px) {
+  .footer__col:last-child {
+    top: calc(100% + 368px);
+  }
+}
+
+
 
 .footer__col:last-child > .footer__title {
   display: none;
@@ -1193,6 +1199,9 @@ footer > .container {
   }
 
 }
+.DocSearch-HitsFooter a {
+  display: none;
+}
 .select-container {
   > div:first-child {
     height: 38px;

src/theme/Footer/Layout/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import { FooterNewsletterForm } from '@site/src/components/newsletter/FooterNewsletterForm';
+import styles from "./styles.module.css"
+
+export default function FooterLayout({style, links, logo, copyright}) {
+  return (
+    <footer
+      className={clsx('footer', {
+        'footer--dark': style === 'dark',
+      })}>
+      <div className="container container-fluid">
+        {links}
+
+        <div className={styles.newsletterRow}>
+          <h4 className={styles.title}>Newsletter</h4>
+          <FooterNewsletterForm />
+        </div>
+        {(logo || copyright) && (
+          <div className="footer__bottom text--center">
+            {logo && <div className="margin-bottom--sm">{logo}</div>}
+            {copyright}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}

src/theme/Footer/Layout/styles.module.css

@@ -0,0 +1,34 @@
+.title {
+    text-transform: uppercase;
+    font-weight: 400;
+    font-size: 1rem;
+    color: white;
+    letter-spacing: 0.08em;
+    margin-top: 0px;
+}
+@media only screen and (min-width: 768px) {
+.newsletterRow {
+    padding: 64px 0px;
+    display: flex;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    margin-bottom: 64px;
+    border-top: 1px solid #2d3748;
+    border-bottom: 1px solid #2d3748;
+}
+}
+@media only screen and (min-width: 1024px) {
+    .title {
+        margin-bottom: 0;
+    }
+.newsletterRow {
+    margin-top: 64px;
+    flex-direction: row;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
+}
+}