Merge branch 'master' into patch-1

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+open_collective: webpack
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -7,4 +7,4 @@ _describe your changes..._
 
 
 [1]: https://cla.js.foundation/webpack/webpack.js.org
-[2]: https://webpack.js.org/writers-guide/
+[2]: https://webpack.js.org/contribute/writers-guide/

.gitignore

@@ -9,4 +9,6 @@ npm-debug.log
 yarn-error.log
 package-lock.json
 .cache
-internal-links.tap
+internal-links.tap
+stats.json
+printable.md

README.md

@@ -1,61 +1,59 @@
 # webpack.js.org
 
-[![Build Status][13]][10]
-[![Standard Version][12]][11]
+[![Build Status][build-status]][build-status-url]
+[![Standard Version][release]][release-url]
+[![chat on gitter][chat]][chat-url]
 
 Guides, documentation, and all things webpack.
 
-
 ## Content Progress
 
 Now that we've covered much of the backlog of _missing documentation_, we are
 starting to heavily review each section of the site's content to sort and
 structure it appropriately. The following issues should provide a pretty good
 idea of where things are, and where they are going:
 
-- [Guides - Review and Simplify][1]
-- [Concepts - Review and Organize][2]
-- [API - v4 Rewrite][8]
+- [Guides - Review and Simplify][guides-url]
+- [Concepts - Review and Organize][concepts-url]
+- [API - v4 Rewrite][api-url]
 
 We haven't created issues for the other sections yet, but they will be coming
-soon. For dev-related work please see [General - Updates & Fixes][3].
-
+soon. For dev-related work please see [General - Updates & Fixes][general-url].
 
 ## Translation
 
-To help translate this documentation please jump to the [translate branch][4].
-
+To help translate this documentation please jump to the [translation branch][translate-url].
 
 ## Contributing
 
-Read through the [writer's guide][7] if you're interested in editing the
-content on this site. See the [contributors page][5] to learn how to set up and
+Read through the [writer's guide][writer-guide-url] if you're interested in editing the
+content on this site. See the [contributors page][contributing-url] to learn how to set up and
 start working on the site locally.
 
-
 ## License
 
-The content is available under the [Creative Commons BY 4.0][6] license.
-
+The content is available under the [Creative Commons BY 4.0][license-url] license.
 
 ## Special Thanks
 
 _BrowserStack_ has graciously allowed us to do cross-browser and cross-os
 testing of the site at no cost...
 
-[![BrowserStackLogo](./browserstack-logo.png)][9]
-
-
-[1]: https://github.com/webpack/webpack.js.org/issues/1258
-[2]: https://github.com/webpack/webpack.js.org/issues/1386
-[3]: https://github.com/webpack/webpack.js.org/issues/1525
-[4]: https://github.com/webpack/webpack.js.org/tree/translation
-[5]: https://github.com/webpack/webpack.js.org/blob/master/.github/CONTRIBUTING.md
-[6]: https://creativecommons.org/licenses/by/4.0/
-[7]: https://webpack.js.org/writers-guide
-[8]: https://github.com/webpack/webpack.js.org/pull/1754
-[9]: http://browserstack.com/
-[10]: http://travis-ci.org/webpack/webpack.js.org
-[11]: https://github.com/conventional-changelog/standard-version
-[12]: https://img.shields.io/badge/release-standard%20version-brightgreen.svg
-[13]: https://secure.travis-ci.org/webpack/webpack.js.org.svg
+[![BrowserStackLogo][browserstack]][browserstack-url]
+
+[api-url]: https://github.com/webpack/webpack.js.org/pull/1754
+[build-status]: https://secure.travis-ci.org/webpack/webpack.js.org.svg
+[build-status-url]: http://travis-ci.org/webpack/webpack.js.org
+[browserstack]: ./browserstack-logo.png
+[browserstack-url]: http://browserstack.com/
+[chat]: https://badges.gitter.im/webpack/webpack.svg
+[chat-url]: https://gitter.im/webpack/webpack
+[concepts-url]: https://github.com/webpack/webpack.js.org/issues/1386
+[contributing-url]: https://github.com/webpack/webpack.js.org/blob/master/.github/CONTRIBUTING.md
+[general-url]: https://github.com/webpack/webpack.js.org/issues/1525
+[guides-url]: https://github.com/webpack/webpack.js.org/issues/1258
+[license-url]: https://creativecommons.org/licenses/by/4.0/
+[release]: https://img.shields.io/badge/release-standard%20version-brightgreen.svg
+[release-url]: https://github.com/conventional-changelog/standard-version
+[translate-url]: https://github.com/webpack/webpack.js.org/tree/translation
+[writer-guide-url]: https://webpack.js.org/contribute/writers-guide

package.json

@@ -25,29 +25,34 @@
   },
   "scripts": {
     "clean-dist": "rimraf ./dist",
-    "clean": "npm run clean-dist && rimraf src/content/**/_*.md src/**/_*.json",
+    "clean-printable": "rimraf src/content/**/printable.md",
+    "preclean": "run-s clean-dist clean-printable",
+    "clean": "rimraf src/content/**/_*.md src/**/_*.json",
     "start": "npm run clean-dist && cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.js --env.dev",
     "update-repos": "node src/utilities/fetch-package-repos.js",
     "content": "node src/scripts/build-content-tree.js ./src/content ./src/_content.json",
-    "build-test": "npm run build && http-server dist/",
+    "bundle-analyze": "run-s clean fetch printable content && cross-env NODE_ENV=production webpack --config webpack.ssg.js && run-s clean-printable content && cross-env NODE_ENV=production webpack --config webpack.prod.js  --profile --json > stats.json && webpack-bundle-analyzer stats.json",
     "fetch": "run-p fetch:*",
     "fetch:readmes": "node src/utilities/fetch-package-readmes.js",
     "fetch:supporters": "node src/utilities/fetch-supporters.js",
     "fetch:starter-kits": "node src/utilities/fetch-starter-kits.js",
     "prebuild": "npm run clean",
-    "build": "run-s fetch content && cross-env NODE_ENV=production webpack --config webpack.prod.js",
-    "postbuild": "npm run sitemap",
+    "build": "run-s fetch printable content && cross-env NODE_ENV=production webpack --config webpack.ssg.js && run-s clean-printable content && cross-env NODE_ENV=production webpack --config webpack.prod.js",
+    "postbuild": "bundlesize && npm run sitemap",
+    "build-test": "npm run build && http-server dist/",
     "test": "npm run lint",
     "lint": "run-s lint:*",
     "lint:js": "eslint src --ext .js,.jsx,.md --cache true --cache-location .cache/.eslintcache",
     "lint:markdown": "markdownlint --rules markdownlint-rule-emphasis-style --config ./.markdownlint.json *.md ./src/content/**/*.md --ignore './src/content/**/_*.md'",
     "lint:social": "alex . -q",
     "lint:prose": "cp .proselintrc ~/ && proselint src/content",
-    "lint:links": "hyperlink -r dist/index.html --canonicalroot https://webpack.js.org/ -i --todo https://img.shields.io --todo https://codecov.io/gh --todo 'content-type-mismatch https://travis-ci.org' --todo 'Asset is used as both Html and Image' | tee internal-links.tap | tap-spot",
+    "lint:links": "hyperlink -c 8 -r dist/index.html --canonicalroot https://webpack.js.org/ -i --todo https://img.shields.io --todo https://codecov.io/gh --todo 'content-type-mismatch https://travis-ci.org' --todo 'Asset is used as both Html and Image' | tee internal-links.tap | tap-spot",
     "linkcheck": "hyperlink -r dist/index.html --canonicalroot https://webpack.js.org/ --skip support__ --skip sidecar.gitter.im --skip vimdoc.sourceforge.net --skip img.shields.io --skip npmjs.com/package/ --skip opencollective.com/webpack --todo external-redirect | tee external-links.tap | tap-spot",
-    "sitemap": "cd dist && sitemap-static --prefix=https://webpack.js.org/ > sitemap.xml",
+    "sitemap": "cd dist && sitemap-static --ignore-file=../sitemap-ignore.json --pretty --prefix=https://webpack.js.org/ > sitemap.xml",
     "serve": "npm run build && sirv start ./dist --port 4000",
-    "deploy": "gh-pages -d dist"
+    "deploy": "gh-pages -d dist",
+    "preprintable": "npm run clean-printable",
+    "printable": "node ./src/scripts/concatenate-docs.js"
   },
   "husky": {
     "hooks": {
@@ -62,10 +67,16 @@
       "npm run lint:markdown"
     ]
   },
+  "bundlesize": [
+    {
+      "path": "./dist/index.bundle.js",
+      "maxSize": "200 kB"
+    }
+  ],
   "devDependencies": {
     "@mdx-js/loader": "0.15.7",
     "@mdx-js/mdx": "0.15.7",
-    "@octokit/rest": "^15.9.4",
+    "@octokit/rest": "^16.27.1",
     "alex": "^5.1.0",
     "autoprefixer": "^7.2.3",
     "babel-core": "^6.26.0",
@@ -76,6 +87,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
+    "bundlesize": "^0.17.1",
     "copy-webpack-plugin": "4.5.2",
     "cross-env": "5.2.0",
     "css-loader": "^0.28.10",
@@ -109,6 +121,7 @@
     "modularscale-sass": "^3.0.3",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.1.1",
+    "offline-plugin": "^5.0.7",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^2.1.3",
     "redirect-webpack-plugin": "^0.1.1",
@@ -134,6 +147,7 @@
     "through2": "^2.0.3",
     "uglifyjs-webpack-plugin": "^1.1.6",
     "webpack": "^4.30.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.2.1",
     "webpack-merge": "^4.1.0"

repositories/plugins.json

@@ -1,6 +1,5 @@
 [
   "webpack-contrib/i18n-webpack-plugin",
-  "webpack-contrib/component-webpack-plugin",
   "webpack-contrib/compression-webpack-plugin",
   "webpack-contrib/extract-text-webpack-plugin",
   "webpack-contrib/copy-webpack-plugin",

sitemap-ignore.json

@@ -0,0 +1,4 @@
+[
+	"app-shell/index.html",
+	"appcache/manifest.html"
+]

src/assets/PWA/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "Webpack Documentation",
-  "short_name": "Webpack",
+  "name": "webpack Documentation",
+  "short_name": "webpack",
   "theme_color": "#2b3a42",
   "background_color": "#2b3a42",
   "display": "fullscreen",
@@ -49,4 +49,4 @@
     }
   ],
   "splash_pages": null
-}
+}

src/components/Contributors/Contributors.scss

@@ -1,6 +1,12 @@
 @import 'functions';
 @import 'mixins';
 
+.contributors__section {
+  @media print {
+    display: none;
+  }
+}
+
 .contributors__list {
   font-size: 14px;
   margin-left: -0.5em;

src/components/Cube/Cube.jsx

@@ -88,22 +88,16 @@ export default class Cube extends React.Component {
       let degrees = 0;
       let axis = 'y';
 
-      let lastTime = performance.now();
       let animation = () => {
-        let nowTime = performance.now();
-        let deltaTime = nowTime - lastTime;
-
-        if (repeatDelay <= deltaTime) {
-          let obj = {};
-          obj[axis] = degrees += 90;
+        let obj = {};
+        obj[axis] = degrees += 90;
+        this.setState({ ...obj, iteration: (this.state.iteration + 1) % 4 });
+        tick();
+      };
 
-          this.setState({ ...obj, iteration: (this.state.iteration + 1) % 4 });
-          lastTime = performance.now();
-        }
+      let tick = () => setTimeout(() => requestAnimationFrame(animation), repeatDelay);
 
-        this._requestAnimation = requestAnimationFrame(animation);
-      };
-      animation();
+      this._timeout = tick();
     }
   }
 
@@ -115,7 +109,7 @@ export default class Cube extends React.Component {
       this.container.removeEventListener('mouseleave', this._reset);
 
     } else if (continuous) {
-      cancelAnimationFrame(this._requestAnimation);
+      clearTimeout(this._timeout);
     }
   }
 

src/components/Gitter/Gitter.scss

@@ -4,8 +4,16 @@
 
 .gitter {
   position: fixed;
-  right: 1.5em;
+  right: 1em;
   bottom: 3em;
+
+  @include break {
+    right: 1.5em;
+  }
+
+  @media print {
+    display: none;
+  }
 }
 
 .gitter__button {

src/components/NotificationBar/NotificationBar.scss

@@ -5,6 +5,10 @@
   color: getColor(white);
   background: getColor(emperor);
 
+  @media print {
+    display: none;
+  }
+
   a {
     color: getColor(malibu);
 

src/components/Page/Page.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import PageLinks from '../PageLinks/PageLinks';
 import Markdown from '../Markdown/Markdown';
 import Contributors from '../Contributors/Contributors';
-import Placeholder from '../Placeholder/Placeholder';
+import {PlaceholderString} from '../Placeholder/Placeholder';
 import Configuration from '../Configuration/Configuration';
 
 // Load Styling
@@ -19,7 +19,7 @@ class Page extends React.Component {
     const isDynamicContent = content instanceof Promise;
 
     this.state = {
-      content: isDynamicContent ? Placeholder() : content.default || content,
+      content: isDynamicContent ? PlaceholderString() : content.default || content,
       contentLoaded: isDynamicContent ? false : true
     };
   }
@@ -77,7 +77,7 @@ class Page extends React.Component {
           {contentRender}
 
           {loadRelated && (
-            <div>
+            <div className="related__section">
               <hr />
               <h3>Further Reading</h3>
               <ul>
@@ -91,7 +91,7 @@ class Page extends React.Component {
           )}
 
           {loadContributors && (
-            <div>
+            <div className="contributors__section">
               <hr />
               <h3>Contributors</h3>
               <Contributors contributors={contributors} />

src/components/Page/Page.scss

@@ -9,6 +9,13 @@
 
   @include break {
     flex: 3;
-    padding: 1.5em;
+    // page links not fitting in 768+ resolutions with long headings
+    padding: 2em 1.5em 1.5em;
+  }
+
+  .related__section {
+    @media print {
+      display: none;
+    }
   }
 }

src/components/PageLinks/PageLinks.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Url from 'url';
 import './PageLinks.scss';
+import icon from '../../assets/icon-print.svg';
 
 const baseURL = 'https://github.com/webpack/webpack.js.org/edit/master/';
 
@@ -27,6 +28,16 @@ export default ({
         Edit Document
         <i className="page-links__icon icon-edit" />
       </a>
+      <span className="page-links__gap">|</span>
+      <a className="page-links__link page-links__print" onClick={_handlePrintClick} title="Print this page">
+        Print Document
+        <img src={icon} />
+      </a>
     </div>
   );
 };
+
+function _handlePrintClick (e) {
+  e.preventDefault();
+  window.print();
+}