Merge remote-tracking branch 'upstream/next' into next

Author: EugeneHlushko

.github/ISSUE_TEMPLATE.md

@@ -1,4 +1,6 @@
 - [ ] Check the current issues to ensure you aren't creating a duplicate.
 - [ ] Consider making small typo fixes and such directly as pull requests.
+- [ ] For the voting application, go to https://github.com/webpack-contrib/voting-app.
+- [ ] For loader/plugin docs, consider opening an issue in the corresponding repository.
 - [ ] No existing issue? Go ahead and open a new one.
 - __Remove these instructions from your PR as they are for your eyes only.__

README.md

@@ -1,47 +1,61 @@
 # webpack.js.org
 
-[![build status](https://secure.travis-ci.org/webpack/webpack.js.org.svg)](http://travis-ci.org/webpack/webpack.js.org)
-[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version)
+[![Build Status][13]][10]
+[![Standard Version][12]][11]
 
 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:
+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, Organize, Define Clear Goals][2]
+- [Concepts - Review and Organize][2]
+- [API - v4 Rewrite][8]
 
-We haven't created issues for the other sections yet, but they will be coming soon. For
-dev-related work please see [General - Current Longterm Plan][3], which will soon be
-replaced by a more dev-specific issue.
+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].
 
 
 ## Translation
 
-If you hope to localize this documentation please jump to the [translate branch][4].
+To help translate this documentation please jump to the [translate branch][4].
 
 
 ## 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 start working on the site
-locally.
+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
+start working on the site locally.
 
 
 ## License
 
 The content is available under the [Creative Commons BY 4.0][6] 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/1380
+[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

browserstack-logo.png

@@ -45,20 +45,20 @@
     "antwar-helpers": "^0.19.0",
     "antwar-interactive": "^0.19.0",
     "async": "^2.5.0",
-    "autoprefixer": "^7.1.3",
+    "autoprefixer": "^7.2.3",
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.3.0",
     "css-loader": "^0.28.5",
     "duplexer": "^0.1.1",
     "eslint": "4.5.0",
     "eslint-loader": "^1.9.0",
-    "eslint-plugin-markdown": "^1.0.0-beta.6",
+    "eslint-plugin-markdown": "^1.0.0-beta.7",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^0.11.2",
     "fontgen-loader": "^0.2.1",
@@ -67,22 +67,22 @@
     "github": "^10.0.0",
     "html-webpack-plugin": "^2.30.1",
     "http-server": "^0.10.0",
-    "hyperlink": "^3.0.0",
+    "hyperlink": "^3.0.1",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "markdown-loader": "^2.0.1",
     "markdownlint": "^0.6.0",
     "markdownlint-cli": "^0.3.1",
-    "marked": "^0.3.6",
+    "marked": "^0.3.7",
     "mkdirp": "^0.5.1",
     "modularscale-sass": "^3.0.3",
-    "moment": "^2.18.1",
+    "moment": "^2.20.1",
     "ncp": "^2.0.0",
     "node-sass": "^4.5.3",
     "npm-run-all": "^4.1.1",
     "postcss-loader": "^2.0.6",
     "prism-languages": "^0.3.3",
-    "prismjs": "^1.6.0",
+    "prismjs": "^1.9.0",
     "raw-loader": "^0.5.1",
     "request": "^2.81.0",
     "sass-loader": "^6.0.6",
@@ -92,21 +92,22 @@
     "tap-parser": "^6.0.1",
     "through2": "^2.0.3",
     "url-loader": "^0.5.9",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.7.1",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.7",
     "webpack-merge": "^4.1.0",
     "yaml-frontmatter-loader": "^0.1.0"
   },
   "dependencies": {
-    "ajv": "^5.2.2",
-    "preact": "^8.2.5",
+    "ajv": "^5.5.2",
+    "preact": "^8.2.7",
     "preact-compat": "3.17.0",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "tool-list": "^0.11.0",
+    "webpack.vote": "^0.1.2",
     "whatwg-fetch": "^2.0.3"
   }
 }

package.json

@@ -15,8 +15,12 @@
     "title": "Contribute",
     "url": "contribute"
   },
+  {
+    "title": "Vote",
+    "url": "vote"
+  },
   {
     "title": "Blog",
     "url": "//medium.com/webpack"
   }
-]
+]

src/assets/homepage-modules.svg

@@ -2,7 +2,7 @@ import React from 'react';
 import Container from '../Container/Container';
 import testLocalStorage from '../../utilities/test-local-storage';
 
-const version = '1';
+const version = '2';
 const localStorageIsEnabled = testLocalStorage() !== false;
 
 export default class NotificationBar extends React.Component {
@@ -13,17 +13,16 @@ export default class NotificationBar extends React.Component {
       <div className={ `notification-bar ${dismissedMod}` }>
         <Container className="notification-bar__inner">
           <p>
-            Sponsor webpack and get apparel at the same time! Visit <a href="https://webpack.threadless.com">the official webpack shop!</a>&nbsp; All proceeds go to webpack's <a href="https://opencollective.com/webpack">Open Collective page!</a>
-          </p>
-          <p>
-            Buy the brand-new webpack stickers at <a href="http://www.unixstickers.com/tag/webpack">Unixstickers!</a>
-            {localStorageIsEnabled ?
-              <button
-                className="notification-bar__close icon-cross"
-                onClick={ this._close.bind(this) } /> :
-              null
-            }
+            Sponsor webpack and get apparel from the <a href="https://webpack.threadless.com">official shop</a>&nbsp;
+            or get stickers <a href="http://www.unixstickers.com/tag/webpack">here</a>! All proceeds go to our&nbsp;
+            <a href="https://opencollective.com/webpack">open collective</a>!
           </p>
+          { localStorageIsEnabled ?
+            <button
+              className="notification-bar__close icon-cross"
+              onClick={ this._close.bind(this) } /> :
+            null
+          }
         </Container>
       </div>
     );

src/components/Navigation/Links.json

@@ -5,10 +5,6 @@
   color: getColor(white);
   background: getColor(emperor);
 
-  p:not(:last-child) {
-    padding-bottom: 1em;
-  }
-
   a {
     color: getColor(malibu);
 
@@ -32,15 +28,15 @@
 }
 
 .notification-bar__close {
-  color: getColor(white);
-  font-size: 16px;
-  padding: 0;
-  background: none;
-  border: none;
   position: absolute;
+  font-size: 16px;
   top: 10px;
   right: 1em;
+  padding: 0;
+  border: none;
   cursor: pointer;
+  color: getColor(white);
+  background: none;
   transition: color 250ms;
 
   &:hover {

src/components/NotificationBar/NotificationBar.jsx

@@ -44,9 +44,17 @@ const Site = ({
             title: section.path.title,
             url: section.url,
             pages: section.pages.map(page => ({
+              file: page.file,
               title: page.file.title,
               url: page.url
-            }))
+            })).sort(({ file: { attributes: a }}, { file: { attributes: b }}) => {
+              let group1 = a.group.toLowerCase();
+              let group2 = b.group.toLowerCase();
+
+              if (group1 < group2) return -1;
+              if (group1 > group2) return 1;
+              return a.sort - b.sort;
+            })
           }))
       } />
 

src/components/NotificationBar/NotificationBar.scss

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Cube from '../Cube/Cube';
 import TextRotator from '../TextRotater/TextRotater';
-import Modules from '../../assets/homepage-modules.svg';
+import homeSVG from './SplashVizSVG';
 
 export default class SplashViz extends React.Component {
 
@@ -18,9 +18,7 @@ export default class SplashViz extends React.Component {
             <span> styles </span>
           </TextRotator>
         </h1>
-        <div className="splash-viz__modules">
-          <img src={ Modules } alt="dependency bundling graphic"/>
-        </div>
+        <div className="splash-viz__modules" dangerouslySetInnerHTML={{__html: homeSVG.body}}></div>
         <Cube className="splash-viz__cube" depth={ 120 } repeatDelay={ 5000 } continuous/>
       </section>
     );

src/components/Site/Site.jsx

@@ -27,16 +27,17 @@
     position: absolute;
     left: 0;
     right: 0;
-    top: 0;
+    top: 50%; // vertical center
     bottom: 0;
     width: 75vw;
     min-width: 550px;
     max-width: map-get($screens, large);
-    margin: auto;
+    margin: 0 auto;
+    transform: translateY(-50%); // vertical center
     display: none;
 
     @include break {
-      display: block;
+      display: table; // Get height of its child svg
     }
 
     img {