Update wip website

docs/features.md

@@ -68,6 +68,8 @@ These CSS properties are **NOT** currently supported
  - [filter](https://github.com/niklasvh/html2canvas/issues/493)
  - [font-variant-ligatures](https://github.com/niklasvh/html2canvas/pull/1085)
  - [list-style](https://github.com/niklasvh/html2canvas/issues/177)
+ - radial-gradient()
+ - [repeating-linear-gradient()](https://github.com/niklasvh/html2canvas/issues/1162)
  - word-break
  - [writing-mode](https://github.com/niklasvh/html2canvas/issues/1258)
 

docs/getting-started.md

@@ -1,7 +1,7 @@
 ---
 title: "Getting Started"
 description: "Learn how to start using html2canvas"
-previousUrl: "/about"
+previousUrl: "/documentation"
 previousTitle: "About"
 nextUrl: "/configuration"
 nextTitle: "Configuration"

www/gatsby-config.js

@@ -10,6 +10,7 @@ module.exports = {
             }
         },
         `gatsby-plugin-catch-links`,
+        `gatsby-plugin-twitter`,
         `gatsby-plugin-react-helmet`,
         `gatsby-plugin-glamor`,
         {

www/package-lock.json

@@ -264,6 +264,11 @@
       "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz",
       "integrity": "sha1-8zshWfBTKj8xB6JywMz70a0peco="
     },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+    },
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -1827,6 +1832,22 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
       "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
     },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "requires": {
+        "camelcase": "2.1.1",
+        "map-obj": "1.0.1"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+        }
+      }
+    },
     "caniuse-api": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
@@ -2426,6 +2447,81 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
+    "cp-file": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/cp-file/-/cp-file-3.2.0.tgz",
+      "integrity": "sha1-b4NhYlRiTwrViqSqjQdvAmvn4Yg=",
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "mkdirp": "0.5.1",
+        "nested-error-stacks": "1.0.2",
+        "object-assign": "4.1.1",
+        "pify": "2.3.0",
+        "pinkie-promise": "2.0.1",
+        "readable-stream": "2.3.3"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        }
+      }
+    },
+    "cpy": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cpy/-/cpy-4.0.1.tgz",
+      "integrity": "sha1-tnJn66LzlgugalphrJQDNCKDNCQ=",
+      "requires": {
+        "cp-file": "3.2.0",
+        "globby": "4.1.0",
+        "meow": "3.7.0",
+        "nested-error-stacks": "1.0.2",
+        "object-assign": "4.1.1",
+        "pinkie-promise": "2.0.1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
+          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
+          "requires": {
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "globby": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-4.1.0.tgz",
+          "integrity": "sha1-CA9UVJ7BuCpsYOYx/ILhIR2+lfg=",
+          "requires": {
+            "array-union": "1.0.2",
+            "arrify": "1.0.1",
+            "glob": "6.0.4",
+            "object-assign": "4.1.1",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        }
+      }
+    },
+    "cpy-cli": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cpy-cli/-/cpy-cli-1.0.1.tgz",
+      "integrity": "sha1-Z/taSi3sKMqKv/N13kuecfanVhw=",
+      "requires": {
+        "cpy": "4.0.1",
+        "meow": "3.7.0"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.0.tgz",
@@ -4147,6 +4243,14 @@
         "react-helmet": "5.2.0"
       }
     },
+    "gatsby-plugin-twitter": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-twitter/-/gatsby-plugin-twitter-1.0.14.tgz",
+      "integrity": "sha512-jqjdEVDcCrzpnP0g/55O6l9PZafu/3iJ20Xu4xCCico1YqQrecdfj+vyX64Lc/M/oLXB+e6I8tiQ0L0iRYpyPA==",
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
     "gatsby-plugin-typography": {
       "version": "1.7.10",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-typography/-/gatsby-plugin-typography-1.7.10.tgz",
@@ -4265,6 +4369,11 @@
       "resolved": "https://registry.npmjs.org/get-params/-/get-params-0.1.2.tgz",
       "integrity": "sha1-uuDfq6WIoMYNeDTA2Nwv9g7u8v4="
     },
+    "get-stdin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+    },
     "get-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
@@ -4934,6 +5043,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indent-string": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "requires": {
+        "repeating": "2.0.1"
+      }
+    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -6052,6 +6169,11 @@
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
       "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
     },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -6201,6 +6323,84 @@
         "readable-stream": "2.3.3"
       }
     },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "requires": {
+        "camelcase-keys": "2.1.0",
+        "decamelize": "1.2.0",
+        "loud-rejection": "1.6.0",
+        "map-obj": "1.0.1",
+        "minimist": "1.2.0",
+        "normalize-package-data": "2.4.0",
+        "object-assign": "4.1.1",
+        "read-pkg-up": "1.0.1",
+        "redent": "1.0.0",
+        "trim-newlines": "1.0.0"
+      },
+      "dependencies": {
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "parse-json": "2.2.0",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1",
+            "strip-bom": "2.0.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        },
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+          "requires": {
+            "load-json-file": "1.1.0",
+            "normalize-package-data": "2.4.0",
+            "path-type": "1.1.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+          "requires": {
+            "find-up": "1.1.2",
+            "read-pkg": "1.1.0"
+          }
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "0.2.1"
+          }
+        }
+      }
+    },
     "merge": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.0.tgz",
@@ -6419,6 +6619,14 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "nested-error-stacks": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-1.0.2.tgz",
+      "integrity": "sha1-GfYZWRUZ8JZ2mlupqG5u7sgjw88=",
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
     "netrc": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/netrc/-/netrc-0.1.4.tgz",
@@ -8770,6 +8978,15 @@
         }
       }
     },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "requires": {
+        "indent-string": "2.1.0",
+        "strip-indent": "1.0.1"
+      }
+    },
     "reduce-css-calc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
@@ -10302,6 +10519,14 @@
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
     },
+    "strip-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "requires": {
+        "get-stdin": "4.0.1"
+      }
+    },
     "strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -10668,6 +10893,11 @@
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-1.1.0.tgz",
       "integrity": "sha1-mSbQPt4Tuhj31CIiYx+wTHn/Jv4="
     },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
+    },
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",

www/package.json

@@ -5,23 +5,27 @@
   "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",
+    "mkdirp": "^0.5.1",
     "typography": "^0.16.6",
     "typography-theme-github": "^0.15.10"
   },
   "license": "MIT",
   "main": "n/a",
   "scripts": {
-    "build": "gatsby build",
+    "copybuild": "mkdirp public/dist && cpy ../dist/*.js public/dist",
+    "build": "npm run copybuild && gatsby build",
     "develop": "gatsby develop",
     "test": "echo \"Error: no test specified\" && exit 1"
   }

www/src/components/footer.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default () =>
+    <footer
+        css={{
+            backgroundColor: '#558b2f',
+            color: 'rgba(255,255,255,0.8)',
+            fontWeight: 300,
+            minHeight: '50px',
+            lineHeight: '50px',
+            padding: '10px 0px'
+        }}
+    >
+        <div css={{margin: '0 auto', width: '85%'}}>
+            Created by{' '}
+            <a href="https://hertzen.com" css={{color: '#fff', fontWeight: 'bold'}}>
+                Niklas von Hertzen
+            </a>. Licensed under the MIT License.
+        </div>
+    </footer>;

www/src/components/navigation.js

@@ -28,7 +28,7 @@ const navStyle = {
 };
 
 const links = [
-    {href: '/about', text: 'About'},
+    {href: '/documentation', text: 'About'},
     {href: '/getting-started', text: 'Getting started'},
     {href: '/configuration', text: 'Configuration'},
     {href: '/features', text: 'Features'},
@@ -38,9 +38,9 @@ const links = [
 
 export default () =>
     <div css={navStyle}>
-        <div css={{background: '#558b2f'}}>
+        <Link to="/" css={{background: '#558b2f', display: 'block', padding: '24px 30px 24px'}}>
-            <img src={logo} css={{margin: 0, padding: '24px 30px 24px'}} />
+            <img src={logo} css={{margin: 0}} />
-        </div>
+        </Link>
         <ul
             style={{
                 listStyle: 'none',

www/src/images/logo_icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Proposal---Sukhumvit-Set" fill="#FFFFFF">
+            <g id="Group-2" transform="translate(0.000000, 3.000000)">
+                <g id="Group" fill-rule="nonzero">
+                    <path d="M4,12 L4,46 L37.0232558,46 L37.0232558,12 L4,12 Z M2,8 L39.0232558,8 C40.1278253,8 41.0232558,8.8954305 41.0232558,10 L41.0232558,48 C41.0232558,49.1045695 40.1278253,50 39.0232558,50 L2,50 C0.8954305,50 1.3527075e-16,49.1045695 -1.23259516e-31,48 L-2.22044605e-16,10 C-3.57315355e-16,8.8954305 0.8954305,8 2,8 Z" id="Rectangle"></path>
+                    <path d="M12,4 L12,38 L46,38 L46,4 L12,4 Z M10,0 L48,0 C49.1045695,-2.02906125e-16 50,0.8954305 50,2 L50,40 C50,41.1045695 49.1045695,42 48,42 L10,42 C8.8954305,42 8,41.1045695 8,40 L8,2 C8,0.8954305 8.8954305,2.02906125e-16 10,0 Z" id="Rectangle-Copy"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

www/src/layouts/index.css

@@ -16,6 +16,17 @@ h4 {
     margin: 1.14rem 0 .912rem 0;
 }
 
+h5 {
+    font-size: 1.28rem;
+    line-height: 110%;
+    margin: 1.14rem 0 .912rem 0;
+}
+
+h6 {
+    line-height: 110%;
+    margin: 1.14rem 0 .912rem 0;
+}
+
 a {
     color: #7cb342;
     text-decoration: none;

www/src/layouts/index.js

@@ -1,33 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import Navigation from '../components/navigation';
 require('prismjs/themes/prism-solarizedlight.css');
 import './index.css';
 
 const TemplateWrapper = ({children}) =>
     <div>
-        <Helmet title="html2canvas" />
+        <Helmet title="html2canvas - Screenshots with JavaScript" />
-        <Navigation />
         {children()}
-        <footer
-            css={{
-                marginLeft: '300px',
-                backgroundColor: '#558b2f',
-                color: 'rgba(255,255,255,0.8)',
-                fontWeight: 300,
-                minHeight: '50px',
-                lineHeight: '50px',
-                padding: '10px 0px'
-            }}
-        >
-            <div css={{margin: '0 auto', width: '85%'}}>
-                Created by{' '}
-                <a href="https://hertzen.com" css={{color: '#fff', fontWeight: 'bold'}}>
-                    Niklas von Hertzen
-                </a>. Licensed under the MIT License.
-            </div>
-        </footer>
     </div>;
 
 TemplateWrapper.propTypes = {

www/src/pages/index.js

@@ -1,12 +1,174 @@
 import React from 'react';
 import Link from 'gatsby-link';
+import logo from '../images/logo_icon.svg';
+import Footer from '../components/footer';
+import Carbon from '../components/carbon';
+
+const codeStyle = {
+    backgroundColor: '#7cb342',
+    textShadow: '0 1px 0 rgba(23, 31, 35, 0.5)',
+    color: '#fff',
+    padding: '8px 16px',
+    borderRadius: '3px',
+    width: '100%',
+    whiteSpace: 'pre-wrap'
+};
+
+const linkStyle = {
+    padding: '4px 8px',
+    margin: '10px',
+    border: '2px solid #fff',
+    color: '#fff'
+};
 
 const IndexPage = () =>
     <div>
-        <h1>Hi people</h1>
+        <div
-        <p>Welcome to your new Gatsby site.</p>
+            css={{
-        <p>Now go build something great.</p>
+                background: '#558b2f',
-        <Link to="/page-2/">Go to page 2</Link>
+                backgroundImage: 'linear-gradient(0deg, #558b2f, #7cb342)',
+                height: '100vh',
+                display: 'flex'
+            }}
+        >
+            <div
+                css={{
+                    maxWidth: 960,
+                    color: '#fff',
+                    margin: '0 auto',
+                    textAlign: 'center',
+                    alignSelf: 'center'
+                }}
+            >
+                <div css={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                    <img src={logo} />
+                    <h1>html2canvas</h1>
+                </div>
+                <h4 css={{color: 'rgba(255, 255, 255, 0.6)', fontWeight: 300}}>
+                    Screenshots with JavaScript
+                </h4>
+
+                <div css={{display: 'flex', justifyContent: 'center'}}>
+                    <div>
+                        <h4>HTML</h4>
+                        <div
+                            css={{marginRight: '5px'}}
+                            dangerouslySetInnerHTML={{
+                                __html: `<div class="gatsby-highlight">
+      <pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>capture<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #f5da55</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> </span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+</code></pre>
+      </div>`
+                            }}
+                        />
+                    </div>
+                    <div>
+                        <h4>JavaScript</h4>
+                        <div
+                            css={{marginLeft: '5px'}}
+                            dangerouslySetInnerHTML={{
+                                __html: `<div class="gatsby-highlight">
+      <pre class="language-javascript"><code><span class="token function">html2canvas</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#capture"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>canvas <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>canvas<span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre>
+      </div>`
+                            }}
+                        />
+                    </div>
+                </div>
+
+                <div css={{margin: '20px'}}>
+                    <Link
+                        css={linkStyle}
+                    >
+                        Try it out
+                    </Link>
+                    <Link
+                        to={'/documentation'}
+                        css={linkStyle}
+                    >
+                        Documentation
+                    </Link>
+                </div>
+                <div css={{display: 'flex'}}>
+                    <div
+                        css={{
+                            flex: 1,
+                            backgroundColor: '#558b2f',
+                            padding: '10px 20px',
+                            borderRadius: '10px',
+                            marginRight: '5px'
+                        }}
+                    >
+                        <Carbon />
+                    </div>
+                    <div
+                        css={{
+                            flex: 1,
+                            marginLeft: '5px',
+                            backgroundColor: '#558b2f',
+                            padding: '10px 20px',
+                            borderRadius: '10px',
+                            textAlign: 'left',
+                            marginRight: '5px'
+                        }}
+                    >
+                        <h6>Install NPM</h6>
+                        <code css={codeStyle}>npm install --save html2canvas</code>
+                        <h6>Install Yarn</h6>
+                        <code css={codeStyle}>yarn add html2canvas</code>
+                        <div css={{marginTop: '25px'}}>
+                            <a
+                                href={'/dist/html2canvas.js'}
+                                css={linkStyle}
+                            >
+                                html2canvas.js
+                            </a>
+                            <a
+                                href={'/dist/html2canvas.min.js'}
+                                css={linkStyle}
+                            >
+                                html2canvas.min.js
+                            </a>
+                        </div>
+                    </div>
+                    <div
+                        css={{
+                            flex: 1,
+                            marginLeft: '5px',
+                            backgroundColor: '#558b2f',
+                            padding: '10px 20px',
+                            borderRadius: '10px',
+                            textAlign: 'left'
+                        }}
+                    >
+                        <h5>Connect</h5>
+                        <div css={{height: '35px'}}>
+                            <iframe
+                                src="https://ghbtns.com/github-btn.html?user=niklasvh&repo=html2canvas&type=star&count=true&size=large"
+                                frameBorder="0"
+                                scrolling="0"
+                                width="160px"
+                                height="30px"
+                            />
+                        </div>
+                        <div>
+                            <a
+                                className="twitter-follow-button"
+                                href="https://twitter.com/niklasvh"
+                                data-show-screen-name="false"
+                                data-size="large"
+                            >
+                                Follow @niklasvh
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <Footer />
     </div>;
 
 export default IndexPage;

www/src/templates/docs.js

@@ -3,7 +3,9 @@ import Link from 'gatsby-link';
 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 Helmet from 'react-helmet';
+import Navigation from '../components/navigation';
 
 export default ({data}) => {
     const post = data.markdownRemark;
@@ -14,9 +16,17 @@ export default ({data}) => {
                 title={`${post.frontmatter.title} - html2canvas`}
                 meta={[{name: 'description', content: post.frontmatter.description}]}
             />
+            <Navigation />
+            <div
+                css={{
+                    marginLeft: '300px',
+                    display: 'flex',
+                    minHeight: '100vh',
+                    flexDirection: 'column'
+                }}
+            >
                 <div
                     style={{
-                    marginLeft: '300px',
                         background: '#7cb342',
                         marginBottom: '1.45rem',
                         color: '#fff',
@@ -40,10 +50,9 @@ export default ({data}) => {
                 </div>
                 <div
                     style={{
-                    margin: '0 auto',
                         maxWidth: 960,
-                    marginLeft: '300px',
+                        paddingTop: 0,
-                    paddingTop: 0
+                        flexGrow: 1
                     }}
                 >
                     <div
@@ -55,7 +64,6 @@ export default ({data}) => {
                 (post.frontmatter.nextUrl && post.frontmatter.nextTitle)
                     ? <div
                           css={{
-                          marginLeft: '300px',
                               backgroundColor: '#7cb342',
                               marginTop: '30px'
                           }}
@@ -95,7 +103,10 @@ export default ({data}) => {
                                                 Previous
                                             </span>
                                             <div
-                                            css={{color: 'rgba(255,255,255,.87)', fontSize: '20px'}}
+                                                css={{
+                                                    color: 'rgba(255,255,255,.87)',
+                                                    fontSize: '20px'
+                                                }}
                                             >
                                                 {post.frontmatter.previousTitle}
                                             </div>
@@ -126,7 +137,10 @@ export default ({data}) => {
                                                 Next
                                             </span>
                                             <div
-                                            css={{color: 'rgba(255,255,255,.87)', fontSize: '20px'}}
+                                                css={{
+                                                    color: 'rgba(255,255,255,.87)',
+                                                    fontSize: '20px'
+                                                }}
                                             >
                                                 {post.frontmatter.nextTitle}
                                             </div>
@@ -140,6 +154,8 @@ export default ({data}) => {
                           </div>
                       </div>
                     : null}
+                <Footer css={{marginLeft: '300px'}} />
+            </div>
         </div>
     );
 };