Merge branch 'master' into add-live-reload-docs

.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",
+    "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": {

sitemap-ignore.json

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

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

@@ -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

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

src/components/PageLinks/PageLinks.scss

@@ -4,11 +4,19 @@
 .page-links {
   position: absolute;
   display: none;
-  top: 1.5em;
+  top: 0.5em;
   right: 1.5em;
   font-weight: 600;
   text-transform: uppercase;
 
+  @media print {
+    display: none;
+  }
+
+  @include break {
+    display: block;
+  }
+
   &__gap {
     margin: 0 1em;
   }
@@ -24,7 +32,12 @@
     margin-left: 0.5em;
   }
 
-  @include break {
-    display: block;
+  &__print {
+    cursor: pointer;
+
+    img {
+      height: 17px;
+      margin-left: 3px;
+    }
   }
 }

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

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  background: #ffffff;
 
   &__content {
     flex: 1 1 auto;
@@ -13,3 +14,11 @@
     flex: 0 0 280px;
   }
 }
+
+@media print {
+  header,
+  nav,
+  footer {
+    display: none;
+  }
+}