Upgrade gatsbyjs to v2

www/src/components/example.js

@@ -37,6 +37,7 @@ class CanvasContainer extends Component {
             >
                 <img
                     src={close}
+                    alt="Close"
                     css={{position: 'absolute', right: '20px', top: '20px', cursor: 'pointer'}}
                 />
             </div>
@@ -123,6 +124,7 @@ export default class Example extends Component {
                                     flex: 1,
                                     margin: 0
                                 }}
+                                alt="Try html2canvas"
                             />
                         </div>
                     </div>

www/src/components/layout.js

@@ -1,19 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-require('prismjs/themes/prism-solarizedlight.css');
-import './index.css';
+import './layout.css';
 import Example from '../components/example';
 
+require('prismjs/themes/prism-solarizedlight.css');
 const TemplateWrapper = ({children}) =>
     <div>
         <Helmet title="html2canvas - Screenshots with JavaScript" />
-        {children()}
+        {children}
         <Example />
     </div>;
 
-TemplateWrapper.propTypes = {
-    children: PropTypes.func
-};
-
 export default TemplateWrapper;

www/src/components/navigation.js

@@ -61,6 +61,7 @@ export default class Navigation extends Component {
                     <img
                         src={menu}
                         onClick={() => this.setState(s => ({open: !s.open}))}
+                        alt="Menu"
                         css={{
                             width: '50px',
                             cursor: 'pointer',
@@ -72,7 +73,7 @@ export default class Navigation extends Component {
                         }}
                     />
                     <Link to="/">
-                        <img src={logo} css={{margin: 0}} />
+                        <img src={logo} css={{margin: 0}} alt="html2canvas" />
                     </Link>
                 </div>
 

www/src/pages/404.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import Layout from '../components/layout';
 
 const NotFoundPage = () =>
-    <div>
+    <Layout>
         <h1>NOT FOUND</h1>
         <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </div>;
+    </Layout>;
 
 export default NotFoundPage;

www/src/pages/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from 'gatsby-link';
 import logo from '../images/logo_icon.svg';
+import Layout from '../components/layout';
 import Footer from '../components/footer';
 import Carbon from '../components/carbon';
 
@@ -23,6 +24,7 @@ const linkStyle = {
 
 export default ({data}) => {
     return (
+        <Layout>
         <div
             css={{
                 background: '#558b2f',
@@ -48,7 +50,7 @@ export default ({data}) => {
                     }}
                 >
                     <div css={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                        <img src={logo} />
+                        <img src={logo} alt="html2canvas" />
                         <h1>html2canvas</h1>
                     </div>
                     <h4 css={{color: 'rgba(255, 255, 255, 0.6)', fontWeight: 300}}>
@@ -111,7 +113,7 @@ export default ({data}) => {
 
                     <div css={{margin: '20px'}}>
                         <a
-                            href="#"
+                            href="/documentation"
                             css={linkStyle}
                             onClick={e => {
                                 e.preventDefault();
@@ -194,6 +196,7 @@ export default ({data}) => {
                             <h5>Connect</h5>
                             <div css={{height: '35px'}}>
                                 <iframe
+                                    title="Github"
                                     src="https://ghbtns.com/github-btn.html?user=niklasvh&repo=html2canvas&type=star&count=true&size=large"
                                     frameBorder="0"
                                     scrolling="0"
@@ -217,6 +220,7 @@ export default ({data}) => {
             </div>
             <Footer />
         </div>
+        </Layout>
     );
 };
 

www/src/templates/docs.js

@@ -4,6 +4,7 @@ import back from '../images/ic_arrow_back_black_24px.svg';
 import next from '../images/ic_arrow_forward_black_24px.svg';
 import Carbon from '../components/carbon';
 import Footer from '../components/footer';
+import Layout from '../components/layout';
 import Helmet from 'react-helmet';
 import Navigation from '../components/navigation';
 
@@ -11,7 +12,7 @@ export default ({data}) => {
     const post = data.markdownRemark;
 
     return (
-        <div>
+        <Layout>
             <Helmet
                 title={`${post.frontmatter.title} - html2canvas`}
                 meta={[{name: 'description', content: post.frontmatter.description}]}
@@ -103,7 +104,7 @@ export default ({data}) => {
                                         }}
                                     >
                                         <div css={{height: '24px'}}>
-                                            <img src={back} />
+                                            <img src={back} alt="" />
                                         </div>
                                         <div>
                                             <span
@@ -162,7 +163,7 @@ export default ({data}) => {
                                         </div>
 
                                         <div css={{height: '24px'}}>
-                                            <img src={next} />
+                                            <img src={next} alt="" />
                                         </div>
                                     </Link>
                                   : null}
@@ -171,7 +172,7 @@ export default ({data}) => {
                     : null}
                 <Footer css={{marginLeft: '300px'}} />
             </div>
-        </div>
+        </Layout>
     );
 };
 

www/src/utils/typography.js

@@ -1,5 +1,4 @@
 import Typography from 'typography';
-import githubTheme from 'typography-theme-github';
 
 const theme = {
     googleFonts: [