html2canvas/component---src-pages-index-js-ac7dfc2c623f77e8734c.js.map

{"version":3,"sources":["webpack:///./src/pages/index.js","webpack:///./src/components/footer.js","webpack:///./src/components/carbon.js","webpack:///./src/images/logo_icon.svg"],"names":["codeStyle","backgroundColor","textShadow","color","padding","borderRadius","width","whiteSpace","linkStyle","margin","border","data","css","background","backgroundImage","minHeight","display","flexDirection","flexGrow","maxWidth","textAlign","alignSelf","alignItems","justifyContent","src","logo","alt","fontWeight","marginRight","dangerouslySetInnerHTML","__html","marginLeft","href","onClick","e","preventDefault","document","querySelector","click","to","flex","marginBottom","marginTop","Math","round","site","siteMetadata","packageSize","height","title","frameBorder","scrolling","className","data-show-screen-name","data-size","lineHeight","fontSize","Carbon","componentDidMount","this","container","script","createElement","async","id","appendChild","render","props","ref","Component","module","exports"],"mappings":"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","file":"component---src-pages-index-js-ac7dfc2c623f77e8734c.js","sourcesContent":["import React from 'react';\nimport Link from 'gatsby-link';\nimport logo from '../images/logo_icon.svg';\nimport Layout from '../components/layout';\nimport Footer from '../components/footer';\nimport Carbon from '../components/carbon';\n\nconst codeStyle = {\n    backgroundColor: '#7cb342',\n    textShadow: '0 1px 0 rgba(23, 31, 35, 0.5)',\n    color: '#fff',\n    padding: '8px 16px',\n    borderRadius: '3px',\n    width: '100%',\n    whiteSpace: 'pre-wrap'\n};\n\nconst linkStyle = {\n    padding: '4px 8px',\n    margin: '10px',\n    border: '2px solid #fff',\n    color: '#fff'\n};\n\nexport default ({data}) => {\n    return (\n        <Layout>\n        <div\n            css={{\n                background: '#558b2f',\n                backgroundImage: 'linear-gradient(0deg, #558b2f, #7cb342)',\n                minHeight: '100vh',\n                display: 'flex',\n                flexDirection: 'column'\n            }}\n        >\n            <div\n                css={{\n                    display: 'flex',\n                    flexGrow: 1\n                }}\n            >\n                <div\n                    css={{\n                        maxWidth: 960,\n                        color: '#fff',\n                        margin: '0 auto',\n                        textAlign: 'center',\n                        alignSelf: 'center'\n                    }}\n                >\n                    <div css={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>\n                        <img src={logo} alt=\"html2canvas\" />\n                        <h1>html2canvas</h1>\n                    </div>\n                    <h4 css={{color: 'rgba(255, 255, 255, 0.6)', fontWeight: 300}}>\n                        Screenshots with JavaScript\n                    </h4>\n\n                    <div\n                        css={{\n                            display: 'flex',\n                            justifyContent: 'center',\n                            flexDirection: 'column',\n                            '@media(min-width: 1000px)': {\n                                flexDirection: 'row'\n                            }\n                        }}\n                    >\n                        <div\n                            css={{\n                                display: 'none',\n                                '@media(min-width: 1000px)': {\n                                    display: 'block'\n                                }\n                            }}\n                        >\n                            <h4>HTML</h4>\n                            <div\n                                css={{marginRight: '5px'}}\n                                dangerouslySetInnerHTML={{\n                                    __html: `<div class=\"gatsby-highlight\">\n      <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>\n    <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>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">&gt;</span></span>\n</code></pre>\n      </div>`\n                                }}\n                            />\n                        </div>\n                        <div\n                            css={{\n                                display: 'none',\n                                '@media(min-width: 1000px)': {\n                                    display: 'block'\n                                }\n                            }}\n                        >\n                            <h4>JavaScript</h4>\n                            <div\n                                css={{marginLeft: '5px'}}\n                                dangerouslySetInnerHTML={{\n                                    __html: `<div class=\"gatsby-highlight\">\n      <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>\n    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>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n      </div>`\n                                }}\n                            />\n                        </div>\n                    </div>\n\n                    <div css={{margin: '20px'}}>\n                        <a\n                            href=\"/documentation\"\n                            css={linkStyle}\n                            onClick={e => {\n                                e.preventDefault();\n                                document.querySelector('#tryhtml2canvas').click();\n                            }}\n                        >\n                            Try it out\n                        </a>\n                        <Link to={'/documentation'} css={linkStyle}>\n                            Documentation\n                        </Link>\n                    </div>\n                    <div\n                        css={{\n                            display: 'flex',\n                            flexDirection: 'column',\n                            '@media(min-width: 1000px)': {\n                                flexDirection: 'row'\n                            }\n                        }}\n                    >\n                        <div\n                            css={{\n                                flex: 1,\n                                backgroundColor: '#558b2f',\n                                padding: '10px 20px',\n                                borderRadius: '10px',\n                                marginBottom: '10px',\n                                '@media(min-width: 1000px)': {\n                                    marginRight: '5px'\n                                }\n                            }}\n                        >\n                            <Carbon />\n                        </div>\n                        <div\n                            css={{\n                                flex: 1,\n\n                                backgroundColor: '#558b2f',\n                                padding: '10px 20px',\n                                borderRadius: '10px',\n                                textAlign: 'left',\n                                marginBottom: '10px',\n                                '@media(min-width: 1000px)': {\n                                    marginLeft: '5px',\n                                    marginRight: '5px'\n                                }\n                            }}\n                        >\n                            <h6>Install NPM</h6>\n                            <code css={codeStyle}>npm install --save html2canvas</code>\n                            <h6>Install Yarn</h6>\n                            <code css={codeStyle}>yarn add html2canvas</code>\n                            <div css={{marginTop: '25px'}}>\n                                <a href={'/dist/html2canvas.js'} css={linkStyle}>\n                                    html2canvas.js\n                                </a>\n                                <a href={'/dist/html2canvas.min.js'} css={linkStyle}>\n                                    html2canvas.min.js\n                                </a>\n                            </div>\n                            <div css={{textAlign: 'center', marginTop: '10px'}}>\n                                {Math.round(data.site.siteMetadata.packageSize / 1024)}kb gzipped\n                            </div>\n                        </div>\n                        <div\n                            css={{\n                                flex: 1,\n                                backgroundColor: '#558b2f',\n                                padding: '10px 20px',\n                                borderRadius: '10px',\n                                textAlign: 'left',\n                                marginBottom: '10px',\n                                '@media(min-width: 1000px)': {\n                                    marginLeft: '5px'\n                                }\n                            }}\n                        >\n                            <h5>Connect</h5>\n                            <div css={{height: '35px'}}>\n                                <iframe\n                                    title=\"Github\"\n                                    src=\"https://ghbtns.com/github-btn.html?user=niklasvh&repo=html2canvas&type=star&count=true&size=large\"\n                                    frameBorder=\"0\"\n                                    scrolling=\"0\"\n                                    width=\"160px\"\n                                    height=\"30px\"\n                                />\n                            </div>\n                            <div>\n                                <a\n                                    className=\"twitter-follow-button\"\n                                    href=\"https://twitter.com/niklasvh\"\n                                    data-show-screen-name=\"false\"\n                                    data-size=\"large\"\n                                >\n                                    Follow @niklasvh\n                                </a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <Footer />\n        </div>\n        </Layout>\n    );\n};\n\nexport const query = graphql`\n    query MetadataQuery {\n        site {\n            siteMetadata {\n                packageSize\n            }\n        }\n    }\n`;\n","import React from 'react';\n\nexport default () =>\n    <footer\n        css={{\n            backgroundColor: '#558b2f',\n            color: 'rgba(255,255,255, 0.8)',\n            fontWeight: 300,\n            minHeight: '50px',\n            lineHeight: '50px',\n            padding: '10px 0px'\n        }}\n    >\n        <div\n            css={{\n                margin: '0 auto',\n                fontSize: '10.5px',\n                textAlign: 'center',\n                '@media(min-width: 1000px)': {\n                    textAlign: 'left',\n                    width: '85%',\n                    fontSize: '14.5px'\n                }\n            }}\n        >\n            Created by{' '}\n            <a href=\"https://hertzen.com\" css={{color: '#fff', fontWeight: 'bold'}}>\n                Niklas von Hertzen\n            </a>. Licensed under the MIT License.\n        </div>\n    </footer>;\n","import React, {Component} from 'react';\nimport './carbon.css';\n\nexport default class Carbon extends Component {\n    componentDidMount() {\n        if (this.container) {\n            const script = document.createElement('script');\n\n            script.src =\n                '//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=html2canvashertzencom';\n            script.async = true;\n            script.id = '_carbonads_js';\n            this.container.appendChild(script);\n        }\n    }\n\n    render() {\n        return (\n            <div\n                {...this.props}\n                ref={container => {\n                    this.container = container;\n                }}\n            />\n        );\n    }\n}\n","module.exports = \"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTZweCIgaGVpZ2h0PSI1NnB4IiB2aWV3Qm94PSIwIDAgNTYgNTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUHJvcG9zYWwtLS1TdWtodW12aXQtU2V0IiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAzLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00LDEyIEw0LDQ2IEwzNy4wMjMyNTU4LDQ2IEwzNy4wMjMyNTU4LDEyIEw0LDEyIFogTTIsOCBMMzkuMDIzMjU1OCw4IEM0MC4xMjc4MjUzLDggNDEuMDIzMjU1OCw4Ljg5NTQzMDUgNDEuMDIzMjU1OCwxMCBMNDEuMDIzMjU1OCw0OCBDNDEuMDIzMjU1OCw0OS4xMDQ1Njk1IDQwLjEyNzgyNTMsNTAgMzkuMDIzMjU1OCw1MCBMMiw1MCBDMC44OTU0MzA1LDUwIDEuMzUyNzA3NWUtMTYsNDkuMTA0NTY5NSAtMS4yMzI1OTUxNmUtMzEsNDggTC0yLjIyMDQ0NjA1ZS0xNiwxMCBDLTMuNTczMTUzNTVlLTE2LDguODk1NDMwNSAwLjg5NTQzMDUsOCAyLDggWiIgaWQ9IlJlY3RhbmdsZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMiw0IEwxMiwzOCBMNDYsMzggTDQ2LDQgTDEyLDQgWiBNMTAsMCBMNDgsMCBDNDkuMTA0NTY5NSwtMi4wMjkwNjEyNWUtMTYgNTAsMC44OTU0MzA1IDUwLDIgTDUwLDQwIEM1MCw0MS4xMDQ1Njk1IDQ5LjEwNDU2OTUsNDIgNDgsNDIgTDEwLDQyIEM4Ljg5NTQzMDUsNDIgOCw0MS4xMDQ1Njk1IDgsNDAgTDgsMiBDOCwwLjg5NTQzMDUgOC44OTU0MzA1LDIuMDI5MDYxMjVlLTE2IDEwLDAgWiIgaWQ9IlJlY3RhbmdsZS1Db3B5Ij48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=\""],"sourceRoot":""}