├── favicon.ico
├── jsconfig.json
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── assist
    │   ├── images
    │   │   └── loading.gif
    │   └── styles
    │   │   ├── layout.scss
    │   │   ├── about.scss
    │   │   ├── items.scss
    │   │   ├── variables.scss
    │   │   ├── reset.scss
    │   │   └── main.scss
    ├── store
    │   ├── index.js
    │   ├── home.js
    │   ├── detail.js
    │   └── items.js
    ├── utils
    │   ├── objectEmpty.js
    │   └── getDate.js
    ├── compontens
    │   ├── common
    │   │   ├── footer.js
    │   │   └── header.js
    │   ├── App.js
    │   ├── home.js
    │   ├── detail.js
    │   ├── about.js
    │   └── itemsList.js
    ├── config
    │   └── config.js
    ├── index.js
    ├── routers
    │   └── index.js
    └── registerServiceWorker.js
├── .travis.yml
├── .idea
    ├── vcs.xml
    ├── vagrant.xml
    └── codeStyleSettings.xml
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── manifest.json
├── .gitignore
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
├── LICENSE
├── package.json
├── index.html
├── README-zh.md
└── README.md


/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hancoson/react-mobx-demo/HEAD/favicon.ico


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "experimentalDecorators": true
4 |   }
5 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hancoson/react-mobx-demo/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assist/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hancoson/react-mobx-demo/HEAD/src/assist/images/loading.gif


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "6"
4 | after_success:
5 |   - bash <(curl -s https://codecov.io/bash)


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/vagrant.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VagrantProjectSettings">
4 |     <option name="instanceFolder" value="" />
5 |     <option name="provider" value="" />
6 |   </component>
7 | </project>


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-07 15:43:32
 4 |  * @version 0.0.1
 5 |  */
 6 | import {homeStore} from './home'
 7 | import {itemsStore} from './items'
 8 | import {detailStore} from './detail'
 9 | 
10 | export {homeStore, itemsStore, detailStore}


--------------------------------------------------------------------------------
/src/utils/objectEmpty.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han 
 3 |  * @Date: 2017-12-08 17:27:43 
 4 |  * @version 0.0.1 
 5 |  */
 6 | 
 7 | export const isEmptyObject = obj => {
 8 |   for (var key in obj) {
 9 |     if (obj.hasOwnProperty(key)) {
10 |       return false;
11 |     }
12 |   }
13 |   return true;
14 | }


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/compontens/common/footer.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han 
 3 |  * @Date: 2017-12-08 17:24:24 
 4 |  * @version 0.0.1 
 5 |  */ 
 6 | 
 7 | import React, { Component } from 'react'
 8 | export default class Footer extends Component {
 9 | 
10 |   render() {
11 |     return (
12 |       <footer>
13 |         &copy;&nbsp;
14 |         <a href="http://www.vsoui.com" rel="noopener noreferrer" target="_blank">Haley</a>
15 |       </footer>
16 |     )
17 |   }
18 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | # /build
11 | /build/manifest.json
12 | 
13 | # misc
14 | .idea
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | #styles
26 | /src/assist/styles/*.css
27 | 


--------------------------------------------------------------------------------
/src/config/config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-11 16:53:56
 4 |  * @version 0.0.1
 5 |   */
 6 | export default {
 7 |   URL_PREFIX  : 'http://daily.zhihu.com/story/',
 8 |   API         : 'http://news-at.zhihu.com/api/4/news/before/',//消息列表
 9 |   NEWS        : 'http://news-at.zhihu.com/api/4/news/',//消息内容获取
10 |   YAHOO       : 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url=%22',
11 |   YAHOO_SUFFIX: '%22&format=json'
12 | };


--------------------------------------------------------------------------------
/src/store/home.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-07 15:46:16
 4 |  * @version 0.0.1
 5 |  */
 6 | import {observable, action} from 'mobx';
 7 | 
 8 | class HomeStore {
 9 |   @observable text;
10 |   @observable num;
11 | 
12 |   constructor() {
13 |     this.num = 0
14 |     this.text = 'Hello Word!'
15 |   }
16 | 
17 |   @action plus = () => {
18 |     this.num = ++this.num
19 |   }
20 |   @action minus = () => {
21 |     this.num = --this.num
22 |   }
23 | }
24 | 
25 | const homeStore = new HomeStore()
26 | 
27 | export {homeStore}


--------------------------------------------------------------------------------
/src/assist/styles/layout.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 | * 
 3 | * @author Guoxing.Han(hancoson#163.com)
 4 | * @time 2016/11/14.
 5 | */
 6 | @import 'variables.scss';
 7 | body{
 8 | }
 9 | .main{
10 |   width: 1200px;
11 |   position: relative;
12 |   margin: 0 auto;
13 | }
14 | section{
15 |   @extend .border-box;
16 |   width: 100%;
17 |   margin-top: 40px;
18 | }
19 | 
20 | 
21 | .index-warp{
22 |   text-align: center;
23 |   padding: 100px 0
24 | }
25 | 
26 | 
27 | footer{
28 |   width: 100%;
29 |   text-align: center;
30 |   padding: 20px 0;
31 |   color: #999;
32 |   font-size: 13px;
33 |   background: #fff;
34 |   border-top:#f0f0f0 1px solid;
35 |   margin-top: 20px;
36 | }
37 | 
38 | .loading{
39 |   margin: 100px auto;
40 |   text-align: center;
41 | }
42 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han 
 3 |  * @Date: 2017-12-25 17:23:43 
 4 |  * @version 0.0.1 
 5 |   */
 6 | import React from 'react';
 7 | import ReactDOM from 'react-dom';
 8 | import {useStrict} from 'mobx';
 9 | import {HashRouter as Router} from 'react-router-dom'
10 | import {Provider} from 'mobx-react';
11 | import * as stores from './store';
12 | 
13 | import App from './compontens/App'
14 | 
15 | import './assist/styles/main.css';
16 | import registerServiceWorker from './registerServiceWorker';
17 | 
18 | useStrict(true) // 不允许在动作之外进行状态修改
19 | 
20 | ReactDOM.render(
21 |   <Provider store={stores}>
22 |   <Router>
23 |     <App/>
24 |   </Router>
25 | </Provider>, document.getElementById('root'));
26 | registerServiceWorker();
27 | 


--------------------------------------------------------------------------------
/src/compontens/App.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-08 17:24:43
 4 |  * @version 0.0.1
 5 |  */
 6 | import React, {Component} from 'react'
 7 | import {observer, inject} from 'mobx-react'
 8 | import {withRouter} from 'react-router-dom'
 9 | //import DevTools from 'mobx-react-devtools';
10 | 
11 | import Main from './../routers';
12 | 
13 | import Header from './common/header'
14 | import Footer from './common/footer'
15 | 
16 | @withRouter @inject('store') @observer
17 | class App extends Component {
18 | 
19 |   render() {
20 |     return (
21 |       <div className="main">
22 |         <Header {...this.props.location}/>
23 | 
24 |         <Main/>
25 | 
26 |         <Footer/>
27 |         {/* <DevTools/> */}
28 |       </div>
29 |     )
30 |   }
31 | }
32 | 
33 | export default App


--------------------------------------------------------------------------------
/src/routers/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-08 17:26:17
 4 |  * @version 0.0.1
 5 |   */
 6 | import React from 'react'
 7 | import {Route, Switch} from 'react-router-dom'
 8 | 
 9 | import Index from './../compontens/home'
10 | import About from './../compontens/about'
11 | import Items from './../compontens/itemsList'
12 | import Detail from './../compontens/detail'
13 | 
14 | const Main = () => (
15 |   <Switch>
16 |     <Route exact path="/" render={(props) => (<Index {...props}/>)}/>
17 |     <Route path="/about" component={About}/>
18 |     <Route path="/items" render={(props) => (<Items {...props}/>)}/>
19 |     <Route exact path="/news/:id" render={(props) => (<Detail {...props}/>)}/>
20 |     <Route render={() => <h1>找不到此页面</h1>}/>
21 |   </Switch>
22 | )
23 | 
24 | export default Main;


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/store/detail.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author Guoxing.Han(hancoson#163.com)
 3 |  * @time 2017/12/13
 4 |  */
 5 | import {observable, action} from 'mobx'
 6 | import Config from './../config/config'
 7 | 
 8 | class DetailStore {
 9 |   @observable detail
10 | 
11 |   constructor() {
12 |     this.detail = {}
13 |   }
14 | 
15 |   @action emptyData=()=>{
16 |     this.detail = {}
17 |   }
18 | 
19 |   @action fetchDetailData = (id) => {
20 |     fetch(Config.YAHOO + Config.NEWS + id + Config.YAHOO_SUFFIX).then(
21 |       action('fetchRes', res => {
22 |         return res.json()
23 |       })).then(
24 |       action('fetchSuccess', data => {
25 |         this.detail = data.query.results.json;
26 |       })).catch(
27 |       action('fetchError', e => {
28 |         console.log(e.message)
29 |       }))
30 |   }
31 | 
32 | }
33 | 
34 | const detailStore = new DetailStore()
35 | export {detailStore}
36 | 


--------------------------------------------------------------------------------
/src/utils/getDate.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han 
 3 |  * @Date: 2017-12-08 17:27:28 
 4 |  * @version 0.0.1 
 5 | */
 6 | 
 7 | //获取当天时间并格式化
 8 | export const getDate = () => {
 9 |   let d = new Date();
10 |   let m = d.getMonth() + 1;
11 |   let dd = d.getDate();
12 |   if (m < 10) {
13 |     m = '0' + m.toString()
14 |   }
15 |   if (dd < 10) {
16 |     dd = '0' + dd.toString()
17 |   }
18 |   let str = d
19 |     .getFullYear()
20 |     .toString() + m + dd.toString();
21 |   return str
22 | }
23 | 
24 | //格式化时间
25 | export const subString = str => {
26 |   let _y = '',
27 |     _m = '',
28 |     _d = '';
29 |   _y = str.substring(0, 4);
30 |   _m = str.substring(4, 6);
31 |   _d = str.substring(6, 8);
32 |   return (_y + '/' + _m + '/' + _d)
33 | 
34 | }
35 | //格式化时间
36 | export const timeClear = str => {
37 |   let _t = '';
38 |   str
39 |     .split('-')
40 |     .forEach((i) => {
41 |       _t = _t + i.toString()
42 |     })
43 |   return _t
44 | 
45 | }


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 |   require('raf').polyfill(global);
22 | }
23 | 


--------------------------------------------------------------------------------
/src/assist/styles/about.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 | * @author Guoxing.Han(hancoson#163.com)
 3 | * @time 2017/1/13.
 4 | */
 5 | .about-warp {
 6 |   h1 {
 7 |     padding-bottom: 5px;
 8 |     border-bottom: 1px #f0f0f0 solid;
 9 |     font-size: 32px;
10 |     margin-bottom: 20px;
11 |   }
12 |   ul {
13 |     padding-left: 20px;
14 |     li {
15 |       line-height: 1.6;
16 |       list-style: circle;
17 |     }
18 |   }
19 |   h2 {
20 |     font-size: 26px;
21 |   }
22 |   code{
23 |     padding: 2px 4px;
24 |     font-size: 90%;
25 |     color: #c7254e;
26 |     background-color: #f9f2f4;
27 |     border-radius: 4px;
28 |     font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
29 |   }
30 |   pre{
31 |     display: block;
32 |     padding: 9.5px;
33 |     margin: 0 0 10px;
34 |     font-size: 13px;
35 |     line-height: 1.42857143;
36 |     color: #333;
37 |     word-break: break-all;
38 |     word-wrap: break-word;
39 |     background-color: #f5f5f5;
40 |     border: 1px solid #ccc;
41 |     border-radius: 4px;
42 |   }
43 | }


--------------------------------------------------------------------------------
/src/assist/styles/items.scss:
--------------------------------------------------------------------------------
 1 | .items-warp {
 2 |   width: 100%;
 3 |   margin-top: 10px;
 4 |   .bar {
 5 |     width: 100%;
 6 |     background: #f7f7f7;
 7 |     padding: 10px;
 8 |   }
 9 |   .gutter-example .ant-row > div {
10 |     border: 0;
11 |   }
12 |   .gutter-box {
13 |     background: #00A0E9;
14 |     padding: 5px 0;
15 |   }
16 |   .item {
17 |     display: block;
18 |     padding: 10px;
19 |     height: 100px;
20 |     position: relative;
21 |     background: #f5f5f5;
22 |     border-radius: 10px;
23 |     margin: 10px 0 10px;
24 |     transition: all .2s linear 0s;
25 |     &:hover{
26 |       box-shadow: 0 5px 10px rgba(0,0,0,.1);
27 |     }
28 |     img{
29 |       display: block;
30 |       width: 80px;
31 |       height: 80px;
32 |       float: left;
33 |       margin-right: 10px;
34 |     }
35 |     p{
36 |       font-size: 14px;
37 |       line-height: 1.4;
38 |       color: #31b9ff;
39 |     }
40 |     sub{
41 |       font-size: 13px;
42 |       position: absolute;
43 |       bottom: 13px;
44 |       right: 13px;
45 |       color: #999;
46 |     }
47 |   }
48 | 
49 | }


--------------------------------------------------------------------------------
/src/compontens/home.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-08 17:25:00
 4 |  * @version 0.0.1
 5 |  */
 6 | import React, {Component} from 'react'
 7 | import {inject, observer} from "mobx-react";
 8 | 
 9 | @inject("store") @observer
10 | export default class Index extends Component {
11 |   constructor(props) {
12 |     super(props)
13 |     this.store = props.store.homeStore
14 |     this.plus = this.store.plus
15 |     this.minus = this.store.minus
16 |   }
17 | 
18 |   render() {
19 |     const {text,num} = this.store
20 |     return (
21 |       <div>
22 |         <div className='index-warp'><span>{text}</span></div>
23 |         <div style={{textAlign: 'center'}}>
24 |           <span style={{background: '#666', color: '#fff', padding: '5px'}} onClick={this.minusHandle.bind(this)}>-</span>
25 |           <span>{num}</span>
26 |           <span style={{background: '#666', color: '#fff', padding: '5px'}} onClick={this.plusHandle.bind(this)}>+</span>
27 |         </div>
28 |       </div>
29 |     )
30 |   }
31 | 
32 |   plusHandle() {
33 |     this.plus()
34 |   }
35 |   minusHandle() {
36 |     this.minus()
37 |   }
38 | 
39 | }
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Hancoson(hancoson#163.com)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/compontens/detail.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han 
 3 |  * @Date: 2017-12-08 17:24:52 
 4 |  * @version 0.0.1 
 5 |   */
 6 | import React, { Component } from 'react'
 7 | import { Spin } from 'antd';
 8 | import { isEmptyObject } from './../utils/objectEmpty'
 9 | import {inject, observer} from "mobx-react";
10 | 
11 | @inject("store") @observer
12 | export default class Detail extends Component {
13 |   constructor(props){
14 |     super(props)
15 |     this._id = props.match.params.id
16 |     this.store = props.store.detailStore
17 |   }
18 |   componentWillMount() {
19 |     const { fetchDetailData, emptyData } = this.store;
20 |     //调取数据
21 |     fetchDetailData(this._id)
22 |     //清空原有的数据
23 |     emptyData()
24 |   }
25 | 
26 |   createMarkup() {
27 |     var _fonts = this.store.detail.body;
28 |     return { __html: _fonts };
29 |   }
30 | 
31 |   render() {
32 |     const _o = this.store.detail;
33 | 
34 |     return (
35 |       <div>
36 |         {
37 |           isEmptyObject(_o) ?
38 |             <div className="loading">
39 |               <Spin size="large" />
40 |             </div> :
41 |             <div dangerouslySetInnerHTML={this.createMarkup()}></div>
42 |         }
43 |       </div>
44 | 
45 |     )
46 |   }
47 | }


--------------------------------------------------------------------------------
/src/store/items.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-11 16:48:57
 4 |  * @version 0.0.1
 5 |  */
 6 | import {observable, action, computed, autorun} from 'mobx';
 7 | 
 8 | import Config from './../config/config'
 9 | import {getDate, subString, timeClear} from './../utils/getDate'
10 | 
11 | class ItemsStore {
12 |   @observable items;
13 |   @observable dataTime;
14 | 
15 |   constructor() {
16 |     this.items = []
17 |     this.dataTime = ''
18 |   }
19 | 
20 |   @computed get total() {
21 |     return this.items.length;
22 |   }
23 | 
24 |   @action
25 |   fetchData = (time) => {
26 |     fetch(Config.YAHOO + Config.API + time + Config.YAHOO_SUFFIX).then(
27 | 
28 |       action('fetchRes', res => {
29 |         return res.json()
30 |       })).then(
31 | 
32 |       action('fetchSuccess', data => {
33 |         this.items = data.query.results.json.stories;
34 |         this.dataTime = data.query.results.json.date;
35 | 
36 |       })).catch(
37 | 
38 |       action('fetchError', e => {
39 |         console.log(e.message)
40 |       }))
41 |   }
42 | 
43 |   @action
44 |   emptyData = () => {
45 |     this.items = []
46 |   }
47 | 
48 |  defaultDate = autorun((e) => this.fetchData(getDate()))
49 | }
50 | 
51 | const itemsStore = new ItemsStore()
52 | 
53 | export {itemsStore}


--------------------------------------------------------------------------------
/src/compontens/common/header.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-08 17:24:11
 4 |  * @version 0.0.1
 5 |   */
 6 | import React, {Component} from 'react'
 7 | import {Link} from 'react-router-dom'
 8 | import {Menu} from 'antd';
 9 | 
10 | export default class Header extends Component {
11 |   constructor(porps) {
12 |     super(porps);
13 | 
14 |     this.state = {
15 |       current: this.props.pathname === '/'
16 |         ? '/index'
17 |         : this.props.pathname
18 |     }
19 |   }
20 | 
21 |   handleClick(e) {
22 |     if(e.key !== this.state.current)
23 |       this.setState({current: e.key});
24 |   }
25 | 
26 |   render() {
27 |     return (
28 |       <Menu
29 |         onClick={this
30 |         .handleClick
31 |         .bind(this)}
32 |         selectedKeys={[this.state.current]}
33 |         mode="horizontal">
34 |         <Menu.Item key="/index">
35 |           <Link to="/">
36 |             <span>首页</span>
37 |           </Link>
38 |         </Menu.Item>
39 |         <Menu.Item key="/items">
40 |           <Link to="/items">
41 |             <span>文章</span>
42 |           </Link>
43 |         </Menu.Item>
44 |         <Menu.Item key="/about">
45 |           <Link to="/about">
46 |             <span>关于</span>
47 |           </Link>
48 |         </Menu.Item>
49 |       </Menu>
50 |     )
51 |   }
52 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-mobx-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "Get started with React, Mobx, and React-Router to achieve a Zhihu Daily App.",
 5 |   "author": "Hancoson <hancoson@163.com> (http://github.com/hancoson)",
 6 |   "license": "MIT",
 7 |   "private": true,
 8 |   "dependencies": {
 9 |     "antd": "^2.0.0",
10 |     "mobx": "^2.5.0",
11 |     "mobx-react": "^3.5.5",
12 |     "mobx-react-devtools": "^4.2.5",
13 |     "mobx-react-router": "^4.0.1",
14 |     "react": "^15.3.1",
15 |     "react-dom": "^15.3.1",
16 |     "react-router-dom": "^4.2.2"
17 |   },
18 |   "scripts": {
19 |     "build-css": "node-sass-chokidar src/ -o src/",
20 |     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
21 |     "start-js": "react-scripts start",
22 |     "start": "npm-run-all -p watch-css start-js",
23 |     "build-js": "react-scripts build",
24 |     "build": "npm-run-all build-css build-js",
25 |     "test": "react-scripts test --env=jsdom",
26 |     "eject": "react-scripts eject",
27 |     "clean": "yarn cache clean && rm -rf node_modules && rm -rf yarn.lock && yarn"
28 |   },
29 |   "devDependencies": {
30 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
31 |     "babel-preset-stage-2": "^6.24.1",
32 |     "node-sass-chokidar": "^0.0.3",
33 |     "npm-run-all": "^4.1.2",
34 |     "react-scripts": "0.2.3"
35 |   }
36 | }


--------------------------------------------------------------------------------
/src/assist/styles/variables.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 变量
 3 |  * @author 墨萧<hancoson@163.com>
 4 |  * @time 2016/06/06
 5 |  * @version 0.1.0
 6 |  */
 7 | 
 8 | 
 9 | /**
10 | *  继承代码
11 | **/
12 | 
13 | //border-box
14 | .border-box {
15 |     -moz-box-sizing: border-box;
16 |     -webkit-box-sizing: border-box;
17 |     -o-box-sizing: border-box;
18 |     -ms-box-sizing: border-box;
19 |     box-sizing: border-box;
20 | }
21 | 
22 | //旋转360
23 | .transition {
24 |     -moz-transition: -moz-transform 0.3s ease;
25 |     -webkit-transition: -webkit-transform 0.3s ease;
26 |     transition: transform 0.3s ease;
27 | }
28 | 
29 | //截取长度显示省略号
30 | .ellipsis {
31 |     overflow: hidden;
32 |     text-overflow: ellipsis;
33 |     white-space: nowrap;
34 | }
35 | 
36 | //滚动条
37 | .scrollbar::-webkit-scrollbar-track {
38 |     -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
39 |     border-radius: 6px;
40 |     background-color: #F5F5F5;
41 | }
42 | 
43 | .scrollbar::-webkit-scrollbar {
44 |     width: 3px;
45 |     background-color: #fff;
46 | }
47 | 
48 | .scrollbar::-webkit-scrollbar-thumb {
49 |     border-radius: 6px;
50 |     -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .2);
51 |     background-color: #07a1d6;
52 | }
53 | 
54 | 
55 | /**
56 |  * flex
57 | **/
58 | 
59 | .flex {
60 |     display: -webkit-box;
61 |     display: -webkit-flex;
62 |     display: -ms-flexbox;
63 |     display: flex;
64 | }
65 | 
66 | 


--------------------------------------------------------------------------------
/src/compontens/about.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han 
 3 |  * @Date: 2017-12-08 17:24:32 
 4 |  * @version 0.0.1 
 5 |   */
 6 | import React, { Component } from 'react'
 7 | 
 8 | export default class About extends Component {
 9 | 
10 |   render() {
11 | 
12 |     return (
13 |       <div className="about-warp">
14 |         <section>
15 |           <h1>React-Mobx Zhihu Daily</h1>
16 |           <ul>
17 |             <li>一个React+Mobx版知乎日报 所有API均来自网络（若涉及侵权，请及时联系我删除）</li>
18 |             <li><a href="https://github.com/Hancoson/react-mobx-demo" target="_blank"> Github</a>[https://github.com/Hancoson/react-mobx-demo]</li>
19 |           </ul>
20 |         </section>
21 |         <section>
22 |           <h1>技术实现</h1>
23 |           <ul>
24 |             <li>采用creat-react-app构建生成脚手架</li>
25 |             <li>采用React+mobx+React-router(v4)+antd等实现</li>
26 |           </ul>
27 |         </section>
28 |         <section>
29 |           <h1>运行</h1>
30 |           <ul>
31 |             <li>安装 <code>npm install(yarn)</code></li>
32 |             <li>启动 <code>npm start</code></li>
33 |             <li>构建 <code>npm build</code></li>
34 |           </ul>
35 |         </section>
36 |         <section>
37 |           <h1>目录结构</h1>
38 |           <pre>
39 |             ├─src<br />
40 |             │  ├─assets  //静态资源<br />
41 |             │  │  ├─img<br />
42 |             │  │  └─scss<br />
43 |             │  ├─compontens //组建<br />
44 |             │  ├─config  <br />
45 |             │  ├─routes //路由<br />
46 |             │  ├─store //store<br />
47 |             │  └─utils //工具函数<br />
48 |             └─build //发布目录<br />
49 |           </pre>
50 |         </section>
51 |       </div>
52 |     )
53 |   }
54 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <title>react-mobx|知乎日报</title>
 8 |     <meta name="keywords" content="react-mobx，知乎日报 " />
 9 |     <meta name="description" content="一个采用React+mobx+antd实现的知乎日报" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is added to the
12 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="./manifest.json">
15 |     <link rel="shortcut icon" href="./favicon.ico">
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |   </head>
26 |   <body>
27 |     <noscript>
28 |       You need to enable JavaScript to run this app.
29 |     </noscript>
30 |     <div id="root"></div>
31 |     <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <title>react-mobx|知乎日报</title>
 8 |     <meta name="keywords" content="react-mobx，知乎日报 " />
 9 |     <meta name="description" content="一个采用React+mobx+antd实现的知乎日报" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is added to the
12 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
15 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>React App</title>
26 |   </head>
27 |   <body>
28 |     <noscript>
29 |       You need to enable JavaScript to run this app.
30 |     </noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/assist/styles/reset.scss:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * reset
  3 |  * @author 墨萧<hancoson@163.com>
  4 |  * @time 2016/06/06
  5 |  * @version 0.1.0
  6 |  */
  7 | html, body, div, span, applet, object, iframe,
  8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  9 | a, abbr, acronym, address, big, cite, code,
 10 | del, dfn, em, img, ins, kbd, q, s, samp,
 11 | small, strike, strong, sub, sup, tt, var,
 12 | b, u, i, center,
 13 | dl, dt, dd, ol, ul, li,
 14 | fieldset, form, label, legend,
 15 | table, caption, tbody, tfoot, thead, tr, th, td,
 16 | article, aside, canvas, details, embed,
 17 | figure, figcaption, footer, header,
 18 | menu, nav, output, ruby, section, summary,
 19 | time, mark, audio, video {
 20 |   margin: 0;
 21 |   padding: 0;
 22 |   border: 0;
 23 |   font: inherit;
 24 | }
 25 | 
 26 | * {
 27 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 28 | }
 29 | 
 30 | /* HTML5 display-role reset for older browsers */
 31 | article, aside, details, figcaption, figure,
 32 | footer, header, menu, nav, section {
 33 |   display: block;
 34 | }
 35 | 
 36 | body {
 37 |   line-height: 1;
 38 |   font-family: sans-serif;
 39 | }
 40 | 
 41 | ol, ul, ul li {
 42 |   list-style: none;
 43 | }
 44 | 
 45 | blockquote, q {
 46 |   quotes: none;
 47 | }
 48 | 
 49 | blockquote:before, blockquote:after,
 50 | q:before, q:after {
 51 |   content: '';
 52 |   content: none;
 53 | }
 54 | 
 55 | table {
 56 |   border-collapse: collapse;
 57 |   border-spacing: 0;
 58 | }
 59 | 
 60 | input {
 61 |   outline: 0;
 62 | }
 63 | 
 64 | input, textarea, keygen, select, button {
 65 |   font: inherit;
 66 |   &:focus {
 67 |     outline: none;
 68 |   }
 69 | }
 70 | 
 71 | button, a {
 72 |   border: 0;
 73 |   cursor: pointer;
 74 | }
 75 | 
 76 | a, a:hover {
 77 |   text-decoration: none;
 78 | }
 79 | 
 80 | .clearfix:before,
 81 | .clearfix:after {
 82 |   display: table;
 83 |   content: " ";
 84 | }
 85 | 
 86 | .clearfix:after {
 87 |   clear: both;
 88 | }
 89 | 
 90 | /* End hide from IE-mac */
 91 | .no-scroll {
 92 |   overflow: hidden;
 93 |   position: relative;
 94 | }
 95 | 
 96 | .fl {
 97 |   float: left;
 98 | }
 99 | 
100 | .fr {
101 |   float: right;
102 | }


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/README-zh.md:
--------------------------------------------------------------------------------
 1 | # React-Mobx Zhihu Daily
 2 | [![GitHub package version](https://img.shields.io/github/package-json/v/Hancoson/react-mobx-demo.svg)](https://github.com/Hancoson/react-mobx-demo)
 3 | [![GitHub license](https://img.shields.io/github/license/Hancoson/react-mobx-demo.svg)](https://github.com/Hancoson/react-mobx-demo/blob/master/LICENSE)
 4 | [![Travis](https://img.shields.io/travis/Hancoson/react-mobx-demo/master.svg)](https://travis-ci.org/Hancoson/react-mobx-demo)
 5 | 
 6 | ### [DEMO](https://hancoson.github.io/react-mobx-demo/build/index.html)
 7 | 
 8 | ### [Redux实现](https://github.com/Hancoson/react-redux-demo)
 9 | ### [英文](https://github.com/Hancoson/react-mobx-demo/blob/master/README.md):uk:
10 | > 一个React+Mobx版知乎日报 所有API均来自网络（若涉及侵权，请及时联系我删除）
11 | > _你觉得好就给个 Star 或者 Watch 吧，不要 Fork.
12 | 
13 | ## 技术栈
14 | - [x] React v15
15 | - [x] Mobx v2.5
16 | - [x] Mobx-react
17 | - [x] React-router v4
18 | - [x] mobx-react-router v4
19 | - [x] antd v2
20 | - [x] react-scripts
21 | - [x] [create-react-app](https://github.com/facebookincubator/create-react-app)
22 | - ……
23 |  
24 | ## 如何使用
25 | - 安装 `npm install(yarn)`
26 | - 启动 `npm start`
27 | - 构建 `npm run build`
28 |  
29 | ## 目录结构
30 | ```$xslt
31 | ├─config   //构建配置
32 | ├─src
33 | │  ├─assets  //静态资源
34 | │  │  ├─img
35 | │  │  └─styles
36 | │  ├─compontens //组建
37 | │  ├─config //配置文件
38 | │  ├─routes //路由
39 | │  ├─store //store
40 | │  └─utils //工具函数
41 | └─build //发布目录
42 | ```
43 | 
44 | ## API
45 | 本应用调用了开源的「知乎日报 API」，具体可参考官方文档，[传送门>>](https://github.com/izzyleung/ZhihuDailyPurify/wiki/%E7%9F%A5%E4%B9%8E%E6%97%A5%E6%8A%A5-API-%E5%88%86%E6%9E%90)
46 | 
47 | 
48 | ## 数据获取
49 | - 采用Yahoo跨域访问代理
50 | ```$xslt
51 | YAHOO:'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url=%22',
52 | YAHOO_SUFFIX:'%22&format=json'
53 | ```
54 | 
55 | ## 如何使用 Mobx（Decorators）
56 | 
57 | > 我使用了`create-react-app`脚手架创建应用。
58 | 
59 | 你可以添加 `transform-decorators-legacy` 到你的 `node_modules/react-scripts/config/babel.dev.js` 和 `babel.prod.js`,代码如下:
60 | 
61 | - 添加下面的代码到 `presets`:
62 | 
63 | ```
64 | require.resolve('babel-preset-stage-1'),
65 | require.resolve('babel-preset-es2015')
66 | ```
67 | - 添加下面的代码到 `plugins` 的第一行:
68 | ```
69 | require.resolve('babel-plugin-transform-decorators-legacy'),
70 | ```


--------------------------------------------------------------------------------
/src/compontens/itemsList.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @Author: Guoxing.han
 3 |  * @Date: 2017-12-08 17:25:21
 4 |  * @version 0.0.1
 5 |  */
 6 | import React, {Component} from 'react'
 7 | import {Link} from 'react-router-dom'
 8 | import {inject, observer} from "mobx-react";
 9 | 
10 | import {Row, Col, Spin, Button, DatePicker} from 'antd';
11 | import {getDate, subString, timeClear} from './../utils/getDate'
12 | 
13 | @inject("store") @observer
14 | export default class Items extends Component {
15 |   constructor(props) {
16 |     super(props)
17 |     console.log(props)
18 |     this.store = props.store.itemsStore
19 |   }
20 | 
21 |   disabledDate(current) {
22 |     return current && current.valueOf() > Date.now();
23 |   }
24 | 
25 |   handleClick(value, dateString) {
26 |     const {fetchData, emptyData} = this.store;
27 |     emptyData()
28 |     fetchData(timeClear(dateString));
29 |   }
30 | 
31 |   componentWillMount() {
32 |     const {emptyData} = this.store;
33 | 
34 |     //清空原有的数据
35 |     emptyData()
36 |   }
37 | 
38 |   render() {
39 |     const {items, dataTime, emptyData, total} = this.store
40 |     const list = items
41 | 
42 |     return (
43 |       <div className='items-warp'>
44 |         <div className='bar clearfix'>
45 |           <DatePicker
46 |             disabledDate={this.disabledDate}
47 |             onChange={this
48 |               .handleClick
49 |               .bind(this)}/>
50 |           <Button className='fr' onClick={() => emptyData()}>清除数据</Button>
51 |         </div>
52 |         <div className="main">
53 |           <div className="gutter-example">
54 |             {total > 0
55 |               ? <Row gutter={16}>
56 |                 {list.map((e, index) => <Col className="gutter-row" span={6} key={index}>
57 |                   <Link className="item" to={'news/' + e.id}>
58 |                     <img src={e.images} role="presentation"/>
59 |                     <p>{e.title}</p>
60 |                     <sub>{subString(dataTime)}</sub>
61 |                   </Link>
62 |                 </Col>)}
63 |               </Row>
64 |               : <div className="loading">
65 |                 <Spin size="large"/>
66 |               </div>
67 |             }
68 | 
69 |           </div>
70 |         </div>
71 |       </div>
72 | 
73 |     )
74 |   }
75 | }


--------------------------------------------------------------------------------
/.idea/codeStyleSettings.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="ProjectCodeStyleSettingsManager">
 4 |     <option name="PER_PROJECT_SETTINGS">
 5 |       <value>
 6 |         <codeStyleSettings language="CSS">
 7 |           <indentOptions>
 8 |             <option name="INDENT_SIZE" value="2" />
 9 |             <option name="CONTINUATION_INDENT_SIZE" value="2" />
10 |             <option name="TAB_SIZE" value="2" />
11 |           </indentOptions>
12 |         </codeStyleSettings>
13 |         <codeStyleSettings language="HTML">
14 |           <indentOptions>
15 |             <option name="INDENT_SIZE" value="2" />
16 |             <option name="CONTINUATION_INDENT_SIZE" value="4" />
17 |             <option name="TAB_SIZE" value="2" />
18 |           </indentOptions>
19 |         </codeStyleSettings>
20 |         <codeStyleSettings language="JSON">
21 |           <indentOptions>
22 |             <option name="CONTINUATION_INDENT_SIZE" value="4" />
23 |             <option name="TAB_SIZE" value="2" />
24 |           </indentOptions>
25 |         </codeStyleSettings>
26 |         <codeStyleSettings language="JavaScript">
27 |           <indentOptions>
28 |             <option name="INDENT_SIZE" value="2" />
29 |             <option name="CONTINUATION_INDENT_SIZE" value="2" />
30 |             <option name="TAB_SIZE" value="2" />
31 |           </indentOptions>
32 |         </codeStyleSettings>
33 |         <codeStyleSettings language="LESS">
34 |           <indentOptions>
35 |             <option name="CONTINUATION_INDENT_SIZE" value="4" />
36 |             <option name="TAB_SIZE" value="2" />
37 |           </indentOptions>
38 |         </codeStyleSettings>
39 |         <codeStyleSettings language="SASS">
40 |           <indentOptions>
41 |             <option name="CONTINUATION_INDENT_SIZE" value="4" />
42 |             <option name="TAB_SIZE" value="2" />
43 |           </indentOptions>
44 |         </codeStyleSettings>
45 |         <codeStyleSettings language="SCSS">
46 |           <indentOptions>
47 |             <option name="CONTINUATION_INDENT_SIZE" value="2" />
48 |             <option name="TAB_SIZE" value="2" />
49 |           </indentOptions>
50 |         </codeStyleSettings>
51 |       </value>
52 |     </option>
53 |     <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default (1)" />
54 |   </component>
55 | </project>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React-Mobx Zhihu Daily
 2 | [![GitHub package version](https://img.shields.io/github/package-json/v/Hancoson/react-mobx-demo.svg)](https://github.com/Hancoson/react-mobx-demo)
 3 | [![GitHub license](https://img.shields.io/github/license/Hancoson/react-mobx-demo.svg)](https://github.com/Hancoson/react-mobx-demo/blob/master/LICENSE)
 4 | [![Travis](https://img.shields.io/travis/Hancoson/react-mobx-demo/master.svg)](https://travis-ci.org/Hancoson/react-mobx-demo)
 5 | [![Github All Releases](https://img.shields.io/github/downloads/atom/atom/total.svg)](https://github.com/Hancoson/react-mobx-demo)
 6 | 
 7 | ### [DEMO](https://hancoson.github.io/react-mobx-demo/build/index.html)
 8 | 
 9 | ### [Redux come true](https://github.com/Hancoson/react-redux-demo)
10 | ### [中文](https://github.com/Hancoson/react-mobx-demo/blob/master/README-zh.md):cn:
11 | 
12 | If something doesn’t work, please [file an issue](https://github.com/Hancoson/react-mobx-demo/issues).
13 | 
14 | ## Tech used
15 | - [x] React v15
16 | - [x] Mobx v2.5
17 | - [x] Mobx-react
18 | - [x] React-router v4
19 | - [x] mobx-react-router v4
20 | - [x] antd v2
21 | - [x] react-scripts
22 | - [x] [create-react-app](https://github.com/facebookincubator/create-react-app)
23 | - ……
24 |  
25 | ## How to run
26 | - Install: `npm install(yarn)`
27 | - Run: `npm start` Then open [http://localhost:3000](http://localhost:3000/) to see the app.
28 | - Build: `npm run build`
29 |  
30 | ## Tree
31 | ```$xslt
32 | ├─config
33 | ├─src
34 | │  ├─assets
35 | │  │  ├─img
36 | │  │  └─styles
37 | │  ├─compontens
38 | │  ├─config
39 | │  ├─routes
40 | │  ├─store
41 | │  └─utils
42 | └─build
43 | ```
44 | 
45 | ## API
46 | This app ues the [ZhiHu Daily API], [go to see the API](https://github.com/izzyleung/ZhihuDailyPurify/wiki/%E7%9F%A5%E4%B9%8E%E6%97%A5%E6%8A%A5-API-%E5%88%86%E6%9E%90).
47 | 
48 | ## Get data
49 | - Use the Yahoo service cross-domain
50 | ```$xslt
51 | YAHOO:'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url=%22',
52 | YAHOO_SUFFIX:'%22&format=json'
53 | ```
54 | 
55 | ## How to use Mobx（Decorators）
56 | 
57 | > I use the `creat-react-app` to creat my app.
58 | 
59 | You can add the `transform-decorators-legacy` yourself in `node_modules/react-scripts/config/babel.dev.js` and `babel.prod.js`,like this:
60 | 
61 | - add this code into `presets`:
62 | 
63 | ```
64 | require.resolve('babel-preset-stage-1'),
65 | require.resolve('babel-preset-es2015')
66 | ```
67 | - add this code into `plugins` first line:
68 | ```
69 | require.resolve('babel-plugin-transform-decorators-legacy'),
70 | ```
71 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'development';
 5 | process.env.NODE_ENV = 'development';
 6 | 
 7 | // Makes the script crash on unhandled rejections instead of silently
 8 | // ignoring them. In the future, promise rejections that are not handled will
 9 | // terminate the Node.js process with a non-zero exit code.
10 | process.on('unhandledRejection', err => {
11 |   throw err;
12 | });
13 | 
14 | // Ensure environment variables are read.
15 | require('../config/env');
16 | 
17 | const fs = require('fs');
18 | const chalk = require('chalk');
19 | const webpack = require('webpack');
20 | const WebpackDevServer = require('webpack-dev-server');
21 | const clearConsole = require('react-dev-utils/clearConsole');
22 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
23 | const {
24 |   choosePort,
25 |   createCompiler,
26 |   prepareProxy,
27 |   prepareUrls,
28 | } = require('react-dev-utils/WebpackDevServerUtils');
29 | const openBrowser = require('react-dev-utils/openBrowser');
30 | const paths = require('../config/paths');
31 | const config = require('../config/webpack.config.dev');
32 | const createDevServerConfig = require('../config/webpackDevServer.config');
33 | 
34 | const useYarn = fs.existsSync(paths.yarnLockFile);
35 | const isInteractive = process.stdout.isTTY;
36 | 
37 | // Warn and crash if required files are missing
38 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
39 |   process.exit(1);
40 | }
41 | 
42 | // Tools like Cloud9 rely on this.
43 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
44 | const HOST = process.env.HOST || '0.0.0.0';
45 | 
46 | // We attempt to use the default port but if it is busy, we offer the user to
47 | // run on a different port. `detect()` Promise resolves to the next free port.
48 | choosePort(HOST, DEFAULT_PORT)
49 |   .then(port => {
50 |     if (port == null) {
51 |       // We have not found a port.
52 |       return;
53 |     }
54 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
55 |     const appName = require(paths.appPackageJson).name;
56 |     const urls = prepareUrls(protocol, HOST, port);
57 |     // Create a webpack compiler that is configured with custom messages.
58 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
59 |     // Load proxy config
60 |     const proxySetting = require(paths.appPackageJson).proxy;
61 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
62 |     // Serve webpack assets generated by the compiler over a web sever.
63 |     const serverConfig = createDevServerConfig(
64 |       proxyConfig,
65 |       urls.lanUrlForConfig
66 |     );
67 |     const devServer = new WebpackDevServer(compiler, serverConfig);
68 |     // Launch WebpackDevServer.
69 |     devServer.listen(port, HOST, err => {
70 |       if (err) {
71 |         return console.log(err);
72 |       }
73 |       if (isInteractive) {
74 |         clearConsole();
75 |       }
76 |       console.log(chalk.cyan('Starting the development server...\n'));
77 |       openBrowser(urls.localUrlForBrowser);
78 |     });
79 | 
80 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
81 |       process.on(sig, function() {
82 |         devServer.close();
83 |         process.exit();
84 |       });
85 |     });
86 |   })
87 |   .catch(err => {
88 |     if (err && err.message) {
89 |       console.log(err.message);
90 |     }
91 |     process.exit(1);
92 |   });
93 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 |       } else {
 39 |         // Is not local host. Just register service worker
 40 |         registerValidSW(swUrl);
 41 |       }
 42 |     });
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.');
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.');
 65 |             }
 66 |           }
 67 |         };
 68 |       };
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error);
 72 |     });
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload();
 88 |           });
 89 |         });
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl);
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       );
 99 |     });
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister();
106 |     });
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const path = require('path');
 18 | const chalk = require('chalk');
 19 | const fs = require('fs-extra');
 20 | const webpack = require('webpack');
 21 | const config = require('../config/webpack.config.prod');
 22 | const paths = require('../config/paths');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 25 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 26 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 27 | const printBuildError = require('react-dev-utils/printBuildError');
 28 | 
 29 | const measureFileSizesBeforeBuild =
 30 |   FileSizeReporter.measureFileSizesBeforeBuild;
 31 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 32 | const useYarn = fs.existsSync(paths.yarnLockFile);
 33 | 
 34 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 35 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 36 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // First, read the current file sizes in build directory.
 44 | // This lets us display how much they changed later.
 45 | measureFileSizesBeforeBuild(paths.appBuild)
 46 |   .then(previousFileSizes => {
 47 |     // Remove all content but keep the directory so that
 48 |     // if you're in it, you don't end up in Trash
 49 |     fs.emptyDirSync(paths.appBuild);
 50 |     // Merge with the public folder
 51 |     copyPublicFolder();
 52 |     // Start the webpack build
 53 |     return build(previousFileSizes);
 54 |   })
 55 |   .then(
 56 |     ({ stats, previousFileSizes, warnings }) => {
 57 |       if (warnings.length) {
 58 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 59 |         console.log(warnings.join('\n\n'));
 60 |         console.log(
 61 |           '\nSearch for the ' +
 62 |             chalk.underline(chalk.yellow('keywords')) +
 63 |             ' to learn more about each warning.'
 64 |         );
 65 |         console.log(
 66 |           'To ignore, add ' +
 67 |             chalk.cyan('// eslint-disable-next-line') +
 68 |             ' to the line before.\n'
 69 |         );
 70 |       } else {
 71 |         console.log(chalk.green('Compiled successfully.\n'));
 72 |       }
 73 | 
 74 |       console.log('File sizes after gzip:\n');
 75 |       printFileSizesAfterBuild(
 76 |         stats,
 77 |         previousFileSizes,
 78 |         paths.appBuild,
 79 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 80 |         WARN_AFTER_CHUNK_GZIP_SIZE
 81 |       );
 82 |       console.log();
 83 | 
 84 |       const appPackage = require(paths.appPackageJson);
 85 |       const publicUrl = paths.publicUrl;
 86 |       const publicPath = config.output.publicPath;
 87 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
 88 |       printHostingInstructions(
 89 |         appPackage,
 90 |         publicUrl,
 91 |         publicPath,
 92 |         buildFolder,
 93 |         useYarn
 94 |       );
 95 |     },
 96 |     err => {
 97 |       console.log(chalk.red('Failed to compile.\n'));
 98 |       printBuildError(err);
 99 |       process.exit(1);
100 |     }
101 |   );
102 | 
103 | // Create the production build and print the deployment instructions.
104 | function build(previousFileSizes) {
105 |   console.log('Creating an optimized production build...');
106 | 
107 |   let compiler = webpack(config);
108 |   return new Promise((resolve, reject) => {
109 |     compiler.run((err, stats) => {
110 |       if (err) {
111 |         return reject(err);
112 |       }
113 |       const messages = formatWebpackMessages(stats.toJson({}, true));
114 |       if (messages.errors.length) {
115 |         // Only keep the first error. Others are often indicative
116 |         // of the same problem, but confuse the reader with noise.
117 |         if (messages.errors.length > 1) {
118 |           messages.errors.length = 1;
119 |         }
120 |         return reject(new Error(messages.errors.join('\n\n')));
121 |       }
122 |       if (
123 |         process.env.CI &&
124 |         (typeof process.env.CI !== 'string' ||
125 |           process.env.CI.toLowerCase() !== 'false') &&
126 |         messages.warnings.length
127 |       ) {
128 |         console.log(
129 |           chalk.yellow(
130 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
131 |               'Most CI servers set it automatically.\n'
132 |           )
133 |         );
134 |         return reject(new Error(messages.warnings.join('\n\n')));
135 |       }
136 |       return resolve({
137 |         stats,
138 |         previousFileSizes,
139 |         warnings: messages.warnings,
140 |       });
141 |     });
142 |   });
143 | }
144 | 
145 | function copyPublicFolder() {
146 |   fs.copySync(paths.appPublic, paths.appBuild, {
147 |     dereference: true,
148 |     filter: file => file !== paths.appHtml,
149 |   });
150 | }
151 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  5 | const path = require('path');
  6 | const config = require('./webpack.config.dev');
  7 | const paths = require('./paths');
  8 | 
  9 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 10 | const host = process.env.HOST || '0.0.0.0';
 11 | 
 12 | module.exports = function(proxy, allowedHost) {
 13 |   return {
 14 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 15 |     // websites from potentially accessing local content through DNS rebinding:
 16 |     // https://github.com/webpack/webpack-dev-server/issues/887
 17 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 18 |     // However, it made several existing use cases such as development in cloud
 19 |     // environment or subdomains in development significantly more complicated:
 20 |     // https://github.com/facebookincubator/create-react-app/issues/2271
 21 |     // https://github.com/facebookincubator/create-react-app/issues/2233
 22 |     // While we're investigating better solutions, for now we will take a
 23 |     // compromise. Since our WDS configuration only serves files in the `public`
 24 |     // folder we won't consider accessing them a vulnerability. However, if you
 25 |     // use the `proxy` feature, it gets more dangerous because it can expose
 26 |     // remote code execution vulnerabilities in backends like Django and Rails.
 27 |     // So we will disable the host check normally, but enable it if you have
 28 |     // specified the `proxy` setting. Finally, we let you override it if you
 29 |     // really know what you're doing with a special environment variable.
 30 |     disableHostCheck:
 31 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 32 |     // Enable gzip compression of generated files.
 33 |     compress: true,
 34 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 35 |     // It will still show compile warnings and errors with this setting.
 36 |     clientLogLevel: 'none',
 37 |     // By default WebpackDevServer serves physical files from current directory
 38 |     // in addition to all the virtual build products that it serves from memory.
 39 |     // This is confusing because those files won’t automatically be available in
 40 |     // production build folder unless we copy them. However, copying the whole
 41 |     // project directory is dangerous because we may expose sensitive files.
 42 |     // Instead, we establish a convention that only files in `public` directory
 43 |     // get served. Our build script will copy `public` into the `build` folder.
 44 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 45 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 46 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 47 |     // Note that we only recommend to use `public` folder as an escape hatch
 48 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 49 |     // for some reason broken when imported through Webpack. If you just want to
 50 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 51 |     contentBase: paths.appPublic,
 52 |     // By default files from `contentBase` will not trigger a page reload.
 53 |     watchContentBase: true,
 54 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 55 |     // for the WebpackDevServer client so it can learn when the files were
 56 |     // updated. The WebpackDevServer client is included as an entry point
 57 |     // in the Webpack development configuration. Note that only changes
 58 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 59 |     hot: true,
 60 |     // It is important to tell WebpackDevServer to use the same "root" path
 61 |     // as we specified in the config. In development, we always serve from /.
 62 |     publicPath: config.output.publicPath,
 63 |     // WebpackDevServer is noisy by default so we emit custom message instead
 64 |     // by listening to the compiler events with `compiler.plugin` calls above.
 65 |     quiet: true,
 66 |     // Reportedly, this avoids CPU overload on some systems.
 67 |     // https://github.com/facebookincubator/create-react-app/issues/293
 68 |     // src/node_modules is not ignored to support absolute imports
 69 |     // https://github.com/facebookincubator/create-react-app/issues/1065
 70 |     watchOptions: {
 71 |       ignored: new RegExp(
 72 |         `^(?!${path
 73 |           .normalize(paths.appSrc + '/')
 74 |           .replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`,
 75 |         'g'
 76 |       ),
 77 |     },
 78 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 79 |     https: protocol === 'https',
 80 |     host: host,
 81 |     overlay: false,
 82 |     historyApiFallback: {
 83 |       // Paths with dots should still use the history fallback.
 84 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
 85 |       disableDotRule: true,
 86 |     },
 87 |     public: allowedHost,
 88 |     proxy,
 89 |     before(app) {
 90 |       // This lets us open files from the runtime error overlay.
 91 |       app.use(errorOverlayMiddleware());
 92 |       // This service worker file is effectively a 'no-op' that will reset any
 93 |       // previous service worker registered for the same host:port combination.
 94 |       // We do this in development to avoid hitting the production cache if
 95 |       // it used the same host and port.
 96 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
 97 |       app.use(noopServiceWorkerMiddleware());
 98 |     },
 99 |   };
100 | };
101 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  8 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 10 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 11 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 12 | const getClientEnvironment = require('./env');
 13 | const paths = require('./paths');
 14 | 
 15 | // Webpack uses `publicPath` to determine where the app is being served from.
 16 | // In development, we always serve from the root. This makes config easier.
 17 | const publicPath = '/';
 18 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 19 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 20 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 21 | const publicUrl = '';
 22 | // Get environment variables to inject into our app.
 23 | const env = getClientEnvironment(publicUrl);
 24 | 
 25 | // This is the development configuration.
 26 | // It is focused on developer experience and fast rebuilds.
 27 | // The production configuration is different and lives in a separate file.
 28 | module.exports = {
 29 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 30 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 31 |   devtool: 'cheap-module-source-map',
 32 |   // These are the "entry points" to our application.
 33 |   // This means they will be the "root" imports that are included in JS bundle.
 34 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 35 |   entry: [
 36 |     // We ship a few polyfills by default:
 37 |     require.resolve('./polyfills'),
 38 |     // Include an alternative client for WebpackDevServer. A client's job is to
 39 |     // connect to WebpackDevServer by a socket and get notified about changes.
 40 |     // When you save a file, the client will either apply hot updates (in case
 41 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 42 |     // make a syntax error, this client will display a syntax error overlay.
 43 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 44 |     // to bring better experience for Create React App users. You can replace
 45 |     // the line below with these two lines if you prefer the stock client:
 46 |     // require.resolve('webpack-dev-server/client') + '?/',
 47 |     // require.resolve('webpack/hot/dev-server'),
 48 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 49 |     // Finally, this is your app's code:
 50 |     paths.appIndexJs,
 51 |     // We include the app code last so that if there is a runtime error during
 52 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 53 |     // changing JS code would still trigger a refresh.
 54 |   ],
 55 |   output: {
 56 |     // Add /* filename */ comments to generated require()s in the output.
 57 |     pathinfo: true,
 58 |     // This does not produce a real file. It's just the virtual path that is
 59 |     // served by WebpackDevServer in development. This is the JS bundle
 60 |     // containing code from all our entry points, and the Webpack runtime.
 61 |     filename: 'static/js/bundle.js',
 62 |     // There are also additional JS chunk files if you use code splitting.
 63 |     chunkFilename: 'static/js/[name].chunk.js',
 64 |     // This is the URL that app is served from. We use "/" in development.
 65 |     publicPath: publicPath,
 66 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 67 |     devtoolModuleFilenameTemplate: info =>
 68 |       path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 69 |   },
 70 |   resolve: {
 71 |     // This allows you to set a fallback for where Webpack should look for modules.
 72 |     // We placed these paths second because we want `node_modules` to "win"
 73 |     // if there are any conflicts. This matches Node resolution mechanism.
 74 |     // https://github.com/facebookincubator/create-react-app/issues/253
 75 |     modules: ['node_modules', paths.appNodeModules].concat(
 76 |       // It is guaranteed to exist because we tweak it in `env.js`
 77 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 78 |     ),
 79 |     // These are the reasonable defaults supported by the Node ecosystem.
 80 |     // We also include JSX as a common component filename extension to support
 81 |     // some tools, although we do not recommend using it, see:
 82 |     // https://github.com/facebookincubator/create-react-app/issues/290
 83 |     // `web` extension prefixes have been added for better support
 84 |     // for React Native Web.
 85 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 86 |     alias: {
 87 |       
 88 |       // Support React Native Web
 89 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 90 |       'react-native': 'react-native-web',
 91 |     },
 92 |     plugins: [
 93 |       // Prevents users from importing files from outside of src/ (or node_modules/).
 94 |       // This often causes confusion because we only process files within src/ with babel.
 95 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
 96 |       // please link the files into your node_modules/ and let module-resolution kick in.
 97 |       // Make sure your source files are compiled, as they will not be processed in any way.
 98 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
 99 |     ],
100 |   },
101 |   module: {
102 |     strictExportPresence: true,
103 |     rules: [
104 |       // TODO: Disable require.ensure as it's not a standard language feature.
105 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
106 |       // { parser: { requireEnsure: false } },
107 | 
108 |       // First, run the linter.
109 |       // It's important to do this before Babel processes the JS.
110 |       {
111 |         test: /\.(js|jsx|mjs)$/,
112 |         enforce: 'pre',
113 |         use: [
114 |           {
115 |             options: {
116 |               formatter: eslintFormatter,
117 |               eslintPath: require.resolve('eslint'),
118 |               
119 |             },
120 |             loader: require.resolve('eslint-loader'),
121 |           },
122 |         ],
123 |         include: paths.appSrc,
124 |       },
125 |       {
126 |         // "oneOf" will traverse all following loaders until one will
127 |         // match the requirements. When no loader matches it will fall
128 |         // back to the "file" loader at the end of the loader list.
129 |         oneOf: [
130 |           // "url" loader works like "file" loader except that it embeds assets
131 |           // smaller than specified limit in bytes as data URLs to avoid requests.
132 |           // A missing `test` is equivalent to a match.
133 |           {
134 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
135 |             loader: require.resolve('url-loader'),
136 |             options: {
137 |               limit: 10000,
138 |               name: 'static/media/[name].[hash:8].[ext]',
139 |             },
140 |           },
141 |           // Process JS with Babel.
142 |           {
143 |             test: /\.(js|jsx|mjs)$/,
144 |             include: paths.appSrc,
145 |             loader: require.resolve('babel-loader'),
146 |             options: {
147 |               
148 |               // This is a feature of `babel-loader` for webpack (not Babel itself).
149 |               // It enables caching results in ./node_modules/.cache/babel-loader/
150 |               // directory for faster rebuilds.
151 |               cacheDirectory: true,
152 |             },
153 |           },
154 |           // "postcss" loader applies autoprefixer to our CSS.
155 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
156 |           // "style" loader turns CSS into JS modules that inject <style> tags.
157 |           // In production, we use a plugin to extract that CSS to a file, but
158 |           // in development "style" loader enables hot editing of CSS.
159 |           {
160 |             test: /\.css$/,
161 |             use: [
162 |               require.resolve('style-loader'),
163 |               {
164 |                 loader: require.resolve('css-loader'),
165 |                 options: {
166 |                   importLoaders: 1,
167 |                 },
168 |               },
169 |               {
170 |                 loader: require.resolve('postcss-loader'),
171 |                 options: {
172 |                   // Necessary for external CSS imports to work
173 |                   // https://github.com/facebookincubator/create-react-app/issues/2677
174 |                   ident: 'postcss',
175 |                   plugins: () => [
176 |                     require('postcss-flexbugs-fixes'),
177 |                     autoprefixer({
178 |                       browsers: [
179 |                         '>1%',
180 |                         'last 4 versions',
181 |                         'Firefox ESR',
182 |                         'not ie < 9', // React doesn't support IE8 anyway
183 |                       ],
184 |                       flexbox: 'no-2009',
185 |                     }),
186 |                   ],
187 |                 },
188 |               },
189 |             ],
190 |           },
191 |           // "file" loader makes sure those assets get served by WebpackDevServer.
192 |           // When you `import` an asset, you get its (virtual) filename.
193 |           // In production, they would get copied to the `build` folder.
194 |           // This loader doesn't use a "test" so it will catch all modules
195 |           // that fall through the other loaders.
196 |           {
197 |             // Exclude `js` files to keep "css" loader working as it injects
198 |             // it's runtime that would otherwise processed through "file" loader.
199 |             // Also exclude `html` and `json` extensions so they get processed
200 |             // by webpacks internal loaders.
201 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
202 |             loader: require.resolve('file-loader'),
203 |             options: {
204 |               name: 'static/media/[name].[hash:8].[ext]',
205 |             },
206 |           },
207 |         ],
208 |       },
209 |       // ** STOP ** Are you adding a new loader?
210 |       // Make sure to add the new loader(s) before the "file" loader.
211 |     ],
212 |   },
213 |   plugins: [
214 |     // Makes some environment variables available in index.html.
215 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
216 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
217 |     // In development, this will be an empty string.
218 |     new InterpolateHtmlPlugin(env.raw),
219 |     // Generates an `index.html` file with the <script> injected.
220 |     new HtmlWebpackPlugin({
221 |       inject: true,
222 |       template: paths.appHtml,
223 |     }),
224 |     // Add module names to factory functions so they appear in browser profiler.
225 |     new webpack.NamedModulesPlugin(),
226 |     // Makes some environment variables available to the JS code, for example:
227 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
228 |     new webpack.DefinePlugin(env.stringified),
229 |     // This is necessary to emit hot updates (currently CSS only):
230 |     new webpack.HotModuleReplacementPlugin(),
231 |     // Watcher doesn't work well if you mistype casing in a path so we use
232 |     // a plugin that prints an error when you attempt to do this.
233 |     // See https://github.com/facebookincubator/create-react-app/issues/240
234 |     new CaseSensitivePathsPlugin(),
235 |     // If you require a missing module and then `npm install` it, you still have
236 |     // to restart the development server for Webpack to discover it. This plugin
237 |     // makes the discovery automatic so you don't have to restart.
238 |     // See https://github.com/facebookincubator/create-react-app/issues/186
239 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
240 |     // Moment.js is an extremely popular library that bundles large locale files
241 |     // by default due to how Webpack interprets its code. This is a practical
242 |     // solution that requires the user to opt into importing specific locales.
243 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
244 |     // You can remove this if you don't use Moment.js:
245 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
246 |   ],
247 |   // Some libraries import Node modules but don't use them in the browser.
248 |   // Tell Webpack to provide empty mocks for them so importing them works.
249 |   node: {
250 |     dgram: 'empty',
251 |     fs: 'empty',
252 |     net: 'empty',
253 |     tls: 'empty',
254 |     child_process: 'empty',
255 |   },
256 |   // Turn off performance hints during development because we don't do any
257 |   // splitting or minification in interest of speed. These warnings become
258 |   // cumbersome.
259 |   performance: {
260 |     hints: false,
261 |   },
262 | };
263 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const autoprefixer = require('autoprefixer');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  7 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 | const ManifestPlugin = require('webpack-manifest-plugin');
  9 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 10 | const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 11 | const eslintFormatter = require('react-dev-utils/eslintFormatter');
 12 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 13 | const paths = require('./paths');
 14 | const getClientEnvironment = require('./env');
 15 | 
 16 | // Webpack uses `publicPath` to determine where the app is being served from.
 17 | // It requires a trailing slash, or the file assets will get an incorrect path.
 18 | const publicPath = paths.servedPath;
 19 | // Some apps do not use client-side routing with pushState.
 20 | // For these, "homepage" can be set to "." to enable relative asset paths.
 21 | const shouldUseRelativeAssetPaths = publicPath === './';
 22 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 23 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 24 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 25 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 26 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 27 | const publicUrl = publicPath.slice(0, -1);
 28 | // Get environment variables to inject into our app.
 29 | const env = getClientEnvironment(publicUrl);
 30 | 
 31 | // Assert this just to be safe.
 32 | // Development builds of React are slow and not intended for production.
 33 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 34 |   throw new Error('Production builds must have NODE_ENV=production.');
 35 | }
 36 | 
 37 | // Note: defined here because it will be used more than once.
 38 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 39 | 
 40 | // ExtractTextPlugin expects the build output to be flat.
 41 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 42 | // However, our output is structured with css, js and media folders.
 43 | // To have this structure working with relative paths, we have to use custom options.
 44 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 45 |   ? // Making sure that the publicPath goes back to to build folder.
 46 |     { publicPath: Array(cssFilename.split('/').length).join('../') }
 47 |   : {};
 48 | 
 49 | // This is the production configuration.
 50 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 51 | // The development configuration is different and lives in a separate file.
 52 | module.exports = {
 53 |   // Don't attempt to continue if there are any errors.
 54 |   bail: true,
 55 |   // We generate sourcemaps in production. This is slow but gives good results.
 56 |   // You can exclude the *.map files from the build during deployment.
 57 |   devtool: shouldUseSourceMap ? 'source-map' : false,
 58 |   // In production, we only want to load the polyfills and the app code.
 59 |   entry: [require.resolve('./polyfills'), paths.appIndexJs],
 60 |   output: {
 61 |     // The build folder.
 62 |     path: paths.appBuild,
 63 |     // Generated JS file names (with nested folders).
 64 |     // There will be one main bundle, and one file per asynchronous chunk.
 65 |     // We don't currently advertise code splitting but Webpack supports it.
 66 |     filename: 'static/js/[name].[chunkhash:8].js',
 67 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 68 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 69 |     publicPath: publicPath,
 70 |     // Point sourcemap entries to original disk location (format as URL on Windows)
 71 |     devtoolModuleFilenameTemplate: info =>
 72 |       path
 73 |         .relative(paths.appSrc, info.absoluteResourcePath)
 74 |         .replace(/\\/g, '/'),
 75 |   },
 76 |   resolve: {
 77 |     // This allows you to set a fallback for where Webpack should look for modules.
 78 |     // We placed these paths second because we want `node_modules` to "win"
 79 |     // if there are any conflicts. This matches Node resolution mechanism.
 80 |     // https://github.com/facebookincubator/create-react-app/issues/253
 81 |     modules: ['node_modules', paths.appNodeModules].concat(
 82 |       // It is guaranteed to exist because we tweak it in `env.js`
 83 |       process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
 84 |     ),
 85 |     // These are the reasonable defaults supported by the Node ecosystem.
 86 |     // We also include JSX as a common component filename extension to support
 87 |     // some tools, although we do not recommend using it, see:
 88 |     // https://github.com/facebookincubator/create-react-app/issues/290
 89 |     // `web` extension prefixes have been added for better support
 90 |     // for React Native Web.
 91 |     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
 92 |     alias: {
 93 |       
 94 |       // Support React Native Web
 95 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 96 |       'react-native': 'react-native-web',
 97 |     },
 98 |     plugins: [
 99 |       // Prevents users from importing files from outside of src/ (or node_modules/).
100 |       // This often causes confusion because we only process files within src/ with babel.
101 |       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
102 |       // please link the files into your node_modules/ and let module-resolution kick in.
103 |       // Make sure your source files are compiled, as they will not be processed in any way.
104 |       new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
105 |     ],
106 |   },
107 |   module: {
108 |     strictExportPresence: true,
109 |     rules: [
110 |       // TODO: Disable require.ensure as it's not a standard language feature.
111 |       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
112 |       // { parser: { requireEnsure: false } },
113 | 
114 |       // First, run the linter.
115 |       // It's important to do this before Babel processes the JS.
116 |       {
117 |         test: /\.(js|jsx|mjs)$/,
118 |         enforce: 'pre',
119 |         use: [
120 |           {
121 |             options: {
122 |               formatter: eslintFormatter,
123 |               eslintPath: require.resolve('eslint'),
124 |               
125 |             },
126 |             loader: require.resolve('eslint-loader'),
127 |           },
128 |         ],
129 |         include: paths.appSrc,
130 |       },
131 |       {
132 |         // "oneOf" will traverse all following loaders until one will
133 |         // match the requirements. When no loader matches it will fall
134 |         // back to the "file" loader at the end of the loader list.
135 |         oneOf: [
136 |           // "url" loader works just like "file" loader but it also embeds
137 |           // assets smaller than specified size as data URLs to avoid requests.
138 |           {
139 |             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
140 |             loader: require.resolve('url-loader'),
141 |             options: {
142 |               limit: 10000,
143 |               name: 'static/media/[name].[hash:8].[ext]',
144 |             },
145 |           },
146 |           // Process JS with Babel.
147 |           {
148 |             test: /\.(js|jsx|mjs)$/,
149 |             include: paths.appSrc,
150 |             loader: require.resolve('babel-loader'),
151 |             options: {
152 |               
153 |               compact: true,
154 |             },
155 |           },
156 |           // The notation here is somewhat confusing.
157 |           // "postcss" loader applies autoprefixer to our CSS.
158 |           // "css" loader resolves paths in CSS and adds assets as dependencies.
159 |           // "style" loader normally turns CSS into JS modules injecting <style>,
160 |           // but unlike in development configuration, we do something different.
161 |           // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
162 |           // (second argument), then grabs the result CSS and puts it into a
163 |           // separate file in our build process. This way we actually ship
164 |           // a single CSS file in production instead of JS code injecting <style>
165 |           // tags. If you use code splitting, however, any async bundles will still
166 |           // use the "style" loader inside the async code so CSS from them won't be
167 |           // in the main CSS file.
168 |           {
169 |             test: /\.css$/,
170 |             loader: ExtractTextPlugin.extract(
171 |               Object.assign(
172 |                 {
173 |                   fallback: {
174 |                     loader: require.resolve('style-loader'),
175 |                     options: {
176 |                       hmr: false,
177 |                     },
178 |                   },
179 |                   use: [
180 |                     {
181 |                       loader: require.resolve('css-loader'),
182 |                       options: {
183 |                         importLoaders: 1,
184 |                         minimize: true,
185 |                         sourceMap: shouldUseSourceMap,
186 |                       },
187 |                     },
188 |                     {
189 |                       loader: require.resolve('postcss-loader'),
190 |                       options: {
191 |                         // Necessary for external CSS imports to work
192 |                         // https://github.com/facebookincubator/create-react-app/issues/2677
193 |                         ident: 'postcss',
194 |                         plugins: () => [
195 |                           require('postcss-flexbugs-fixes'),
196 |                           autoprefixer({
197 |                             browsers: [
198 |                               '>1%',
199 |                               'last 4 versions',
200 |                               'Firefox ESR',
201 |                               'not ie < 9', // React doesn't support IE8 anyway
202 |                             ],
203 |                             flexbox: 'no-2009',
204 |                           }),
205 |                         ],
206 |                       },
207 |                     },
208 |                   ],
209 |                 },
210 |                 extractTextPluginOptions
211 |               )
212 |             ),
213 |             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
214 |           },
215 |           // "file" loader makes sure assets end up in the `build` folder.
216 |           // When you `import` an asset, you get its filename.
217 |           // This loader doesn't use a "test" so it will catch all modules
218 |           // that fall through the other loaders.
219 |           {
220 |             loader: require.resolve('file-loader'),
221 |             // Exclude `js` files to keep "css" loader working as it injects
222 |             // it's runtime that would otherwise processed through "file" loader.
223 |             // Also exclude `html` and `json` extensions so they get processed
224 |             // by webpacks internal loaders.
225 |             exclude: [/\.js$/, /\.html$/, /\.json$/],
226 |             options: {
227 |               name: 'static/media/[name].[hash:8].[ext]',
228 |             },
229 |           },
230 |           // ** STOP ** Are you adding a new loader?
231 |           // Make sure to add the new loader(s) before the "file" loader.
232 |         ],
233 |       },
234 |     ],
235 |   },
236 |   plugins: [
237 |     // Makes some environment variables available in index.html.
238 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
239 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
240 |     // In production, it will be an empty string unless you specify "homepage"
241 |     // in `package.json`, in which case it will be the pathname of that URL.
242 |     new InterpolateHtmlPlugin(env.raw),
243 |     // Generates an `index.html` file with the <script> injected.
244 |     new HtmlWebpackPlugin({
245 |       inject: true,
246 |       template: paths.appHtml,
247 |       minify: {
248 |         removeComments: true,
249 |         collapseWhitespace: true,
250 |         removeRedundantAttributes: true,
251 |         useShortDoctype: true,
252 |         removeEmptyAttributes: true,
253 |         removeStyleLinkTypeAttributes: true,
254 |         keepClosingSlash: true,
255 |         minifyJS: true,
256 |         minifyCSS: true,
257 |         minifyURLs: true,
258 |       },
259 |     }),
260 |     // Makes some environment variables available to the JS code, for example:
261 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
262 |     // It is absolutely essential that NODE_ENV was set to production here.
263 |     // Otherwise React will be compiled in the very slow development mode.
264 |     new webpack.DefinePlugin(env.stringified),
265 |     // Minify the code.
266 |     new webpack.optimize.UglifyJsPlugin({
267 |       compress: {
268 |         warnings: false,
269 |         // Disabled because of an issue with Uglify breaking seemingly valid code:
270 |         // https://github.com/facebookincubator/create-react-app/issues/2376
271 |         // Pending further investigation:
272 |         // https://github.com/mishoo/UglifyJS2/issues/2011
273 |         comparisons: false,
274 |       },
275 |       mangle: {
276 |         safari10: true,
277 |       },        
278 |       output: {
279 |         comments: false,
280 |         // Turned on because emoji and regex is not minified properly using default
281 |         // https://github.com/facebookincubator/create-react-app/issues/2488
282 |         ascii_only: true,
283 |       },
284 |       sourceMap: shouldUseSourceMap,
285 |     }),
286 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
287 |     new ExtractTextPlugin({
288 |       filename: cssFilename,
289 |     }),
290 |     // Generate a manifest file which contains a mapping of all asset filenames
291 |     // to their corresponding output file so that tools can pick it up without
292 |     // having to parse `index.html`.
293 |     new ManifestPlugin({
294 |       fileName: 'asset-manifest.json',
295 |     }),
296 |     // Generate a service worker script that will precache, and keep up to date,
297 |     // the HTML & assets that are part of the Webpack build.
298 |     new SWPrecacheWebpackPlugin({
299 |       // By default, a cache-busting query parameter is appended to requests
300 |       // used to populate the caches, to ensure the responses are fresh.
301 |       // If a URL is already hashed by Webpack, then there is no concern
302 |       // about it being stale, and the cache-busting can be skipped.
303 |       dontCacheBustUrlsMatching: /\.\w{8}\./,
304 |       filename: 'service-worker.js',
305 |       logger(message) {
306 |         if (message.indexOf('Total precache size is') === 0) {
307 |           // This message occurs for every build and is a bit too noisy.
308 |           return;
309 |         }
310 |         if (message.indexOf('Skipping static resource') === 0) {
311 |           // This message obscures real errors so we ignore it.
312 |           // https://github.com/facebookincubator/create-react-app/issues/2612
313 |           return;
314 |         }
315 |         console.log(message);
316 |       },
317 |       minify: true,
318 |       // For unknown URLs, fallback to the index page
319 |       navigateFallback: publicUrl + '/index.html',
320 |       // Ignores URLs starting from /__ (useful for Firebase):
321 |       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
322 |       navigateFallbackWhitelist: [/^(?!\/__).*/],
323 |       // Don't precache sourcemaps (they're large) and build asset manifest:
324 |       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
325 |     }),
326 |     // Moment.js is an extremely popular library that bundles large locale files
327 |     // by default due to how Webpack interprets its code. This is a practical
328 |     // solution that requires the user to opt into importing specific locales.
329 |     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
330 |     // You can remove this if you don't use Moment.js:
331 |     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
332 |   ],
333 |   // Some libraries import Node modules but don't use them in the browser.
334 |   // Tell Webpack to provide empty mocks for them so importing them works.
335 |   node: {
336 |     dgram: 'empty',
337 |     fs: 'empty',
338 |     net: 'empty',
339 |     tls: 'empty',
340 |     child_process: 'empty',
341 |   },
342 | };
343 | 


--------------------------------------------------------------------------------
/src/assist/styles/main.scss:
--------------------------------------------------------------------------------
  1 | article,
  2 | aside,
  3 | details,
  4 | figcaption,
  5 | figure,
  6 | footer,
  7 | header,
  8 | hgroup,
  9 | main,
 10 | nav,
 11 | section,
 12 | summary {
 13 |   display: block;
 14 | }
 15 | audio,
 16 | canvas,
 17 | video {
 18 |   display: inline-block;
 19 | }
 20 | audio:not([controls]) {
 21 |   display: none;
 22 |   height: 0;
 23 | }
 24 | html {
 25 |   font-family: sans-serif;
 26 |   -webkit-text-size-adjust: 100%;
 27 | }
 28 | body {
 29 |   font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
 30 |   background: #fff;
 31 |   padding-top: 0;
 32 |   margin: 0;
 33 | }
 34 | a:focus {
 35 |   outline: thin dotted;
 36 | }
 37 | a:active,
 38 | a:hover {
 39 |   outline: 0;
 40 | }
 41 | h1 {
 42 |   margin: .67em 0;
 43 | }
 44 | h1,
 45 | h2,
 46 | h3,
 47 | h4,
 48 | h5,
 49 | h6 {
 50 |   font-size: 16px;
 51 | }
 52 | abbr[title] {
 53 |   border-bottom: 1px dotted;
 54 | }
 55 | hr {
 56 |   box-sizing: content-box;
 57 |   height: 0;
 58 | }
 59 | mark {
 60 |   background: #ff0;
 61 |   color: #000;
 62 | }
 63 | code,
 64 | kbd,
 65 | pre,
 66 | samp {
 67 |   font-family: monospace,serif;
 68 |   font-size: 1em;
 69 | }
 70 | pre {
 71 |   white-space: pre-wrap;
 72 | }
 73 | q {
 74 |   quotes: \201C\201D\2018\2019;
 75 | }
 76 | small {
 77 |   font-size: 80%;
 78 | }
 79 | sub,
 80 | sup {
 81 |   font-size: 75%;
 82 |   line-height: 0;
 83 |   position: relative;
 84 |   vertical-align: baseline;
 85 | }
 86 | sup {
 87 |   top: -0.5em;
 88 | }
 89 | sub {
 90 |   bottom: -0.25em;
 91 | }
 92 | img {
 93 |   border: 0;
 94 |   vertical-align: middle;
 95 |   color: transparent;
 96 |   font-size: 0;
 97 | }
 98 | svg:not(:root) {
 99 |   overflow: hidden;
100 | }
101 | figure {
102 |   margin: 0;
103 | }
104 | fieldset {
105 |   border: 1px solid silver;
106 |   margin: 0 2px;
107 |   padding: .35em .625em .75em;
108 | }
109 | legend {
110 |   border: 0;
111 |   padding: 0;
112 | }
113 | table {
114 |   border-collapse: collapse;
115 |   border-spacing: 0;
116 |   overflow: hidden;
117 | }
118 | a {
119 |   text-decoration: none;
120 | }
121 | blockquote {
122 |   border-left: 3px solid #D0E5F2;
123 |   font-style: normal;
124 |   display: block;
125 |   vertical-align: baseline;
126 |   font-size: 100%;
127 |   margin: .5em 0;
128 |   padding: 0 0 0 1em;
129 | }
130 | ul,
131 | ol {
132 |   padding-left: 20px;
133 | }
134 | .main-wrap {
135 |   max-width: 100%;
136 |   min-width: 300px;
137 |   margin: 0 auto;
138 | }
139 | .content-wrap {
140 |   overflow: hidden;
141 |   background-color: #f9f9f9;
142 | }
143 | .content-wrap a {
144 |   word-break: break-all;
145 | }
146 | .headline {
147 |   border-bottom: 4px solid #f6f6f6;
148 | }
149 | .headline-title.onlyheading {
150 |   margin: 20px 0;
151 | }
152 | .headline img {
153 |   max-width: 100%;
154 |   vertical-align: top;
155 | }
156 | .headline-background-link {
157 |   line-height: 2em;
158 |   position: relative;
159 |   display: block;
160 |   padding: 20px 45px 20px 20px !important;
161 | }
162 | .icon-arrow-right {
163 |   position: absolute;
164 |   top: 50%;
165 |   right: 20px;
166 |   background-image: url(http://static.daily.zhihu.com/img/share-icons.png);
167 |   background-repeat: no-repeat;
168 |   display: inline-block;
169 |   vertical-align: middle;
170 |   background-position: -70px -20px;
171 |   width: 10px;
172 |   height: 15px;
173 |   margin-top: -7.5px;
174 | }
175 | .headline-background .heading {
176 |   color: #999;
177 |   font-size: 15px!important;
178 |   margin-bottom: 8px;
179 |   line-height: 1em;
180 | }
181 | .headline-background .heading-content {
182 |   color: #444;
183 |   font-size: 17px!important;
184 |   line-height: 1.2em;
185 | }
186 | .headline-title {
187 |   line-height: 1.2em;
188 |   color: #000;
189 |   font-size: 22px;
190 |   margin: 20px 0 10px;
191 |   padding: 0 20px!important;
192 |   font-weight: bold;
193 | }
194 | .meta {
195 |   white-space: nowrap;
196 |   text-overflow: ellipsis;
197 |   overflow: hidden;
198 |   font-size: 16px;
199 |   color: #b8b8b8;
200 | }
201 | .meta .source-icon {
202 |   width: 20px;
203 |   height: 20px;
204 |   margin-right: 4px;
205 | }
206 | .meta .time {
207 |   float: right;
208 |   margin-top: 2px;
209 | }
210 | .content {
211 |   color: #444;
212 |   line-height: 1.6em;
213 |   font-size: 17px;
214 |   margin: 10px 0 20px;
215 | }
216 | .content img {
217 |   max-width: 100%;
218 |   display: block;
219 |   margin: 30px auto;
220 | }
221 | 
222 | .content img + img {
223 |   margin-top: 15px;
224 | }
225 | 
226 | .content img[src*="zhihu.com/equation"] {
227 |   display: inline-block;
228 |   margin: 0 3px;
229 | }
230 | .content a {
231 |   color: #259;
232 | }
233 | .content a:hover {
234 |   text-decoration: underline;
235 | }
236 | .view-more {
237 |   margin-bottom: 25px;
238 |   text-align: center;
239 | }
240 | .view-more a {
241 |   font-size: 16px;
242 |   display: inline-block;
243 |   width: 125px;
244 |   height: 30px;
245 |   line-height: 30px;
246 |   background: #f0f0f0;
247 |   color: #B8B8B8;
248 | }
249 | .question {
250 |   overflow: hidden;
251 |   padding: 0 20px!important;
252 | }
253 | .question + .question {
254 |   border-top: 5px solid #f6f6f6;
255 | }
256 | .question-title {
257 |   line-height: 1.4em;
258 |   color: #000;
259 |   font-weight: 700;
260 |   font-size: 18px;
261 |   margin: 20px 0;
262 | }
263 | .meta .author {
264 |   color: #444;
265 |   font-weight: 700;
266 | }
267 | .answer + .answer {
268 |   border-top: 2px solid #f6f6f6;
269 |   padding-top: 20px;
270 | }
271 | .footer {
272 |   text-align: center;
273 |   color: #b8b8b8;
274 |   font-size: 13px;
275 |   padding: 20px 0;
276 | }
277 | .footer a {
278 |   color: #b8b8b8;
279 | }
280 | .question .view-more a {
281 |   width: 100%;
282 |   display: block;
283 | }
284 | .hot-comment {
285 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
286 | }
287 | .comment-label {
288 |   font-size: 16px;
289 |   color: #333;
290 |   line-height: 1.5em;
291 |   font-weight: 700;
292 |   border-top: 1px solid #eee;
293 |   border-bottom: 1px solid #eee;
294 |   margin: 0;
295 |   padding: 9px 20px;
296 | }
297 | .comment-list {
298 |   margin-bottom: 20px;
299 | }
300 | .comment-item {
301 |   font-size: 15px;
302 |   color: #666;
303 |   border-bottom: 1px solid #eee;
304 |   padding: 15px 20px;
305 | }
306 | .comment-meta {
307 |   position: relative;
308 |   margin-bottom: 10px;
309 | }
310 | .comment-meta .author {
311 |   vertical-align: middle;
312 |   color: #444;
313 | }
314 | .comment-meta .vote {
315 |   position: absolute;
316 |   color: #b8b8b8;
317 |   font-size: 12px;
318 |   right: 0;
319 | }
320 | .night .comment-label {
321 |   color: #b8b8b8;
322 |   border-top: 1px solid #303030;
323 |   border-bottom: 1px solid #303030;
324 | }
325 | .night .comment-item {
326 |   color: #7f7f7f;
327 |   border-bottom: 1px solid #303030;
328 | }
329 | .icon-vote,
330 | .icon-voted {
331 |   background-repeat: no-repeat;
332 |   display: inline-block;
333 |   vertical-align: 0;
334 |   width: 11px;
335 |   height: 12px;
336 |   margin-right: 4px;
337 |   background-image: url(http://static.daily.zhihu.com/img/app/Comment_Vote.png) !important;
338 | }
339 | .icon-voted {
340 |   background-image: url(http://static.daily.zhihu.com/img/app/Comment_Voted.png) !important;
341 | }
342 | .night .icon-vote {
343 |   background-image: url(http://static.daily.zhihu.com/img/app/Dark_Comment_Vote.png) !important;
344 | }
345 | .img-wrap .headline-title {
346 |   bottom: 5px;
347 | }
348 | .img-wrap .img-source {
349 |   right: 10px!important;
350 |   font-size: 9px;
351 | }
352 | .global-header {
353 |   position: static;
354 | }
355 | .button {
356 |   width: 60px;
357 | }
358 | .button i {
359 |   margin-right: 0;
360 | }
361 | .headline .img-place-holder {
362 |   height: 200px;
363 | }
364 | .from-column {
365 |   width: 280px;
366 |   line-height: 30px;
367 |   height: 30px;
368 |   padding-left: 90px;
369 |   color: #2aacec;
370 |   background-image: url(http://static.daily.zhihu.com/img/News_Column_Entrance.png);
371 |   box-sizing: border-box;
372 |   margin: 0 20px 20px;
373 | }
374 | .from-column:active {
375 |   background-image: url(http://static.daily.zhihu.com/img/News_Column_Entrance_Highlight.png);
376 | }
377 | .night .headline {
378 |   border-bottom: 4px solid #303030;
379 | }
380 | .night img {
381 |   -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
382 | }
383 | body.night,
384 | .night .content-wrap {
385 |   background: #343434;
386 | }
387 | .night .answer + .answer {
388 |   border-top: 2px solid #303030;
389 | }
390 | .night .question + .question {
391 |   border-top: 4px solid #303030;
392 | }
393 | .night .view-more a {
394 |   background: #292929;
395 |   color: #666;
396 | }
397 | .night .icon-arrow-right {
398 |   background-image: url(http://static.daily.zhihu.com/img/share-icons.png);
399 |   background-repeat: no-repeat;
400 |   display: inline-block;
401 |   vertical-align: middle;
402 |   background-position: -70px -35px;
403 |   width: 10px;
404 |   height: 15px;
405 | }
406 | .night blockquote,
407 | .night sup {
408 |   border-left: 3px solid #666;
409 | }
410 | .night .content a {
411 |   color: #698ebf;
412 | }
413 | .night .from-column {
414 |   color: #2b82ac;
415 |   background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance.png);
416 | }
417 | .night .from-column:active {
418 |   background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance_Highlight.png);
419 | }
420 | .large .question-title {
421 |   font-size: 24px;
422 | }
423 | .large .meta {
424 |   font-size: 18px;
425 | }
426 | .large .content {
427 |   font-size: 20px;
428 | }
429 | .large blockquote,
430 | .large sup {
431 |   line-height: 1.6;
432 | }
433 | .meta .meta-item {
434 |   -o-text-overflow: ellipsis;
435 |   width: 39%;
436 |   overflow: hidden;
437 |   white-space: nowrap;
438 |   text-overflow: ellipsis;
439 |   display: inline-block;
440 |   color: #929292;
441 |   margin-right: 7px;
442 | }
443 | .headline .meta {
444 |   white-space: nowrap;
445 |   text-overflow: ellipsis;
446 |   overflow: hidden;
447 |   font-size: 11px;
448 |   color: #b8b8b8;
449 |   margin: 15px 0;
450 |   padding: 0 20px;
451 | }
452 | .headline .meta a,
453 | .headline .meta a:hover {
454 |   padding-left: 1em;
455 |   margin-top: 2px;
456 |   float: right;
457 |   font-size: 11px;
458 |   color: #0066cf;
459 |   text-decoration: none;
460 | }
461 | .highlight {
462 |   width: auto;
463 |   overflow: auto;
464 |   word-wrap: normal;
465 | }
466 | .highlight::-webkit-scrollbar {
467 |   width: 6px;
468 |   height: 6px;
469 | }
470 | .highlight code {
471 |   overflow: auto;
472 | }
473 | .highlight::-webkit-scrollbar-thumb:horizontal {
474 |   border-radius: 6px;
475 |   background-color: rgba(0,0,0,.5);
476 | }
477 | .highlight::-webkit-scrollbar-thumb:horizontal:hover {
478 |   background-color: rgba(0,0,0,.6);
479 | }
480 | .highlight pre {
481 |   margin: 0;
482 |   white-space: pre;
483 | }
484 | .highlight .hll {
485 |   background-color: #ffc;
486 | }
487 | .highlight .err {
488 |   color: #a61717;
489 |   background-color: #e3d2d2;
490 | }
491 | .highlight .cp {
492 |   color: #999;
493 |   font-weight: 700;
494 | }
495 | .highlight .cs {
496 |   color: #999;
497 |   font-weight: 700;
498 |   font-style: italic;
499 | }
500 | .highlight .gd {
501 |   color: #000;
502 |   background-color: #fdd;
503 | }
504 | .highlight .gi {
505 |   color: #000;
506 |   background-color: #dfd;
507 | }
508 | .highlight .gu {
509 |   color: #aaa;
510 | }
511 | .highlight .ni {
512 |   color: purple;
513 | }
514 | .highlight .nt {
515 |   color: navy;
516 | }
517 | .highlight .w {
518 |   color: #bbb;
519 | }
520 | .highlight .sr {
521 |   color: olive;
522 | }
523 | [hidden],
524 | .button span {
525 |   display: none;
526 | }
527 | b,
528 | strong,
529 | .highlight .k,
530 | .highlight .o,
531 | .highlight .gs,
532 | .highlight .kc,
533 | .highlight .kd,
534 | .highlight .kn,
535 | .highlight .kp,
536 | .highlight .kr,
537 | .highlight .ow {
538 |   font-weight: 700;
539 | }
540 | dfn,
541 | .highlight .ge {
542 |   font-style: italic;
543 | }
544 | .meta span,
545 | .meta .source {
546 |   vertical-align: middle;
547 | }
548 | .meta .avatar,
549 | .comment-meta .avatar {
550 |   width: 20px;
551 |   height: 20px;
552 |   border-radius: 2px;
553 |   margin-right: 5px;
554 | }
555 | .meta .bio,
556 | .highlight .gh,
557 | .highlight .bp {
558 |   color: #999;
559 | }
560 | .night .comment-meta .author,
561 | .night .content,
562 | .night .meta .author,
563 | .highlight .go {
564 |   color: #888;
565 | }
566 | .night .headline-title,
567 | .night .headline-background .heading-content,
568 | .night .question-title {
569 |   color: #B8B8B8;
570 | }
571 | .highlight .c,
572 | .highlight .cm,
573 | .highlight .c1 {
574 |   color: #998;
575 |   font-style: italic;
576 | }
577 | .highlight .gr,
578 | .highlight .gt {
579 |   color: #a00;
580 | }
581 | .highlight .gp,
582 | .highlight .nn {
583 |   color: #555;
584 | }
585 | .highlight .kt,
586 | .highlight .nc {
587 |   color: #458;
588 |   font-weight: 700;
589 | }
590 | .highlight .m,
591 | .highlight .mf,
592 | .highlight .mh,
593 | .highlight .mi,
594 | .highlight .mo,
595 | .highlight .il {
596 |   color: #099;
597 | }
598 | .highlight .s,
599 | .highlight .sb,
600 | .highlight .sc,
601 | .highlight .sd,
602 | .highlight .s2,
603 | .highlight .se,
604 | .highlight .sh,
605 | .highlight .si,
606 | .highlight .sx,
607 | .highlight .s1,
608 | .highlight .ss {
609 |   color: #d32;
610 | }
611 | .highlight .na,
612 | .highlight .nb,
613 | .highlight .no,
614 | .highlight .nv,
615 | .highlight .vc,
616 | .highlight .vg,
617 | .highlight .vi {
618 |   color: teal;
619 | }
620 | .highlight .ne,
621 | .highlight .nf {
622 |   color: #900;
623 |   font-weight: 700;
624 | }
625 | .answer h1,
626 | .answer h2,
627 | .answer h3,
628 | .answer h4,
629 | .answer h5 {
630 |   font-size: 19px;
631 | }
632 | @media only screen and (-webkit-min-device-pixel-ratio2), only screen and (min-device-pixel-ratio2) {
633 |   .icon-arrow-right {
634 |     background-image: url(http://static.daily.zhihu.com/img/share-icons@2x.png);
635 |     -webkit-background-size: 82px 55px;
636 |     background-size: 82px 55px;
637 |   }
638 |   .icon-vote,
639 |   .icon-voted {
640 |     background-image: url(http://static.daily.zhihu.com/img/app/Comment_Vote@2x.png) !important;
641 |     background-size: 11px 12px;
642 |   }
643 |   .icon-voted {
644 |     background-image: url(http://static.daily.zhihu.com/img/app/Comment_Voted@2x.png) !important;
645 |   }
646 |   .night .icon-vote {
647 |     background-image: url(http://static.daily.zhihu.com/img/app/Dark_Comment_Vote@2x.png) !important;
648 |   }
649 |   .from-column {
650 |     background-image: url(http://static.daily.zhihu.com/img/News_Column_Entrance@2x.png) !important;
651 |     background-size: 280px 30px;
652 |   }
653 |   .from-column:active {
654 |     background-image: url(http://static.daily.zhihu.com/img/News_Column_Entrance_Highlight@2x.png) !important;
655 |   }
656 |   .night .from-column {
657 |     color: #2b82ac;
658 |     background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance@2x.png) !important;
659 |   }
660 |   .night .from-column:active {
661 |     background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance_Highlight@2x.png) !important;
662 |   }
663 | }
664 | .meta .meta-item {
665 |   width: 39%;
666 |   overflow: hidden;
667 |   white-space: nowrap;
668 |   text-overflow: ellipsis;
669 |   display: inline-block;
670 |   color: #929292;
671 |   margin-right: 7px;
672 | }
673 | .headline .meta {
674 |   white-space: nowrap;
675 |   text-overflow: ellipsis;
676 |   overflow: hidden;
677 |   font-size: 11px;
678 |   color: #b8b8b8;
679 |   margin: 20px 0;
680 |   padding: 0 20px;
681 | }
682 | .headline .meta a,
683 | .headline .meta a:hover {
684 |   margin-top: 2px;
685 |   float: right;
686 |   font-size: 11px;
687 |   color: #0066cf;
688 |   text-decoration: none;
689 | }
690 | .answer h1,
691 | .answer h2,
692 | .answer h3,
693 | .answer h4,
694 | .answer h5 {
695 |   font-size: 19px;
696 | }
697 | .origin-source,
698 | a.origin-source:link {
699 |   display: block;
700 |   margin: 25px 0;
701 |   height: 50px;
702 |   overflow: hidden;
703 |   background: #f0f0f0;
704 |   color: #888;
705 |   position: relative;
706 |   -webkit-touch-callout: none;
707 | }
708 | .origin-source .source-logo,
709 | a.origin-source:link .source-logo {
710 |   float: left;
711 |   width: 50px;
712 |   height: 50px;
713 |   margin-right: 10px;
714 | }
715 | .origin-source .text,
716 | a.origin-source:link .text {
717 |   line-height: 50px;
718 |   height: 50px;
719 |   font-size: 13px;
720 | }
721 | .origin-source.with-link .text {
722 |   color: #333;
723 | }
724 | .origin-source.with-link:after {
725 |   display: block;
726 |   position: absolute;
727 |   border-color: transparent transparent transparent #f0f0f0;
728 |   border-width: 7px;
729 |   border-style: solid;
730 |   height: 0;
731 |   width: 0;
732 |   top: 18px;
733 |   right: 4px;
734 |   line-height: 0;
735 |   content: "";
736 | }
737 | .origin-source.with-link:before {
738 |   display: block;
739 |   height: 0;
740 |   width: 0;
741 |   position: absolute;
742 |   top: 18px;
743 |   right: 3px;
744 |   border-color: transparent transparent transparent #000;
745 |   border-width: 7px;
746 |   border-style: solid;
747 |   line-height: 0;
748 |   content: "";
749 | }
750 | .origin-source-wrap {
751 |   position: relative;
752 |   background: #f0f0f0;
753 | }
754 | .origin-source-wrap .focus-link {
755 |   position: absolute;
756 |   right: 0;
757 |   top: 0;
758 |   width: 45px;
759 |   color: #00a2ed;
760 |   height: 50px;
761 |   display: none;
762 |   text-align: center;
763 |   font-size: 12px;
764 |   -webkit-touch-callout: none;
765 | }
766 | .origin-source-wrap .focus-link .btn-label {
767 |   text-align: center;
768 |   display: block;
769 |   margin-top: 8px;
770 |   border-left: solid 1px #ccc;
771 |   height: 34px;
772 |   line-height: 34px;
773 | }
774 | .origin-source-wrap.unfocused .focus-link {
775 |   display: block;
776 | }
777 | .origin-source-wrap.unfocused .origin-source:before,
778 | .origin-source-wrap.unfocused .origin-source:after {
779 |   display: none;
780 | }
781 | .night .origin-source-wrap {
782 |   background: #292929;
783 | }
784 | .night .origin-source-wrap .focus-link {
785 |   color: #116f9e;
786 | }
787 | .night .origin-source-wrap .btn-label {
788 |   border-left: solid 1px #3f3f3f;
789 | }
790 | .night .origin-source,
791 | .night .origin-source.with-link {
792 |   background: #292929;
793 |   color: #666;
794 | }
795 | .night .origin-source .text,
796 | .night .origin-source.with-link .text {
797 |   color: #666;
798 | }
799 | .night .origin-source.with-link:after {
800 |   border-color: transparent transparent transparent #292929;
801 | }
802 | .night .origin-source.with-link:before {
803 |   border-color: transparent transparent transparent #666;
804 | }
805 | /* ==== */
806 | .question-title {
807 |   color: #494b4d;
808 | }
809 | 
810 | blockquote {
811 |   color: #9da3a6;
812 |   border-left: 3px solid #Dfe3e6;
813 | }
814 | 
815 | .content a {
816 |   color: #4786b3;
817 | }
818 | 
819 | .content {
820 |   font-size: 17px;
821 |   color: #616466;
822 | }
823 | 
824 | .content-wrap {
825 |   background: #fff;
826 | }
827 | 
828 | hr {
829 |   margin: 30px 0;
830 |   border-top-width: 0;
831 | }
832 | 
833 | 
834 | p {
835 |   margin: 20px 0 !important;
836 | }
837 | 
838 | .dudu-night .content {
839 |   color: #797b80;
840 | }
841 | 
842 | .dudu-night hr {
843 |   color: #27282b;
844 |   border-color: #27282b;
845 | }
846 | .dudu-night .meta .author,
847 | .dudu-night .meta .bio {
848 |   color: #555659;
849 | }
850 | .dudu-night .headline-title,
851 | .dudu-night .headline-background .heading-content,
852 | .dudu-night .question-title {
853 |   color: #919499;
854 | }
855 | 
856 | .dudu-night .headline {
857 |   border-bottom: none;
858 | }
859 | .dudu-night img {
860 |   -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
861 | }
862 | body.dudu-night,
863 | .dudu-night .content-wrap {
864 |   background: #1d1e1f;
865 | }
866 | .dudu-night .answer + .answer {
867 |   border-top: 2px solid #27282b;
868 | }
869 | .dudu-night .question + .question {
870 |   border-top: 4px solid #27282b;
871 | }
872 | .dudu-night .view-more a {
873 |   background: #1d1e1f;
874 |   color: #396280;
875 | }
876 | .dudu-night .icon-arrow-right {
877 |   background-image: url(http://static.daily.zhihu.com/img/share-icons.png);
878 |   background-repeat: no-repeat;
879 |   display: inline-block;
880 |   vertical-align: middle;
881 |   background-position: -70px -35px;
882 |   width: 10px;
883 |   height: 15px;
884 | }
885 | .dudu-night blockquote,
886 | .dudu-night sup {
887 |   border-left: 3px solid #2e3033;
888 |   color: #555659;
889 | }
890 | .dudu-night .content a {
891 |   color: #396280;
892 | }
893 | 
894 | .dudu-night img {
895 |   opacity: 0.7;
896 | }
897 | 
898 | .dudu-night .from-column {
899 |   color: #2b82ac;
900 |   background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance.png);
901 | }
902 | .dudu-night .from-column:active {
903 |   background-image: url(http://static.daily.zhihu.com/img/Dark_News_Column_Entrance_Highlight.png);
904 | }
905 | 
906 | //禁用头部下面的分隔线
907 | .dudu .headline {
908 |   border-bottom: none;
909 | }
910 | 
911 | .dudu-night .origin-source,
912 | .dudu-night a.origin-source:link {
913 |   background: #222324;
914 | }
915 | 
916 | .dudu-night .origin-source.with-link .text {
917 |   color: #797b80;
918 | }
919 | .dudu-night .origin-source.with-link:after {
920 |   border-color: transparent transparent transparent #797b80;
921 | }
922 | @import "../../../node_modules/antd/dist/antd.css";
923 | @import 'reset.scss';
924 | @import "layout.scss";
925 | @import "items.scss";
926 | @import "about.scss";


--------------------------------------------------------------------------------