From 090e0f0f6b4675a53b36bf38a6eccdd8d1d787cf Mon Sep 17 00:00:00 2001
From: Axel D <SetTrend@users.noreply.github.com>
Date: Sun, 24 Feb 2019 14:27:19 +0100
Subject: [PATCH 1/5] Added CSS rules for printing; added script to create
 chapter-wide documentation files from single files.

Currently, it's not possible to create a decent printed (or PDF) version of the documentation:

(a) Printed pages show all the navigation and interactive chrome, thereby unnecessarily wasting space.
(b) Printing all of a chapter's pages to get a comprehensive lecture wastes a lot of space when
    each of a chapter's pages gets printed separately.

This commit fixes both issues:

(a) New CSS rules have been added to remove navigation and interactive chrome when printing a
    documentation page.
(b) A Node script has been added to concatenate a chapter's Markdown documents into a single page.

To do:

The webpack documentation team is suggested to add the new Node script to the build script and to
publish the generated concatenated content, converted to HTML, on their website for printing.
---
 .gitignore                                    |  1 +
 concatenate-docs.js                           | 78 +++++++++++++++++++
 package.json                                  |  3 +-
 src/components/Gitter/Gitter.scss             |  4 +
 .../NotificationBar/NotificationBar.scss      |  4 +
 src/components/Page/Page.jsx                  |  2 +-
 src/components/Page/Page.scss                 |  7 ++
 src/components/PageLinks/PageLinks.scss       |  4 +
 src/components/Site/Site.scss                 |  9 +++
 9 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 concatenate-docs.js

diff --git a/.gitignore b/.gitignore
index b511fac6ff2c..182af04869b9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ npm-debug.log
 yarn-error.log
 package-lock.json
 .cache
+src/content/**/*_all.md
\ No newline at end of file
diff --git a/concatenate-docs.js b/concatenate-docs.js
new file mode 100644
index 000000000000..5d2a7c48ec0f
--- /dev/null
+++ b/concatenate-docs.js
@@ -0,0 +1,78 @@
+// start message
+console.info("\x1b[0m\x1b[36mConcatenating help files of each directory to create chapter-wide help files to be used for printing help ...\x1b[0m");
+
+// ------ various includes ------
+const fs = require("fs");
+const path = require("path");
+const os = require("os");
+const front = require("front-matter");
+
+// root path
+const rootPath = path.join("src", "content");
+
+/*	getDirectoryRecursive() recursively walks through
+		all sub directories of the provided root path,
+		concatenates the MarkDown files' content in
+		each directory, sorted by their FrontMatter sort
+		attribute, and creates a compound MarkDown file
+		named by using the directory name, prefixed by an
+		underscore and suffixed by "_all.md" from the
+		concatenated content in the corresponding directory.
+*/
+(function getDirectoryRecursive(basePath)
+{
+	// log current working directory
+	console.log("\x1b[0m\x1b[32m  " + basePath + "\x1b[0m");
+
+	// create destination file name of compound file
+	const targetFilePath = path.join(basePath, `${basePath.substr(rootPath.length).replace(/[/\\]/, "_")}_all.md`);
+
+	if (fs.existsSync(targetFilePath)) fs.unlinkSync(targetFilePath);		// delete target file if it already exists
+
+	fs.readdir(basePath, function (err, fileNames)	// list current working directory
+	{
+		if (err) throw err;
+
+		let fileContents = [];
+
+		for (let file of fileNames)		// for each directory entry ...
+		{
+			const fullPath = path.join(basePath, file);
+
+			if (fs.statSync(fullPath).isDirectory()) getDirectoryRecursive(fullPath);		// if the directory entry is a directory, recurse into that directory
+			else if (fullPath.endsWith(".md"))	// if the directory entry is a MarkDown file, add it to the list of files to be processed
+			{
+				let fc = fileContents[fileContents.length] = front(fs.readFileSync(fullPath).toString());
+
+				if (!fc.attributes.sort) --fileContents.length;		// only include files providing a FrontMatter "sort" attribute
+			}
+		}
+
+		// sort MarkDown files by FrontMatter "sort" attribute (QuickSort)
+		for (let i = 0;i < fileContents.length - 1;++i)
+			for (let j = i + 1;j < fileContents.length;++j)
+			{
+				const left = fileContents[i].attributes, right = fileContents[j].attributes;
+
+				if (left.sort > right.sort
+					|| left.sort == right.sort && left.title > right.title)
+					[fileContents[i], fileContents[j]] = [fileContents[j], fileContents[i]];
+			}
+
+		// write compound target file
+		const targetFile = fs.createWriteStream(targetFilePath);
+
+		targetFile.on("error", (error) => { throw error; });
+
+		for (let file of fileContents)
+		{
+			targetFile.write(os.EOL + os.EOL + "# " + file.attributes.title + os.EOL);	// use FrontMatter "title" attribute as main heading of target file
+			targetFile.write(file.body);
+		}
+
+		targetFile.end();
+	});
+})(rootPath);
+
+// end message
+process.on("exit", () => { console.info("\x1b[0m\x1b[36mSuccessfully created \"_all.md\" help files in each directory within \"" + rootPath + "\".\x1b[0m"); });
\ No newline at end of file
diff --git a/package.json b/package.json
index c44ce6f26180..ffd6bdcb4fde 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,8 @@
     "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",
     "serve": "npm run build && sirv start ./dist --port 4000",
-    "deploy": "gh-pages -d dist"
+    "deploy": "gh-pages -d dist",
+    "chapterize": "node ./concatenate-docs.js"
   },
   "husky": {
     "hooks": {
diff --git a/src/components/Gitter/Gitter.scss b/src/components/Gitter/Gitter.scss
index 382623c586e9..e2123ab5790f 100644
--- a/src/components/Gitter/Gitter.scss
+++ b/src/components/Gitter/Gitter.scss
@@ -3,6 +3,10 @@
 @import 'functions';
 
 .gitter {
+  @media print {
+    display: none !important;
+  }
+
   position: absolute;
   right: 1.5em;
   height: calc(100% - 1.5em);
diff --git a/src/components/NotificationBar/NotificationBar.scss b/src/components/NotificationBar/NotificationBar.scss
index 4f302b2ddaad..18f4bb7ec4bb 100644
--- a/src/components/NotificationBar/NotificationBar.scss
+++ b/src/components/NotificationBar/NotificationBar.scss
@@ -2,6 +2,10 @@
 @import 'mixins';
 
 .notification-bar {
+  @media print {
+    display: none !important;
+  }
+
   color: getColor(white);
   background: getColor(emperor);
 
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index 9bac4f7decf8..81356dbc632a 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -91,7 +91,7 @@ class Page extends React.Component {
           )}
 
           {loadContributors && (
-            <div>
+            <div className="contributors__section">
               <hr />
               <h3>Contributors</h3>
               <Contributors contributors={contributors} />
diff --git a/src/components/Page/Page.scss b/src/components/Page/Page.scss
index 32270011707b..33b3fad68101 100644
--- a/src/components/Page/Page.scss
+++ b/src/components/Page/Page.scss
@@ -12,3 +12,10 @@
     padding: 1.5em;
   }
 }
+
+.contributors__section
+{
+  @media print {
+    display: none !important;
+  }
+}
\ No newline at end of file
diff --git a/src/components/PageLinks/PageLinks.scss b/src/components/PageLinks/PageLinks.scss
index 7f45b7ff1526..60624bdd51fc 100644
--- a/src/components/PageLinks/PageLinks.scss
+++ b/src/components/PageLinks/PageLinks.scss
@@ -2,6 +2,10 @@
 @import 'functions';
 
 .page-links {
+  @media print {
+    display: none !important;
+  }
+
   position: absolute;
   display: none;
   top: 1.5em;
diff --git a/src/components/Site/Site.scss b/src/components/Site/Site.scss
index a867c4b0884b..a4d66dd08126 100644
--- a/src/components/Site/Site.scss
+++ b/src/components/Site/Site.scss
@@ -1,3 +1,12 @@
+@media print {
+
+  header,
+  nav,
+  footer {
+    display: none !important;
+  }
+}
+
 .site {
   display: flex;
   flex-direction: column;

From 843fcd5174599123836f0c977bece6e700cb0c9b Mon Sep 17 00:00:00 2001
From: Thanik Bhongbhibhat <email@thanik.me>
Date: Sun, 24 Feb 2019 11:07:48 -0800
Subject: [PATCH 2/5] docs(Config.Optimization): correct typo namedChunks ->
 chunkIds (#2827)

---
 src/content/configuration/optimization.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/configuration/optimization.md b/src/content/configuration/optimization.md
index 0930b08c8ec9..77bb27798a38 100644
--- a/src/content/configuration/optimization.md
+++ b/src/content/configuration/optimization.md
@@ -228,7 +228,7 @@ Tells webpack which algorithm to use when choosing chunk ids. Setting `optimizat
 
 - if [`optimization.occurrenceOrder`](#optimization-occurrenceorder) is enabled `optimization.chunkIds` is set to `'total-size'`
 - Disregarding previous if, if [`optimization.namedChunks`](#optimization-namedchunks) is enabled `optimization.chunkIds` is set to `'named'`
-- if none of the above, `optimization.namedChunks` will be defaulted to `'natural'`
+- if none of the above, `optimization.chunkIds` will be defaulted to `'natural'`
 
 The following string values are supported:
 
@@ -361,7 +361,7 @@ module.exports = {
 
 `bool`
 
-Tells webpack to figure out an order of modules which will result in the smallest initial bundle. By default `optimization.occurrenceOrder` is enabled in `production` [mode](/concepts/mode/) and disabled elsewise. 
+Tells webpack to figure out an order of modules which will result in the smallest initial bundle. By default `optimization.occurrenceOrder` is enabled in `production` [mode](/concepts/mode/) and disabled elsewise.
 
 __webpack.config.js__
 
@@ -378,7 +378,7 @@ module.exports = {
 
 `bool`
 
-Tells webpack to figure out which exports are provided by modules to generate more efficient code for `export * from ...`. By default  `optimization.providedExports` is enabled. 
+Tells webpack to figure out which exports are provided by modules to generate more efficient code for `export * from ...`. By default  `optimization.providedExports` is enabled.
 
 __webpack.config.js__
 
@@ -397,7 +397,7 @@ module.exports = {
 
 Tells webpack to determine used exports for each module. This depends on [`optimization.providedExports`](#optimizationoccurrenceorder). Information collected by `optimization.usedExports` is used by other optimizations or code generation i.e. exports are not generated for unused exports, export names are mangled to single char identifiers when all usages are compatible.
 Dead code elimination in minimizers will benefit from this and can remove unused exports.
-By default `optimization.usedExports` is enabled in `production` [mode](/concepts/mode/) and disabled elsewise. 
+By default `optimization.usedExports` is enabled in `production` [mode](/concepts/mode/) and disabled elsewise.
 
 __webpack.config.js__
 
@@ -432,7 +432,7 @@ module.exports = {
 
 `bool`
 
-Tells webpack to recognise the [`sideEffects`](https://github.com/webpack/webpack/blob/master/examples/side-effects/README.md) flag in `package.json` or rules to skip over modules which are flagged to contain no side effects when exports are not used. 
+Tells webpack to recognise the [`sideEffects`](https://github.com/webpack/webpack/blob/master/examples/side-effects/README.md) flag in `package.json` or rules to skip over modules which are flagged to contain no side effects when exports are not used.
 
 __package.json__
 
@@ -448,7 +448,7 @@ T> Please note that `sideEffects` should be in the npm module's `package.json` f
 
 `optimization.sideEffects` depends on [`optimization.providedExports`](#optimization-providedexports) to be enabled. This dependency has a build time cost, but eliminating modules has positive impact on performance because of less code generation. Effect of this optimization depends on your codebase, try it for possible performance wins.
 
-By default `optimization.sideEffects` is enabled in `production` [mode](/concepts/mode/) and disabled elsewise. 
+By default `optimization.sideEffects` is enabled in `production` [mode](/concepts/mode/) and disabled elsewise.
 
 __webpack.config.js__
 

From 8a23b1c0e9bbc49fc1577cef32d5048f20dcbf9a Mon Sep 17 00:00:00 2001
From: aularon <arous0@gmail.com>
Date: Sun, 24 Feb 2019 21:28:20 +0200
Subject: [PATCH 3/5] fix a little typo (#2829)

---
 src/content/guides/hot-module-replacement.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/guides/hot-module-replacement.md b/src/content/guides/hot-module-replacement.md
index a725c5cc0b41..db1f91602f11 100644
--- a/src/content/guides/hot-module-replacement.md
+++ b/src/content/guides/hot-module-replacement.md
@@ -104,7 +104,7 @@ __index.js__
 + }
 ```
 
-Start changing the `console.log` statement in `print.js`, and you should see the following output in the browser console (don't worry about that `button.onclick = printMe()` output for now, we will also update that part later).
+Start changing the `console.log` statement in `print.js`, and you should see the following output in the browser console (don't worry about that `button.onclick = printMe` output for now, we will also update that part later).
 
 __print.js__
 

From ba3745ca650e0e62ad55fb5bb29c762c8909070a Mon Sep 17 00:00:00 2001
From: bhavya chawla <bhavya9107@gmail.com>
Date: Mon, 25 Feb 2019 01:04:44 +0530
Subject: [PATCH 4/5] docs: grammar (#2828)

---
 src/content/api/hot-module-replacement.md | 6 +++---
 src/content/contribute/debugging.md       | 5 +++--
 src/content/contribute/index.md           | 6 +++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/content/api/hot-module-replacement.md b/src/content/api/hot-module-replacement.md
index 19f2b5617e53..301616fb9cae 100644
--- a/src/content/api/hot-module-replacement.md
+++ b/src/content/api/hot-module-replacement.md
@@ -66,7 +66,7 @@ module.hot.decline(
 );
 ```
 
-Flag a dependency as not-update-able. This makes sense when changing exports of this dependency can be handled or handling is not implemented yet. Depending on your HMR management code an update to this dependencies (or unaccepted dependencies of it) usually causes a full-reload of the page.
+Flag a dependency as not-update-able. This makes sense when changing exports of this dependency can be handled or handling is not implemented yet. Depending on your HMR management code an update to these dependencies (or unaccepted dependencies of it) usually causes a full-reload of the page.
 
 ### `decline` (self)
 
@@ -76,7 +76,7 @@ Reject updates for itself.
 module.hot.decline();
 ```
 
-Flag this module as not-update-able. This make sense when this module has inrevertable side-effects, or HMR handling is not implemented for this module yet. Depending on your HMR management code an update to this module (or unaccepted dependencies) usually causes a full-reload of the page.
+Flag this module as not-update-able. This makes sense when this module has irreversible side-effects, or HMR handling is not implemented for this module yet. Depending on your HMR management code an update to this module (or unaccepted dependencies) usually causes a full-reload of the page.
 
 ### `dispose` (or `addDisposeHandler`)
 
@@ -115,7 +115,7 @@ module.hot.status(); // Will return one of the following strings...
 | ready       | The update is prepared and available                                                   |
 | dispose     | The process is calling the `dispose` handlers on the modules that will be replaced     |
 | apply       | The process is calling the `accept` handlers and re-executing self-accepted modules    |
-| abort       | An update was aborted, but the system is still in it's previous state                  |
+| abort       | An update was aborted, but the system is still in its previous state                  |
 | fail        | An update has thrown an exception and the system's state has been compromised          |
 
 
diff --git a/src/content/contribute/debugging.md b/src/content/contribute/debugging.md
index 8312b9b0c945..c8198b7f93cc 100644
--- a/src/content/contribute/debugging.md
+++ b/src/content/contribute/debugging.md
@@ -5,6 +5,7 @@ contributors:
   - skipjack
   - tbroadley
   - madhavarshney
+  - bhavya9107
 related:
   - title: Learn and Debug webpack with Chrome DevTools!
     url: https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554
@@ -14,7 +15,7 @@ related:
     url: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
 ---
 
-When contributing to the core repo, writing a loader/plugin, or even just working on complex project, debugging tools can be central to your workflow. Whether the problem is slow performance on a large project or an unhelpful traceback, the following utilities can make figuring it out less painful.
+When contributing to the core repo, writing a loader/plugin, or even just working on a complex project, debugging tools can be central to your workflow. Whether the problem is slow performance on a large project or an unhelpful traceback, the following utilities can make figuring it out less painful.
 
 - The [`stats` data](/api/stats) made available through [Node](/api/node#stats-object) and the [CLI](/api/cli#common-options).
 - Chrome __DevTools__ via `node-nightly` and the latest Node.js versions.
@@ -54,7 +55,7 @@ Now, we'll need to run it once to finish the installation:
 node-nightly
 ```
 
-Now, we can simply use `node-nightly` along with the `--inspect` flag to start our build in any webpack-based project. Note that we cannot run NPM `scripts`, e.g. `npm run build`, so we'll have specify the full `node_modules` path:
+Now, we can simply use `node-nightly` along with the `--inspect` flag to start our build in any webpack-based project. Note that we cannot run NPM `scripts`, e.g. `npm run build`, so we'll have to specify the full `node_modules` path:
 
 ``` bash
 node-nightly --inspect ./node_modules/webpack/bin/webpack.js
diff --git a/src/content/contribute/index.md b/src/content/contribute/index.md
index b7584a5e7c25..18f0a58fe0d6 100644
--- a/src/content/contribute/index.md
+++ b/src/content/contribute/index.md
@@ -22,7 +22,7 @@ But what is the return on the investment?
 
 ## Developers
 
-The biggest core feature we'd like to provide is enjoyable development experience. Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about webpack.
+The biggest core feature we'd like to provide is an enjoyable development experience. Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about webpack.
 
 ### How Can I Help?
 
@@ -39,7 +39,7 @@ You can ask your employer to improve your workflow by leveraging webpack: an all
 
 ### Your Contributions
 
-Contributing to webpack is not contributing to an exclusive club. You as a developer are contributing to the overall health of downstream projects. Hundreds, if not thousands, of projects depend on webpack and contributing will make the ecosystem better for all users.
+Contributing to webpack is not contributing to an exclusive club. You as a developer are contributing to the overall health of downstream projects. Hundreds, if not thousands, of projects depend on webpack and contributing will make the ecosystem better for all the users.
 
 The remainder of this section of the site is dedicated to developers such as yourself who would like to become a part of our ever-growing community:
 
@@ -64,7 +64,7 @@ Aside from monetary assistance, companies can support webpack by:
 - Providing developers that are not actively working on a project.
 - Contributing computing power for improved CI and regression testing.
 
-You can also encourage your developers to contribute to the ecosystem by open-sourcing webpack loaders, plugins and other utilities. And, as mentioned above, we would greatly appreciate any help increasing our CI/CD infrastructure.
+You can also encourage your developers to contribute to the ecosystem by open-sourcing webpack loaders, plugins and other utilities. And, as mentioned above, we would greatly appreciate any help in increasing our CI/CD infrastructure.
 
 ### Anyone Else
 

From ce02e4f58a6e95545013c1304e99ee9423ce5148 Mon Sep 17 00:00:00 2001
From: Pierre Neter <pierreneter@gmail.com>
Date: Mon, 25 Feb 2019 15:09:32 +0700
Subject: [PATCH 5/5] fix(styles): Don't let sidebar crossover footer (#2825)

---
 src/components/Sidebar/Sidebar.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index d6244416ae9e..3c82741e8374 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -6,7 +6,6 @@
   display: none;
   width: 100%;
   max-width: 280px;
-  max-height: 100%;
   will-change: transform;
 
   @include break {