feat(printable) cherry-pick SetTrends work and resolve confclicts

.gitignore

@@ -10,4 +10,5 @@ yarn-error.log
 package-lock.json
 .cache
 internal-links.tap
-stats.json
+stats.json
+printable.md

package.json

@@ -25,30 +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 content && cross-env NODE_ENV=production webpack --config webpack.ssg.js && cross-env NODE_ENV=production webpack --config webpack.prod.js  --profile --json > stats.json && webpack-bundle-analyzer stats.json",
+    "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.ssg.js && cross-env NODE_ENV=production webpack --config webpack.prod.js",
+    "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 --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": {

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/Gitter/Gitter.scss

@@ -10,6 +10,10 @@
   @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

@@ -91,7 +91,7 @@ class Page extends React.Component {
           )}
 
           {loadContributors && (
-            <div>
+            <div className="contributors__section">
               <hr />
               <h3>Contributors</h3>
               <Contributors contributors={contributors} />

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();
+}

src/components/PageLinks/PageLinks.scss

@@ -9,6 +9,11 @@
   font-weight: 600;
   text-transform: uppercase;
 
+  @media print {
+    display: flex;
+    align-items: center;
+  }
+
   &__gap {
     margin: 0 1em;
   }
@@ -24,6 +29,15 @@
     margin-left: 0.5em;
   }
 
+  &__print {
+    cursor: pointer;
+
+    img {
+      height: 17px;
+      margin-left: 3px;
+    }
+  }
+
   @include break {
     display: block;
   }

src/components/Print/Print.js

@@ -0,0 +1,52 @@
+import React from 'react';
+// Load Styling
+import './Print.scss';
+import icon from '../../assets/icon-print.svg';
+
+const PRINTABLE_SECTIONS = [
+  'api',
+  'concepts',
+  'configuration',
+  'contribute',
+  'guides',
+  'loaders',
+  'migrate',
+  'plugins'
+];
+
+export default function Print (props) {
+    const { url } = props;
+    const printUrl = _printPageUrlFromUrl(url);
+
+    // not in a printable section
+    if (!url) {
+      return null;
+    }
+
+    return (
+      <div className="sidebar-item sidebar-item--disabled`">
+        <i className="sidebar-item__toggle icon-vertical-bar" />
+        <a class="sidebar-item__title sidebar-link__print" href={_printPageUrlFromUrl(url)}
+          rel="nofollow"
+          alt="Print"
+          title="Print"
+          target="_blank">
+          Print Section
+          <img src={icon} />
+        </a>
+      </div>
+    );
+}
+
+function _printPageUrlFromUrl(urlRaw) {
+    // for now support both trailing slash and without it
+    // when https://github.com/webpack/webpack.js.org/pull/3064 is merged, this is simplified.
+    let url = urlRaw[urlRaw.length-1] === '/' ? urlRaw.substring(0, urlRaw.length-1) : urlRaw;
+    let urlSplit = url.split('/');
+
+    if (!PRINTABLE_SECTIONS.includes(urlSplit[1])) {
+      return false;
+    }
+
+    return (urlSplit.length > 2) ? `/${url.split('/')[1]}/printable/` : `${url}/printable/`;
+  }

src/components/Print/Print.scss

@@ -0,0 +1,10 @@
+.sidebar-link__print {
+  display: flex;
+  vertical-align: center;
+  flex-wrap: nowrap;
+
+  img {
+    height: 20px;
+    margin-right: 2px;
+  }
+}

src/components/Print/PrintScript.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const printScript = `
+window.matchMedia('print').addListener(function(mql) {
+  if (!mql.matches) {
+      window.close();
+  }
+});
+window.print();
+`;
+export default function PrintScript () {
+  return (
+    <script dangerouslySetInnerHTML={{ __html: printScript }}></script>
+  );
+}

src/components/Sidebar/Sidebar.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 // Import Local Components
 import Shield from '../Shield/Shield';
 import SidebarItem from '../SidebarItem/SidebarItem';
+import Print from '../Print/Print';
 
 // Load Styling
 import './Sidebar.scss';
@@ -16,13 +17,15 @@ export default ({
   ...props
 }) => {
   let group;
-
   return (
     <nav className={`sidebar ${className}`}>
       <div className="sidebar__inner">
-        <a href="https://github.com/webpack/webpack/releases">
-          <Shield content="npm/v/webpack" label="webpack" />
-        </a>
+        <div className="sidebar__shields">
+          <a href="https://github.com/webpack/webpack/releases">
+            <Shield content="npm/v/webpack" label="webpack" />
+          </a>
+        </div>
+        <Print url={currentPage} />
 
         {pages.map((page, index) => {
           let displayGroup = group !== page.group && page.group !== '-';

src/components/Sidebar/Sidebar.scss

@@ -34,3 +34,20 @@
   text-transform: uppercase;
   color: getColor(dusty-grey);
 }
+
+.sidebar__shields {
+  display: flex;
+  flex-wrap: wrap;
+
+  a {
+    margin-right: 6px;
+
+    img {
+      height: 20px;
+    }
+
+    &:last-child {
+      margin: 0;
+    }
+  }
+}

src/components/Site/Site.scss

@@ -13,3 +13,11 @@
     flex: 0 0 280px;
   }
 }
+
+@media print {
+  header,
+  nav,
+  footer {
+    display: none;
+  }
+}

src/scripts/concatenate-docs.js

@@ -0,0 +1,73 @@
+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');
+const outFileName = 'printable.md';
+
+console.info('Concatenating *.md files of each content directory to create chapter-wide help files to be used for printing');
+
+// getDirectoryRecursive() recursively walks through all sub directories of the provided path
+// concatenates the .md 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) {
+	console.log(`Processing: ${basePath}`);
+
+	// create destination file name of compound file
+	const targetFilePath = path.join(basePath, outFileName);
+
+	// list current working directory
+	fs.readdir(basePath, function (err, fileNames) {
+		if (err) throw err;
+
+		let fileContents = [];
+
+		for (let file of fileNames) {
+			const fullPath = path.join(basePath, file);
+
+			// if the directory entry is a directory, recurse into that directory
+			if (fs.statSync(fullPath).isDirectory()) {
+				getDirectoryRecursive(fullPath);
+			} else if (fullPath.endsWith('.md') || fullPath.endsWith('.mdx')) {
+				let fc = fileContents[fileContents.length] = front(fs.readFileSync(fullPath).toString());
+			}
+		}
+
+		// 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;
+				const 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) {
+      // use FrontMatter 'title' attribute as main heading of target file
+			targetFile.write(os.EOL + os.EOL + '# ' + file.attributes.title + os.EOL);
+			targetFile.write(file.body);
+		}
+
+		targetFile.end();
+	});
+}
+
+getDirectoryRecursive(rootPath);
+
+// end message
+process.on('exit', () =>
+  console.info(`Successfully created "${outFileName}" files in each directory within ${rootPath}`)
+);