Cherry pick site changes

gatsby-config.js

@@ -4,6 +4,14 @@ module.exports = {
   },
   plugins: [
     'gatsby-plugin-react-helmet',
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `images`,
+        path: `${__dirname}/src/images`,
+      },
+    },
+    'gatsby-transformer-sharp',
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
@@ -25,10 +33,11 @@ module.exports = {
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
-        trackingId:'UA-130795414-1'
-      },
-
+        trackingId: "UA-130795414-1",
+        // Puts tracking script in the head instead of the body
+        head: true,
+      }
     },
-    'gatsby-plugin-offline',
+    'gatsby-plugin-offline'
   ],
 }

package.json

@@ -6,11 +6,15 @@
   "dependencies": {
     "bootstrap": "^4.1.3",
     "gatsby": "^2.0.72",
+    "gatsby-image": "^2.0.25",
     "gatsby-plugin-google-analytics": "^2.0.8",
     "gatsby-plugin-google-fonts": "^0.0.4",
     "gatsby-plugin-manifest": "^2.0.2",
     "gatsby-plugin-offline": "^2.0.5",
     "gatsby-plugin-react-helmet": "^3.0.0",
+    "gatsby-plugin-sharp": "^2.0.13",
+    "gatsby-source-filesystem": "^2.0.12",
+    "gatsby-transformer-sharp": "^2.1.9",
     "react": "^16.5.1",
     "react-bootstrap": "^1.0.0-beta.1",
     "react-dom": "^16.5.1",

src/components/body.js

@@ -318,7 +318,7 @@ const Body = ({ children }) => (
             <a href="mailto:hello@thinblock.io">
               <RequestButton>Request access</RequestButton>
             </a>
-            <a href="https://docs.thinblock.io" target="_blank">
+            <a href="https://docs.thinblock.io" target="_blank" rel="noopener noreferrer">
               <DocsButton>Docs</DocsButton>
             </a>
 

src/components/footer.js

@@ -72,7 +72,7 @@ const Footer = ({ children }) => (
   <Wrapper>
     <Container>
       <Row className="justify-content-sm-center">
-        <Col xs={12}  lgOffset={2} lg={8}>
+        <Col xs={12} lg={8}>
           <LogoContainer>
             <img src={Logo} alt="logo" />
           </LogoContainer>
@@ -87,17 +87,17 @@ const Footer = ({ children }) => (
         <Col xs={4} lg={2}>
           <FooterList>
             <li>Developers</li>
-            <a href="https://docs.thinblock.io" target="_blank"><li>Documentation</li></a>
-            <a href="https://github.com/thinblock" target="_blank"><li>Github</li></a>
+            <a href="https://docs.thinblock.io" target="_blank" rel="noopener noreferrer"><li>Documentation</li></a>
+            <a href="https://github.com/thinblock" target="_blank" rel="noopener noreferrer"><li>Github</li></a>
             {/* <li>API Status</li> */}
           </FooterList>
         </Col>
         <Col xs={4} lg={2}>
           <FooterList>
             <li>Support</li>
             {/* <li>Help Center</li> */}
-            <a href="https://twitter.com/thinblock" target="_blank"><li>Twitter</li></a>
-            <a href="mailto:hello@thinblock.io" target="_blank"><li>Email</li></a>
+            <a href="https://twitter.com/thinblock" target="_blank" rel="noopener noreferrer"><li>Twitter</li></a>
+            <a href="mailto:hello@thinblock.io" target="_blank" rel="noopener noreferrer"><li>Email</li></a>
           </FooterList>
         </Col>
 

src/components/header.js

@@ -4,12 +4,11 @@ import styled from 'styled-components'
 import Container from 'react-bootstrap/lib/Container'
 import Navbar from 'react-bootstrap/lib/Navbar'
 import Nav from 'react-bootstrap/lib/Nav'
-import NavLink from 'react-bootstrap/lib/NavLink'
 import Jumbotron from 'react-bootstrap/lib/Jumbotron'
 import Button from 'react-bootstrap/lib/Button'
 
 import Logo from '../images/negative-logo.png'
-import Illustration from '../images/header-illustration.png'
+import Illustration from './image_components/header'
 
 import { device } from '../constants/breakpoints'
 
@@ -141,7 +140,9 @@ const IllustrationWrapper = styled.div`
   text-align: center;
   bottom: 0;
   left: 0;
-  width: 100%;
+  right: 0;
+  margin: 0 auto;
+  max-width: 700px;
   img {
     position: relative;
     z-index: 0;
@@ -204,12 +205,12 @@ const Header = ({ children }) => (
       <a href="mailto:hello@thinblock.io">
       <RequestButton>Request access</RequestButton>
       </a>
-      <a href="https://docs.thinblock.io" target="_blank">
+      <a href="https://docs.thinblock.io" target="_blank" rel="noopener noreferrer">
       <DocsButton>Docs</DocsButton>
       </a>
     </JumbotronWrapper>
     <IllustrationWrapper>
-      <img src={Illustration} alt="Illustration" />
+      <Illustration alt="Illustration" />
     </IllustrationWrapper>
   </Wrapper>
 )

src/components/image_components/header.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+import Img from 'gatsby-image'
+
+/*
+ * This component is built using `gatsby-image` to automatically serve optimized
+ * images with lazy loading and reduced file sizes. The image is loaded using a
+ * `StaticQuery`, which allows us to load the image from directly within this
+ * component, rather than having to pass the image data down from pages.
+ *
+ * For more information, see the docs:
+ * - `gatsby-image`: https://gatsby.app/gatsby-image
+ * - `StaticQuery`: https://gatsby.app/staticquery
+ */
+
+const Illustration = () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        placeholderImage: file(relativePath: { eq: "header-illustration.png" }) {
+          childImageSharp {
+            fluid(maxWidth: 700) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
+    `}
+    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} alt="" />}
+  />
+)
+export default Illustration

src/pages/index.js

@@ -3,9 +3,10 @@ import Layout from '../components/layout'
 import Helmet from 'react-helmet'
 
 import { StaticQuery, graphql } from 'gatsby'
-
 import './index.css'
 
+require('bootstrap/dist/css/bootstrap.css')
+
 const IndexPage = () => (
   <StaticQuery
     query={graphql`
@@ -31,12 +32,6 @@ const IndexPage = () => (
           ]}
         >
           <html lang="en" />
-          <link
-            rel="stylesheet"
-            href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
-            integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
-            crossOrigin="anonymous"
-          />
           <script src="https://embed.runkit.com/" type="text/javascript" />
         </Helmet>
         <Layout />