Merge pull request webpack#3 from webpack-china/cn

merge from webpack-china

Author: lcxfs1991

.gitignore

@@ -3,3 +3,4 @@ npm-debug.log
 build
 # generated
 .antwar
+.idea

.travis.yml

@@ -8,6 +8,8 @@ node_js:
 script:
   - bash ./scripts/deploy.sh
 sudo: required
+cache: yarn
 install:
-  - npm install
+  - npm i yarn -g
+  - yarn
   - sudo pip install proselint

CONTRIBUTING.md

@@ -40,7 +40,7 @@ Issue the PR to the [master](https://github.com/webpack/webpack.js.org/tree/mast
 
 ## Contribution Recognition
 
-Any document that you edit, you can choose to add your GitHub username at the top of the document for recognition:
+You can choose to add your GitHub username for recognition at the top of any markdown document you edit:
 
 **example.md**
 
@@ -59,7 +59,7 @@ contributors:
 
 ```
 
-This will add your name and GitHub profile photo to the document in production. This is a great way to own the awesome work that you do and encourage that you remember to do this in your PR's.
+This will add your name and GitHub profile photo to the document in production. It's a great way to own the awesome work that you do and we encourage you to do this in your PRs.
 
 
 ## Thank you

PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,4 @@
 1. [Read and sign the CLA](https://cla.js.foundation/webpack/webpack.js.org). This needs to be done only once. PRs that haven't signed it won't be accepted.
 2. Make sure your PR complies with [the writer's guide](https://webpack.js.org/writers-guide/).
 3. Read through the PR diff carefully as sometimes this can reveal issues. The work will be reviewed, but this can save some effort.
+4. Remove these instructions from your PR as they are for your eyes only.

README.md

@@ -1,5 +1,6 @@
 # webpack 中文文档
 
+> https://doc.webpack-china.org webpack 中文文档
 > https://webpack-china.org webpack 中文社区
 
 - [webpack 2 翻译任务认领说明 - 入口目录](https://github.com/webpack-china/webpack.js.org/issues/17)

antwar.config.js

@@ -38,16 +38,13 @@ module.exports = {
       }
     ),
 
-    'get-started': section(
-      '起步',
-      function() {
-        return require.context(
-          'json-loader!yaml-frontmatter-loader!./content/get-started',
-          false,
-          /^\.\/.*\.md$/
-        )
+    'get-started': {
+      redirects: {
+        '': '/guides/get-started',
+        'install-webpack': '/guides/installation',
+        'why-webpack': '/guides/why-webpack',
       }
-    ),
+    },
 
     concepts: section(
       '概念',
@@ -71,6 +68,17 @@ module.exports = {
       }
     ),
 
+    development: section(
+      '开发',
+      function() {
+        return require.context(
+          'json-loader!yaml-frontmatter-loader!./content/development',
+          true,
+          /^\.\/.*\.md$/
+        );
+      }
+    ),
+
     configuration: section(
       '配置',
       function() {
@@ -137,7 +145,7 @@ module.exports = {
         return combineContexts(content, generated);
       }
     ),
-    
+
     vote: {
       path() {
         return require('./components/vote/list.jsx').default
@@ -166,7 +174,7 @@ module.exports = {
 
 function root(contentCb) {
   return {
-    title: 'Webpack',
+    title: 'webpack',
     path: function() { // Load path content
       return contentCb();
     },
@@ -231,11 +239,9 @@ function combineContexts(context1, context2) {
     }
   }
   webpackContext.keys = () => {
-    "use strict";
-
     let keys1 = context1.keys();
     let keys2 = context2.keys();
-    return _.chain(keys1).concat(keys2).uniq().value();
+    return _.chain(keys1).concat(keys2).sortBy().uniq().value();
   };
   return webpackContext;
 }

assets/awesome-badge.svg

@@ -11,4 +11,6 @@ antwar[environment]({
   webpack: require('./webpack.config')
 }).catch(function (err) {
   console.error(err);
+
+  process.exit(1);
 });

assets/icon-square-small-slack.png

@@ -78,12 +78,22 @@ export default class Cube extends React.Component {
       let degrees = 0;
       let axis = 'y';
 
-      this._interval = setInterval(() => {
-        let obj = {};
-        obj[axis] = degrees += 90;
-
-        this.setState({ ...obj, iteration: (this.state.iteration + 1) % 4 });
-      }, repeatDelay);
+      let lastTime = performance.now();
+      let animation = () => {
+        let nowTime = performance.now();
+        let deltaTime = nowTime - lastTime;
+
+        if (repeatDelay <= deltaTime) {
+          let obj = {};
+          obj[axis] = degrees += 90;
+
+          this.setState({ ...obj, iteration: (this.state.iteration + 1) % 4 });
+          lastTime = performance.now();
+        }
+
+        this._requestAnimation = requestAnimationFrame(animation);
+      };
+      animation();
     }
   }
 
@@ -95,7 +105,7 @@ export default class Cube extends React.Component {
       this.container.removeEventListener('mouseleave', this.listeners.reset);
 
     } else if (continuous) {
-      clearInterval(this._interval);
+      cancelAnimationFrame(this._requestAnimation);
     }
   }
 

bootstrap.js

@@ -7,13 +7,13 @@ import './footer-style';
 
 export default (props) => {
   return (
-    <div className="footer">
+    <footer className="footer">
       <Container className="footer__inner">
         <section className="footer__left">
-          <Link className="footer__link" to="/get-started">起步</Link>
+          <Link className="footer__link" to="/guides/get-started">起步</Link>
           <Link className="footer__link" to="/organization">组织</Link>
           <Link className="footer__link" to="/contribute">贡献</Link>
-          <Link className="footer__link" to="/get-started/why-webpack#comparison">比较</Link>
+          <Link className="footer__link" to="/guides/why-webpack#comparison">比较</Link>
         </section>
 
         <section className="footer__middle">
@@ -31,6 +31,6 @@ export default (props) => {
           <CC />
         </section>
       </Container>
-    </div>
+    </footer>
   );
 };

components/cube/cube.jsx

@@ -19,21 +19,26 @@ let Sections = [
     children: [
       { title: 'API', url: 'api' },
       { title: '配置', url: 'configuration' },
-      { title: '加载器', url: 'loaders' },
-      { title: '插件', url: 'plugins' }
+      { title: 'LOADER', url: 'loaders' },
+      { title: '插件', url: 'plugins' },
+      { title: '开发', url: 'development' }
     ]
   },
   {
     title: '捐赠',
     url: '//opencollective.com/webpack'
+  },
+  {
+    title: 'Blog',
+    url: '//medium.com/webpack'
   }
 ];
 
 // TODO: Move back to using state once we can handle algolia on our own
 export default class Navigation extends React.Component {
   render() {
     let { pageUrl = '' } = this.props;
-    
+
     return (
       <header className="navigation">
         <Container className="navigation__inner">

components/footer/footer.jsx

@@ -15,7 +15,7 @@
 	{
 		"repo": "webpack/loader-utils",
 		"npm": "loader-utils",
-		"description": "Webpack loader utilities.",
+		"description": "webpack loader utilities.",
 		"maintainer": "sokra"
 	},
 	{
@@ -289,4 +289,3 @@
 		"maintainer": "thelarkinn"
 	}
 ]
-	

components/navigation/navigation.jsx

@@ -9,9 +9,10 @@
 }
 
 // XXX: Temporary hack to fix sidebar width
-.page div:first-of-type {
+.page > div:first-of-type {
   flex: 0 0 auto;
-  overflow: auto;
+  position: relative;
+  overflow: hidden;
 
   @include break {
     flex:0 0 30%;

components/organization/projects.json

@@ -2,10 +2,12 @@
 @import 'functions';
 
 .sidebar-item {
+  position: relative;
   font-size: getFontSize(-1);
   margin-bottom: 0.75em;
 
   &__title {
+    padding-right: 15px;
     font-weight: 400;
     text-decoration: none;
     color: inherit;
@@ -16,11 +18,13 @@
   }
 
   &__toggle {
-    float: right;
+    position: absolute;
+    right: 0;
     line-height: 1.5;
     cursor: pointer;
     color: getColor(dusty-grey);
     transition: color 250ms;
+    margin-left: 1.5rem;
 
     &:hover {
       color: getColor(mine-shaft);
@@ -76,4 +80,4 @@
       display: none;
     }
   }
-}
+}

components/page/page-style.scss

@@ -36,8 +36,14 @@ export default class SidebarItem extends React.Component {
   }
 
   toggle(e) {
+    let { onToggle } = this.props;
+
     this.setState({
       open: !this.state.open
+    }, () => {
+      if (typeof onToggle === 'function') {
+        onToggle();
+      }
     });
   }
 }

components/sidebar-item/sidebar-item-style.scss

@@ -2,10 +2,10 @@
 @import 'mixins';
 
 .sidebar {
-  position: relative;
   display: none;
-  flex: 1;
-  min-height: 100%;
+  width: 100%;
+  max-height: 100%;
+  overflow: auto;
 
   @include break {
     display:block;
@@ -14,6 +14,5 @@
 
 .sidebar__inner {
   padding: 1.5em;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
 }