Skip to content

Commit

Permalink
Add gzipped package size to website (Fix #992)
Browse files Browse the repository at this point in the history
  • Loading branch information
@niklasvh
niklasvh committed Dec 11, 2017
1 parent 50608e9 commit 2d132b8
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 124 deletions.
9 changes: 8 additions & 1 deletion www/gatsby-config.js
View file
Original file line number Diff line number Diff line change
@@ -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: [
{
Expand Down
17 changes: 13 additions & 4 deletions www/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions www/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
245 changes: 126 additions & 119 deletions www/src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">&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>div</span><span class="token punctuation">&gt;</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">=&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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</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 css={{margin: '20px'}}>
<Link css={linkStyle}>Try it out</Link>
<Link to={'/documentation'} css={linkStyle}>
Documentation
</Link>
</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 css={{display: 'flex'}}>
<div
css={{
flex: 1,
backgroundColor: '#558b2f',
padding: '10px 20px',
borderRadius: '10px',
marginRight: '5px'
}}
>
<Carbon />
</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
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>
<a
className="twitter-follow-button"
href="https://twitter.com/niklasvh"
data-show-screen-name="false"
data-size="large"
>
Follow @niklasvh
</a>
<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
}
}
}
`;

0 comments on commit 2d132b8

Please sign in to comment.