Add gzipped package size to website (Fix #992)
This commit is contained in:
Niklas von Hertzen
parent
50608e9cd4
commit
2d132b85c6
|
|
@ -1,6 +1,13 @@
|
|||
const gzipSize = require('gzip-size');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: `Gatsby Default Starter`
|
||||
title: `html2canvas`,
|
||||
packageSize: gzipSize.sync(
|
||||
fs.readFileSync(path.resolve(__dirname, '../dist/html2canvas.min.js'))
|
||||
)
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4608,11 +4608,12 @@
|
|||
"integrity": "sha1-tyonTRsTeRBKAFC2OyB9xT/lb5k="
|
||||
},
|
||||
"gzip-size": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
|
||||
"integrity": "sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=",
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
|
||||
"integrity": "sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=",
|
||||
"requires": {
|
||||
"duplexer": "0.1.1"
|
||||
"duplexer": "0.1.1",
|
||||
"pify": "3.0.0"
|
||||
}
|
||||
},
|
||||
"handlebars": {
|
||||
|
|
@ -8713,6 +8714,14 @@
|
|||
"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": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"gatsby-remark-prismjs": "^1.2.10",
|
||||
"gatsby-source-filesystem": "^1.5.9",
|
||||
"gatsby-transformer-remark": "^1.7.23",
|
||||
"gzip-size": "^4.1.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"typography": "^0.16.6",
|
||||
"typography-theme-github": "^0.15.10"
|
||||
|
|
|
|||
|
|
@ -21,154 +21,161 @@ const linkStyle = {
|
|||
color: '#fff'
|
||||
};
|
||||
|
||||
const IndexPage = () =>
|
||||
<div>
|
||||
export default ({data}) => {
|
||||
return (
|
||||
<div
|
||||
css={{
|
||||
background: '#558b2f',
|
||||
backgroundImage: 'linear-gradient(0deg, #558b2f, #7cb342)',
|
||||
height: '100vh',
|
||||
display: 'flex'
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
css={{
|
||||
maxWidth: 960,
|
||||
color: '#fff',
|
||||
margin: '0 auto',
|
||||
textAlign: 'center',
|
||||
alignSelf: 'center'
|
||||
display: 'flex',
|
||||
flexGrow: 1
|
||||
}}
|
||||
>
|
||||
<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={{
|
||||
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">
|
||||
<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">
|
||||
}}
|
||||
/>
|
||||
</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 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 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>
|
||||
<Footer />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>;
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexPage;
|
||||
export const query = graphql`
|
||||
query MetadataQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
packageSize
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in New Issue