Add gzipped package size to website (Fix #992)

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: [
         {

www/package-lock.json

@@ -4608,11 +4608,12 @@
       "integrity": "sha1-tyonTRsTeRBKAFC2OyB9xT/lb5k="
     },
     "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": {
-        "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",

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"

www/src/pages/index.js

@@ -21,14 +21,21 @@ const linkStyle = {
     color: '#fff'
 };
 
-const IndexPage = () =>
+export default ({data}) => {
-    <div>
+    return (
         <div
             css={{
                 background: '#558b2f',
                 backgroundImage: 'linear-gradient(0deg, #558b2f, #7cb342)',
-                height: '100vh',
+                minHeight: '100vh',
-                display: 'flex'
+                display: 'flex',
+                flexDirection: 'column'
+            }}
+        >
+            <div
+                css={{
+                    display: 'flex',
+                    flexGrow: 1
                 }}
             >
                 <div
@@ -80,15 +87,8 @@ const IndexPage = () =>
                     </div>
 
                     <div css={{margin: '20px'}}>
-                    <Link
+                        <Link css={linkStyle}>Try it out</Link>
-                        css={linkStyle}
+                        <Link to={'/documentation'} 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
+                                <a href={'/dist/html2canvas.js'} css={linkStyle}>
-                                href={'/dist/html2canvas.js'}
-                                css={linkStyle}
-                            >
                                     html2canvas.js
                                 </a>
-                            <a
+                                <a href={'/dist/html2canvas.min.js'} css={linkStyle}>
-                                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
+            }
+        }
+    }
+`;