From a39f954bdf7ea771aad75727f8d602e9d0f8a2b5 Mon Sep 17 00:00:00 2001 From: Prisma Date: Thu, 28 Mar 2024 11:03:30 +0000 Subject: [PATCH 1/3] footer newsletter --- .../newsletter/FooterNewsletterForm.tsx | 168 ++++++++++++++++++ src/components/newsletter/styles.module.css | 25 +++ src/css/custom.css | 20 ++- src/theme/Footer/Layout/index.tsx | 28 +++ src/theme/Footer/Layout/styles.module.css | 34 ++++ 5 files changed, 268 insertions(+), 7 deletions(-) create mode 100644 src/components/newsletter/FooterNewsletterForm.tsx create mode 100644 src/components/newsletter/styles.module.css create mode 100644 src/theme/Footer/Layout/index.tsx create mode 100644 src/theme/Footer/Layout/styles.module.css diff --git a/src/components/newsletter/FooterNewsletterForm.tsx b/src/components/newsletter/FooterNewsletterForm.tsx new file mode 100644 index 0000000000..0caa257ac3 --- /dev/null +++ b/src/components/newsletter/FooterNewsletterForm.tsx @@ -0,0 +1,168 @@ +import React, { useRef, useState } from 'react' +import styled from 'styled-components' +import styles from "./styles.module.css" +import { Icon } from '../Icon' + +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) => +type ColorType = 'indigo' | 'teal' | 'white' | undefined + +type FooterNewsletterFormProps = { + theme?: any + color?: ColorType +} + +export const FooterNewsletterForm = ({ theme, color = 'indigo' }: FooterNewsletterFormProps) => { + const [email, setEmail] = useState('') + const [submitted, setSubmitted] = useState(false) + const mailchimpForm = useRef(null) + + const setFormSubmitted = (event: any) => { + const options = { + method: 'POST', + headers: { + accept: 'application/json', + 'content-type': 'application/json', + // Add API key to cloudfare deployment + // 'api-key': process.env.GATSBY_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 ( + +
+ + +
+ + + ) +} diff --git a/src/components/newsletter/styles.module.css b/src/components/newsletter/styles.module.css new file mode 100644 index 0000000000..0a6daa2598 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 6123314b55..294480aca6 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -681,12 +681,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; @@ -705,15 +699,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; diff --git a/src/theme/Footer/Layout/index.tsx b/src/theme/Footer/Layout/index.tsx new file mode 100644 index 0000000000..d262a72410 --- /dev/null +++ b/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 ( +
+
+ {links} + +
+

Newsletter

+ +
+ {(logo || copyright) && ( +
+ {logo &&
{logo}
} + {copyright} +
+ )} +
+
+ ); +} diff --git a/src/theme/Footer/Layout/styles.module.css b/src/theme/Footer/Layout/styles.module.css new file mode 100644 index 0000000000..7b98b4dd70 --- /dev/null +++ b/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; +} +} From 2c0c4e96c69aef121021ef63b2190b41058c3abb Mon Sep 17 00:00:00 2001 From: Prisma Date: Thu, 28 Mar 2024 14:08:48 +0000 Subject: [PATCH 2/3] update env variable for newsletter --- docusaurus.config.ts | 3 +++ src/components/newsletter/FooterNewsletterForm.tsx | 4 +++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index c1a6815038..50f02f9e72 100644 --- a/docusaurus.config.ts +++ b/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 { diff --git a/src/components/newsletter/FooterNewsletterForm.tsx b/src/components/newsletter/FooterNewsletterForm.tsx index 0caa257ac3..b165f0111f 100644 --- a/src/components/newsletter/FooterNewsletterForm.tsx +++ b/src/components/newsletter/FooterNewsletterForm.tsx @@ -2,6 +2,7 @@ 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` @@ -105,6 +106,7 @@ export const FooterNewsletterForm = ({ theme, color = 'indigo' }: FooterNewslett const [email, setEmail] = useState('') const [submitted, setSubmitted] = useState(false) const mailchimpForm = useRef(null) + const { siteConfig: { customFields } } = useDocusaurusContext(); const setFormSubmitted = (event: any) => { const options = { @@ -113,7 +115,7 @@ export const FooterNewsletterForm = ({ theme, color = 'indigo' }: FooterNewslett accept: 'application/json', 'content-type': 'application/json', // Add API key to cloudfare deployment - // 'api-key': process.env.GATSBY_BREVO_API_KEY, + 'api-key': customFields.BREVO_API_KEY, }, body: JSON.stringify({ email: email, From 3338f8156f661f6719566e14c8aeda0f304bdd92 Mon Sep 17 00:00:00 2001 From: Prisma Date: Thu, 28 Mar 2024 17:51:24 +0000 Subject: [PATCH 3/3] hide show all results --- src/css/custom.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 794b597a6c..a37de9e807 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1199,6 +1199,9 @@ footer > .container { } } +.DocSearch-HitsFooter a { + display: none; +} .select-container { > div:first-child { height: 38px;