Upgrade gatsbyjs to v2

niklasvh · Apr 6, 2019 · 24823d0 · 24823d0
1 parent 41eb8ab
commit 24823d0
Show file tree

Hide file tree

Showing 10 changed files with 12,543 additions and 8,595 deletions.
diff --git a/www/package-lock.json b/www/package-lock.json
diff --git a/www/package.json b/www/package.json
@@ -5,23 +5,29 @@
   "private": true,
   "author": "Niklas von Hertzen",
   "dependencies": {
-    "cpy-cli": "^1.0.1",
-    "gatsby": "^1.9.127",
-    "gatsby-link": "^1.6.30",
-    "gatsby-plugin-catch-links": "^1.0.13",
-    "gatsby-plugin-glamor": "^1.6.9",
-    "gatsby-plugin-google-analytics": "^1.0.14",
-    "gatsby-plugin-react-helmet": "^1.0.8",
-    "gatsby-plugin-twitter": "^1.0.14",
-    "gatsby-plugin-typography": "^1.7.10",
-    "gatsby-remark-prismjs": "^1.2.10",
-    "gatsby-source-filesystem": "^1.5.9",
-    "gatsby-transformer-remark": "^1.7.23",
-    "gzip-size": "^4.1.0",
-    "html2canvas": "^1.0.0-alpha.9",
+    "cpy-cli": "^2.0.0",
+    "gatsby": "^2.3.14",
+    "gatsby-link": "^2.0.16",
+    "gatsby-plugin-catch-links": "^2.0.13",
+    "gatsby-plugin-glamor": "^2.0.9",
+    "gatsby-plugin-google-analytics": "^2.0.18",
+    "gatsby-plugin-react-helmet": "^3.0.12",
+    "gatsby-plugin-twitter": "^2.0.13",
+    "gatsby-plugin-typography": "^2.2.10",
+    "gatsby-remark-prismjs": "^3.2.7",
+    "gatsby-source-filesystem": "^2.0.28",
+    "gatsby-transformer-remark": "^2.3.8",
+    "glamor": "^2.20.40",
+    "gzip-size": "^5.0.0",
+    "html2canvas": "^1.0.0-alpha.12",
     "mkdirp": "^0.5.1",
-    "typography": "^0.16.6",
-    "typography-theme-github": "^0.15.10"
+    "prismjs": "^1.16.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-helmet": "^5.2.0",
+    "react-typography": "^0.16.19",
+    "typography": "^0.16.19",
+    "typography-theme-github": "^0.16.19"
   },
   "license": "MIT",
   "main": "n/a",

diff --git a/www/src/components/example.js b/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>

diff --git a/www/src/layouts/index.css → www/src/components/layout.css b/www/src/layouts/index.css → www/src/components/layout.css
diff --git a/www/src/layouts/index.js → www/src/components/layout.js b/www/src/layouts/index.js → 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;
diff --git a/www/src/components/navigation.js b/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>
 

diff --git a/www/src/pages/404.js b/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;
diff --git a/www/src/pages/index.js b/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>
     );
 };
 

diff --git a/www/src/templates/docs.js b/www/src/templates/docs.js
@@ -4,14 +4,15 @@ 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';
 
 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>
     );
 };
 

diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js
@@ -1,5 +1,4 @@
 import Typography from 'typography';
-import githubTheme from 'typography-theme-github';
 
 const theme = {
     googleFonts: [