mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Update wip website
This commit is contained in:
Niklas von Hertzen
parent
d3c640088c
commit
2237e8e230
@ -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)
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: "Getting Started"
|
||||
description: "Learn how to start using html2canvas"
|
||||
previousUrl: "/about"
|
||||
previousUrl: "/documentation"
|
||||
previousTitle: "About"
|
||||
nextUrl: "/configuration"
|
||||
nextTitle: "Configuration"
|
||||
|
||||
@ -10,6 +10,7 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
`gatsby-plugin-catch-links`,
|
||||
`gatsby-plugin-twitter`,
|
||||
`gatsby-plugin-react-helmet`,
|
||||
`gatsby-plugin-glamor`,
|
||||
{
|
||||
|
||||
230
www/package-lock.json
generated
230
www/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
20
www/src/components/footer.js
Normal file
20
www/src/components/footer.js
Normal file
@ -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>;
|
||||
@ -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'}}>
|
||||
<img src={logo} css={{margin: 0, padding: '24px 30px 24px'}} />
|
||||
</div>
|
||||
<Link to="/" css={{background: '#558b2f', display: 'block', padding: '24px 30px 24px'}}>
|
||||
<img src={logo} css={{margin: 0}} />
|
||||
</Link>
|
||||
<ul
|
||||
style={{
|
||||
listStyle: 'none',
|
||||
|
||||
13
www/src/images/logo_icon.svg
Normal file
13
www/src/images/logo_icon.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -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;
|
||||
|
||||
@ -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" />
|
||||
<Navigation />
|
||||
<Helmet title="html2canvas - Screenshots with JavaScript" />
|
||||
{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 = {
|
||||
|
||||
@ -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>
|
||||
<p>Welcome to your new Gatsby site.</p>
|
||||
<p>Now go build something great.</p>
|
||||
<Link to="/page-2/">Go to page 2</Link>
|
||||
<div
|
||||
css={{
|
||||
background: '#558b2f',
|
||||
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"><</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">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></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">=></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;
|
||||
|
||||
@ -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,132 +16,146 @@ export default ({data}) => {
|
||||
title={`${post.frontmatter.title} - html2canvas`}
|
||||
meta={[{name: 'description', content: post.frontmatter.description}]}
|
||||
/>
|
||||
<Navigation />
|
||||
<div
|
||||
style={{
|
||||
css={{
|
||||
marginLeft: '300px',
|
||||
background: '#7cb342',
|
||||
marginBottom: '1.45rem',
|
||||
color: '#fff',
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '1rem'
|
||||
}}
|
||||
>
|
||||
<div css={{maxWidth: '960px'}}>
|
||||
<div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
|
||||
<div css={{flex: 1}}>
|
||||
<h1 css={{padding: '20px 0'}}>
|
||||
{post.frontmatter.title}
|
||||
</h1>
|
||||
<h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}>
|
||||
{post.frontmatter.description}
|
||||
</h4>
|
||||
</div>
|
||||
<Carbon css={{width: '150px', marginLeft: '20px'}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
margin: '0 auto',
|
||||
maxWidth: 960,
|
||||
marginLeft: '300px',
|
||||
paddingTop: 0
|
||||
display: 'flex',
|
||||
minHeight: '100vh',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{width: '85%', margin: '0 auto'}}
|
||||
dangerouslySetInnerHTML={{__html: post.html}}
|
||||
/>
|
||||
</div>
|
||||
{(post.frontmatter.previousUrl && post.frontmatter.previousTitle) ||
|
||||
(post.frontmatter.nextUrl && post.frontmatter.nextTitle)
|
||||
? <div
|
||||
css={{
|
||||
marginLeft: '300px',
|
||||
backgroundColor: '#7cb342',
|
||||
marginTop: '30px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: '#7cb342',
|
||||
marginBottom: '1.45rem',
|
||||
color: '#fff',
|
||||
paddingTop: '1rem',
|
||||
paddingBottom: '1rem'
|
||||
}}
|
||||
>
|
||||
<div css={{maxWidth: '960px'}}>
|
||||
<div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
|
||||
<div css={{flex: 1}}>
|
||||
<h1 css={{padding: '20px 0'}}>
|
||||
{post.frontmatter.title}
|
||||
</h1>
|
||||
<h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}>
|
||||
{post.frontmatter.description}
|
||||
</h4>
|
||||
</div>
|
||||
<Carbon css={{width: '150px', marginLeft: '20px'}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 960,
|
||||
paddingTop: 0,
|
||||
flexGrow: 1
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{width: '85%', margin: '0 auto'}}
|
||||
dangerouslySetInnerHTML={{__html: post.html}}
|
||||
/>
|
||||
</div>
|
||||
{(post.frontmatter.previousUrl && post.frontmatter.previousTitle) ||
|
||||
(post.frontmatter.nextUrl && post.frontmatter.nextTitle)
|
||||
? <div
|
||||
css={{
|
||||
width: '85%',
|
||||
display: 'flex',
|
||||
margin: '0 auto',
|
||||
alignItems: 'center',
|
||||
height: '96px'
|
||||
backgroundColor: '#7cb342',
|
||||
marginTop: '30px'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.previousUrl && post.frontmatter.previousTitle
|
||||
? <Link
|
||||
to={post.frontmatter.previousUrl}
|
||||
css={{
|
||||
flex: 1,
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}}
|
||||
>
|
||||
<div css={{height: '24px'}}>
|
||||
<img src={back} />
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
css={{
|
||||
display: 'block',
|
||||
color: 'rgba(255,255,255,.55)',
|
||||
fontSize: '15px',
|
||||
lineHeight: '18px',
|
||||
marginBottom: '1px'
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
<div
|
||||
css={{color: 'rgba(255,255,255,.87)', fontSize: '20px'}}
|
||||
>
|
||||
{post.frontmatter.previousTitle}
|
||||
<div
|
||||
css={{
|
||||
width: '85%',
|
||||
display: 'flex',
|
||||
margin: '0 auto',
|
||||
alignItems: 'center',
|
||||
height: '96px'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.previousUrl && post.frontmatter.previousTitle
|
||||
? <Link
|
||||
to={post.frontmatter.previousUrl}
|
||||
css={{
|
||||
flex: 1,
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}}
|
||||
>
|
||||
<div css={{height: '24px'}}>
|
||||
<img src={back} />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
: null}
|
||||
{post.frontmatter.nextUrl && post.frontmatter.nextTitle
|
||||
? <Link
|
||||
to={post.frontmatter.nextUrl}
|
||||
css={{
|
||||
flex: 1,
|
||||
color: '#fff',
|
||||
justifyContent: 'flex-end',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
css={{
|
||||
display: 'block',
|
||||
color: 'rgba(255,255,255,.55)',
|
||||
fontSize: '15px',
|
||||
lineHeight: '18px',
|
||||
marginBottom: '1px'
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
<div
|
||||
css={{color: 'rgba(255,255,255,.87)', fontSize: '20px'}}
|
||||
>
|
||||
{post.frontmatter.nextTitle}
|
||||
<div>
|
||||
<span
|
||||
css={{
|
||||
display: 'block',
|
||||
color: 'rgba(255,255,255,.55)',
|
||||
fontSize: '15px',
|
||||
lineHeight: '18px',
|
||||
marginBottom: '1px'
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</span>
|
||||
<div
|
||||
css={{
|
||||
color: 'rgba(255,255,255,.87)',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.previousTitle}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
: null}
|
||||
{post.frontmatter.nextUrl && post.frontmatter.nextTitle
|
||||
? <Link
|
||||
to={post.frontmatter.nextUrl}
|
||||
css={{
|
||||
flex: 1,
|
||||
color: '#fff',
|
||||
justifyContent: 'flex-end',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
css={{
|
||||
display: 'block',
|
||||
color: 'rgba(255,255,255,.55)',
|
||||
fontSize: '15px',
|
||||
lineHeight: '18px',
|
||||
marginBottom: '1px'
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</span>
|
||||
<div
|
||||
css={{
|
||||
color: 'rgba(255,255,255,.87)',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
>
|
||||
{post.frontmatter.nextTitle}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={{height: '24px'}}>
|
||||
<img src={next} />
|
||||
</div>
|
||||
</Link>
|
||||
: null}
|
||||
<div css={{height: '24px'}}>
|
||||
<img src={next} />
|
||||
</div>
|
||||
</Link>
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
: null}
|
||||
: null}
|
||||
<Footer css={{marginLeft: '300px'}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user