add and apply Styled Components

`npm i --save styled-components gatsby-plugin-styled-components babel-plugin-styled-components`

gatsby-config.js

@@ -12,6 +12,7 @@ module.exports = {
     },
   },
   plugins: [
+    `gatsby-plugin-styled-components`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {

package.json

@@ -8,28 +8,31 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "gatsby": "^2.23.12",
-    "gatsby-image": "^2.4.9",
-    "gatsby-plugin-feed": "^2.5.7",
-    "gatsby-plugin-google-analytics": "^2.3.6",
-    "gatsby-plugin-manifest": "^2.4.14",
-    "gatsby-plugin-offline": "^3.2.13",
-    "gatsby-plugin-react-helmet": "^3.3.6",
-    "gatsby-plugin-sharp": "^2.6.14",
-    "gatsby-plugin-typography": "^2.5.6",
-    "gatsby-remark-copy-linked-files": "^2.3.7",
-    "gatsby-remark-images": "^3.3.14",
-    "gatsby-remark-prismjs": "^3.5.6",
-    "gatsby-remark-responsive-iframe": "^2.4.7",
-    "gatsby-remark-smartypants": "^2.3.6",
-    "gatsby-source-filesystem": "^2.3.14",
-    "gatsby-transformer-remark": "^2.8.20",
-    "gatsby-transformer-sharp": "^2.5.7",
+    "babel-plugin-styled-components": "^1.10.7",
+    "gatsby": "^2.23.20",
+    "gatsby-image": "^2.4.12",
+    "gatsby-plugin-feed": "^2.5.10",
+    "gatsby-plugin-google-analytics": "^2.3.10",
+    "gatsby-plugin-manifest": "^2.4.17",
+    "gatsby-plugin-offline": "^3.2.16",
+    "gatsby-plugin-react-helmet": "^3.3.9",
+    "gatsby-plugin-sharp": "^2.6.17",
+    "gatsby-plugin-styled-components": "^3.3.9",
+    "gatsby-plugin-typography": "^2.5.9",
+    "gatsby-remark-copy-linked-files": "^2.3.10",
+    "gatsby-remark-images": "^3.3.17",
+    "gatsby-remark-prismjs": "^3.5.9",
+    "gatsby-remark-responsive-iframe": "^2.4.10",
+    "gatsby-remark-smartypants": "^2.3.9",
+    "gatsby-source-filesystem": "^2.3.18",
+    "gatsby-transformer-remark": "^2.8.23",
+    "gatsby-transformer-sharp": "^2.5.10",
     "prismjs": "^1.20.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
     "react-typography": "^0.16.19",
+    "styled-components": "^5.1.1",
     "typeface-merriweather": "0.0.72",
     "typeface-montserrat": "0.0.75",
     "typography": "^0.16.19",

src/components/bio.js

@@ -8,9 +8,14 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import Image from "gatsby-image"
-
+import styled from "styled-components"
 import { rhythm } from "../utils/typography"
 
+const Wrapper = styled.div`
+  display: flex;
+  margin-bottom: ${rhythm(2.5)};
+`
+
 const Bio = () => {
   const data = useStaticQuery(graphql`
     query BioQuery {
@@ -37,12 +42,7 @@ const Bio = () => {
 
   const { producer, social } = data.site.siteMetadata
   return (
-    <div
-      style={{
-        display: `flex`,
-        marginBottom: rhythm(2.5),
-      }}
-    >
+    <Wrapper>
       <Image
         fixed={data.avatar.childImageSharp.fixed}
         alt={producer.name}
@@ -66,7 +66,7 @@ const Bio = () => {
           You should follow him on Twitter.
         </a>
       </p>
-    </div>
+    </Wrapper>
   )
 }
 

src/components/layout.js

@@ -1,8 +1,28 @@
 import React from "react"
 import { Link, useStaticQuery, graphql } from "gatsby"
-
+import styled from "styled-components"
 import { rhythm, scale } from "../utils/typography"
 
+const H1 = styled.h1`
+  ${{ ...scale(1.5) }};
+  margin-bottom: ${rhythm(1.5)};
+  margin-top: 0;
+`
+const HeaderLink = styled(Link)`
+  box-shadow: none;
+  color: inherit;
+`
+const H3 = styled.h3`
+  font-family: Montserrat, sans-serif;
+  margin-top: 0;
+`
+const Container = styled.div`
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${rhythm(24)};
+  padding: ${rhythm(1.5)} ${rhythm(3 / 4)};
+`
+
 const Layout = ({ location, title, children }) => {
   const data = useStaticQuery(graphql`
     query LayoutQuery {
@@ -20,53 +40,19 @@ const Layout = ({ location, title, children }) => {
 
   if (location.pathname === rootPath) {
     header = (
-      <h1
-        style={{
-          ...scale(1.5),
-          marginBottom: rhythm(1.5),
-          marginTop: 0,
-        }}
-      >
-        <Link
-          style={{
-            boxShadow: `none`,
-            color: `inherit`,
-          }}
-          to={`/`}
-        >
-          {title}
-        </Link>
-      </h1>
+      <H1>
+        <HeaderLink to={"/"}>{title}</HeaderLink>
+      </H1>
     )
   } else {
     header = (
-      <h3
-        style={{
-          fontFamily: `Montserrat, sans-serif`,
-          marginTop: 0,
-        }}
-      >
-        <Link
-          style={{
-            boxShadow: `none`,
-            color: `inherit`,
-          }}
-          to={`/`}
-        >
-          {title}
-        </Link>
-      </h3>
+      <H3>
+        <HeaderLink to={"/"}>{title}</HeaderLink>
+      </H3>
     )
   }
   return (
-    <div
-      style={{
-        marginLeft: `auto`,
-        marginRight: `auto`,
-        maxWidth: rhythm(24),
-        padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
-      }}
-    >
+    <Container>
       <header>{header}</header>
       <main>{children}</main>
       <footer>
@@ -78,7 +64,7 @@ const Layout = ({ location, title, children }) => {
           Antonio
         </a>
       </footer>
-    </div>
+    </Container>
   )
 }
 

src/pages/index.js

@@ -1,11 +1,18 @@
 import React from "react"
 import { Link, graphql } from "gatsby"
-
+import styled from "styled-components"
 import Bio from "../components/bio"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import { rhythm } from "../utils/typography"
 
+const Title = styled.h3`
+  margin-bottom: ${rhythm(1 / 4)};
+`
+const StyledLink = styled(Link)`
+  box-shadow: none;
+`
+
 const BlogIndex = ({ data, location }) => {
   const siteTitle = data.site.siteMetadata.title
   const posts = data.allMarkdownRemark.edges
@@ -19,21 +26,15 @@ const BlogIndex = ({ data, location }) => {
         return (
           <article key={node.fields.slug}>
             <header>
-              <h3
-                style={{
-                  marginBottom: rhythm(1 / 4),
-                }}
-              >
-                <Link style={{ boxShadow: `none` }} to={node.fields.slug}>
-                  {title}
-                </Link>
-              </h3>
+              <Title>
+                <StyledLink to={node.fields.slug}>{title}</StyledLink>
+              </Title>
               <small>{node.frontmatter.date}</small>
             </header>
             <section>
               <p
                 dangerouslySetInnerHTML={{
-                  __html: node.frontmatter.description || node.excerpt,
+                  __html: node.frontmatter.description || node.excerpt
                 }}
               />
             </section>

src/templates/blog-post.js

@@ -1,11 +1,32 @@
 import React from "react"
 import { Link, graphql } from "gatsby"
+import styled from "styled-components"
 
 import Bio from "../components/bio"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import { rhythm, scale } from "../utils/typography"
 
+const Title = styled.h1`
+  margin-top: ${rhythm(1)}
+  margin-bottom: 0;;
+`
+const Date = styled.p`
+  ${{ ...scale(-1 / 5) }};
+  display: "block";
+  margin-bottom: ${rhythm(1)};
+`
+const Hr = styled.hr`
+  margin-bottom: ${rhythm(1)};
+`
+const PrevAndNext = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0;
+`
+
 const BlogPostTemplate = ({ data, pageContext, location }) => {
   const post = data.markdownRemark
   const siteTitle = data.site.siteMetadata.title
@@ -19,45 +40,18 @@ const BlogPostTemplate = ({ data, pageContext, location }) => {
       />
       <article>
         <header>
-          <h1
-            style={{
-              marginTop: rhythm(1),
-              marginBottom: 0,
-            }}
-          >
-            {post.frontmatter.title}
-          </h1>
-          <p
-            style={{
-              ...scale(-1 / 5),
-              display: `block`,
-              marginBottom: rhythm(1),
-            }}
-          >
-            {post.frontmatter.date}
-          </p>
+          <Title> {post.frontmatter.title} </Title>
+          <Date> {post.frontmatter.date} </Date>
         </header>
         <section dangerouslySetInnerHTML={{ __html: post.html }} />
-        <hr
-          style={{
-            marginBottom: rhythm(1),
-          }}
-        />
+        <Hr />
         <footer>
           <Bio />
         </footer>
       </article>
 
       <nav>
-        <ul
-          style={{
-            display: `flex`,
-            flexWrap: `wrap`,
-            justifyContent: `space-between`,
-            listStyle: `none`,
-            padding: 0,
-          }}
-        >
+        <PrevAndNext>
           <li>
             {previous && (
               <Link to={previous.fields.slug} rel="prev">
@@ -72,7 +66,7 @@ const BlogPostTemplate = ({ data, pageContext, location }) => {
               </Link>
             )}
           </li>
-        </ul>
+        </PrevAndNext>
       </nav>
     </Layout>
   )