[www] Adding a simple newsletter page (#6359)

* simple newsletter page

* enabling email subscription. cleaning up

Author: wuweiweiwu

www/src/components/email-capture-form.js

@@ -76,28 +76,31 @@ class EmailCaptureForm extends React.Component {
       {
         status: `sending`,
         msg: null,
-      }
+      },
       // setState callback (subscribe email to MC)
-      // this._postEmailToMailchimp(this.state.email, {
-      // pathname: document.location.pathname,
-      // })
+      this._postEmailToMailchimp(this.state.email, {
+        pathname: document.location.pathname,
+      })
     )
   }
 
   render() {
+    const { signupMessage, confirmMessage, containerCss } = this.props
+
     return (
       <div
         css={{
           borderTop: `2px solid ${colors.lilac}`,
           marginTop: rhythm(3),
           paddingTop: `${rhythm(1)}`,
+          ...containerCss,
         }}
       >
         {this.state.status === `success` ? (
-          <div>Thank you! Youʼll receive your first email shortly.</div>
+          <div>{confirmMessage}</div>
         ) : (
           <div>
-            <p>Enjoyed this post? Receive the next one in your inbox!</p>
+            <p>{signupMessage}</p>
             <form
               id="email-capture"
               method="post"
@@ -160,4 +163,10 @@ class EmailCaptureForm extends React.Component {
   }
 }
 
+EmailCaptureForm.defaultProps = {
+  signupMessage: "Enjoyed this post? Receive the next one in your inbox!",
+  confirmMessage: "Thank you! Youʼll receive your first email shortly.",
+  containerCss: {},
+}
+
 export default EmailCaptureForm

www/src/pages/newsletter.js

@@ -0,0 +1,50 @@
+import React, { Component } from "react"
+import Helmet from "react-helmet"
+import { rhythm } from "../utils/typography"
+import { colors } from "../utils/presets"
+
+import Layout from "../components/layout"
+import Container from "../components/container"
+import EmailCaptureForm from "../components/email-capture-form"
+
+class NewsLetter extends Component {
+  render() {
+    const { location, data } = this.props
+
+    return (
+      <Layout location={location}>
+        <Helmet>
+          <title>Newsletter</title>
+        </Helmet>
+        <Container
+          hasSideBar={false}
+          css={{
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <h1 id="introduction" style={{ marginTop: 0 }}>
+            Newsletter
+          </h1>
+          <div>
+            Sign up for the Gatsby newsletter to keep up with the latest from
+            the Gatsby community! Hear about new features, tips & tricks, and
+            what people are building.
+          </div>
+
+          <EmailCaptureForm
+            signupMessage="Sign up for the Gatsby Newsletter"
+            confirmMessage="Success! You have been subscribed to the Gatsby newsletter. Expect to see a newsletter in your inbox each Wednesday (or the equivalent of US Wednesday in your time zone)!"
+            containerCss={{
+              marginTop: rhythm(1),
+              paddingTop: rhythm(1 / 2),
+              borderTop: `2px solid ${colors.lilac}`,
+            }}
+          />
+        </Container>
+      </Layout>
+    )
+  }
+}
+
+export default NewsLetter