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:
MoyuScript 2017-12-11 21:20:14 +08:00
parent 36e5d91639
commit 5663df296c
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 = {
siteMetadata: {
title: `Gatsby Default Starter`
title: `html2canvas`,
packageSize: gzipSize.sync(
fs.readFileSync(path.resolve(__dirname, '../dist/html2canvas.min.js'))
)
},
plugins: [
{

17
www/package-lock.json generated
View File

@ -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",

1
www/package.json
View File

@ -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"

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

@ -21,14 +21,21 @@ 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={{
display: 'flex',
flexGrow: 1
}}
>
<div
@ -80,15 +87,8 @@ const IndexPage = () =>
</div>
<div css={{margin: '20px'}}>
<Link
css={linkStyle}
>
Try it out
</Link>
<Link
to={'/documentation'}
css={linkStyle}
>
<Link css={linkStyle}>Try it out</Link>
<Link to={'/documentation'} css={linkStyle}>
Documentation
</Link>
</div>
@ -120,19 +120,16 @@ const IndexPage = () =>
<h6>Install Yarn</h6>
<code css={codeStyle}>yarn add html2canvas</code>
<div css={{marginTop: '25px'}}>
<a
href={'/dist/html2canvas.js'}
css={linkStyle}
>
<a href={'/dist/html2canvas.js'} css={linkStyle}>
html2canvas.js
</a>
<a
href={'/dist/html2canvas.min.js'}
css={linkStyle}
>
<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={{
@ -169,6 +166,16 @@ const IndexPage = () =>
</div>
</div>
<Footer />
</div>;
</div>
);
};
export default IndexPage;
export const query = graphql`
query MetadataQuery {
site {
siteMetadata {
packageSize
}
}
}
`;