diff --git a/gatsby-config.js b/gatsby-config.js index 87a476f..1dbc7ed 100644 --- a/gatsby-config.js +++ b/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' ], } diff --git a/package.json b/package.json index 76d316a..603d786 100644 --- a/package.json +++ b/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", diff --git a/src/components/body.js b/src/components/body.js index 93631b6..009407b 100644 --- a/src/components/body.js +++ b/src/components/body.js @@ -318,7 +318,7 @@ const Body = ({ children }) => ( Request access - + Docs diff --git a/src/components/footer.js b/src/components/footer.js index 9c6e8dd..166e1b8 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -72,7 +72,7 @@ const Footer = ({ children }) => ( - + logo @@ -87,8 +87,8 @@ const Footer = ({ children }) => (
  • Developers
    • -
  • Documentation
    •  -
  • Github
    •  +
  • Documentation
    •  +
  • Github
    •  {/*
  • API Status
    • */}     @@ -96,8 +96,8 @@ const Footer = ({ children }) => (
  • Support
    • {/*
  • Help Center
    • */} -
  • Twitter
    •  -
  • Email
    •  +
  • Twitter
    •  +
  • Email
    •      diff --git a/src/components/header.js b/src/components/header.js index b089d44..3167afc 100644 --- a/src/components/header.js +++ b/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 }) => ( Request access - + Docs - Illustration +     ) diff --git a/src/components/image_components/header.js b/src/components/image_components/header.js new file mode 100644 index 0000000..93e37bb --- /dev/null +++ b/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 = () => ( + } + /> +) +export default Illustration diff --git a/src/pages/index.js b/src/pages/index.js index c65fc68..d145a19 100644 --- a/src/pages/index.js +++ b/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 = () => ( ( ]} > -