mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Add gzipped package size to website (Fix #992)

Browse Source
This commit is contained in:
Niklas von Hertzen 2017-12-11 21:20:14 +08:00
parent 50608e9cd4
commit 2d132b85c6
4 changed files with 151 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
www/gatsby-config.js
View File

@ -1,6 +1,13 @@
const gzipSize = require('gzip-size');
const path = require('path');
const fs = require('fs');
module.exports = { module.exports = {
siteMetadata: { siteMetadata: {
title: `Gatsby Default Starter` title: `html2canvas`,
packageSize: gzipSize.sync(
fs.readFileSync(path.resolve(__dirname, '../dist/html2canvas.min.js'))
)
}, },
plugins: [ plugins: [
{ {

17
www/package-lock.json generated
View File

@ -4608,11 +4608,12 @@
"integrity": "sha1-tyonTRsTeRBKAFC2OyB9xT/lb5k=" "integrity": "sha1-tyonTRsTeRBKAFC2OyB9xT/lb5k="
}, },
"gzip-size": { "gzip-size": {
"version": "3.0.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
"integrity": "sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=", "integrity": "sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=",
"requires": { "requires": {
"duplexer": "0.1.1" "duplexer": "0.1.1",
"pify": "3.0.0"
} }
}, },
"handlebars": { "handlebars": {
@ -8713,6 +8714,14 @@
"which": "1.3.0" "which": "1.3.0"
} }
}, },
"gzip-size": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
"integrity": "sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=",
"requires": {
"duplexer": "0.1.1"
}
},
"is-windows": { "is-windows": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz",

1
www/package.json
View File

@ -17,6 +17,7 @@
"gatsby-remark-prismjs": "^1.2.10", "gatsby-remark-prismjs": "^1.2.10",
"gatsby-source-filesystem": "^1.5.9", "gatsby-source-filesystem": "^1.5.9",
"gatsby-transformer-remark": "^1.7.23", "gatsby-transformer-remark": "^1.7.23",
"gzip-size": "^4.1.0",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
"typography": "^0.16.6", "typography": "^0.16.6",
"typography-theme-github": "^0.15.10" "typography-theme-github": "^0.15.10"

251
www/src/pages/index.js
View File

@ -21,154 +21,161 @@ const linkStyle = {
color: '#fff' color: '#fff'
}; };
const IndexPage = () => export default ({data}) => {
<div> return (
<div <div
css={{ css={{
background: '#558b2f', background: '#558b2f',
backgroundImage: 'linear-gradient(0deg, #558b2f, #7cb342)', backgroundImage: 'linear-gradient(0deg, #558b2f, #7cb342)',
height: '100vh', minHeight: '100vh',
display: 'flex' display: 'flex',
flexDirection: 'column'
}} }}
> >
<div <div
css={{ css={{
maxWidth: 960, display: 'flex',
color: '#fff', flexGrow: 1
margin: '0 auto',
textAlign: 'center',
alignSelf: 'center'
}} }}
> >
<div css={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}> <div
<img src={logo} /> css={{
<h1>html2canvas</h1> maxWidth: 960,
</div> color: '#fff',
<h4 css={{color: 'rgba(255, 255, 255, 0.6)', fontWeight: 300}}> margin: '0 auto',
Screenshots with JavaScript textAlign: 'center',
</h4> 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 css={{display: 'flex', justifyContent: 'center'}}>
<div> <div>
<h4>HTML</h4> <h4>HTML</h4>
<div <div
css={{marginRight: '5px'}} css={{marginRight: '5px'}}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: `<div class="gatsby-highlight"> __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> <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>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> <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> </code></pre>
</div>` </div>`
}} }}
/> />
</div> </div>
<div> <div>
<h4>JavaScript</h4> <h4>JavaScript</h4>
<div <div
css={{marginLeft: '5px'}} css={{marginLeft: '5px'}}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: `<div class="gatsby-highlight"> __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> <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> 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> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> </code></pre>
</div>` </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>
<div> </div>
<a
className="twitter-follow-button" <div css={{margin: '20px'}}>
href="https://twitter.com/niklasvh" <Link css={linkStyle}>Try it out</Link>
data-show-screen-name="false" <Link to={'/documentation'} css={linkStyle}>
data-size="large" Documentation
> </Link>
Follow @niklasvh </div>
</a> <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 css={{textAlign: 'center', marginTop: '10px'}}>
{Math.round(data.site.siteMetadata.packageSize / 1024)}kb gzipped
</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>
</div> </div>
</div> </div>
<Footer />
</div> </div>
<Footer /> );
</div>; };
export default IndexPage; export const query = graphql`
query MetadataQuery {
site {
siteMetadata {
packageSize
}
}
}
`;