Add newsletter

cypress/integration/design_detail_spec.ts

@@ -1,11 +1,11 @@
 /// <reference types="cypress" />
 /// <reference types="@testing-library/cypress" />
 
-import designDetails from '../../src/data/designDetails';
+import { designDetailsPosts } from '../../src/data';
 
 const slug = 'instagram-ios';
 // @ts-ignore
-const detail = designDetails.find(d => d.slug === slug)
+const detail = designDetailsPosts.find(d => d.slug === slug)
 
 describe('Design Detail Post', () => {
   before(() => {
@@ -47,7 +47,7 @@ describe('Design Detail Post', () => {
   });
 
   it('should render design details more to read', () => {
-    designDetails.map(detail => {
+    designDetailsPosts.map(detail => {
       cy.contains(detail.title);
       cy.contains(`${detail.details.length} details`);
     });

cypress/integration/design_details_spec.ts

@@ -1,15 +1,15 @@
 /// <reference types="cypress" />
 /// <reference types="@testing-library/cypress" />
 
-import { designDetails } from '../../src/data';
+import { designDetailsPosts } from '../../src/data';
 
 describe('Design Details', () => {
   before(() => {
     cy.visit('/design-details');
   });
 
   it('should render design details', () => {
-    designDetails.map(detail => {
+    designDetailsPosts.map(detail => {
       cy.contains(detail.title);
       cy.contains(`${detail.details.length} details`);
     });

cypress/integration/home_spec.ts

@@ -1,15 +1,15 @@
 /// <reference types="cypress" />
 /// <reference types="@testing-library/cypress" />
 
-import { designDetails } from '../../src/data';
+import { designDetailsPosts } from '../../src/data';
 
 describe('Home', () => {
   before(() => {
     cy.visit('/');
   });
 
   it('should render design details', () => {
-    designDetails.map(detail => {
+    designDetailsPosts.map(detail => {
       cy.contains(detail.title);
     });
   });

cypress/integration/overthought_post_spec.ts

@@ -15,4 +15,11 @@ describe('Overthought index', () => {
       .scrollIntoView()
       .should('be.visible');
   });
+
+  it('should render newsletter', () => {
+    cy.visit('/overthought/adding-dark-mode-with-next-js');
+    cy.contains('Newsletter')
+      .scrollIntoView()
+      .should('be.visible');
+  });
 });

cypress/integration/overthought_spec.ts

@@ -11,4 +11,10 @@ describe('Overthought index', () => {
       .scrollIntoView()
       .should('be.visible');
   });
+
+  it('should render newsletter', () => {
+    cy.contains('Newsletter')
+      .scrollIntoView()
+      .should('be.visible');
+  });
 });

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@sentry/browser": "^5.10.1",
+    "@statickit/react": "^1.2.0",
     "@tryghost/content-api": "^1.3.4",
     "fathom-client": "^1.0.0",
     "isomorphic-unfetch": "^3.0.0",

src/components/Button/style.tsx

@@ -37,7 +37,7 @@ const base = css`
   align-self: center;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: 32px;
   font-size: ${props => getFontSize(props.size)};
   font-weight: 700;
   white-space: nowrap;

src/components/Button/types.tsx

@@ -5,4 +5,5 @@ export type ButtonProps = {
   size?: ButtonSize,
   disabled?: boolean,
   children: React.ReactNode | string,
+  type?: string,
 };

src/components/Overthought/Grid/style.tsx

@@ -8,8 +8,8 @@ export const Grid = styled.div`
   grid-auto-rows: auto;
   width: 100%;
   max-width: ${defaultTheme.breakpoints[0]};
-  margin-top: 32px;
   padding: 0 ${defaultTheme.space[3]};
+  margin-top: ${defaultTheme.space[5]};
 
   @media (max-width: ${defaultTheme.breakpoints[2]}) {
     grid-template-columns: repeat(2, 1fr);

src/components/Overthought/Post/index.tsx

@@ -4,10 +4,11 @@ import Link from 'next/link';
 import { BlogPost } from '~/types';
 import { ContentContainer, SectionHeading } from '~/components/Page';
 import { H1, Larr, Subheading } from '~/components/Typography'
-import { FeaturedImage, ReadingTime } from '~/components/Overthought/Preview/style'
+import { FeaturedImage } from '~/components/Overthought/Preview/style'
 import PostShareButtons from '~/components/ShareButtons';
 import OverthoughtSubscribeBox from '~/components/Overthought/Subscribe'
 import Body from './Body'
+import SEO from './SEO'
 
 interface Props {
   post: BlogPost;
@@ -16,7 +17,7 @@ interface Props {
 export default function Post({ post }) {
   return (
     <ContentContainer data-cy="overthought-post">
-
+      <SEO post={post} />
       <SectionHeading>
         <Link href={'/overthought'}>
           <a>
@@ -28,8 +29,7 @@ export default function Post({ post }) {
 
         {post.feature_image && <FeaturedImage src={`https://overthought.ghost.io${post.og_image}`} />}
         <H1 style={{ marginTop: 0 }}>{post.title}</H1>
-        <ReadingTime>{post.reading_time} minute read</ReadingTime>
-        <div style={{ padding: '16px '}} />
+        <div style={{ padding: '8px '}} />
       </SectionHeading>
 
       <Body post={post} />

src/components/Overthought/Preview/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Link from 'next/link'
-import { H3, P } from '~/components/Typography'
+import { H4, P } from '~/components/Typography'
 import { Card, PreviewImage, ReadingTime } from './style'
 
 export default function OverthoughtGrid({ post }) {
@@ -9,7 +9,7 @@ export default function OverthoughtGrid({ post }) {
       <a>
         <Card style={{ height: '100%' }}>
           {post.feature_image && <PreviewImage src={post.feature_image} />}
-          <H3>{post.title}</H3>
+          <H4>{post.title}</H4>
           <P>{post.custom_excerpt || post.excerpt}</P>
           <ReadingTime>{post.reading_time} minute read</ReadingTime>
         </Card>

src/components/Overthought/Preview/style.tsx

@@ -34,7 +34,7 @@ export const FeaturedImage = styled.img`
   margin-top: -24px;
   margin-right: -24px;
   border-radius: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 32px;
 
   @media (max-width: 768px) {
     width: 100%;
@@ -62,7 +62,7 @@ export const PreviewImage = styled.img`
 `
 
 export const ReadingTime = styled(H6)`
-  text-transform: uppercase;
   color: ${props => props.theme.text.quarternary};
   margin-top: ${defaultTheme.space[5]};
+  font-weight: ${defaultTheme.fontWeights.link};
 `

src/components/Overthought/Subscribe/index.tsx

@@ -1,14 +1,31 @@
 import * as React from 'react'
-import { A } from '~/components/Typography'
-import { Container } from './style'
+import { useForm } from '@statickit/react';
+import { PrimaryButton } from '~/components/Button'
+import { A, H4, P } from '~/components/Typography'
+import { Container, Input, Form, Success } from './style'
 
 export default function OverthoughtSubscribeBox() {
+  const [state, submit] = useForm({
+    site: '101ff4c55a85',
+    form: 'overthought'
+  });
+
   return (
     <Container>
-      <A href="https://overthought.ghost.io/rss/" target="_blank" rel="noopener noreferrer">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
-        Subscribe with RSS
-      </A>
+      <H4 style={{ marginTop: 0 }}>Newsletter</H4>
+      <P style={{ marginTop: 0 }}>Get an email whenever I publish new posts. Your email won’t be used for anything else. Alternatively, you can <A href="https://overthought.ghost.io/rss/" target="_blank" rel="noopener noreferrer">subscribe with RSS</A>.</P>
+      {
+        state.succeeded
+        ? (
+          <Success>Thanks for subscribing!</Success>
+        )
+        : (
+          <Form onSubmit={submit}>
+          <Input placeholder="Email address" id="email" type="email" name="email" />
+          <PrimaryButton type="submit">Subscribe</PrimaryButton>
+        </Form>
+        )
+      }
     </Container>
   )
 }

src/components/Overthought/Subscribe/style.tsx

@@ -1,36 +1,51 @@
 import styled from 'styled-components'
 import defaultTheme from '~/components/Theme'
+import { hexa, tint } from '~/components/utils'
 
 export const Container = styled.div`
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: ${defaultTheme.space[4]};
-  padding: ${defaultTheme.space[5]} 0 ${defaultTheme.space[2]};
+  grid-template-columns: repeat(1, 1fr);
+  grid-gap: ${defaultTheme.space[3]};
+  margin: ${defaultTheme.space[6]} 0 ${defaultTheme.space[5]};
+  padding: ${defaultTheme.space[4]};
+  background: ${props => props.theme.bg.inset};
+  width: 100%;
+  border-radius: 16px;
+`
 
-  a {
-    display: grid;
-    grid-template-columns: ${defaultTheme.space[5]} 1fr;
-    grid-gap: ${defaultTheme.space[2]};
-    align-items: center;
-    font-size: ${defaultTheme.fontSizes[2]};
-    font-weight: ${defaultTheme.fontWeights.link};
-
-    svg {
-      color: ${props => props.theme.icon.secondary};
-    }
-  }
-
-  a:hover {
-    svg {
-      color: ${props => props.theme.icon.primary};
-    }
+export const Form = styled.form`
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  grid-gap: ${defaultTheme.space[3]};
+  margin-top: ${defaultTheme.space[2]};
+  button {
+    height: 100%;
   }
+`
 
-  @media (max-width: ${defaultTheme.breakpoints[5]}) {
-    grid-template-columns: 1fr;
+export const Input = styled.input`
+  padding: 11px ${defaultTheme.space[4]} 12px;
+  border: 1px solid ${props => props.theme.border.default};
+  color: ${props => props.theme.text.primary};
+  border-radius: 24px;
+  font-size: ${defaultTheme.fontSizes[2]};
+  background: ${props => props.theme.bg.primary};
 
-    a {
-      font-size: ${defaultTheme.fontSizes[1]};
-    }
+  &:focus {
+    border: 1px solid ${props => props.theme.accent.blue};
+    background: ${props => props.theme.bg.secondary};
   }
+`
+
+export const Success = styled.div`
+  margin-top: ${defaultTheme.space[2]};
+  padding: ${defaultTheme.space[2]} ${defaultTheme.space[4]};
+  border: 1px solid ${props => tint(props.theme.accent.green, -8)};
+  color: ${props => props.theme.text.onPrimary};
+  font-weight: ${defaultTheme.fontWeights.link};
+  background: ${props => props.theme.accent.green};
+  border-radius: 24px;
+  text-align: center;
+  font-size: ${defaultTheme.fontSizes[2]};
+  text-shadow: 0 1px 0 rgba(0,0,0,0.08);
 `

src/components/Theme/index.ts

@@ -31,8 +31,8 @@ const defaultTheme = {
     '14px', // 0
     '16px', // 1
     '18px', // 2
-    '22px', // 3
-    '26px', // 4
+    '20px', // 3
+    '24px', // 4
     '32px', // 5
     '40px'  // 6
   ],

src/components/Typography/index.tsx

@@ -23,14 +23,14 @@ const heading = css`
   font-weight: ${defaultTheme.fontWeights.heading};
   color: ${props => props.theme.text.primary};
   line-height: ${defaultTheme.lineHeights.heading};
+  letter-spacing: -0.4px;
 
   ${arrows}
 `
 
 export const h1 = css`
   ${heading};
   font-size: ${defaultTheme.fontSizes[6]};
-  letter-spacing: -0.6px;
 
   @media (max-width: ${defaultTheme.breakpoints[4]}) {
     font-size: ${defaultTheme.fontSizes[5]};
@@ -125,10 +125,6 @@ export const p = css`
   & + & {
     margin-top: ${defaultTheme.space[4]};
   }
-
-  @media (max-width: ${defaultTheme.breakpoints[4]}) {
-    font-size: ${defaultTheme.fontSizes[2]};
-  }
 `
 export const P = styled.p`
   ${p};
@@ -228,9 +224,9 @@ export const code = css`
   ${p};
   font-family: ${defaultTheme.fonts.monospace}!important;
   font-size: ${defaultTheme.fontSizes[2]}!important;
-  padding:  ${defaultTheme.space[0]} ${defaultTheme.space[2]}!important;
+  padding:  ${defaultTheme.space[0]} ${defaultTheme.space[1]}!important;
   box-shadow: inset 0 0 0 1px ${props => props.theme.border.default};
-  border-radius: 8px;
+  border-radius: 4px;
   display: inline-block;
   background: ${props => props.theme.bg.inset}!important;
   text-shadow: none!important;
@@ -247,6 +243,7 @@ export const Hr = styled.hr``
 
 export const A = styled.a`
   ${arrows}
+  display: inline-block;
 `
 
 const baseArrowStyles = css`
@@ -274,6 +271,7 @@ export const Larr = styled.span.attrs({
 `
 
 export const Subheading = styled(P)`
+  font-size: ${defaultTheme.fontSizes[3]};
   font-weight: ${defaultTheme.fontWeights.subheading};
   margin-top: ${defaultTheme.space[2]};
   line-height: 1.4;