refactor: switch to emotion (#86)

* refactor: switch to emotion

* chore: update readme

* chore: remove badge

* fix: maybe fix build

* chore: fix lang

README.md

@@ -1,17 +1,15 @@
 # blog (1.0.0)
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/DSchau/blog.svg)](https://greenkeeper.io/)
-
 The source code for the [Gatsby][gatsby] driven statically generated blog
 
 ![blog](./assets/blog.png)
 
 ## Tech stack
 
-- [gatsby][gatsby]
+- [gatsby v2][gatsby]
   - An awesome React-driven static site generator
-- [styled-components][styled-components]
-  - "Visual primitives for the component age," used as a styling solution with CSS
+- CSS in JS with [emotion][emotion]
+  - "The Next Generation of CSS-in-JS," used as a styling solution
 - [particles.js][particles.js]
   - A cool particle effect seen in the header
 - [jest][jest]
@@ -20,7 +18,7 @@ The source code for the [Gatsby][gatsby] driven statically generated blog
   - Each and every post is authored in Markdown parsed by [remark][remark]
 
 [gatsby]: https://github.com/gatsbyjs/gatsby
-[styled-components]: https://github.com/styled-components/styled-components
+[emotion]: https://emotion.sh/
 [particles.js]: https://github.com/VincentGarreau/particles.js/
 [markdown]: https://en.wikipedia.org/wiki/Markdown
 [remark]: http://remark.js.org/

gatsby-config.js

@@ -19,7 +19,7 @@ module.exports = {
     }, 
     'gatsby-plugin-catch-links',
     'gatsby-plugin-netlify-cache',
-    'gatsby-plugin-styled-components',
+    'gatsby-plugin-emotion',
     'gatsby-plugin-remove-trailing-slashes',
     {
       resolve: 'gatsby-source-filesystem',

package.json

@@ -3,18 +3,20 @@
   "description": "Dustin Schau's personal blog",
   "version": "1.0.0",
   "private": true,
-  "author": "Dustin Schau <dustinschau@gmail.com>",
+  "author": "Dustin Schau <dustinschau@gmail.com> (https://blog.dustinschau.com)",
   "dependencies": {
     "@dschau/particles.js": "2.0.0",
+    "emotion": "~9.2.6",
+    "emotion-server": "~9.2.6",
     "gatsby": "next",
     "gatsby-link": "next",
     "gatsby-plugin-catch-links": "next",
+    "gatsby-plugin-emotion": "~2.0.0-beta.3",
     "gatsby-plugin-google-analytics": "next",
     "gatsby-plugin-manifest": "next",
     "gatsby-plugin-offline": "next",
     "gatsby-plugin-react-helmet": "next",
     "gatsby-plugin-sharp": "next",
-    "gatsby-plugin-styled-components": "next",
     "gatsby-plugin-typography": "~2.0.1-13",
     "gatsby-remark-autolink-headers": "next",
     "gatsby-remark-copy-linked-files": "next",
@@ -28,10 +30,10 @@
     "prismjs": "~1.14.0",
     "react": "~16.4.1",
     "react-dom": "~16.4.1",
+    "react-emotion": "~9.2.6",
     "react-helmet": "~5.2.0",
     "react-icons": "2.2.7",
     "react-typography": "0.16.13",
-    "styled-components": "2.4.0",
     "typeface-bitter": "~0.0.54",
     "typeface-montserrat": "~0.0.54",
     "typography": "0.16.6",
@@ -40,7 +42,6 @@
   },
   "devDependencies": {
     "babel-eslint": "8.2.1",
-    "babel-plugin-styled-components": "~1.5.1",
     "babel-plugin-syntax-dynamic-import": "~6.18.0",
     "babel-preset-env": "~1.7.0",
     "babel-preset-react": "~6.24.1",

src/components/About.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 import { rhythm } from '../utils/typography'
 
 import SocialIcons from './SocialIcons'

src/components/Content.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 const Content = styled.main`
   position: absolute;

src/components/Date.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 import { rhythm } from '../utils/typography'
 

src/components/Footer.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 import SocialIcons from './SocialIcons'
 

src/components/Header.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import Link from 'gatsby-link'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 import NavigationButton from './NavigationButton'
 

src/components/ImageShift.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 import debounce from 'lodash.debounce'
 
 const Image = styled.img`

src/components/Layout.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 import Content from '../components/Content'
 import Footer from '../components/Footer'
@@ -41,7 +41,9 @@ export default class Layout extends React.Component {
                 'Developer, javascript, programming, designer, angular, react, node, user experience, design, omaha, nebraska'
             }
           ]}
-        />
+        >
+          <html lang="en" />
+        </Helmet>
         <Header isPost={isPost} />
         <Content isPost={isPost} Footer={Footer}>
           {children}

src/components/Link.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 import { rhythm } from '../utils/typography'
 import Link from 'gatsby-link'
 

src/components/NavigationButton.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 import Link from 'gatsby-link'
 import BackIcon from 'react-icons/lib/fa/chevron-left'
 import ForwardIcon from 'react-icons/lib/fa/chevron-right'

src/components/Post.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import styled, { injectGlobal } from 'styled-components'
+import styled from 'react-emotion'
+import { injectGlobal } from 'emotion'
 import { graphql } from 'gatsby'
 import { rhythm } from '../utils/typography'
 import MdListIcon from 'react-icons/lib/md/list'
@@ -109,7 +110,7 @@ export default function({
   }
   return (
     <Post className={[`post`].concat(className || []).join(' ')} {...rest}>
-      <PostTitle title={title} to={isPost(false, linkTo)}>
+      <PostTitle title={title} to={isPost(undefined, linkTo)}>
         <Toolbar
           title={title}
           date={date}

src/components/PostTitle.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 import Link from 'gatsby-link'
 
 import { getColorFromString } from '../utils/color'

src/components/PostToolbar.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 import { rhythm } from '../utils/typography'
 

src/components/SocialButton.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 import GithubIcon from 'react-icons/lib/fa/github'
 import FacebookIcon from 'react-icons/lib/fa/facebook-square'

src/components/SocialIcons.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 import { rhythm } from '../utils/typography'
 

src/components/Tags.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 import GatsbyLink from 'gatsby-link'
 
 import { rhythm } from '../utils/typography'

src/css/animations.js

@@ -1,4 +1,4 @@
-import { keyframes } from 'styled-components'
+import { keyframes } from 'emotion'
 
 export const animateBackground = keyframes`
     0%{

src/pages/404.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import Helmet from 'react-helmet'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 import Link from 'gatsby-link'
 
 import { fadeInBottom } from '../css/animations'

src/templates/blog-post.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 
 import Layout from '../components/Layout'
 import Post from '../components/Post'

src/templates/tags.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'react-emotion'
 import GatsbyLink from 'gatsby-link'
 
 import { rhythm } from '../utils/typography'

src/utils/typography.js

@@ -5,7 +5,7 @@ import 'typeface-montserrat'
 import 'typeface-bitter'
 
 const options = {
-  baseFontSize: 16,
+  baseFontSize: '16px',
   baseLineHeight: 1.5,
   bodyFontFamily: ['Bitter', 'Georgia', 'serif'],
   headerFontFamily: ['Montserrat', 'Helvetica', 'sans-serif'],