├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   └── duck.jpg
    ├── components
    │   ├── Button
    │   │   └── index.js
    │   ├── Grid
    │   │   ├── Row.js
    │   │   ├── index.js
    │   │   └── Col.js
    │   ├── ScrollToTop
    │   │   └── index.js
    │   ├── PointOutContent
    │   │   └── index.js
    │   ├── Footer
    │   │   └── index.js
    │   ├── ArticleDirectory
    │   │   ├── Styled.js
    │   │   └── index.js
    │   ├── Blog
    │   │   ├── Styled.js
    │   │   ├── index.js
    │   │   └── markdown.css
    │   ├── Container
    │   │   └── index.js
    │   ├── Loader
    │   │   └── index.js
    │   ├── ContentLoader
    │   │   └── index.js
    │   ├── BlogList
    │   │   ├── Styled.js
    │   │   └── index.js
    │   ├── Tag
    │   │   └── index.js
    │   ├── ResumeContent
    │   │   ├── index.js
    │   │   └── markdown.css
    │   ├── TopNav
    │   │   └── index.js
    │   └── ProfileCard
    │   │   └── index.js
    ├── reducers
    │   ├── index.js
    │   ├── blog.js
    │   ├── resume.js
    │   ├── profile.js
    │   └── blogList.js
    ├── index.js
    ├── reboot.css
    ├── store.js
    ├── constants
    │   └── index.js
    ├── App.js
    ├── utils
    │   └── index.js
    └── registerServiceWorker.js
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── paths.js
    ├── env.js
    ├── webpackDevServer.config.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── .gitignore
├── scripts
    ├── test.js
    ├── start.js
    └── build.js
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zaleGZL/zalegzl-website/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/duck.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zaleGZL/zalegzl-website/HEAD/src/assets/duck.jpg


--------------------------------------------------------------------------------
/src/components/Button/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | 
4 | const Button = styled.button`
5 |   background-color: red;
6 | `
7 | 
8 | export default Button
9 | 


--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux'
 2 | import blogList from './blogList'
 3 | import blog from './blog'
 4 | import resume from './resume'
 5 | import profile from './profile'
 6 | 
 7 | export default combineReducers({
 8 |   blogList,
 9 |   blog,
10 |   resume,
11 |   profile
12 | })
13 | 


--------------------------------------------------------------------------------
/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/en/webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/.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 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/src/components/Grid/Row.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | 
 3 | const Row = styled.div`
 4 |   /* 清除浮动 */
 5 |   &::after {
 6 |     content: '';
 7 |     clear: both;
 8 |     display: table;
 9 |   }
10 | 
11 |   /* 是网格布局具有相同的高度 */
12 |   display: -webkit-box;
13 |   display: -webkit-flex;
14 |   display: -ms-flexbox;
15 |   display: flex;
16 | `
17 | 
18 | export default Row
19 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "ZALE_BLOG",
 3 |   "name": "guozeling's blog",
 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/en/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/components/Grid/index.js:
--------------------------------------------------------------------------------
 1 | import Row from './Row'
 2 | import Col from './Col'
 3 | 
 4 | const Grid = {
 5 |   Row,
 6 |   Col
 7 | }
 8 | 
 9 | // 网格布局 API
10 | // Row (行)
11 | 
12 | // Col (列) 元素所占用12格中的多少格
13 | // xs: <  576px or 适配所有屏幕宽度
14 | // sm: >= 576px
15 | // md: >= 768px
16 | // lg: >= 992px
17 | // xl: >= 1200px
18 | // gutter: left and right padding (default 15px)
19 | 
20 | export default Grid
21 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Provider } from 'react-redux'
 4 | import { BrowserRouter as Router } from 'react-router-dom'
 5 | import store from './store'
 6 | import App from './App'
 7 | // import registerServiceWorker from './registerServiceWorker'
 8 | // registerServiceWorker()
 9 | 
10 | ReactDOM.render(
11 |   <Provider store={store}>
12 |     <Router>
13 |       <App />
14 |     </Router>
15 |   </Provider>,
16 |   document.getElementById('root')
17 | )
18 | 


--------------------------------------------------------------------------------
/src/components/ScrollToTop/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Styled from 'styled-components'
 3 | import ScrollToTop from 'react-scroll-up'
 4 | const StyledScrollUp = Styled.div`
 5 |   font-size: 30px;
 6 |   color: #1c93e0;
 7 |   &:hover {
 8 |     opacity: 0.6;
 9 |   }
10 | `
11 | 
12 | const ScrollToTopCustom = () => (
13 |   <ScrollToTop showUnder={160}>
14 |     <StyledScrollUp>
15 |       <i className="far fa-arrow-alt-circle-up" />
16 |     </StyledScrollUp>
17 |   </ScrollToTop>
18 | )
19 | 
20 | export default ScrollToTopCustom


--------------------------------------------------------------------------------
/src/components/PointOutContent/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import Styled from 'styled-components'
 4 | 
 5 | const PointOutContentContainer = Styled.div`
 6 |   margin-top: 20px;
 7 |   text-align: center;
 8 |   font-size: 1.4rem;
 9 |   color: rgba(0, 0, 0, 0.65);
10 | `
11 | 
12 | const PointOutContent = ({ text }) => (
13 |   <PointOutContentContainer>{text}</PointOutContentContainer>
14 | )
15 | 
16 | PointOutContent.proptypes = {
17 |   text: PropTypes.string
18 | }
19 | 
20 | export default PointOutContent
21 | 


--------------------------------------------------------------------------------
/src/reboot.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |     font-size: 12px;
 3 |     font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
 4 |     word-wrap: break-word;
 5 |     color: #333;
 6 |     background-color: #F4F5F5;
 7 |     position: relative;
 8 |     min-height: 100%;
 9 | }
10 | 
11 | *,
12 | *::before,
13 | *::after {
14 |     box-sizing: border-box;
15 | }
16 | 
17 | body {
18 |     margin: 0 0 100px;
19 |     padding-top: 50px;
20 | }
21 | 
22 | a {
23 |     text-decoration: none;
24 |     cursor: pointer;
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Footer/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Styled from 'styled-components'
 3 | 
 4 | const StyledFooter = Styled.div`
 5 |   padding: 60px 0 10px;
 6 |   text-align: center;
 7 |   font-size: 1.3rem;
 8 |   font-weight: 500;
 9 |   line-height: 2;
10 |   color: #3c3b3b;
11 | 
12 |   position: absolute;
13 |   left: 0;
14 |   bottom: 0;
15 |   height: 100px;
16 |   width: 100%;
17 | `
18 | 
19 | const Footer = () => (
20 |   <StyledFooter>
21 |     @2018&nbsp;&nbsp;<i className="far fa-user-circle" />&nbsp;ZALE
22 |   </StyledFooter>
23 | )
24 | 
25 | export default Footer
26 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware, compose } from 'redux'
 2 | import thunk from 'redux-thunk'
 3 | import rootReducer from './reducers'
 4 | 
 5 | const initialState = {}
 6 | const middlewares = [thunk]
 7 | const enhancers = []
 8 | 
 9 | if (process.env.NODE_ENV === 'development') {
10 |   const devToolsExtension = window.devToolsExtension
11 | 
12 |   if (typeof devToolsExtension === 'function') {
13 |     enhancers.push(devToolsExtension())
14 |   }
15 | }
16 | 
17 | const composedEnhancers = compose(applyMiddleware(...middlewares), ...enhancers)
18 | 
19 | export default createStore(rootReducer, initialState, composedEnhancers)
20 | 


--------------------------------------------------------------------------------
/src/components/ArticleDirectory/Styled.js:
--------------------------------------------------------------------------------
 1 | import Styled from 'styled-components'
 2 | 
 3 | export const ArticleDirectoryContainer = Styled.div`
 4 |   background-color: #fff;
 5 |   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
 6 |   color: #636363;
 7 |   font-weight: 300;
 8 | 
 9 |   position: -webkit-sticky;
10 |   position: sticky;
11 |   top: 0;
12 | `
13 | 
14 | export const Title = Styled.div`
15 |   font-size: 1.25rem;
16 |   font-weight: 400;
17 |   text-align: center;
18 |   border-bottom: 1px solid #e8e8e8;
19 |   padding: 10px 0;
20 | `
21 | 
22 | export const Content = Styled.div`
23 |   padding: 10px 0;
24 |   font-size: 1.3rem;
25 |   padding-right: 15px;
26 | 
27 |   & a {
28 |     color: #636363;
29 |   }
30 |   & a:hover, & a:active {
31 |     color: #303030;
32 |     font-weight: 400;
33 |   }
34 | `
35 | 


--------------------------------------------------------------------------------
/src/components/ArticleDirectory/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import { connect } from 'react-redux'
 3 | import * as Styled from './Styled'
 4 | 
 5 | class ArticleDirectory extends Component {
 6 |   render() {
 7 |     const toc = this.props.toc
 8 |     return (
 9 |       <Styled.ArticleDirectoryContainer>
10 |         <Styled.Title>文章目录</Styled.Title>
11 |         {toc ? (
12 |           <Styled.Content>
13 |             <div
14 |               dangerouslySetInnerHTML={{
15 |                 __html: toc
16 |               }}
17 |             />
18 |           </Styled.Content>
19 |         ) : null}
20 |       </Styled.ArticleDirectoryContainer>
21 |     )
22 |   }
23 | }
24 | 
25 | const mapStateToProps = state => ({
26 |   toc: state.blog.data.toc
27 | })
28 | 
29 | export default connect(mapStateToProps)(ArticleDirectory)
30 | 


--------------------------------------------------------------------------------
/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/components/Blog/Styled.js:
--------------------------------------------------------------------------------
 1 | import Styled from 'styled-components'
 2 | 
 3 | export const BlogContainer = Styled.div`
 4 |   background-color: #fff;
 5 |   margin-bottom: 1rem;
 6 |   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
 7 | 
 8 |   color: rgba(51, 51, 51, 0.9);
 9 | `
10 | 
11 | export const InfoContainer = Styled.div`
12 |   padding: 1.1rem 1.3rem 1rem 1.3rem;
13 |   /* border-bottom: 1px solid #e8e8e8; */
14 |   text-align: center;
15 | `
16 | 
17 | export const Info = Styled.span`
18 |   padding-right: 1.6rem;
19 |   padding-bottom: 0.3rem;
20 | 
21 |   font-size: 1.1rem;
22 |   font-weight: 400;
23 |   line-height: 1.5;
24 |   color: rgba(0, 0, 0, 0.45);
25 | `
26 | 
27 | export const Title = Styled.div`
28 |   font-size: 1.8rem;
29 |   padding-bottom: 1.3rem;
30 | `
31 | 
32 | export const BlogContent = Styled.div`
33 |   padding: 1rem 1.3rem 2rem 1.3rem;
34 | `
35 | 


--------------------------------------------------------------------------------
/src/components/Container/index.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types'
 2 | import styled, { css } from 'styled-components'
 3 | import { getPixelString } from '../../utils'
 4 | 
 5 | const getMaxWidth = css`
 6 |   @media only screen and (min-width: 576px) {
 7 |     max-width: 540px;
 8 |   }
 9 | 
10 |   @media only screen and (min-width: 768px) {
11 |     max-width: 720px;
12 |   }
13 | 
14 |   @media only screen and (min-width: 992px) {
15 |     max-width: 960px;
16 |   }
17 | 
18 |   @media only screen and (min-width: 1200px) {
19 |     max-width: 1140px;
20 |   }
21 | `
22 | 
23 | const Container = styled.div`
24 |   width: 100%;
25 |   padding: 0 ${({ lrPadding }) => getPixelString(lrPadding, 15)};
26 |   margin: 0 auto;
27 | 
28 |   ${({ fluid }) => (fluid ? undefined : getMaxWidth)};
29 | `
30 | 
31 | Container.propTypes = {
32 |   lrPadding: PropTypes.number,
33 |   fluid: PropTypes.bool
34 | }
35 | 
36 | export default Container
37 | 


--------------------------------------------------------------------------------
/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/constants/index.js:
--------------------------------------------------------------------------------
 1 | // 博客列表每页的数目
 2 | const blogListPerPageCount = 5
 3 | const activePaginationClassName = 'active-pagination-link'
 4 | const blogListQs = 'fields=_id,title,summary,createTime,viewTimes,tags,category'
 5 | const blogQs =
 6 |   'fields=title,summary,createTime,viewTimes,tags,category,htmlContent,toc'
 7 | const apiPrefix = '/api'
 8 | 
 9 | const navList = [
10 |   {
11 |     key: 'home',
12 |     to: '/blogs',
13 |     name: '首页',
14 |     icon: 'fas fa-home',
15 |     exact: false
16 |   },
17 |   {
18 |     key: 'categories',
19 |     to: '/categories',
20 |     name: '分类',
21 |     icon: 'fas fa-th',
22 |     exact: false
23 |   },
24 |   {
25 |     key: 'tags',
26 |     to: '/tags',
27 |     name: '标签',
28 |     icon: 'fas fa-tags',
29 |     exact: false
30 |   },
31 |   {
32 |     key: 'about',
33 |     to: '/about',
34 |     name: '关于',
35 |     icon: 'fas fa-user',
36 |     exact: false
37 |   }
38 | ]
39 | 
40 | export {
41 |   blogListPerPageCount,
42 |   activePaginationClassName,
43 |   blogListQs,
44 |   navList,
45 |   apiPrefix,
46 |   blogQs
47 | }
48 | 


--------------------------------------------------------------------------------
/src/components/Grid/Col.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | import PropTypes from 'prop-types'
 3 | import { getPixelString } from '../../utils'
 4 | 
 5 | const getWidthString = span => {
 6 |   if (span === undefined) {
 7 |     return undefined
 8 |   } else if (span === 0) {
 9 |     return 'display: none;'
10 |   }
11 | 
12 |   const width = span / 12 * 100
13 |   return `width: ${width}%;`
14 | }
15 | 
16 | const Col = styled.div`
17 |   float: left;
18 |   padding: 0 ${({ gutter }) => getPixelString(gutter, 15)};
19 | 
20 |   @media only screen and (min-width: 1px) {
21 |     display: block;
22 |     width: 100%;
23 |     ${({ xs }) => getWidthString(xs)};
24 |   }
25 | 
26 |   @media only screen and (min-width: 576px) {
27 |     display: block;
28 |     ${({ sm }) => getWidthString(sm)};
29 |   }
30 | 
31 |   @media only screen and (min-width: 768px) {
32 |     display: block;
33 |     ${({ md }) => getWidthString(md)};
34 |   }
35 | 
36 |   @media only screen and (min-width: 992px) {
37 |     display: block;
38 |     ${({ lg }) => getWidthString(lg)};
39 |   }
40 | 
41 |   @media only screen and (min-width: 1200px) {
42 |     display: block;
43 |     ${({ xl }) => getWidthString(xl)};
44 |   }
45 | `
46 | 
47 | Col.propTypes = {
48 |   xs: PropTypes.number,
49 |   sm: PropTypes.number,
50 |   md: PropTypes.number,
51 |   lg: PropTypes.number,
52 |   xl: PropTypes.number,
53 |   gutter: PropTypes.number
54 | }
55 | 
56 | export default Col
57 | 


--------------------------------------------------------------------------------
/src/reducers/blog.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import { apiPrefix } from '../constants'
 3 | 
 4 | const types = {
 5 |   // 获取博客信息
 6 |   START_GET_BLOG: 'blog/START_GET_BLOG',
 7 |   SUCCESS_GET_BLOG: 'blog/SUCCESS_GET_BLOG',
 8 |   FAILURE_GET_BLOG: 'blog/FAILURE_GET_BLOG'
 9 | }
10 | 
11 | const initState = {
12 |   status: '',
13 |   data: {}
14 | }
15 | 
16 | export default (state = initState, action) => {
17 |   switch (action.type) {
18 |     case types.START_GET_BLOG:
19 |       return {
20 |         ...state,
21 |         status: 'pending'
22 |       }
23 |     case types.SUCCESS_GET_BLOG:
24 |       return {
25 |         status: 'success',
26 |         data: action.data
27 |       }
28 |     case types.FAILURE_GET_BLOG:
29 |       return {
30 |         ...state,
31 |         status: 'failure'
32 |       }
33 |     default:
34 |       return state
35 |   }
36 | }
37 | 
38 | const startGetBlog = () => ({
39 |   type: types.START_GET_BLOG
40 | })
41 | 
42 | const successGetBlog = blog => ({
43 |   type: types.SUCCESS_GET_BLOG,
44 |   data: blog
45 | })
46 | 
47 | const failureGetBlog = () => ({
48 |   type: types.FAILURE_GET_BLOG
49 | })
50 | 
51 | const requestGetBlog = id => dispatch => {
52 |   dispatch(startGetBlog())
53 | 
54 |   // 发起请求
55 |   return axios
56 |     .get(`${apiPrefix}/blogs/${id}`)
57 |     .then(response => {
58 |       const blog = response.data.data
59 |       dispatch(successGetBlog(blog))
60 |       return 'success'
61 |     })
62 |     .catch(error => {
63 |       console.log(error.response)
64 |       dispatch(failureGetBlog())
65 |       return 'failure'
66 |     })
67 | }
68 | 
69 | export { requestGetBlog }
70 | 


--------------------------------------------------------------------------------
/src/reducers/resume.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import { apiPrefix } from '../constants'
 3 | 
 4 | const types = {
 5 |   START_GET_RESUME: 'resume/START_GET_RESUME',
 6 |   SUCCESS_GET_RESUME: 'resume/SUCCESS_GET_RESUME',
 7 |   FAILURE_GET_RESUME: 'resume/FAILURE_GET_RESUME'
 8 | }
 9 | 
10 | const initState = {
11 |   status: '',
12 |   htmlContent: ''
13 | }
14 | 
15 | export default (state = initState, action) => {
16 |   switch (action.type) {
17 |     case types.START_GET_RESUME:
18 |       return {
19 |         ...state,
20 |         status: 'pending'
21 |       }
22 |     case types.SUCCESS_GET_RESUME:
23 |       return {
24 |         htmlContent: action.data,
25 |         status: 'success'
26 |       }
27 |     case types.FAILURE_GET_RESUME:
28 |       return {
29 |         ...state,
30 |         status: 'failure'
31 |       }
32 |     default:
33 |       return state
34 |   }
35 | }
36 | 
37 | const startGetResume = () => ({
38 |   type: types.START_GET_RESUME
39 | })
40 | 
41 | const successGetResume = htmlContent => ({
42 |   type: types.SUCCESS_GET_RESUME,
43 |   data: htmlContent
44 | })
45 | 
46 | const failureGetResume = () => ({
47 |   type: types.FAILURE_GET_RESUME
48 | })
49 | 
50 | const requestGetResume = () => dispatch => {
51 |   dispatch(startGetResume())
52 | 
53 |   return axios
54 |     .get(`${apiPrefix}/resumes`)
55 |     .then(response => {
56 |       const { htmlContent } = response.data.data
57 |       dispatch(successGetResume(htmlContent))
58 |       return 'success'
59 |     })
60 |     .catch(error => {
61 |       console.log(error.response)
62 |       dispatch(failureGetResume())
63 |       return 'failure'
64 |     })
65 | }
66 | 
67 | export { requestGetResume }
68 | 


--------------------------------------------------------------------------------
/src/components/Loader/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | import PropTypes from 'prop-types'
 4 | import { getPixelString } from '../../utils'
 5 | 
 6 | const StyledLoaderContainer = styled.div`
 7 |   width: 100%;
 8 |   min-height: ${({ height }) => getPixelString(height, null)};
 9 |   padding-top: ${({ paddingTB }) => getPixelString(paddingTB, null)};
10 |   padding-bottom: ${({ paddingTB }) => getPixelString(paddingTB, null)};
11 | `
12 | 
13 | const StyledLoader = styled.div`
14 |   border: 10px solid #fff;
15 |   border-radius: 50%;
16 |   border-top: 10px solid #3498db;
17 |   border-bottom: 10px solid #3498db;
18 |   margin: 0 auto;
19 |   width: ${({ size }) => getPixelString(size, null)};
20 |   height: ${({ size }) => getPixelString(size, null)};
21 |   -webkit-animation: spin 2s linear infinite; /* Safari */
22 |   animation: spin 2s linear infinite;
23 | 
24 |   /* Safari */
25 |   @-webkit-keyframes spin {
26 |     0% {
27 |       -webkit-transform: rotate(0deg);
28 |     }
29 |     100% {
30 |       -webkit-transform: rotate(360deg);
31 |     }
32 |   }
33 | 
34 |   @keyframes spin {
35 |     0% {
36 |       transform: rotate(0deg);
37 |     }
38 |     100% {
39 |       transform: rotate(360deg);
40 |     }
41 |   }
42 | `
43 | 
44 | const Loader = ({ minHeight, size }) => {
45 |   const paddingTB = (minHeight - size) / 2
46 |   return (
47 |     <StyledLoaderContainer height={minHeight} paddingTB={paddingTB}>
48 |       <StyledLoader size={size} />
49 |     </StyledLoaderContainer>
50 |   )
51 | }
52 | 
53 | Loader.propTypes = {
54 |   minHeight: PropTypes.number.isRequired,
55 |   size: PropTypes.number.isRequired
56 | }
57 | 
58 | export default Loader
59 | 


--------------------------------------------------------------------------------
/src/components/ContentLoader/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import Styled from 'styled-components'
 4 | 
 5 | const StyledContentLoaderContaner = Styled.div`
 6 |   background-color: #fff;
 7 |   height: ${({ height }) => height + 'px'};
 8 |   border: 1px solid #fff;
 9 |   padding: 0 20px;
10 |   margin-bottom: 20px;
11 |   overflow: hidden;
12 | `
13 | 
14 | const StyledContentContainer = Styled.div`
15 |   box-sizing: border-box;
16 |   margin-top: 20px;
17 |   margin-bottom: 20px;
18 |   width: ${({ width }) => width + '%'};
19 |   height: 25px;
20 | `
21 | 
22 | const StyledContent = Styled.div`
23 |   width: 100%;
24 |   height: 100%;
25 |   background-color: #f1f1f1;
26 | `
27 | 
28 | const getWidthArrayByHeight = height => {
29 |   const number = Math.floor(height / 50)
30 |   const arr = []
31 |   for (let i = 0; i < number; i++) {
32 |     arr.push(Math.floor(Math.random() * 90 + 10))
33 |   }
34 |   return arr
35 | }
36 | 
37 | class ContentLoader extends React.Component {
38 |   constructor(props) {
39 |     super(props)
40 | 
41 |     const height = this.props.height
42 |     this.state = {
43 |       height,
44 |       WidthArrayByHeight: getWidthArrayByHeight(height)
45 |     }
46 |   }
47 | 
48 |   render() {
49 |     return (<StyledContentLoaderContaner height={this.state.height}>
50 |       {this.state.WidthArrayByHeight.map((width, index) => (
51 |         <StyledContentContainer key={index} width={width}>
52 |           <StyledContent />
53 |         </StyledContentContainer>
54 |       ))}
55 |     </StyledContentLoaderContaner>)
56 |   }
57 | }
58 | 
59 | 
60 | ContentLoader.propTypes = {
61 |   height: PropTypes.number
62 | }
63 | 
64 | export default ContentLoader


--------------------------------------------------------------------------------
/src/reducers/profile.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import { apiPrefix } from '../constants'
 3 | 
 4 | const types = {
 5 |   START_GET_PROFILE_INFO: 'profile/START_GET_PROFILE_INFO',
 6 |   SUCCESS_GET_PROFILE_INFO: 'profile/SUCCESS_GET_PROFILE_INFO',
 7 |   FAILURE_GET_PROFILE_INFO: 'profile/FAILURE_GET_PROFILE_INFO'
 8 | }
 9 | 
10 | const initState = {
11 |   status: '',
12 |   blogCount: 0,
13 |   tagCount: 0,
14 |   categoryCount: 0
15 | }
16 | 
17 | export default (state = initState, action) => {
18 |   switch (action.type) {
19 |     case types.START_GET_PROFILE_INFO:
20 |       return {
21 |         ...state,
22 |         status: 'pending'
23 |       }
24 |     case types.SUCCESS_GET_PROFILE_INFO:
25 |       return {
26 |         status: 'success',
27 |         ...action.data
28 |       }
29 |     case types.FAILURE_GET_PROFILE_INFO:
30 |       return {
31 |         ...state,
32 |         status: 'failure'
33 |       }
34 |     default:
35 |       return state
36 |   }
37 | }
38 | 
39 | const startGetProfileInfo = () => ({
40 |   type: types.START_GET_PROFILE_INFO
41 | })
42 | 
43 | const successGetProfileInfo = data => ({
44 |   type: types.SUCCESS_GET_PROFILE_INFO,
45 |   data
46 | })
47 | 
48 | const failureGetProfileInfo = () => ({
49 |   type: types.FAILURE_GET_PROFILE_INFO
50 | })
51 | 
52 | const requestGetProfileInfo = () => dispatch => {
53 |   dispatch(startGetProfileInfo())
54 | 
55 |   return axios
56 |     .get(`${apiPrefix}/profiles`)
57 |     .then(response => {
58 |       const data = response.data.data
59 |       dispatch(successGetProfileInfo(data))
60 |       return 'success'
61 |     })
62 |     .catch(error => {
63 |       console.log(error.response)
64 |       dispatch(failureGetProfileInfo())
65 |       return 'failure'
66 |     })
67 | }
68 | 
69 | export { requestGetProfileInfo }
70 | 


--------------------------------------------------------------------------------
/src/components/BlogList/Styled.js:
--------------------------------------------------------------------------------
 1 | import Styled from 'styled-components'
 2 | import { activePaginationClassName } from '../../constants'
 3 | 
 4 | export const Container = Styled.div`
 5 |   background-color: #fff;
 6 |   padding: 1.1rem 1.3rem;
 7 |   margin-bottom: 1rem;
 8 | 
 9 |   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
10 | `
11 | 
12 | export const Title = Styled.h4`
13 |   margin: 0.3rem 0 0.7rem 0;
14 |   overflow: hidden;
15 | 
16 |   font-size: 1.4rem;
17 |   font-weight: 500;
18 |   line-height: 1.2;
19 | 
20 |   & a:hover,
21 |   & a:active {
22 |     color: #1890ff;
23 |   }
24 | 
25 |   & a {
26 |     color: rgba(0, 0, 0, 0.65)
27 |   }
28 | `
29 | 
30 | export const Summary = Styled.div`
31 |   font-size: 1.15rem;
32 |   font-weight: 400;
33 |   line-height: 1.6;
34 |   color: rgba(0, 0, 0, 0.45);
35 |   margin-bottom: 0.5rem;
36 | `
37 | 
38 | export const InfoContainer = Styled.div`
39 |   /* 清除浮动 */
40 |   &::after {
41 |     content: '';
42 |     clear: both;
43 |     display: table;
44 |   }
45 | `
46 | 
47 | export const Info = Styled.div`
48 |   float: left;
49 |   display: block;
50 |   padding-right: 1.6rem;
51 |   padding-bottom: 0.3rem;
52 | 
53 |   font-size: 1.1rem;
54 |   font-weight: 400;
55 |   line-height: 1.5;
56 |   color: rgba(0, 0, 0, 0.45);
57 | `
58 | 
59 | export const Pagination = Styled.div`
60 |   padding: 10px 0;
61 |   text-align: center;
62 | 
63 |   & a {
64 |     color: black;
65 |     display: inline-block;
66 |     padding: 8px 16px;
67 |     text-decoration: none;
68 |     transition: background-color 0.3s;
69 |     border: 1px solid #ddd;
70 |     margin: 0 1px;
71 |   }
72 | 
73 |   & a:hover:not(.${activePaginationClassName}) {
74 |     background-color: #ddd;
75 |   }
76 | 
77 |   & a.${activePaginationClassName} {
78 |     color: white;
79 |     background-color: #1e90ff;
80 |   }
81 | `
82 | 


--------------------------------------------------------------------------------
/src/reducers/blogList.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import { blogListQs, apiPrefix } from '../constants'
 3 | 
 4 | const types = {
 5 |   // 获取博客列表
 6 |   START_GET_BLOG_LIST: 'blogList/START_GET_BLOG_LIST',
 7 |   SUCCESS_GET_BLOG_LIST: 'blogList/SUCCESS_GET_BLOG_LIST',
 8 |   FAILURE_GET_BLOG_LIST: 'blogList/FAILURE_GET_BLOG_LIST'
 9 | }
10 | 
11 | const initState = {
12 |   status: '',
13 |   list: [],
14 |   amount: 0
15 | }
16 | 
17 | export default (state = initState, action) => {
18 |   switch (action.type) {
19 |     case types.START_GET_BLOG_LIST:
20 |       return {
21 |         ...state,
22 |         status: 'pending'
23 |       }
24 |     case types.SUCCESS_GET_BLOG_LIST:
25 |       return {
26 |         status: 'success',
27 |         list: action.data.list,
28 |         amount: action.data.amount
29 |       }
30 |     case types.FAILURE_GET_BLOG_LIST:
31 |       return {
32 |         ...state,
33 |         status: 'failure'
34 |       }
35 |     default:
36 |       return state
37 |   }
38 | }
39 | 
40 | const startGetBlogList = () => ({
41 |   type: types.START_GET_BLOG_LIST
42 | })
43 | 
44 | const successGetBlogList = (list, amount) => ({
45 |   type: types.SUCCESS_GET_BLOG_LIST,
46 |   data: {
47 |     list,
48 |     amount
49 |   }
50 | })
51 | 
52 | const failureGetBlogList = () => ({
53 |   type: types.FAILURE_GET_BLOG_LIST
54 | })
55 | 
56 | // 请求获取博客列表
57 | const requestGetBlogList = () => dispatch => {
58 |   dispatch(startGetBlogList())
59 | 
60 |   return axios
61 |     .get(`${apiPrefix}/blogs?${blogListQs}`)
62 |     .then(response => {
63 |       const { blogs, count } = response.data.data
64 |       dispatch(successGetBlogList(blogs, count))
65 |       return 'success'
66 |     })
67 |     .catch(error => {
68 |       console.log(error.response)
69 |       dispatch(failureGetBlogList())
70 |       return 'failure'
71 |     })
72 | }
73 | 
74 | export { requestGetBlogList }
75 | 


--------------------------------------------------------------------------------
/src/components/Tag/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import styled from 'styled-components'
 3 | import PropTypes from 'prop-types'
 4 | import { colorStyle, colorName } from '../../utils'
 5 | 
 6 | const StyledTag = styled.div`
 7 |   display: inline-block;
 8 |   padding: 0 0.5833rem;
 9 |   margin-right: 0.6667rem;
10 |   font-size: 1rem;
11 |   line-height: 1.5;
12 |   height: 1.833rem;
13 |   border-radius: 4px;
14 |   border: 1px solid #d9d9d9;
15 | 
16 |   /* 标签的默认颜色样式  */
17 |   background-color: #fafafa;
18 |   & a {
19 |     color: rgba(0, 0, 0, 0.65);
20 |   }
21 | 
22 |   /* 根据color的值来设置颜色样式  */
23 |   & a {
24 |     color: ${({ color }) => color && colorStyle[color]['color']};
25 |   }
26 |   color: ${({ color }) => color && colorStyle[color]['color']};
27 | 
28 |   background-color: ${({ color }) =>
29 |     color && colorStyle[color]['background-color']};
30 |   border-color: ${({ color }) => color && colorStyle[color]['border-color']};
31 | `
32 | 
33 | class Tag extends Component {
34 |   constructor(props) {
35 |     super(props)
36 | 
37 |     let color = undefined
38 |     if (props.random) {
39 |       color = colorName[Math.floor((Math.random() * 100) % 11)]
40 |     } else if (props.color) {
41 |       color = props.color
42 |     }
43 |     this.state = { color }
44 |   }
45 | 
46 |   render() {
47 |     const { to, children, isLink, onClick } = this.props
48 |     return (
49 |       <StyledTag color={this.state.color}>
50 |         {isLink ? (
51 |           <a href={to} onClick={onClick}>
52 |             {children}
53 |           </a>
54 |         ) : (
55 |           <span>{children}</span>
56 |         )}
57 |       </StyledTag>
58 |     )
59 |   }
60 | }
61 | Tag.propTypes = {
62 |   color: PropTypes.string,
63 |   random: PropTypes.bool,
64 |   to: PropTypes.string,
65 |   children: PropTypes.node,
66 |   isLink: PropTypes.bool,
67 |   onClick: PropTypes.func
68 | }
69 | 
70 | export default Tag
71 | 


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


--------------------------------------------------------------------------------
/src/components/ResumeContent/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { connect } from 'react-redux'
 4 | import { bindActionCreators } from 'redux'
 5 | import { requestGetResume } from '../../reducers/resume'
 6 | import Styled from 'styled-components'
 7 | import ContentLoader from '../ContentLoader'
 8 | import PointOutContent from '../PointOutContent'
 9 | import './markdown.css'
10 | 
11 | export const BlogContainer = Styled.div`
12 |   background-color: #fff;
13 |   margin-bottom: 1rem;
14 |   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
15 | 
16 |   color: rgba(51, 51, 51, 0.9);
17 | `
18 | 
19 | export const BlogContent = Styled.div`
20 |   padding: 2rem 1.3rem 2rem 1.3rem;
21 | `
22 | 
23 | class Blog extends Component {
24 |   componentDidMount() {
25 |     this.props.requestGetResume()
26 |   }
27 | 
28 |   render() {
29 |     const { status, htmlContent } = this.props
30 | 
31 |     // 检查数据是否处于加载阶段或加载失败
32 |     if (status === '' || status === 'pending') {
33 |       return <ContentLoader height={800} />
34 |     } else if (status === 'failure') {
35 |       return <PointOutContent text="数据加载失败，请刷新页面重试" />
36 |     }
37 | 
38 |     return (
39 |       <BlogContainer>
40 |         <BlogContent className={'markdown-body'}>
41 |           <div
42 |             dangerouslySetInnerHTML={{
43 |               __html: htmlContent
44 |             }}
45 |           />
46 |         </BlogContent>
47 |       </BlogContainer>
48 |     )
49 |   }
50 | }
51 | 
52 | const mapStateToProps = state => ({
53 |   status: state.resume.status,
54 |   htmlContent: state.resume.htmlContent
55 | })
56 | 
57 | const mapDispatchToProps = dispatch =>
58 |   bindActionCreators(
59 |     {
60 |       requestGetResume
61 |     },
62 |     dispatch
63 |   )
64 | 
65 | Blog.propTypes = {
66 |   status: PropTypes.string,
67 |   htmlContent: PropTypes.string
68 | }
69 | 
70 | export default connect(mapStateToProps, mapDispatchToProps)(Blog)
71 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 3 | import TopNav from './components/TopNav'
 4 | import Container from './components/Container'
 5 | import ProfileCard from './components/ProfileCard'
 6 | import Grid from './components/Grid'
 7 | import Footer from './components/Footer'
 8 | import Blog from './components/Blog'
 9 | import ArticleDirectory from './components/ArticleDirectory'
10 | import './reboot.css'
11 | import BlogList from './components/BlogList'
12 | import { navList } from './constants'
13 | import ScrollToTop from './components/ScrollToTop'
14 | import PointOutContent from './components/PointOutContent'
15 | import ResumeContent from './components/ResumeContent'
16 | 
17 | const OnDevelopingContent = () => <PointOutContent text="开发中，敬请期待..." />
18 | const NotFoundContent = () => <PointOutContent text="404 Not found" />
19 | 
20 | const App = () => (
21 |   <Router>
22 |     <div>
23 |       <TopNav navList={navList} />
24 |       <Container lrPadding={0} style={{ marginTop: '30px' }}>
25 |         <Grid.Row>
26 |           <Grid.Col xs={12} sm={12} md={12} lg={8.5} xl={9}>
27 |             <Switch>
28 |               <Route exact path="/" component={BlogList} />
29 |               <Route exact path="/blogs" component={BlogList} />
30 |               <Route path="/blogs/:blogId" component={Blog} />
31 |               <Route path="/tags" component={OnDevelopingContent} />
32 |               <Route path="/categories" component={OnDevelopingContent} />
33 |               <Route path="/about" component={ResumeContent} />
34 |               <Route component={NotFoundContent} />
35 |             </Switch>
36 |           </Grid.Col>
37 |           <Grid.Col xs={0} sm={0} md={0} lg={3.5} xl={3}>
38 |             <ProfileCard />
39 |             <Route path="/blogs/:blogId" component={ArticleDirectory} />
40 |           </Grid.Col>
41 |         </Grid.Row>
42 |       </Container>
43 |       <Footer />
44 |       <ScrollToTop />
45 |     </div>
46 |   </Router>
47 | )
48 | 
49 | export default App
50 | 


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


--------------------------------------------------------------------------------
/src/components/Blog/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { connect } from 'react-redux'
 4 | import { bindActionCreators } from 'redux'
 5 | import { requestGetBlog } from '../../reducers/blog'
 6 | import * as Styled from './Styled'
 7 | import ContentLoader from '../ContentLoader'
 8 | import PointOutContent from '../PointOutContent'
 9 | import Tag from '../Tag'
10 | import './markdown.css'
11 | 
12 | class Blog extends Component {
13 |   componentDidMount() {
14 |     // 获取博客文章的id
15 |     const { match } = this.props
16 |     // 发送请求获取该篇博客信息
17 |     this.props.requestGetBlog(match.params.blogId)
18 |   }
19 | 
20 |   render() {
21 |     const { status, blog } = this.props
22 | 
23 |     // 检查数据是否处于加载阶段或加载失败
24 |     if (status === '' || status === 'pending') {
25 |       return <ContentLoader height={800} />
26 |     } else if (status === 'failure') {
27 |       return <PointOutContent text="数据加载失败，请刷新页面重试" />
28 |     }
29 | 
30 |     return (
31 |       <Styled.BlogContainer>
32 |         <Styled.InfoContainer>
33 |           <Styled.Title>{blog.title}</Styled.Title>
34 |           <Styled.Info>
35 |             <i className="fas fa-clock" />&nbsp;&nbsp;{blog.createTime
36 |               .toLocaleString()
37 |               .slice(0, 10)}
38 |           </Styled.Info>
39 |           <Styled.Info>
40 |             <i className="fas fa-eye" />&nbsp;&nbsp;{blog.viewTimes}
41 |           </Styled.Info>
42 |           <Styled.Info>
43 |             <i className="fas fa-tag" />&nbsp;&nbsp;
44 |             {blog.tags.map(tag => (
45 |               <Tag key={tag} isLink={false} random={true}>
46 |                 {tag}
47 |               </Tag>
48 |             ))}
49 |           </Styled.Info>
50 |           <Styled.Info>
51 |             <i className="fas fa-folder-open" />&nbsp;&nbsp;
52 |             <Tag isLink={false} random={true}>
53 |               {blog.category}
54 |             </Tag>
55 |           </Styled.Info>
56 |         </Styled.InfoContainer>
57 |         <Styled.BlogContent className={'markdown-body'}>
58 |           <div
59 |             dangerouslySetInnerHTML={{
60 |               __html: blog.htmlContent
61 |             }}
62 |           />
63 |         </Styled.BlogContent>
64 |       </Styled.BlogContainer>
65 |     )
66 |   }
67 | }
68 | 
69 | const mapStateToProps = state => ({
70 |   status: state.blog.status,
71 |   blog: state.blog.data
72 | })
73 | 
74 | const mapDispatchToProps = dispatch =>
75 |   bindActionCreators(
76 |     {
77 |       requestGetBlog
78 |     },
79 |     dispatch
80 |   )
81 | 
82 | Blog.propTypes = {
83 |   status: PropTypes.string,
84 |   blog: PropTypes.object
85 | }
86 | 
87 | export default connect(mapStateToProps, mapDispatchToProps)(Blog)
88 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  *
  3 |  * @param {number} value 数值
  4 |  * @param {number} defaultValue 默认值
  5 |  */
  6 | export const getPixelString = (value, defaultValue) => {
  7 |   if (value === 0) {
  8 |     return '0'
  9 |   } else if (value === undefined) {
 10 |     if (defaultValue === null) {
 11 |       return undefined
 12 |     } else {
 13 |       return defaultValue + 'px'
 14 |     }
 15 |   } else {
 16 |     return value + 'px'
 17 |   }
 18 | }
 19 | 
 20 | // 获取分页信息
 21 | export const getPaginationArray = (current, total) => {
 22 |   const paginationArray = []
 23 |   for (let i = 0; i <= total; i++) {
 24 |     paginationArray.push(i)
 25 |   }
 26 | 
 27 |   if (total <= 5) {
 28 |     return paginationArray.slice(1, total + 1)
 29 |   }
 30 | 
 31 |   if (current - 2 <= 0) {
 32 |     return paginationArray.slice(1, 6)
 33 |   }
 34 | 
 35 |   if (current + 2 > total) {
 36 |     return paginationArray.slice(total - 4, total + 1)
 37 |   }
 38 | 
 39 |   return paginationArray.slice(current - 2, current + 3)
 40 | }
 41 | 
 42 | // 标签颜色组
 43 | export const colorStyle = {
 44 |   magenta: {
 45 |     color: '#eb2f96',
 46 |     'background-color': '#fff0f6',
 47 |     'border-color': '#ffadd2'
 48 |   },
 49 |   red: {
 50 |     color: '#f5222d',
 51 |     'background-color': '#fff1f0',
 52 |     'border-color': '#ffa39e'
 53 |   },
 54 |   volcano: {
 55 |     color: '#fa541c',
 56 |     'background-color': '#fff2e8',
 57 |     'border-color': '#ffbb96'
 58 |   },
 59 |   orange: {
 60 |     color: '#fa8c16',
 61 |     'background-color': '#fff7e6',
 62 |     'border-color': '#ffd591'
 63 |   },
 64 |   gold: {
 65 |     color: '#faad14',
 66 |     'background-color': '#fffbe6',
 67 |     'border-color': '#ffe58f'
 68 |   },
 69 |   lime: {
 70 |     color: '#a0d911',
 71 |     'background-color': '#fcffe6',
 72 |     'border-color': '#eaff8f'
 73 |   },
 74 |   green: {
 75 |     color: '#52c41a',
 76 |     'background-color': '#f6ffed',
 77 |     'border-color': '#b7eb8f'
 78 |   },
 79 |   cyan: {
 80 |     color: '#13c2c2',
 81 |     'background-color': '#e6fffb',
 82 |     'border-color': '#87e8de'
 83 |   },
 84 |   blue: {
 85 |     color: '#1890ff',
 86 |     'background-color': '#e6f7ff',
 87 |     'border-color': '#91d5ff'
 88 |   },
 89 |   geekblue: {
 90 |     color: '#2f54eb',
 91 |     'background-color': '#f0f5ff',
 92 |     'border-color': '#adc6ff'
 93 |   },
 94 |   purple: {
 95 |     color: '#722ed1',
 96 |     'background-color': '#f9f0ff',
 97 |     'border-color': '#d3adf7'
 98 |   }
 99 | }
100 | 
101 | // 标签颜色名称
102 | export const colorName = [
103 |   'magenta',
104 |   'red',
105 |   'volcano',
106 |   'orange',
107 |   'gold',
108 |   'lime',
109 |   'green',
110 |   'cyan',
111 |   'blue',
112 |   'geekblue',
113 |   'purple'
114 | ]
115 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "zalegzl-website",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "autoprefixer": "7.1.6",
 7 |     "axios": "^0.18.0",
 8 |     "babel-core": "6.26.0",
 9 |     "babel-eslint": "7.2.3",
10 |     "babel-jest": "20.0.3",
11 |     "babel-loader": "7.1.2",
12 |     "babel-preset-react-app": "^3.1.1",
13 |     "babel-runtime": "6.26.0",
14 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
15 |     "chalk": "1.1.3",
16 |     "css-loader": "0.28.7",
17 |     "dotenv": "4.0.0",
18 |     "dotenv-expand": "4.2.0",
19 |     "eslint": "4.10.0",
20 |     "eslint-config-react-app": "^2.1.0",
21 |     "eslint-loader": "1.9.0",
22 |     "eslint-plugin-flowtype": "2.39.1",
23 |     "eslint-plugin-import": "2.8.0",
24 |     "eslint-plugin-jsx-a11y": "5.1.1",
25 |     "eslint-plugin-react": "7.4.0",
26 |     "extract-text-webpack-plugin": "3.0.2",
27 |     "file-loader": "1.1.5",
28 |     "fs-extra": "3.0.1",
29 |     "highlight.js": "^9.12.0",
30 |     "html-webpack-plugin": "2.29.0",
31 |     "jest": "20.0.4",
32 |     "object-assign": "4.1.1",
33 |     "postcss-flexbugs-fixes": "3.2.0",
34 |     "postcss-loader": "2.0.8",
35 |     "promise": "8.0.1",
36 |     "prop-types": "^15.6.0",
37 |     "raf": "3.4.0",
38 |     "react": "^16.2.0",
39 |     "react-dev-utils": "^5.0.0",
40 |     "react-dom": "^16.2.0",
41 |     "react-redux": "^5.0.7",
42 |     "react-router-dom": "^4.2.2",
43 |     "react-scroll-up": "^1.3.3",
44 |     "redux": "^3.7.2",
45 |     "redux-thunk": "^2.2.0",
46 |     "style-loader": "0.19.0",
47 |     "styled-components": "^3.1.6",
48 |     "sw-precache-webpack-plugin": "0.11.4",
49 |     "url-loader": "0.6.2",
50 |     "webpack": "3.8.1",
51 |     "webpack-dev-server": "2.9.4",
52 |     "webpack-manifest-plugin": "1.3.2",
53 |     "whatwg-fetch": "2.0.3"
54 |   },
55 |   "scripts": {
56 |     "start": "node scripts/start.js",
57 |     "build": "node scripts/build.js",
58 |     "test": "node scripts/test.js --env=jsdom"
59 |   },
60 |   "jest": {
61 |     "collectCoverageFrom": ["src/**/*.{js,jsx,mjs}"],
62 |     "setupFiles": ["<rootDir>/config/polyfills.js"],
63 |     "testMatch": [
64 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
65 |       "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
66 |     ],
67 |     "testEnvironment": "node",
68 |     "testURL": "http://localhost",
69 |     "transform": {
70 |       "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
71 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
72 |       "^(?!.*\\.(js|jsx|mjs|css|json)$)":
73 |         "<rootDir>/config/jest/fileTransform.js"
74 |     },
75 |     "transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],
76 |     "moduleNameMapper": {
77 |       "^react-native$": "react-native-web"
78 |     },
79 |     "moduleFileExtensions": [
80 |       "web.js",
81 |       "mjs",
82 |       "js",
83 |       "json",
84 |       "web.jsx",
85 |       "jsx",
86 |       "node"
87 |     ]
88 |   },
89 |   "babel": {
90 |     "presets": ["react-app"]
91 |   },
92 |   "eslintConfig": {
93 |     "extends": "react-app"
94 |   },
95 |   "proxy": "http://localhost:4000",
96 |   "homepage": "http://guozeling.cn/blog"
97 | }
98 | 


--------------------------------------------------------------------------------
/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.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebookincubator/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/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 | if (process.env.HOST) {
 47 |   console.log(
 48 |     chalk.cyan(
 49 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 50 |         chalk.bold(process.env.HOST)
 51 |       )}`
 52 |     )
 53 |   );
 54 |   console.log(
 55 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 56 |   );
 57 |   console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`);
 58 |   console.log();
 59 | }
 60 | 
 61 | // We attempt to use the default port but if it is busy, we offer the user to
 62 | // run on a different port. `choosePort()` Promise resolves to the next free port.
 63 | choosePort(HOST, DEFAULT_PORT)
 64 |   .then(port => {
 65 |     if (port == null) {
 66 |       // We have not found a port.
 67 |       return;
 68 |     }
 69 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 70 |     const appName = require(paths.appPackageJson).name;
 71 |     const urls = prepareUrls(protocol, HOST, port);
 72 |     // Create a webpack compiler that is configured with custom messages.
 73 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 74 |     // Load proxy config
 75 |     const proxySetting = require(paths.appPackageJson).proxy;
 76 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 77 |     // Serve webpack assets generated by the compiler over a web sever.
 78 |     const serverConfig = createDevServerConfig(
 79 |       proxyConfig,
 80 |       urls.lanUrlForConfig
 81 |     );
 82 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 83 |     // Launch WebpackDevServer.
 84 |     devServer.listen(port, HOST, err => {
 85 |       if (err) {
 86 |         return console.log(err);
 87 |       }
 88 |       if (isInteractive) {
 89 |         clearConsole();
 90 |       }
 91 |       console.log(chalk.cyan('Starting the development server...\n'));
 92 |       openBrowser(urls.localUrlForBrowser);
 93 |     });
 94 | 
 95 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
 96 |       process.on(sig, function() {
 97 |         devServer.close();
 98 |         process.exit();
 99 |       });
100 |     });
101 |   })
102 |   .catch(err => {
103 |     if (err && err.message) {
104 |       console.log(err.message);
105 |     }
106 |     process.exit(1);
107 |   });
108 | 


--------------------------------------------------------------------------------
/src/components/TopNav/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import styled from 'styled-components'
  4 | import { NavLink } from 'react-router-dom'
  5 | import Container from '../Container'
  6 | 
  7 | const activeTopNavLinkClassName = 'active-top-nav-link'
  8 | const responsiveTopNavClassName = 'responsive-top-nav'
  9 | 
 10 | // 导航链接被激活的样式
 11 | const activeStyle = {
 12 |   color: 'white',
 13 |   backgroundColor: '#1e90ff'
 14 | }
 15 | 
 16 | const StyledTopNav = styled.div`
 17 |   /* 使用BFC清除浮动 */
 18 |   overflow: hidden;
 19 | 
 20 |   background-color: #fff;
 21 |   position: relative;
 22 |   min-height: 22px;
 23 |   font-weight: 300;
 24 | 
 25 |   z-index: 1000;
 26 |   transition: background-color 0.3s;
 27 | 
 28 |   & a {
 29 |     float: left;
 30 |     display: block;
 31 |     color: #444;
 32 |     text-align: center;
 33 |     padding: 14px 16px;
 34 |     text-decoration: none;
 35 |     font-size: 17px;
 36 |     line-height: 22px;
 37 | 
 38 |     transition: background-color 0.3s;
 39 |   }
 40 | 
 41 |   & a:hover {
 42 |     background-color: #1e90ff;
 43 |   }
 44 | 
 45 |   & .icon {
 46 |     display: none;
 47 |     font-size: 15px;
 48 |   }
 49 | 
 50 |   @media only screen and (max-width: 575px) {
 51 |     & a:not(.${activeTopNavLinkClassName}) {
 52 |       display: none;
 53 |     }
 54 | 
 55 |     & a.${activeTopNavLinkClassName} {
 56 |       position: absolute;
 57 |       left: 0;
 58 |       top: 0;
 59 |     }
 60 | 
 61 |     & a.icon {
 62 |       float: right;
 63 |       display: block;
 64 |     }
 65 | 
 66 |     &.${responsiveTopNavClassName} {
 67 |       padding-top: 50px;
 68 |     }
 69 | 
 70 |     &.${responsiveTopNavClassName} a.icon {
 71 |       position: absolute;
 72 |       right: 0;
 73 |       top: 0;
 74 |       z-index: 1010;
 75 |     }
 76 | 
 77 |     &.${responsiveTopNavClassName} a {
 78 |       float: none;
 79 |       display: block;
 80 |       text-align: left;
 81 |     }
 82 | 
 83 |     &.${responsiveTopNavClassName} a.${activeTopNavLinkClassName} {
 84 |       width: 100%;
 85 |       z-index: 1005;
 86 |     }
 87 |   }
 88 | `
 89 | 
 90 | const StyledIcon = styled.a`
 91 |   font-size: 15px;
 92 | `
 93 | 
 94 | const StyledBackgroundContainer = styled(Container)`
 95 |   background-color: #fff;
 96 |   border-bottom: 1px solid #d6d3d3;
 97 |   border-top: 3px solid #268ffb;
 98 | 
 99 |   position: absolute;
100 |   left: 0;
101 |   top: 0;
102 | `
103 | 
104 | class TopNav extends Component {
105 |   constructor(props) {
106 |     super(props)
107 | 
108 |     this.state = { className: '' }
109 | 
110 |     this.onIconClick = this.onIconClick.bind(this)
111 |     this.onLinkClick = this.onLinkClick.bind(this)
112 |   }
113 | 
114 |   onIconClick(e) {
115 |     e.preventDefault()
116 |     if (this.state.className !== '') {
117 |       this.setState({ className: '' })
118 |     } else {
119 |       this.setState({ className: responsiveTopNavClassName })
120 |     }
121 |   }
122 | 
123 |   onLinkClick() {
124 |     this.setState({ className: '' })
125 |   }
126 | 
127 |   render() {
128 |     return (
129 |       <StyledBackgroundContainer fluid lrPadding={0}>
130 |         <Container lrPadding={0}>
131 |           <StyledTopNav className={this.state.className}>
132 |             {this.props.navList.map(item => (
133 |               <NavLink
134 |                 key={item.key}
135 |                 to={item.to}
136 |                 exact={item.exact}
137 |                 activeClassName={activeTopNavLinkClassName}
138 |                 activeStyle={activeStyle}
139 |                 onClick={this.onLinkClick}
140 |               >
141 |                 <i className={item.icon} />&nbsp;{item.name}
142 |               </NavLink>
143 |             ))}
144 |             <StyledIcon
145 |               href="#ignore"
146 |               className="icon"
147 |               onClick={e => this.onIconClick(e)}
148 |             >
149 |               &#9776;
150 |             </StyledIcon>
151 |           </StyledTopNav>
152 |         </Container>
153 |       </StyledBackgroundContainer>
154 |     )
155 |   }
156 | }
157 | 
158 | /**
159 |  * navList: 导航链接信息对象的数组，每个对象包含以下属性
160 |  *   key: react 中的 key，有利于性能优化
161 |  *   to:  NavLink 中的 to
162 |  *   name: 链接显示的文本
163 |  *   exact: NavLink 中的 exact
164 |  *   icon: font awesome 对应图标的 class 名称
165 |  */
166 | TopNav.propTypes = {
167 |   navList: PropTypes.array
168 | }
169 | 
170 | export default TopNav
171 | 


--------------------------------------------------------------------------------
/src/components/ProfileCard/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import styled from 'styled-components'
  4 | import { connect } from 'react-redux'
  5 | import { bindActionCreators } from 'redux'
  6 | import { Link } from 'react-router-dom'
  7 | import { requestGetProfileInfo } from '../../reducers/profile'
  8 | import img from '../../assets/duck.jpg'
  9 | 
 10 | const StyledProfileCard = styled.div`
 11 |   background-color: #fff;
 12 |   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
 13 |   /* margin: auto; */
 14 |   text-align: center;
 15 |   margin-bottom: 20px;
 16 | `
 17 | 
 18 | const StyledImgContainer = styled.div`
 19 |   height: 150px;
 20 |   padding-top: 30px;
 21 | 
 22 |   & img {
 23 |     width: 120px;
 24 |     height: 120px;
 25 |     padding: 2px;
 26 |     border: 1px solid #eee;
 27 |   }
 28 | `
 29 | 
 30 | const StyledName = styled.div`
 31 |   color: #333;
 32 |   font-weight: 600;
 33 |   font-size: 1.3rem;
 34 |   line-height: 2;
 35 | `
 36 | 
 37 | const StyledDescription = styled.div`
 38 |   font-size: 1.083rem;
 39 |   color: #999;
 40 |   padding: 0 2.8rem;
 41 |   line-height: 1.8;
 42 |   margin-bottom: 20px;
 43 | `
 44 | 
 45 | const StyledInfoContainer = styled.div`
 46 |   box-sizing: content-box;
 47 |   width: 200px;
 48 |   margin: 0 auto;
 49 |   margin-bottom: 20px;
 50 | `
 51 | 
 52 | const StyledInfo = styled.div`
 53 |   display: inline-block;
 54 |   padding: 0 10px;
 55 |   line-height: 1.4;
 56 |   font-size: 1.167rem;
 57 | 
 58 |   border-left: 1px solid #eee;
 59 |   &:first-child {
 60 |     border: none;
 61 |   }
 62 | 
 63 |   & a span:first-child {
 64 |     color: #585858;
 65 |     display: block;
 66 |     font-weight: 900;
 67 |     font-size: 1.3rem;
 68 |   }
 69 | 
 70 |   & a span:last-child {
 71 |     display: block;
 72 |     font-weight: 400;
 73 |     font-size: 1.2rem;
 74 |     color: #999;
 75 |   }
 76 | `
 77 | 
 78 | const StyledSocialMedia = styled.div`
 79 |   padding-bottom: 15px;
 80 | 
 81 |   & a {
 82 |     display: inline-block;
 83 |     padding-right: 7px;
 84 |     font-size: 1.533rem;
 85 |     color: #555;
 86 |   }
 87 | 
 88 |   & a:hover {
 89 |     opacity: 0.6;
 90 |   }
 91 | `
 92 | 
 93 | const SocialMedia = () => (
 94 |   <StyledSocialMedia>
 95 |     <a href="https://github.com/zaleGZL">
 96 |       <i className="fab fa-github" />
 97 |     </a>
 98 |     <a href="https://weibo.com/5723678128/profile">
 99 |       <i className="fab fa-weibo" />
100 |     </a>
101 |     <a href="https://www.linkedin.com/in/%E6%B3%BD%E5%87%8C-%E9%83%AD-8776a913b/">
102 |       <i className="fab fa-linkedin-in" />
103 |     </a>
104 |   </StyledSocialMedia>
105 | )
106 | 
107 | class ProfileCard extends React.Component {
108 |   componentDidMount() {
109 |     this.props.requestGetProfileInfo()
110 |   }
111 | 
112 |   render() {
113 |     return (
114 |       <StyledProfileCard>
115 |         <StyledImgContainer>
116 |           <img src={img} alt="duck" />
117 |         </StyledImgContainer>
118 |         <StyledName>ZALE</StyledName>
119 |         <StyledDescription>
120 |           Keep growing, fuck everything else.
121 |         </StyledDescription>
122 |         <StyledInfoContainer>
123 |           <StyledInfo>
124 |             <Link to="/blogs">
125 |               <span>{this.props.blogCount}</span>
126 |               <span>日志</span>
127 |             </Link>
128 |           </StyledInfo>
129 |           <StyledInfo>
130 |             <Link to="/categories">
131 |               <span>{this.props.categoryCount}</span>
132 |               <span>分类</span>
133 |             </Link>
134 |           </StyledInfo>
135 |           <StyledInfo>
136 |             <Link to="/tags">
137 |               <span>{this.props.tagCount}</span>
138 |               <span>标签</span>
139 |             </Link>
140 |           </StyledInfo>
141 |         </StyledInfoContainer>
142 |         <SocialMedia />
143 |       </StyledProfileCard>
144 |     )
145 |   }
146 | }
147 | 
148 | const mapStateToProps = state => ({
149 |   blogCount: state.profile.blogCount,
150 |   tagCount: state.profile.tagCount,
151 |   categoryCount: state.profile.categoryCount
152 | })
153 | 
154 | const mapDispatchToProps = dispatch =>
155 |   bindActionCreators(
156 |     {
157 |       requestGetProfileInfo
158 |     },
159 |     dispatch
160 |   )
161 | 
162 | ProfileCard.propTypes = {
163 |   blogCount: PropTypes.number,
164 |   tagCount: PropTypes.number,
165 |   categoryCount: PropTypes.number,
166 |   requestGetProfileInfo: PropTypes.func
167 | }
168 | 
169 | export default connect(mapStateToProps, mapDispatchToProps)(ProfileCard)
170 | 


--------------------------------------------------------------------------------
/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 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/components/BlogList/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import ContentLoader from '../ContentLoader'
  4 | import { connect } from 'react-redux'
  5 | import { bindActionCreators } from 'redux'
  6 | import { withRouter } from 'react-router-dom'
  7 | import * as Styled from './Styled'
  8 | import { requestGetBlogList } from '../../reducers/blogList'
  9 | import { blogListPerPageCount } from '../../constants'
 10 | import Tag from '../Tag'
 11 | import { getPaginationArray } from '../../utils'
 12 | import { activePaginationClassName } from '../../constants'
 13 | import PointOutContent from '../PointOutContent'
 14 | 
 15 | class BlogList extends React.Component {
 16 |   constructor(props) {
 17 |     super(props)
 18 | 
 19 |     this.state = {
 20 |       currentPage: 1
 21 |     }
 22 | 
 23 |     this.onTitleClick = this.onTitleClick.bind(this)
 24 |     this.onPaginationClick = this.onPaginationClick.bind(this)
 25 |   }
 26 | 
 27 |   componentDidMount() {
 28 |     this.props.requestGetBlogList()
 29 |   }
 30 | 
 31 |   onTitleClick(event, to) {
 32 |     event.preventDefault()
 33 |     this.props.history.push(`/blogs/${to}`)
 34 |   }
 35 | 
 36 |   onPaginationClick(event, page) {
 37 |     event.preventDefault()
 38 |     this.setState({ currentPage: page })
 39 |   }
 40 | 
 41 |   render() {
 42 |     const { status, blogList, amount } = this.props
 43 |     const { currentPage } = this.state
 44 |     const totalPage = Math.ceil(amount / blogListPerPageCount)
 45 | 
 46 |     // 检查数据是否加载完成或没有数据
 47 |     if (status === 'pending' || status === '') {
 48 |       // 若数据正在获取，渲染加载界面
 49 |       return <ContentLoader height={650} />
 50 |     } else if (status === 'failure') {
 51 |       // 若数据加载失败
 52 |       return <PointOutContent text="数据加载失败，请刷新页面重试" />
 53 |     } else if (status === 'success' && amount === 0) {
 54 |       // 数据获取成功，但没有任何数据
 55 |       return <PointOutContent text="No data" />
 56 |     }
 57 | 
 58 |     // 获取博客列表
 59 |     const listStartIndex = (currentPage - 1) * blogListPerPageCount
 60 |     const listEndIndex = listStartIndex + blogListPerPageCount
 61 |     const listData = blogList.slice(listStartIndex, listEndIndex)
 62 | 
 63 |     // 博客列表组件
 64 |     const list = listData.map(item => (
 65 |       <Styled.Container key={item._id}>
 66 |         <Styled.Title>
 67 |           <a
 68 |             href={`/blogs/${item._id}`}
 69 |             onClick={e => this.onTitleClick(e, item._id)}
 70 |           >
 71 |             {item.title}
 72 |           </a>
 73 |         </Styled.Title>
 74 |         <Styled.Summary>{item.summary}</Styled.Summary>
 75 |         <Styled.InfoContainer>
 76 |           <Styled.Info>
 77 |             <i className="fas fa-clock" />&nbsp;&nbsp;{item.createTime
 78 |               .toLocaleString()
 79 |               .slice(0, 10)}
 80 |           </Styled.Info>
 81 |           <Styled.Info>
 82 |             <i className="fas fa-eye" />&nbsp;&nbsp;{item.viewTimes}
 83 |           </Styled.Info>
 84 |           <Styled.Info>
 85 |             <i className="fas fa-tag" />&nbsp;&nbsp;
 86 |             {item.tags.map(tag => (
 87 |               <Tag key={tag} isLink={false} random={true}>
 88 |                 {tag}
 89 |               </Tag>
 90 |             ))}
 91 |           </Styled.Info>
 92 |           <Styled.Info>
 93 |             <i className="fas fa-folder-open" />&nbsp;&nbsp;
 94 |             <Tag isLink={false} random={true}>
 95 |               {item.category}
 96 |             </Tag>
 97 |           </Styled.Info>
 98 |         </Styled.InfoContainer>
 99 |       </Styled.Container>
100 |     ))
101 | 
102 |     // 分页组件
103 |     const pageArray = getPaginationArray(currentPage, totalPage)
104 |     const pagination = (
105 |       <Styled.Pagination>
106 |         <a href="#ignore" onClick={e => this.onPaginationClick(e, 1)}>
107 |           &laquo;
108 |         </a>
109 |         {pageArray.map(page => (
110 |           <a
111 |             key={page}
112 |             href="#ignore"
113 |             className={page === currentPage ? activePaginationClassName : ''}
114 |             onClick={e => this.onPaginationClick(e, page)}
115 |           >
116 |             {page}
117 |           </a>
118 |         ))}
119 |         <a href="#ignore" onClick={e => this.onPaginationClick(e, totalPage)}>
120 |           &raquo;
121 |         </a>
122 |       </Styled.Pagination>
123 |     )
124 | 
125 |     return (
126 |       <div>
127 |         {list}
128 |         {pagination}
129 |       </div>
130 |     )
131 |   }
132 | }
133 | 
134 | const mapStateToProps = state => ({
135 |   status: state.blogList.status,
136 |   blogList: state.blogList.list,
137 |   amount: state.blogList.amount
138 | })
139 | 
140 | const mapDispatchToProps = dispatch =>
141 |   bindActionCreators(
142 |     {
143 |       requestGetBlogList
144 |     },
145 |     dispatch
146 |   )
147 | 
148 | BlogList.propTypes = {
149 |   blogList: PropTypes.array,
150 |   amount: PropTypes.number,
151 |   status: PropTypes.string
152 | }
153 | 
154 | export default withRouter(
155 |   connect(mapStateToProps, mapDispatchToProps)(BlogList)
156 | )
157 | 


--------------------------------------------------------------------------------
/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 ignoredFiles = require('react-dev-utils/ignoredFiles');
 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: ignoredFiles(paths.appSrc),
72 |     },
73 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
74 |     https: protocol === 'https',
75 |     host: host,
76 |     overlay: false,
77 |     historyApiFallback: {
78 |       // Paths with dots should still use the history fallback.
79 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
80 |       disableDotRule: true,
81 |     },
82 |     public: allowedHost,
83 |     proxy,
84 |     before(app) {
85 |       // This lets us open files from the runtime error overlay.
86 |       app.use(errorOverlayMiddleware());
87 |       // This service worker file is effectively a 'no-op' that will reset any
88 |       // previous service worker registered for the same host:port combination.
89 |       // We do this in development to avoid hitting the production cache if
90 |       // it used the same host and port.
91 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
92 |       app.use(noopServiceWorkerMiddleware());
93 |     },
94 |   };
95 | };
96 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 博客前台
  2 | 
  3 | 项目地址: [https://github.com/zaleGZL/zalegzl-website](https://github.com/zaleGZL/zalegzl-website)
  4 | 
  5 | 如果你觉得项目不错的话，欢迎点击右上角 'star' 支持下，万分感谢! ~\(≧▽≦)/~
  6 | 
  7 | ## 前言
  8 | 
  9 | 以前我是用 hexo + next 来搭建自己的博客，但最近学习了 React 后，深深地被它的组件化开发思想所吸引，刚好寒假放假有时间，所以我就用 React 搭建了一个自己的博客。React 实际上只是对应 MVC 中的视图层，要想搭建一个完整的应用，仅有 React 是不够的，我们还需要其它的库或框架，例如用来管理数据的 redux，用于实现前端路由的 react-router 等等。
 10 | 
 11 | ## 技术栈
 12 | 
 13 | ### 前端
 14 | 
 15 | - react
 16 | - axios: 异步请求
 17 | - react-router-dom: 前端路由
 18 | - redux: 管理整个应用数据
 19 | - redux-thunk: redux的中间件，多用于处理异步action
 20 | - styled-components: CSS in JS 的一种，使得能够在JS中写原生的CSS
 21 | 
 22 | 注明: 博客前端页面没有使用其它基于 React 的 CSS 框架，主要还是想加强自己写 CSS 能力。
 23 | 
 24 | ### 后端
 25 | 
 26 | - koa
 27 | 
 28 | 博客的后端是使用 Node.js 开发的，是基于 koa 并采用了 Restful API 架构实现的，完美实现前后端的分离，后端只需要负责提供数据，而路由的跳转、数据渲染都是由前端实现。
 29 | 
 30 | 项目地址: [https://github.com/zaleGZL/zalegzl-website-server](https://github.com/zaleGZL/zalegzl-website-server)
 31 | 
 32 | ## 实现的功能
 33 | 
 34 | - [x] 博客首页列表展示
 35 | - [x] 博客内容markdown
 36 | - [x] 博客内容的目录
 37 | - [x] 博客的分类和标签
 38 | - [x] 返回顶部
 39 | - [x] 响应式
 40 | - [x] 关于页面(目前用于放简历，本人大三，求实习中...)
 41 | 
 42 | ## TODO
 43 | 
 44 | - [ ] 分类页面
 45 | - [ ] 标签页面
 46 | - [ ] markdown代码高亮
 47 | - [ ] 美化页面的样式
 48 | 
 49 | ## 博客预览
 50 | 
 51 | #### 首页
 52 | 
 53 | ![blog_home](http://p3ek8rd7p.bkt.clouddn.com/blog_home.jpg)
 54 | 
 55 | #### 博客详情页
 56 | 
 57 | ![http://p3ek8rd7p.bkt.clouddn.com/blog_page.jpg](http://p3ek8rd7p.bkt.clouddn.com/blog_page.jpg)
 58 | 
 59 | 
 60 | ## 项目总结
 61 | 
 62 | 接下来我大致介绍一下我在做博客项目时的一些体会和感悟。
 63 | 
 64 | ### React 仅仅是一个视图层
 65 | 
 66 | 在使用 React 之后，我发现 React 它本身做的事情非常简单，它仅仅只是一个视图层的一个框架，它能够让你使用 JSX 语法来写HTML，而且它这种基于组件化的开发方式非常新颖，使得组件具备高可复用性。当在多人协作构建应用时，我们每个人只需要负责一个个小的组件，同时我们也要尽量降低组件与组件的耦合性，增大组件的内聚性，最终这一个个组件就能够构建出一个大型应用。
 67 | 
 68 | ### 前端路由
 69 | 
 70 | 前端发展非常快速，总是会出现新的东西，以前在使用 express 搭建后端应用，那时候我知道有后端路由，就是请求的 URL 路径来返回不同的内容，返回不同的页面。而当我第一次听说前端路由时，我一开始以为它是一个新的东西，其实不然，它仅仅是把后端的那一套搬过来了而已。在前端实现了路由，可以使得当页面的 URL 刷新时，不会发起该 URL 请求，而是根据不同的 URL 渲染不同的组件。
 71 | 
 72 | ```JavaScript
 73 | <Switch>
 74 |   <Route exact path="/" component={BlogList} />
 75 |   <Route exact path="/blogs" component={BlogList} />
 76 |   <Route path="/blogs/:blogId" component={Blog} />
 77 |   <Route path="/tags" component={OnDevelopingContent} />
 78 |   <Route path="/categories" component={OnDevelopingContent} />
 79 |   <Route path="/about" component={ResumeContent} />
 80 |   <Route component={NotFoundContent} />
 81 | </Switch>
 82 | ```
 83 | 
 84 | 上面的代码就是我的博客应用最顶层的路由组件的部分代码，这里是使用 [react-router](https://github.com/ReactTraining/react-router)，并且根据不同的路由来渲染不同的组件。
 85 | 
 86 | ### 如何管理应用数据
 87 | 
 88 | React 中的 `state` 其实就是来存放应用数据的，并且能够传递给子组件，在构建一个小型应用时，`state` 的确够用，但是在构建大型应用时就要好好考虑一下如何管理应用数据了。
 89 | 
 90 | `state` 其实存在以下几个问题:
 91 | 
 92 | - 父组件若要将数据传递给孙组件或者更后代的组件，就需要所有中间组件的帮助帮忙传递，否则就需要用 React 中的 `context API` 来实现跨组件传递数据。
 93 | 
 94 | - 子组件的数据无法传递给父组件或者更顶层的组件。
 95 | 
 96 | - 应用的数据存放地过于分散。
 97 | 
 98 | 而 Redux 的出现就解决了以上的问题，在 Redux 中只存在一个唯一的全局 `store`，整个应用的数据都存放在这里，任何组件都可以能够从 `store` 中获得自己组件需要用到的数据，并且能够通过派发 `action` 来改变 `store`，`store` 的改变会使得相应组件被更新，组件也会收到更新后的数据。其实 Redux 就是使用 `Context API` 实现的，
 99 | 
100 | ```Javascript
101 | const mapStateToProps = state => ({
102 |   blogCount: state.profile.blogCount,
103 |   tagCount: state.profile.tagCount,
104 |   categoryCount: state.profile.categoryCount
105 | })
106 | 
107 | const mapDispatchToProps = dispatch =>
108 |   bindActionCreators(
109 |     {
110 |       requestGetProfileInfo
111 |     },
112 |     dispatch
113 |   )
114 | 
115 | export default connect(mapStateToProps, mapDispatchToProps)(ProfileCard)
116 | ```
117 | 
118 | 从代码可以看出，`ProfileCard` 从 `store` 获取了 `profile` 对象的 `blogCount`、`tagCount`、`categoryCount` 和一个 `requestGetProfileInfo` 函数，`requestGetProfileInfo` 其实就是用来改变 `store` 的。`connect` 函数是 [react-redux](https://github.com/reactjs/react-redux) 的一个方法，用来连接 react 和 redux，调用该函数实际上返回一个高阶组件，并且内部是做了很多的性能优化(主要在 `shouldcomponentupdate` 函数里)。
119 | 
120 | ### CSS 应该怎么写
121 | 
122 | 前端发展的初期，一开始大家都提倡内容与样式分离，其实就是将 HTML 与 CSS 分开写，在 HTML 中引用 CSS 资源。
123 | 
124 | 但是随着前端的发展，组件化开发越来被认可，似乎是一种趋势。但是它却与传统的内容与样式分离相违背。在组件化开发方式中，我们都提倡组件内聚性，将与该组件相关的 HTML、CSS、JavaScript 写在一起，在我看来，这是组件化开发最适合的写法。
125 | 
126 | 在 React 写 CSS 其实有很多种选择，各有各的优点吧，萝卜青菜，各有所爱嘛，但让我眼前一亮的却是 [styled-components](https://github.com/styled-components/styled-components) 这个库，它其实也是 CSS in JS 的一种。
127 | 
128 | #### 组件中的内联样式
129 | 
130 | ```Javascript
131 | const divStyle = {
132 |   color: 'blue',
133 |   backgroundImage: 'url(' + imgUrl + ')',
134 | };
135 | 
136 | function HelloWorldComponent() {
137 |   return <div style={divStyle}>Hello World!</div>;
138 | }
139 | ```
140 | 
141 | 这其实跟在 HTML 中写内联样式时一样的，我觉得假如一个组件只需要修改某几个样式，是完全可以采用这个写法，但是若要写很多样式，其实是不适合的。
142 | 
143 | #### 外部样式
144 | 
145 | > reboot.css
146 | 
147 | ```CSS
148 | *,
149 | *::before,
150 | *::after {
151 |     box-sizing: border-box;
152 | }
153 | 
154 | body {
155 |     margin: 0 0 100px;
156 |     padding-top: 50px;
157 | }
158 | 
159 | a {
160 |     text-decoration: none;
161 |     cursor: pointer;
162 | }
163 | ```
164 | 
165 | > index.js
166 | 
167 | ```JavaScript
168 | import './reboot.css'
169 | ```
170 | 
171 | 当加载页面的时候，在外面样式表中就能够找到它。
172 | 
173 | ![react_import_css](http://p3ek8rd7p.bkt.clouddn.com/react_import_css.jpg)
174 | 
175 | 但这样写会存在许多问题:
176 | 
177 | - 命名容易冲突
178 | - 组件独立性较差
179 | - 无法按需加载
180 | 
181 | #### CSS in JS
182 | 
183 | 我个人比较喜欢 [styled-components](https://github.com/styled-components/styled-components)，先来看看官方的例子。
184 | 
185 | ```JavaScript
186 | // 创建一个Title组件并且它会渲染 h1 标签，并且拥有以下的样式
187 | const Title = styled.h1`
188 |   font-size: 1.5em;
189 |   text-align: center;
190 |   color: palevioletred;
191 | `;
192 | 
193 | // 创建一个Wrapper组件并且它会渲染 section 标签，并且拥有以下样式
194 | const Wrapper = styled.section`
195 |   padding: 4em;
196 |   background: papayawhip;
197 | `;
198 | 
199 | // 组件渲染
200 | render(
201 |   <Wrapper>
202 |     <Title>
203 |       Hello World, this is my first styled component!
204 |     </Title>
205 |   </Wrapper>
206 | );
207 | ```
208 | 
209 | `styled-components` 的核心思想是将样式与相应的组件绑定到一起，通过计算 CSS 样式内容生成内容哈希值，并且将该值作为该组件 className 的值，这完美地解决了命名冲突问题。
210 | 
211 | 当然 `styled-components` 的强大之处不止于此，它还能够实现 CSS 规则的继承、扩展、根据父组件传递的 props 动态计算样式等等。
212 | 
213 | CSS in JS 似乎是一种全新的选择，我个人非常喜欢这种写法。
214 | 
215 | 
216 | 
217 | 
218 | 
219 | 
220 | 


--------------------------------------------------------------------------------
/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 |             // its 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|jsx|mjs)$/, /\.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|jsx|mjs)$/, /\.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/components/Blog/markdown.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |     font-family: octicons-link;
  3 |     src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
  4 | }
  5 | 
  6 | .markdown-body {
  7 |     -ms-text-size-adjust: 100%;
  8 |     -webkit-text-size-adjust: 100%;
  9 |     line-height: 1.5;
 10 |     /* color: #24292e; */
 11 |     font-family: -apple-system, "PingFang SC", BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 12 |     font-size: 16px;
 13 |     line-height: 1.5;
 14 |     word-wrap: break-word;
 15 | 
 16 |     color: rgba(51, 51, 51, 0.9);
 17 | }
 18 | 
 19 | .markdown-body .pl-c {
 20 |     color: #6a737d;
 21 | }
 22 | 
 23 | .markdown-body .pl-c1,
 24 | .markdown-body .pl-s .pl-v {
 25 |     color: #005cc5;
 26 | }
 27 | 
 28 | .markdown-body .pl-e,
 29 | .markdown-body .pl-en {
 30 |     color: #6f42c1;
 31 | }
 32 | 
 33 | .markdown-body .pl-smi,
 34 | .markdown-body .pl-s .pl-s1 {
 35 |     color: #24292e;
 36 | }
 37 | 
 38 | .markdown-body .pl-ent {
 39 |     color: #22863a;
 40 | }
 41 | 
 42 | .markdown-body .pl-k {
 43 |     color: #d73a49;
 44 | }
 45 | 
 46 | .markdown-body .pl-s,
 47 | .markdown-body .pl-pds,
 48 | .markdown-body .pl-s .pl-pse .pl-s1,
 49 | .markdown-body .pl-sr,
 50 | .markdown-body .pl-sr .pl-cce,
 51 | .markdown-body .pl-sr .pl-sre,
 52 | .markdown-body .pl-sr .pl-sra {
 53 |     color: #032f62;
 54 | }
 55 | 
 56 | .markdown-body .pl-v,
 57 | .markdown-body .pl-smw {
 58 |     color: #e36209;
 59 | }
 60 | 
 61 | .markdown-body .pl-bu {
 62 |     color: #b31d28;
 63 | }
 64 | 
 65 | .markdown-body .pl-ii {
 66 |     color: #fafbfc;
 67 |     background-color: #b31d28;
 68 | }
 69 | 
 70 | .markdown-body .pl-c2 {
 71 |     color: #fafbfc;
 72 |     background-color: #d73a49;
 73 | }
 74 | 
 75 | .markdown-body .pl-c2::before {
 76 |     content: "^M";
 77 | }
 78 | 
 79 | .markdown-body .pl-sr .pl-cce {
 80 |     font-weight: bold;
 81 |     color: #22863a;
 82 | }
 83 | 
 84 | .markdown-body .pl-ml {
 85 |     color: #735c0f;
 86 | }
 87 | 
 88 | .markdown-body .pl-mh,
 89 | .markdown-body .pl-mh .pl-en,
 90 | .markdown-body .pl-ms {
 91 |     font-weight: bold;
 92 |     color: #005cc5;
 93 | }
 94 | 
 95 | .markdown-body .pl-mi {
 96 |     font-style: italic;
 97 |     color: #24292e;
 98 | }
 99 | 
100 | .markdown-body .pl-mb {
101 |     font-weight: bold;
102 |     color: #24292e;
103 | }
104 | 
105 | .markdown-body .pl-md {
106 |     color: #b31d28;
107 |     background-color: #ffeef0;
108 | }
109 | 
110 | .markdown-body .pl-mi1 {
111 |     color: #22863a;
112 |     background-color: #f0fff4;
113 | }
114 | 
115 | .markdown-body .pl-mc {
116 |     color: #e36209;
117 |     background-color: #ffebda;
118 | }
119 | 
120 | .markdown-body .pl-mi2 {
121 |     color: #f6f8fa;
122 |     background-color: #005cc5;
123 | }
124 | 
125 | .markdown-body .pl-mdr {
126 |     font-weight: bold;
127 |     color: #6f42c1;
128 | }
129 | 
130 | .markdown-body .pl-ba {
131 |     color: #586069;
132 | }
133 | 
134 | .markdown-body .pl-sg {
135 |     color: #959da5;
136 | }
137 | 
138 | .markdown-body .pl-corl {
139 |     text-decoration: underline;
140 |     color: #032f62;
141 | }
142 | 
143 | .markdown-body .octicon {
144 |     display: inline-block;
145 |     vertical-align: text-top;
146 |     fill: currentColor;
147 | }
148 | 
149 | .markdown-body a {
150 |     background-color: transparent;
151 | }
152 | 
153 | .markdown-body a:active,
154 | .markdown-body a:hover {
155 |     outline-width: 0;
156 | }
157 | 
158 | .markdown-body strong {
159 |     font-weight: inherit;
160 | }
161 | 
162 | .markdown-body strong {
163 |     font-weight: bolder;
164 | }
165 | 
166 | .markdown-body h1 {
167 |     font-size: 2em;
168 |     margin: 0.67em 0;
169 | }
170 | 
171 | .markdown-body img {
172 |     border-style: none;
173 | }
174 | 
175 | .markdown-body code,
176 | .markdown-body kbd,
177 | .markdown-body pre {
178 |     font-family: monospace, monospace;
179 |     font-size: 1em;
180 | }
181 | 
182 | .markdown-body hr {
183 |     box-sizing: content-box;
184 |     height: 0;
185 |     overflow: visible;
186 | }
187 | 
188 | .markdown-body input {
189 |     font: inherit;
190 |     margin: 0;
191 | }
192 | 
193 | .markdown-body input {
194 |     overflow: visible;
195 | }
196 | 
197 | .markdown-body [type="checkbox"] {
198 |     box-sizing: border-box;
199 |     padding: 0;
200 | }
201 | 
202 | .markdown-body * {
203 |     box-sizing: border-box;
204 | }
205 | 
206 | .markdown-body input {
207 |     font-family: inherit;
208 |     font-size: inherit;
209 |     line-height: inherit;
210 | }
211 | 
212 | .markdown-body a {
213 |     color: #0366d6;
214 |     text-decoration: none;
215 | }
216 | 
217 | .markdown-body a:hover {
218 |     text-decoration: underline;
219 | }
220 | 
221 | .markdown-body strong {
222 |     font-weight: 600;
223 | }
224 | 
225 | .markdown-body hr {
226 |     height: 0;
227 |     margin: 15px 0;
228 |     overflow: hidden;
229 |     background: transparent;
230 |     border: 0;
231 |     border-bottom: 1px solid #dfe2e5;
232 | }
233 | 
234 | .markdown-body hr::before {
235 |     display: table;
236 |     content: "";
237 | }
238 | 
239 | .markdown-body hr::after {
240 |     display: table;
241 |     clear: both;
242 |     content: "";
243 | }
244 | 
245 | .markdown-body table {
246 |     border-spacing: 0;
247 |     border-collapse: collapse;
248 | }
249 | 
250 | .markdown-body td,
251 | .markdown-body th {
252 |     padding: 0;
253 | }
254 | 
255 | .markdown-body h1,
256 | .markdown-body h2,
257 | .markdown-body h3,
258 | .markdown-body h4,
259 | .markdown-body h5,
260 | .markdown-body h6 {
261 |     margin-top: 0;
262 |     margin-bottom: 0;
263 | }
264 | 
265 | .markdown-body h1 {
266 |     font-size: 32px;
267 |     font-weight: 600;
268 | }
269 | 
270 | .markdown-body h2 {
271 |     font-size: 24px;
272 |     font-weight: 600;
273 | }
274 | 
275 | .markdown-body h3 {
276 |     font-size: 20px;
277 |     font-weight: 600;
278 | }
279 | 
280 | .markdown-body h4 {
281 |     font-size: 16px;
282 |     font-weight: 600;
283 | }
284 | 
285 | .markdown-body h5 {
286 |     font-size: 14px;
287 |     font-weight: 600;
288 | }
289 | 
290 | .markdown-body h6 {
291 |     font-size: 12px;
292 |     font-weight: 600;
293 | }
294 | 
295 | .markdown-body p {
296 |     margin-top: 0;
297 |     margin-bottom: 10px;
298 | }
299 | 
300 | .markdown-body blockquote {
301 |     margin: 0;
302 | }
303 | 
304 | .markdown-body ul,
305 | .markdown-body ol {
306 |     padding-left: 0;
307 |     margin-top: 0;
308 |     margin-bottom: 0;
309 | }
310 | 
311 | .markdown-body ol ol,
312 | .markdown-body ul ol {
313 |     list-style-type: lower-roman;
314 | }
315 | 
316 | .markdown-body ul ul ol,
317 | .markdown-body ul ol ol,
318 | .markdown-body ol ul ol,
319 | .markdown-body ol ol ol {
320 |     list-style-type: lower-alpha;
321 | }
322 | 
323 | .markdown-body dd {
324 |     margin-left: 0;
325 | }
326 | 
327 | .markdown-body code {
328 |     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
329 |     font-size: 12px;
330 | }
331 | 
332 | .markdown-body pre {
333 |     margin-top: 0;
334 |     margin-bottom: 0;
335 |     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
336 |     font-size: 12px;
337 | }
338 | 
339 | .markdown-body .octicon {
340 |     vertical-align: text-bottom;
341 | }
342 | 
343 | .markdown-body .pl-0 {
344 |     padding-left: 0 !important;
345 | }
346 | 
347 | .markdown-body .pl-1 {
348 |     padding-left: 4px !important;
349 | }
350 | 
351 | .markdown-body .pl-2 {
352 |     padding-left: 8px !important;
353 | }
354 | 
355 | .markdown-body .pl-3 {
356 |     padding-left: 16px !important;
357 | }
358 | 
359 | .markdown-body .pl-4 {
360 |     padding-left: 24px !important;
361 | }
362 | 
363 | .markdown-body .pl-5 {
364 |     padding-left: 32px !important;
365 | }
366 | 
367 | .markdown-body .pl-6 {
368 |     padding-left: 40px !important;
369 | }
370 | 
371 | .markdown-body::before {
372 |     display: table;
373 |     content: "";
374 | }
375 | 
376 | .markdown-body::after {
377 |     display: table;
378 |     clear: both;
379 |     content: "";
380 | }
381 | 
382 | .markdown-body>*:first-child {
383 |     margin-top: 0 !important;
384 | }
385 | 
386 | .markdown-body>*:last-child {
387 |     margin-bottom: 0 !important;
388 | }
389 | 
390 | .markdown-body a:not([href]) {
391 |     color: inherit;
392 |     text-decoration: none;
393 | }
394 | 
395 | .markdown-body .anchor {
396 |     float: left;
397 |     padding-right: 4px;
398 |     margin-left: -20px;
399 |     line-height: 1;
400 | }
401 | 
402 | .markdown-body .anchor:focus {
403 |     outline: none;
404 | }
405 | 
406 | .markdown-body p,
407 | .markdown-body blockquote,
408 | .markdown-body ul,
409 | .markdown-body ol,
410 | .markdown-body dl,
411 | .markdown-body table,
412 | .markdown-body pre {
413 |     margin-top: 0;
414 |     margin-bottom: 16px;
415 | }
416 | 
417 | .markdown-body hr {
418 |     height: 0.25em;
419 |     padding: 0;
420 |     margin: 24px 0;
421 |     background-color: #e1e4e8;
422 |     border: 0;
423 | }
424 | 
425 | .markdown-body blockquote {
426 |     padding: 0 1em;
427 |     color: #6a737d;
428 |     border-left: 0.25em solid #dfe2e5;
429 | }
430 | 
431 | .markdown-body blockquote>:first-child {
432 |     margin-top: 0;
433 | }
434 | 
435 | .markdown-body blockquote>:last-child {
436 |     margin-bottom: 0;
437 | }
438 | 
439 | .markdown-body kbd {
440 |     display: inline-block;
441 |     padding: 3px 5px;
442 |     font-size: 11px;
443 |     line-height: 10px;
444 |     color: #444d56;
445 |     vertical-align: middle;
446 |     background-color: #fafbfc;
447 |     border: solid 1px #c6cbd1;
448 |     border-bottom-color: #959da5;
449 |     border-radius: 3px;
450 |     box-shadow: inset 0 -1px 0 #959da5;
451 | }
452 | 
453 | .markdown-body h1,
454 | .markdown-body h2,
455 | .markdown-body h3,
456 | .markdown-body h4,
457 | .markdown-body h5,
458 | .markdown-body h6 {
459 |     margin-top: 24px;
460 |     margin-bottom: 16px;
461 |     font-weight: 600;
462 |     line-height: 1.25;
463 | }
464 | 
465 | .markdown-body h1 .octicon-link,
466 | .markdown-body h2 .octicon-link,
467 | .markdown-body h3 .octicon-link,
468 | .markdown-body h4 .octicon-link,
469 | .markdown-body h5 .octicon-link,
470 | .markdown-body h6 .octicon-link {
471 |     color: #1b1f23;
472 |     vertical-align: middle;
473 |     visibility: hidden;
474 | }
475 | 
476 | .markdown-body h1:hover .anchor,
477 | .markdown-body h2:hover .anchor,
478 | .markdown-body h3:hover .anchor,
479 | .markdown-body h4:hover .anchor,
480 | .markdown-body h5:hover .anchor,
481 | .markdown-body h6:hover .anchor {
482 |     text-decoration: none;
483 | }
484 | 
485 | .markdown-body h1:hover .anchor .octicon-link,
486 | .markdown-body h2:hover .anchor .octicon-link,
487 | .markdown-body h3:hover .anchor .octicon-link,
488 | .markdown-body h4:hover .anchor .octicon-link,
489 | .markdown-body h5:hover .anchor .octicon-link,
490 | .markdown-body h6:hover .anchor .octicon-link {
491 |     visibility: visible;
492 | }
493 | 
494 | .markdown-body h1 {
495 |     padding-bottom: 0.3em;
496 |     font-size: 2em;
497 |     border-bottom: 1px solid #eaecef;
498 | }
499 | 
500 | .markdown-body h2 {
501 |     padding-bottom: 0.3em;
502 |     font-size: 1.5em;
503 |     border-bottom: 1px solid #eaecef;
504 | }
505 | 
506 | .markdown-body h3 {
507 |     font-size: 1.25em;
508 | }
509 | 
510 | .markdown-body h4 {
511 |     font-size: 1em;
512 | }
513 | 
514 | .markdown-body h5 {
515 |     font-size: 0.875em;
516 | }
517 | 
518 | .markdown-body h6 {
519 |     font-size: 0.85em;
520 |     color: #6a737d;
521 | }
522 | 
523 | .markdown-body ul,
524 | .markdown-body ol {
525 |     padding-left: 2em;
526 | }
527 | 
528 | .markdown-body ul ul,
529 | .markdown-body ul ol,
530 | .markdown-body ol ol,
531 | .markdown-body ol ul {
532 |     margin-top: 0;
533 |     margin-bottom: 0;
534 | }
535 | 
536 | .markdown-body li {
537 |     word-wrap: break-all;
538 | }
539 | 
540 | .markdown-body li>p {
541 |     margin-top: 16px;
542 | }
543 | 
544 | .markdown-body li+li {
545 |     margin-top: 0.25em;
546 | }
547 | 
548 | .markdown-body dl {
549 |     padding: 0;
550 | }
551 | 
552 | .markdown-body dl dt {
553 |     padding: 0;
554 |     margin-top: 16px;
555 |     font-size: 1em;
556 |     font-style: italic;
557 |     font-weight: 600;
558 | }
559 | 
560 | .markdown-body dl dd {
561 |     padding: 0 16px;
562 |     margin-bottom: 16px;
563 | }
564 | 
565 | .markdown-body table {
566 |     display: block;
567 |     width: 100%;
568 |     overflow: auto;
569 | }
570 | 
571 | .markdown-body table th {
572 |     font-weight: 600;
573 | }
574 | 
575 | .markdown-body table th,
576 | .markdown-body table td {
577 |     padding: 6px 13px;
578 |     border: 1px solid #dfe2e5;
579 | }
580 | 
581 | .markdown-body table tr {
582 |     background-color: #fff;
583 |     border-top: 1px solid #c6cbd1;
584 | }
585 | 
586 | .markdown-body table tr:nth-child(2n) {
587 |     background-color: #f6f8fa;
588 | }
589 | 
590 | .markdown-body img {
591 |     max-width: 100%;
592 |     box-sizing: content-box;
593 |     background-color: #fff;
594 | }
595 | 
596 | .markdown-body img[align=right] {
597 |     padding-left: 20px;
598 | }
599 | 
600 | .markdown-body img[align=left] {
601 |     padding-right: 20px;
602 | }
603 | 
604 | .markdown-body code {
605 |     padding: 0.2em 0.4em;
606 |     margin: 0;
607 |     font-size: 85%;
608 |     background-color: rgba(27, 31, 35, 0.05);
609 |     border-radius: 3px;
610 | }
611 | 
612 | .markdown-body pre {
613 |     word-wrap: normal;
614 | }
615 | 
616 | .markdown-body pre>code {
617 |     padding: 0;
618 |     margin: 0;
619 |     font-size: 100%;
620 |     word-break: normal;
621 |     white-space: pre;
622 |     background: transparent;
623 |     border: 0;
624 | }
625 | 
626 | .markdown-body .highlight {
627 |     margin-bottom: 16px;
628 | }
629 | 
630 | .markdown-body .highlight pre {
631 |     margin-bottom: 0;
632 |     word-break: normal;
633 | }
634 | 
635 | .markdown-body .highlight pre,
636 | .markdown-body pre {
637 |     padding: 16px;
638 |     overflow: auto;
639 |     font-size: 85%;
640 |     line-height: 1.45;
641 |     background-color: #f6f8fa;
642 |     border-radius: 3px;
643 | }
644 | 
645 | .markdown-body pre code {
646 |     display: inline;
647 |     max-width: auto;
648 |     padding: 0;
649 |     margin: 0;
650 |     overflow: visible;
651 |     line-height: inherit;
652 |     word-wrap: normal;
653 |     background-color: transparent;
654 |     border: 0;
655 | }
656 | 
657 | .markdown-body .full-commit .btn-outline:not(:disabled):hover {
658 |     color: #005cc5;
659 |     border-color: #005cc5;
660 | }
661 | 
662 | .markdown-body kbd {
663 |     display: inline-block;
664 |     padding: 3px 5px;
665 |     font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
666 |     line-height: 10px;
667 |     color: #444d56;
668 |     vertical-align: middle;
669 |     background-color: #fafbfc;
670 |     border: solid 1px #d1d5da;
671 |     border-bottom-color: #c6cbd1;
672 |     border-radius: 3px;
673 |     box-shadow: inset 0 -1px 0 #c6cbd1;
674 | }
675 | 
676 | .markdown-body :checked+.radio-label {
677 |     position: relative;
678 |     z-index: 1;
679 |     border-color: #0366d6;
680 | }
681 | 
682 | .markdown-body .task-list-item {
683 |     list-style-type: none;
684 | }
685 | 
686 | .markdown-body .task-list-item+.task-list-item {
687 |     margin-top: 3px;
688 | }
689 | 
690 | .markdown-body .task-list-item input {
691 |     margin: 0 0.2em 0.25em -1.6em;
692 |     vertical-align: middle;
693 | }
694 | 
695 | .markdown-body hr {
696 |     border-bottom-color: #eee;
697 | }


--------------------------------------------------------------------------------
/src/components/ResumeContent/markdown.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |     font-family: octicons-link;
  3 |     src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format('woff');
  4 | }
  5 | 
  6 | .markdown-body {
  7 |     -ms-text-size-adjust: 100%;
  8 |     -webkit-text-size-adjust: 100%;
  9 |     line-height: 1.5;
 10 |     /* color: #24292e; */
 11 |     font-family: -apple-system, "PingFang SC", BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 12 |     font-size: 16px;
 13 |     line-height: 1.5;
 14 |     word-wrap: break-word;
 15 | 
 16 |     color: rgba(51, 51, 51, 0.9);
 17 | }
 18 | 
 19 | .markdown-body .pl-c {
 20 |     color: #6a737d;
 21 | }
 22 | 
 23 | .markdown-body .pl-c1,
 24 | .markdown-body .pl-s .pl-v {
 25 |     color: #005cc5;
 26 | }
 27 | 
 28 | .markdown-body .pl-e,
 29 | .markdown-body .pl-en {
 30 |     color: #6f42c1;
 31 | }
 32 | 
 33 | .markdown-body .pl-smi,
 34 | .markdown-body .pl-s .pl-s1 {
 35 |     color: #24292e;
 36 | }
 37 | 
 38 | .markdown-body .pl-ent {
 39 |     color: #22863a;
 40 | }
 41 | 
 42 | .markdown-body .pl-k {
 43 |     color: #d73a49;
 44 | }
 45 | 
 46 | .markdown-body .pl-s,
 47 | .markdown-body .pl-pds,
 48 | .markdown-body .pl-s .pl-pse .pl-s1,
 49 | .markdown-body .pl-sr,
 50 | .markdown-body .pl-sr .pl-cce,
 51 | .markdown-body .pl-sr .pl-sre,
 52 | .markdown-body .pl-sr .pl-sra {
 53 |     color: #032f62;
 54 | }
 55 | 
 56 | .markdown-body .pl-v,
 57 | .markdown-body .pl-smw {
 58 |     color: #e36209;
 59 | }
 60 | 
 61 | .markdown-body .pl-bu {
 62 |     color: #b31d28;
 63 | }
 64 | 
 65 | .markdown-body .pl-ii {
 66 |     color: #fafbfc;
 67 |     background-color: #b31d28;
 68 | }
 69 | 
 70 | .markdown-body .pl-c2 {
 71 |     color: #fafbfc;
 72 |     background-color: #d73a49;
 73 | }
 74 | 
 75 | .markdown-body .pl-c2::before {
 76 |     content: "^M";
 77 | }
 78 | 
 79 | .markdown-body .pl-sr .pl-cce {
 80 |     font-weight: bold;
 81 |     color: #22863a;
 82 | }
 83 | 
 84 | .markdown-body .pl-ml {
 85 |     color: #735c0f;
 86 | }
 87 | 
 88 | .markdown-body .pl-mh,
 89 | .markdown-body .pl-mh .pl-en,
 90 | .markdown-body .pl-ms {
 91 |     font-weight: bold;
 92 |     color: #005cc5;
 93 | }
 94 | 
 95 | .markdown-body .pl-mi {
 96 |     font-style: italic;
 97 |     color: #24292e;
 98 | }
 99 | 
100 | .markdown-body .pl-mb {
101 |     font-weight: bold;
102 |     color: #24292e;
103 | }
104 | 
105 | .markdown-body .pl-md {
106 |     color: #b31d28;
107 |     background-color: #ffeef0;
108 | }
109 | 
110 | .markdown-body .pl-mi1 {
111 |     color: #22863a;
112 |     background-color: #f0fff4;
113 | }
114 | 
115 | .markdown-body .pl-mc {
116 |     color: #e36209;
117 |     background-color: #ffebda;
118 | }
119 | 
120 | .markdown-body .pl-mi2 {
121 |     color: #f6f8fa;
122 |     background-color: #005cc5;
123 | }
124 | 
125 | .markdown-body .pl-mdr {
126 |     font-weight: bold;
127 |     color: #6f42c1;
128 | }
129 | 
130 | .markdown-body .pl-ba {
131 |     color: #586069;
132 | }
133 | 
134 | .markdown-body .pl-sg {
135 |     color: #959da5;
136 | }
137 | 
138 | .markdown-body .pl-corl {
139 |     text-decoration: underline;
140 |     color: #032f62;
141 | }
142 | 
143 | .markdown-body .octicon {
144 |     display: inline-block;
145 |     vertical-align: text-top;
146 |     fill: currentColor;
147 | }
148 | 
149 | .markdown-body a {
150 |     background-color: transparent;
151 | }
152 | 
153 | .markdown-body a:active,
154 | .markdown-body a:hover {
155 |     outline-width: 0;
156 | }
157 | 
158 | .markdown-body strong {
159 |     font-weight: inherit;
160 | }
161 | 
162 | .markdown-body strong {
163 |     font-weight: bolder;
164 | }
165 | 
166 | .markdown-body h1 {
167 |     font-size: 2em;
168 |     margin: 0.67em 0;
169 | }
170 | 
171 | .markdown-body img {
172 |     border-style: none;
173 | }
174 | 
175 | .markdown-body code,
176 | .markdown-body kbd,
177 | .markdown-body pre {
178 |     font-family: monospace, monospace;
179 |     font-size: 1em;
180 | }
181 | 
182 | .markdown-body hr {
183 |     box-sizing: content-box;
184 |     height: 0;
185 |     overflow: visible;
186 | }
187 | 
188 | .markdown-body input {
189 |     font: inherit;
190 |     margin: 0;
191 | }
192 | 
193 | .markdown-body input {
194 |     overflow: visible;
195 | }
196 | 
197 | .markdown-body [type="checkbox"] {
198 |     box-sizing: border-box;
199 |     padding: 0;
200 | }
201 | 
202 | .markdown-body * {
203 |     box-sizing: border-box;
204 | }
205 | 
206 | .markdown-body input {
207 |     font-family: inherit;
208 |     font-size: inherit;
209 |     line-height: inherit;
210 | }
211 | 
212 | .markdown-body a {
213 |     color: #0366d6;
214 |     text-decoration: none;
215 | }
216 | 
217 | .markdown-body a:hover {
218 |     text-decoration: underline;
219 | }
220 | 
221 | .markdown-body strong {
222 |     font-weight: 600;
223 | }
224 | 
225 | .markdown-body hr {
226 |     height: 0;
227 |     margin: 15px 0;
228 |     overflow: hidden;
229 |     background: transparent;
230 |     border: 0;
231 |     border-bottom: 1px solid #dfe2e5;
232 | }
233 | 
234 | .markdown-body hr::before {
235 |     display: table;
236 |     content: "";
237 | }
238 | 
239 | .markdown-body hr::after {
240 |     display: table;
241 |     clear: both;
242 |     content: "";
243 | }
244 | 
245 | .markdown-body table {
246 |     border-spacing: 0;
247 |     border-collapse: collapse;
248 | }
249 | 
250 | .markdown-body td,
251 | .markdown-body th {
252 |     padding: 0;
253 | }
254 | 
255 | .markdown-body h1,
256 | .markdown-body h2,
257 | .markdown-body h3,
258 | .markdown-body h4,
259 | .markdown-body h5,
260 | .markdown-body h6 {
261 |     margin-top: 0;
262 |     margin-bottom: 0;
263 | }
264 | 
265 | .markdown-body h1 {
266 |     font-size: 32px;
267 |     font-weight: 600;
268 | }
269 | 
270 | .markdown-body h2 {
271 |     font-size: 24px;
272 |     font-weight: 600;
273 | }
274 | 
275 | .markdown-body h3 {
276 |     font-size: 20px;
277 |     font-weight: 600;
278 | }
279 | 
280 | .markdown-body h4 {
281 |     font-size: 16px;
282 |     font-weight: 600;
283 | }
284 | 
285 | .markdown-body h5 {
286 |     font-size: 14px;
287 |     font-weight: 600;
288 | }
289 | 
290 | .markdown-body h6 {
291 |     font-size: 12px;
292 |     font-weight: 600;
293 | }
294 | 
295 | .markdown-body p {
296 |     margin-top: 0;
297 |     margin-bottom: 10px;
298 | }
299 | 
300 | .markdown-body blockquote {
301 |     margin: 0;
302 | }
303 | 
304 | .markdown-body ul,
305 | .markdown-body ol {
306 |     padding-left: 0;
307 |     margin-top: 0;
308 |     margin-bottom: 0;
309 | }
310 | 
311 | .markdown-body ol ol,
312 | .markdown-body ul ol {
313 |     list-style-type: lower-roman;
314 | }
315 | 
316 | .markdown-body ul ul ol,
317 | .markdown-body ul ol ol,
318 | .markdown-body ol ul ol,
319 | .markdown-body ol ol ol {
320 |     list-style-type: lower-alpha;
321 | }
322 | 
323 | .markdown-body dd {
324 |     margin-left: 0;
325 | }
326 | 
327 | .markdown-body code {
328 |     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
329 |     font-size: 12px;
330 | }
331 | 
332 | .markdown-body pre {
333 |     margin-top: 0;
334 |     margin-bottom: 0;
335 |     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
336 |     font-size: 12px;
337 | }
338 | 
339 | .markdown-body .octicon {
340 |     vertical-align: text-bottom;
341 | }
342 | 
343 | .markdown-body .pl-0 {
344 |     padding-left: 0 !important;
345 | }
346 | 
347 | .markdown-body .pl-1 {
348 |     padding-left: 4px !important;
349 | }
350 | 
351 | .markdown-body .pl-2 {
352 |     padding-left: 8px !important;
353 | }
354 | 
355 | .markdown-body .pl-3 {
356 |     padding-left: 16px !important;
357 | }
358 | 
359 | .markdown-body .pl-4 {
360 |     padding-left: 24px !important;
361 | }
362 | 
363 | .markdown-body .pl-5 {
364 |     padding-left: 32px !important;
365 | }
366 | 
367 | .markdown-body .pl-6 {
368 |     padding-left: 40px !important;
369 | }
370 | 
371 | .markdown-body::before {
372 |     display: table;
373 |     content: "";
374 | }
375 | 
376 | .markdown-body::after {
377 |     display: table;
378 |     clear: both;
379 |     content: "";
380 | }
381 | 
382 | .markdown-body>*:first-child {
383 |     margin-top: 0 !important;
384 | }
385 | 
386 | .markdown-body>*:last-child {
387 |     margin-bottom: 0 !important;
388 | }
389 | 
390 | .markdown-body a:not([href]) {
391 |     color: inherit;
392 |     text-decoration: none;
393 | }
394 | 
395 | .markdown-body .anchor {
396 |     float: left;
397 |     padding-right: 4px;
398 |     margin-left: -20px;
399 |     line-height: 1;
400 | }
401 | 
402 | .markdown-body .anchor:focus {
403 |     outline: none;
404 | }
405 | 
406 | .markdown-body p,
407 | .markdown-body blockquote,
408 | .markdown-body ul,
409 | .markdown-body ol,
410 | .markdown-body dl,
411 | .markdown-body table,
412 | .markdown-body pre {
413 |     margin-top: 0;
414 |     margin-bottom: 16px;
415 | }
416 | 
417 | .markdown-body hr {
418 |     height: 0.25em;
419 |     padding: 0;
420 |     margin: 24px 0;
421 |     background-color: #e1e4e8;
422 |     border: 0;
423 | }
424 | 
425 | .markdown-body blockquote {
426 |     padding: 0 1em;
427 |     color: #6a737d;
428 |     border-left: 0.25em solid #dfe2e5;
429 | }
430 | 
431 | .markdown-body blockquote>:first-child {
432 |     margin-top: 0;
433 | }
434 | 
435 | .markdown-body blockquote>:last-child {
436 |     margin-bottom: 0;
437 | }
438 | 
439 | .markdown-body kbd {
440 |     display: inline-block;
441 |     padding: 3px 5px;
442 |     font-size: 11px;
443 |     line-height: 10px;
444 |     color: #444d56;
445 |     vertical-align: middle;
446 |     background-color: #fafbfc;
447 |     border: solid 1px #c6cbd1;
448 |     border-bottom-color: #959da5;
449 |     border-radius: 3px;
450 |     box-shadow: inset 0 -1px 0 #959da5;
451 | }
452 | 
453 | .markdown-body h1,
454 | .markdown-body h2,
455 | .markdown-body h3,
456 | .markdown-body h4,
457 | .markdown-body h5,
458 | .markdown-body h6 {
459 |     margin-top: 24px;
460 |     margin-bottom: 16px;
461 |     font-weight: 600;
462 |     line-height: 1.25;
463 | }
464 | 
465 | .markdown-body h1 .octicon-link,
466 | .markdown-body h2 .octicon-link,
467 | .markdown-body h3 .octicon-link,
468 | .markdown-body h4 .octicon-link,
469 | .markdown-body h5 .octicon-link,
470 | .markdown-body h6 .octicon-link {
471 |     color: #1b1f23;
472 |     vertical-align: middle;
473 |     visibility: hidden;
474 | }
475 | 
476 | .markdown-body h1:hover .anchor,
477 | .markdown-body h2:hover .anchor,
478 | .markdown-body h3:hover .anchor,
479 | .markdown-body h4:hover .anchor,
480 | .markdown-body h5:hover .anchor,
481 | .markdown-body h6:hover .anchor {
482 |     text-decoration: none;
483 | }
484 | 
485 | .markdown-body h1:hover .anchor .octicon-link,
486 | .markdown-body h2:hover .anchor .octicon-link,
487 | .markdown-body h3:hover .anchor .octicon-link,
488 | .markdown-body h4:hover .anchor .octicon-link,
489 | .markdown-body h5:hover .anchor .octicon-link,
490 | .markdown-body h6:hover .anchor .octicon-link {
491 |     visibility: visible;
492 | }
493 | 
494 | .markdown-body h1 {
495 |     padding-bottom: 0.3em;
496 |     font-size: 2em;
497 |     border-bottom: 1px solid #eaecef;
498 | }
499 | 
500 | .markdown-body h2 {
501 |     padding-bottom: 0.3em;
502 |     font-size: 1.5em;
503 |     border-bottom: 1px solid #eaecef;
504 | }
505 | 
506 | .markdown-body h3 {
507 |     font-size: 1.25em;
508 | }
509 | 
510 | .markdown-body h4 {
511 |     font-size: 1em;
512 | }
513 | 
514 | .markdown-body h5 {
515 |     font-size: 0.875em;
516 | }
517 | 
518 | .markdown-body h6 {
519 |     font-size: 0.85em;
520 |     color: #6a737d;
521 | }
522 | 
523 | .markdown-body ul,
524 | .markdown-body ol {
525 |     padding-left: 2em;
526 | }
527 | 
528 | .markdown-body ul ul,
529 | .markdown-body ul ol,
530 | .markdown-body ol ol,
531 | .markdown-body ol ul {
532 |     margin-top: 0;
533 |     margin-bottom: 0;
534 | }
535 | 
536 | .markdown-body li {
537 |     word-wrap: break-all;
538 | }
539 | 
540 | .markdown-body li>p {
541 |     margin-top: 16px;
542 | }
543 | 
544 | .markdown-body li+li {
545 |     margin-top: 0.25em;
546 | }
547 | 
548 | .markdown-body dl {
549 |     padding: 0;
550 | }
551 | 
552 | .markdown-body dl dt {
553 |     padding: 0;
554 |     margin-top: 16px;
555 |     font-size: 1em;
556 |     font-style: italic;
557 |     font-weight: 600;
558 | }
559 | 
560 | .markdown-body dl dd {
561 |     padding: 0 16px;
562 |     margin-bottom: 16px;
563 | }
564 | 
565 | .markdown-body table {
566 |     display: block;
567 |     width: 100%;
568 |     overflow: auto;
569 | }
570 | 
571 | .markdown-body table th {
572 |     font-weight: 600;
573 | }
574 | 
575 | .markdown-body table th,
576 | .markdown-body table td {
577 |     padding: 6px 13px;
578 |     border: 1px solid #dfe2e5;
579 | }
580 | 
581 | .markdown-body table tr {
582 |     background-color: #fff;
583 |     border-top: 1px solid #c6cbd1;
584 | }
585 | 
586 | .markdown-body table tr:nth-child(2n) {
587 |     background-color: #f6f8fa;
588 | }
589 | 
590 | .markdown-body img {
591 |     max-width: 100%;
592 |     box-sizing: content-box;
593 |     background-color: #fff;
594 | }
595 | 
596 | .markdown-body img[align=right] {
597 |     padding-left: 20px;
598 | }
599 | 
600 | .markdown-body img[align=left] {
601 |     padding-right: 20px;
602 | }
603 | 
604 | .markdown-body code {
605 |     padding: 0.2em 0.4em;
606 |     margin: 0;
607 |     font-size: 85%;
608 |     background-color: rgba(27, 31, 35, 0.05);
609 |     border-radius: 3px;
610 | }
611 | 
612 | .markdown-body pre {
613 |     word-wrap: normal;
614 | }
615 | 
616 | .markdown-body pre>code {
617 |     padding: 0;
618 |     margin: 0;
619 |     font-size: 100%;
620 |     word-break: normal;
621 |     white-space: pre;
622 |     background: transparent;
623 |     border: 0;
624 | }
625 | 
626 | .markdown-body .highlight {
627 |     margin-bottom: 16px;
628 | }
629 | 
630 | .markdown-body .highlight pre {
631 |     margin-bottom: 0;
632 |     word-break: normal;
633 | }
634 | 
635 | .markdown-body .highlight pre,
636 | .markdown-body pre {
637 |     padding: 16px;
638 |     overflow: auto;
639 |     font-size: 85%;
640 |     line-height: 1.45;
641 |     background-color: #f6f8fa;
642 |     border-radius: 3px;
643 | }
644 | 
645 | .markdown-body pre code {
646 |     display: inline;
647 |     max-width: auto;
648 |     padding: 0;
649 |     margin: 0;
650 |     overflow: visible;
651 |     line-height: inherit;
652 |     word-wrap: normal;
653 |     background-color: transparent;
654 |     border: 0;
655 | }
656 | 
657 | .markdown-body .full-commit .btn-outline:not(:disabled):hover {
658 |     color: #005cc5;
659 |     border-color: #005cc5;
660 | }
661 | 
662 | .markdown-body kbd {
663 |     display: inline-block;
664 |     padding: 3px 5px;
665 |     font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
666 |     line-height: 10px;
667 |     color: #444d56;
668 |     vertical-align: middle;
669 |     background-color: #fafbfc;
670 |     border: solid 1px #d1d5da;
671 |     border-bottom-color: #c6cbd1;
672 |     border-radius: 3px;
673 |     box-shadow: inset 0 -1px 0 #c6cbd1;
674 | }
675 | 
676 | .markdown-body :checked+.radio-label {
677 |     position: relative;
678 |     z-index: 1;
679 |     border-color: #0366d6;
680 | }
681 | 
682 | .markdown-body .task-list-item {
683 |     list-style-type: none;
684 | }
685 | 
686 | .markdown-body .task-list-item+.task-list-item {
687 |     margin-top: 3px;
688 | }
689 | 
690 | .markdown-body .task-list-item input {
691 |     margin: 0 0.2em 0.25em -1.6em;
692 |     vertical-align: middle;
693 | }
694 | 
695 | .markdown-body hr {
696 |     border-bottom-color: #eee;
697 | }


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