From 5663df296cb3fde438124cb93d0e161ed916859d Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Mon, 11 Dec 2017 21:20:14 +0800
Subject: [PATCH] Add gzipped package size to website (Fix #992)

---
 www/gatsby-config.js   |   9 +-
 www/package-lock.json  |  17 ++-
 www/package.json       |   1 +
 www/src/pages/index.js | 251 +++++++++++++++++++++--------------------
 4 files changed, 151 insertions(+), 127 deletions(-)

diff --git a/www/gatsby-config.js b/www/gatsby-config.js
index c0522f5..463f623 100644
--- a/www/gatsby-config.js
+++ b/www/gatsby-config.js
@@ -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: [
         {
diff --git a/www/package-lock.json b/www/package-lock.json
index 5112c95..1003504 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -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",
diff --git a/www/package.json b/www/package.json
index a38f6e0..f60ddc9 100644
--- a/www/package.json
+++ b/www/package.json
@@ -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"
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index 07c1711..c661b56 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -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 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
+            }
+        }
+    }
+`;