Merge pull request #9 from alexanderson1993/new-newsletter

New newsletter

src/components/index-background.tsx

@@ -28,8 +28,13 @@ const IndexBackground = () => {
   return (
     <div
       css={[
-        tw`fixed inset-0 z-0 bg-background transition-colors duration-500`,
+        tw`absolute h-full inset-0 z-0 bg-background transition-colors duration-500`,
         css`
+          mask-image: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 1) 70%,
+            rgba(0, 0, 0, 0) 100%
+          );
           div,
           picture {
             height: 100%;

src/components/post.tsx

@@ -8,6 +8,7 @@ import PostFooter from "./post-footer"
 import { Global, css } from "@emotion/core"
 import tw from "twin.macro"
 import PostImage from "./post-image"
+import SignupForm from "./signupForm"
 
 const Post = ({
   data: {
@@ -102,6 +103,7 @@ const Post = ({
               ]}
               dangerouslySetInnerHTML={{ __html: post.html }}
             ></article>
+            <SignupForm />
             <PostFooter siteUrl={siteUrl} post={post} {...{ previous, next }} />
           </section>
         </div>

src/components/signupForm.tsx

@@ -0,0 +1,178 @@
+import React from "react"
+import styled from "@emotion/styled"
+import { graphql, useStaticQuery } from "gatsby"
+
+const Form = styled.form`
+  font-size: 1.6rem;
+  margin: 3rem 0;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  max-width: 700px;
+  width: calc(100vw - 1rem);
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  background: var(--color-background-off);
+  border: solid 1px rgba(255, 255, 255, 0.1);
+  p {
+    margin-bottom: 2rem;
+  }
+  @media (min-width: 420px) {
+    width: calc(100vw - 4rem);
+  }
+  & > .minimal {
+    padding: 20px;
+    width: 100%;
+    position: relative;
+  }
+`
+
+const Header = styled.h2`
+  font-size: 3rem;
+  margin: 0 !important;
+  margin-bottom: 2rem !important;
+`
+
+const Button = styled.button`
+  border: 0;
+  color: #ffffff;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 600;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+  flex-grow: 1;
+  background: #df718f;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    & > span {
+      background-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+  & > span {
+    display: block;
+    transition: all 200ms ease-in-out;
+    padding: 12px 24px;
+  }
+`
+
+const Input = styled.input`
+  background: rgba(255, 255, 255, 0.1);
+  font-size: 15px;
+  padding: 12px;
+  border: 1px solid #888;
+  line-height: 1.4;
+  width: 100%;
+  height: 100%;
+  min-width: 200px;
+  transition: all ease-out 200ms;
+  &:focus {
+    outline: none;
+    border-color: #1677be;
+    box-shadow: inset 0px 0px 5px #1677be, 0px 0px 5px #1677be;
+    transition: all ease 200ms;
+  }
+  &::--webkit-input-placeholder,
+  &::-moz-placeholder,
+  &::-ms-input-placeholder,
+  &::placeholder {
+    color: inherit;
+    opacity: 0.8;
+  }
+`
+
+const PoweredBy = styled.a`
+  color: #7d7d7d;
+  display: block;
+  font-size: 12px;
+  margin: 10px 0 0 0;
+  text-align: center;
+`
+const Fields = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  @media (min-width: 420px) {
+    flex-wrap: nowrap;
+  }
+  margin-bottom: 2rem;
+`
+const Field = styled.div`
+  flex: 2;
+  margin-bottom: 0.5rem;
+  @media (min-width: 420px) {
+    margin-bottom: 0;
+    margin-right: 1rem;
+  }
+`
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+const query = graphql`
+  query SignupForm {
+    formData: markdownRemark(fileAbsolutePath: { glob: "**/signupForm.md" }) {
+      id
+      frontmatter {
+        heading
+        body
+      }
+    }
+  }
+`
+
+const SignupForm = () => {
+  const { formData } = useStaticQuery(query)
+  return (
+    <Container>
+      <Form
+        action="https://app.convertkit.com/forms/1549203/subscriptions"
+        method="post"
+      >
+        <div className="minimal">
+          <div data-element="header">
+            <Header>{formData.frontmatter.heading}</Header>
+          </div>
+          <p data-element="subheader">{formData.frontmatter.body}</p>
+          <Fields>
+            <Field>
+              <Input
+                name="email_address"
+                placeholder="Your email address"
+                required
+                type="email"
+              />
+            </Field>
+            <Button data-element="submit">
+              <span>Subscribe</span>
+            </Button>
+          </Fields>
+          <div data-element="guarantee">
+            We won't send you spam. Unsubscribe at any time.
+          </div>
+          <PoweredBy
+            href="https://convertkit.com?utm_source=dynamic&amp;utm_medium=referral&amp;utm_campaign=poweredby&amp;utm_content=form"
+            data-element="powered-by"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Powered By ConvertKit
+          </PoweredBy>
+        </div>
+      </Form>
+    </Container>
+  )
+}
+
+export default SignupForm

src/content/signupForm.md

@@ -0,0 +1,4 @@
+---
+heading: Join the Newsletter
+body: Subscribe to get the latest content by email.
+---

src/pages/index.tsx

@@ -15,6 +15,7 @@ import {
   FaPinterestP,
 } from "react-icons/all"
 import IndexBackground from "../components/index-background"
+import SignupForm from "../components/signupForm"
 
 const icons = {
   FaTwitter,
@@ -45,11 +46,17 @@ const IndexPage = ({ data }) => {
         title={site.siteMetadata.title}
         description={site.siteMetadata.description}
       />
-      <IndexBackground />
       <section
-        className={`flex-grow flex flex-col justify-center items-center text-center pb-40 z-10`}
+        css={css`
+          margin-top: -137px;
+          height: 95vh;
+        `}
+        className={`relative flex flex-col justify-center items-center text-center pb-40 h-screen`}
       >
+        <IndexBackground />
+
         <div
+          className="z-0"
           css={css`
             p {
               ${tw`text-3xl font-thin`}
@@ -60,7 +67,7 @@ const IndexPage = ({ data }) => {
           `}
           dangerouslySetInnerHTML={{ __html: front.html }}
         ></div>
-        <div className={`text-xl font-semibold mt-4 mb-8`}>
+        <div className={`text-xl font-semibold mt-4 mb-8 z-0`}>
           {front.frontmatter.descriptions}
         </div>
         <div className={`text-2xl flex justify-between`}>
@@ -69,6 +76,13 @@ const IndexPage = ({ data }) => {
           ))}
         </div>
       </section>
+      <section
+        css={css`
+          margin-top: -100px;
+        `}
+      >
+        <SignupForm />
+      </section>
     </Layout>
   )
 }

static/admin/config.yml

@@ -5,6 +5,7 @@ backend:
 
 media_folder: "src/content/assets"
 public_folder: "/src/content/assets"
+publish_mode: editorial_workflow
 
 collections: # A list of collections the CMS should be able to edit
   - name: "blog"
@@ -147,6 +148,12 @@ collections: # A list of collections the CMS should be able to edit
           - { label: Title, name: title, widget: string }
           - { label: Photo, name: image, widget: image }
           - { label: "Body", name: "body", widget: "markdown" }
+      - label: "Signup Form"
+        name: "signupForm"
+        file: "src/content/signupForm.md"
+        fields:
+          - { label: Heading, name: heading, widget: string }
+          - { label: Body, name: body, widget: string }
       - label: "Contact"
         name: "contact"
         file: "src/content/contact.md"