XboxYan' Blog

_id	标题	发布时间	访问量	分类	操作
{article._id}	{article.title}	{moment(article.createdAt).utcOffset(8).format("YYYY年M月D日 , HH:mm:ss")}	{article.views}	{article.categories.map((category,i)=>{category.name})}	61 \| 编辑 62 \| 删除 63 \|

_id

标题

发布时间

访问量

分类

操作

{article._id}

{article.title}

{moment(article.createdAt).utcOffset(8).format("YYYY年M月D日 , HH:mm:ss")}

{article.views}

{article.categories.map((category,i)=>{category.name})}

61 | 编辑 62 | 删除 63 |

_id	名称	创建时间	更新时间	操作
{category._id}	{category.name}	{moment(category.createdAt).utcOffset(8).format("YYYY年M月D日 , HH:mm:ss")}	{moment(category.updatedAt).utcOffset(8).format("YYYY年M月D日 , HH:mm:ss")}	123 \| 编辑 124 \| 删除 125 \|

_id

名称

创建时间

更新时间

操作

{category._id}

{category.name}

{moment(category.createdAt).utcOffset(8).format("YYYY年M月D日 , HH:mm:ss")}

{moment(category.updatedAt).utcOffset(8).format("YYYY年M月D日 , HH:mm:ss")}

123 | 编辑 124 | 删除 125 |

103 |

this.textarea=node} placeholder={placeholder} spellCheck={false} onKeyDown={this.onkeydown} onChange={this.onChange} rows={rows} className="mark-textarea edit-input" />
104 |                 <div className="mark-preview"><Markview value={value} /></div>
105 |             </div>
106 |         )
107 |     }
108 | }
109 | 
110 | export default class extends PureComponent {
111 |     state = {
112 |         isrender: true,
113 |         article:{},
114 |     }
115 | 
116 | 
117 |     getArticle = async (id) => {
118 |         this.setState({isrender:true});
119 |         const article = await fetchData(`/api/article/${id}?admin=true`);
120 |         this.setState({ article: article.data, isrender: false });
121 |         this.title.value = article.data.title || '';
122 |     }
123 | 
124 |     componentDidMount() {
125 |         this.id = Control.path.split('publish/')[1];
126 |         if(this.id){
127 |             this.getArticle(this.id);
128 |         }
129 |         //this.getArticle();
130 |     }
131 | 
132 |     componentWillReceiveProps(nextProps) {
133 |         if( Control.path.indexOf('publish/')>=0 && this.props.pathname!==nextProps.pathname && this.id!== Control.path.split('publish/')[1]){
134 |             this.id = Control.path.split('publish/')[1];
135 |             this.getArticle(this.id);
136 |         }else{
137 |             this.id = null;
138 |             this.title.value = '';
139 |             this.setState({ article: {}});
140 |         }
141 |     }
142 | 
143 |     onSubmit = async () => {
144 |         const article = {
145 |             title:this.title.value,
146 |             categories:this.categories.value,
147 |             description:this.description.value,
148 |             content:this.content.value,
149 |         }
150 |         if(this.id){
151 |             //更新
152 |             const articleInfo = await fetchData(`/api/article/${this.id}`,{
153 |                 method:'PUT',
154 |                 body:JSON.stringify(article)
155 |             });
156 |             if(articleInfo.success){
157 |                 console.log('success1')
158 |                 Control.go(-1);
159 |             }
160 |         }else{
161 |             article.userId = "5b34af1cf532152535c6c03a"
162 |             //发布
163 |             const articleInfo = await fetchData(`/api/article`,{
164 |                 method:'POST',
165 |                 body:JSON.stringify(article)
166 |             });
167 |             if(articleInfo.success){
168 |                 console.log('success2')
169 |                 Control.go(-1);
170 |             }
171 |         }
172 |     }
173 | 
174 |     goTop = () => {
175 |         document.getElementById("publish-con").scrollTo({top:0,behavior: 'smooth' })
176 |     }
177 | 
178 |     render() {
179 |         const {article:{categories=[],description='',content=''}} = this.state;
180 | 
181 |         return (
182 |             <div className="container admin-container" id="publish-con">
183 |                 <section className="main sildeUpMin">
184 |                     <div className="admin-title">标题</div>
185 |                     <input ref={node=>this.title=node} spellCheck={false} className="edit-input"  />
186 |                     <div className="admin-title">分类</div>
187 |                     <CategoryGroup  ref={node=>this.categories=node}  checked={categories} />
188 |                     <div className="admin-title">简介</div>
189 |                     <MarkdownEditor ref={node=>this.description=node} rows={3} placeholder="一些简介~" defaultValue={description} />
190 |                     <div className="admin-title">正文</div>
191 |                     <MarkdownEditor ref={node=>this.content=node} className="admin-content" rows={10} placeholder="开始写文章吧!" defaultValue={content}  />
192 |                     <span className="admin-add-button" onClick={this.onSubmit} >立即发布</span>
193 |                 </section>
194 |                 <BackTop onClick={this.goTop} />
195 |             </div>
196 |         )
197 |     }
198 | }

--------------------------------------------------------------------------------
/src/components/back.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Control } from 'react-keeper';
3 | 
4 | export default () => (
5 |     <a className="iconfont icon-cancel app-back" onClick={()=>Control.go(-1)}> </a>
6 | )

--------------------------------------------------------------------------------
/src/components/backTop.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | 
 3 | export default class extends PureComponent {
 4 |     render() {
 5 |         return (
 6 |             <a className="backTop leftIn" onClick={this.props.onClick}>
 7 |                 <span>
 8 |                     <i className="iconfont icon-backtotop"></i>
 9 |                 </span>
10 |             </a>
11 |         )
12 |     }
13 | }

--------------------------------------------------------------------------------
/src/components/comment.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import { Control } from 'react-keeper';
 3 | import 'gitalk/dist/gitalk.css'
 4 | import Gitalk from 'gitalk'
 5 | 
 6 | export default class extends PureComponent {
 7 |     componentDidMount() {
 8 |         const number = Control.path.split('article/')[1];
 9 |         var gitalk = new Gitalk({
10 |             clientID: 'b36eae2069001417b114',
11 |             clientSecret: '22b5da9b1fd92cca7268dfd0eaf4305ee427f0f2',
12 |             repo: 'notes',
13 |             owner: 'XboxYan',
14 |             admin: ['XboxYan'],
15 |             number: Number(number),
16 |             //id: window.location.pathname,      // Ensure uniqueness and length less than 50
17 |             distractionFreeMode: false  // Facebook-like distraction free mode
18 |         })
19 |         gitalk.render('gitalk-container')
20 |     }
21 |     render() {
22 |         return (
23 |             <div id="gitalk-container"></div>
24 |         )
25 |     }
26 | }

--------------------------------------------------------------------------------
/src/components/donate.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent,Fragment } from 'react';
 2 | 
 3 | export default class extends PureComponent {
 4 |     render() {
 5 |         return (
 6 |             <Fragment>
 7 |                 <span className="donate-btn">
 8 |                     <span className="iconfont icon-donate"></span>
 9 |                 </span>
10 |                 <div id="donate-box" className="sildeUpMin">
11 |                     <span className="donate-cancel iconfont icon-cancel"></span>
12 |                     <div className="donate-img-box">
13 |                         <img className="noLazyLoad donate-img" src={require("../img/wechat.png")} alt="wechat" />
14 |                         <img className="noLazyLoad donate-img" src={require("../img/alipay.jpg")} alt="alipay" />
15 |                     </div>
16 |                     <span className="donate-word">世界美好 你也是</span>
17 | 
18 |                     <div className="donate-list">
19 |                         <span className="iconfont icon-donate-wechat"></span>
20 |                         <span className="iconfont icon-donate-alipay"></span>
21 |                     </div>
22 |                 </div>
23 |             </Fragment>
24 |         )
25 |     }
26 | }

--------------------------------------------------------------------------------
/src/components/header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | //import User from './user';
 3 | import { Link, Control } from 'react-keeper';
 4 | 
 5 | export default ({loginState,userInfo,logout}) => (
 6 |     <header className='header' style={{opacity:Control.path==='/login'?0:1}}>
 7 |         <nav className='header-nav'>
 8 |             <span className='iconfont icon-menu mobile-toggle'></span>
 9 |             <div className='header-menu'>
10 |                 <Link className='header-menu-link' activeClassName='header-menu-active' to='/'>首页</Link>
11 |                 {
12 | 
13 |                     //<Link className='header-menu-link' activeClassName='header-menu-active' to='/archives'>归档</Link>
14 |                 }
15 |                 <Link className='header-menu-link' activeClassName='header-menu-active' to='/categories'>分类</Link>
16 |                 <Link className='header-menu-link' activeClassName='header-menu-active' to='/about'>关于</Link>
17 |                 {
18 |                     /*
19 |                     loginState?
20 |                     <User userInfo={userInfo} logout={logout} />
21 |                     :
22 |                     <Link className='header-menu-link' activeClassName='header-menu-active' to='/login'>登录</Link>
23 |                     */
24 |                 }
25 |                 <Link className='iconfont icon-menu-search header-menu-link' to={ (Control.path==='/'?'/home':Control.path) +'/search' } > </Link>
26 |             </div>
27 |         </nav>
28 |     </header>
29 | )

--------------------------------------------------------------------------------
/src/components/loader.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | 
3 | export default class extends PureComponent {
4 |     render(){
5 |         return (
6 |             <div className="loader"><span className="gauge-loader"></span></div>
7 |         )
8 |     }
9 | }

--------------------------------------------------------------------------------
/src/components/markide.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import hljs from 'highlightjs';
 3 | 
 4 | export default class extends PureComponent {
 5 |     
 6 |     state = {
 7 |         value: 'Hello, **world**!'
 8 |     };
 9 | 
10 |     onChange = (e) => {
11 |         const value = e.target.value;
12 |         this.setState({ value });
13 |         this.props.onChange && this.props.onChange(value);
14 |     }
15 | 
16 |     getRawMarkup = (value) => {
17 |         hljs.configure({ classPrefix: '' });
18 |         return { __html: hljs.highlight('markdown', value).value };
19 |     }
20 |     render(){
21 |         const {value} = this.state;
22 |         const {rows,placeholder} = this.props;
23 |         return (
24 |             <div className="markide">
25 |                 <textarea placeholder={placeholder} spellCheck={false} onKeyDown={this.onkeydown} onChange={this.onChange} defaultValue={value} rows={rows} className="mark-textarea edit-input" />
26 |                 <pre className="markide-preview" dangerouslySetInnerHTML={this.getRawMarkup(value)} ></pre>
27 |             </div>
28 |         )
29 |     }
30 | }

--------------------------------------------------------------------------------
/src/components/markview.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Remarkable from 'remarkable';
 3 | import hljs from 'highlightjs';
 4 | import '../mark.css';
 5 | 
 6 | export default (props) => {
 7 |     const getRawMarkup = (value) => {
 8 |         const md = new Remarkable({
 9 |             html: true,
10 |             breaks: true,
11 |             typographer: true,
12 |             langPrefix: '',
13 |             highlight: function (str, lang) {
14 |                 if (lang && hljs.getLanguage(lang)) {
15 |                     try {
16 |                         hljs.configure({ classPrefix: '' });
17 |                         return hljs.highlight(lang, str).value;
18 |                     } catch (err) { }
19 |                 }
20 | 
21 |                 try {
22 |                     hljs.configure({ classPrefix: '' });
23 |                     return hljs.highlightAuto(str).value;
24 |                 } catch (err) { }
25 | 
26 |                 return ''; // use external default escaping
27 |             }
28 |         });
29 |         md.core.ruler.enable([
30 |             'abbr'
31 |         ]);
32 |         md.inline.ruler.enable([
33 |             'footnote_inline',
34 |             'ins',
35 |             'mark',
36 |             'sub',
37 |             'sup'
38 |         ]);
39 |         return { __html: md.render(value) };
40 |     }
41 |     return (
42 |         <div className="preview" dangerouslySetInnerHTML={getRawMarkup(props.value)}></div>
43 |     )
44 | }

--------------------------------------------------------------------------------
/src/components/nav.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-keeper';
 3 | 
 4 | export default () => (
 5 |     <header className='header'>
 6 |         <nav className='header-nav'>
 7 |             <span className='iconfont icon-menu mobile-toggle'></span>
 8 |             <div className='header-menu'>
 9 |                 <Link className='header-menu-link' activeClassName='header-menu-active' to='/admin'>首页</Link>
10 |                 <Link className='header-menu-link' activeClassName='header-menu-active' to='/admin/article-list'>文章管理</Link>
11 |                 <Link className='header-menu-link' activeClassName='header-menu-active' to='/admin/category-list'>分类管理</Link>
12 |             </div>
13 |         </nav>
14 |     </header>
15 | )

--------------------------------------------------------------------------------
/src/components/pager.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | 
 3 | export default class extends PureComponent {
 4 |     state = {
 5 |         page: 1,
 6 |     }
 7 | 
 8 |     go = (dir) => () => {
 9 |         const { page } = this.state;
10 |         const { total, pagesize,pageInfo:{startCursor,endCursor} } = this.props;
11 |         let $page = Math.max(Math.min(page + dir, Math.ceil(total / pagesize)), 1);
12 |         this.setState({ isrender: true, page:$page });
13 |         this.props.fetch && this.props.fetch(dir>0?{after:endCursor}:{before:startCursor});
14 |     }
15 | 
16 |     render() {
17 |         const { total, pagesize } = this.props;
18 |         const max = Math.ceil(total / pagesize);
19 |         const { page } = this.state;
20 |         return (
21 |             total?
22 |             <nav className="paginator scrollIn">
23 |                 <a className="prev" data-hidden={page === 1} onClick={this.go(-1)}><i className="iconfont icon-left"></i>上一页</a>
24 |                 <span className="page-number">Page {page} / {max}.</span>
25 |                 <a className="next" data-hidden={page === max} onClick={this.go(1)}>下一页<i className="iconfont icon-right"></i></a>
26 |             </nav>
27 |             :null
28 |         )
29 |     }
30 | }
31 |

--------------------------------------------------------------------------------
/src/components/profile.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | 
 3 | export default class extends PureComponent {
 4 |     render() {
 5 |         return (
 6 |             <div className="profile">
 7 |                 <img onClick={this.props.onClick} className="avatar" alt="header" src={require('../img/header.png')} />
 8 |                 <p className="author">XboxYan</p>
 9 |                 <div className="social">
10 |                     <a target="_blank" rel="noopener noreferrer" data-hover="github" className="social-links" href="https://github.com/XboxYan">
11 |                         <i className="iconfont icon-Github"></i>
12 |                     </a>
13 |                     <a target="_blank" rel="noopener noreferrer" data-hover="segmentfault" className="social-links" href="https://segmentfault.com/u/xboxyan">
14 |                         <i className="iconfont">Sf</i>
15 |                     </a>
16 |                     <a target="_blank" rel="noopener noreferrer" data-hover="weibo" className="social-links" href="https://weibo.com/3106589651">
17 |                         <i className="iconfont icon-Weibo"></i>
18 |                     </a>
19 |                     <a target="_blank" rel="noopener noreferrer" data-hover="twitter" className="social-links" href="https://twitter.com/XboxYan">
20 |                         <i className="iconfont icon-Twitter"></i>
21 |                     </a>
22 |                 </div>
23 |             </div>
24 |         )
25 |     }
26 | }

--------------------------------------------------------------------------------
/src/components/user.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import { Link } from 'react-keeper';
 3 | 
 4 | export default class extends PureComponent {
 5 |     render() {
 6 |         const { userInfo,logout } = this.props;
 7 |         return (
 8 |             <div className="user-info">
 9 |                 <span className="user-head">{userInfo.username[0]}</span>
10 |                 <span className="user-name">{userInfo.username}</span>
11 |                 <div className="user-more">
12 |                     {
13 |                         userInfo.isAdmin && <Link className="user-admin" to="/admin">进入后台</Link>
14 |                     }
15 |                     <a className="login-out" onClick={logout}>退出</a>
16 |                 </div>
17 |             </div>
18 |         )
19 |     }
20 | }

--------------------------------------------------------------------------------
/src/fonts/fonts.gstatic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XboxYan/notes/8814a8957ec0f6e98f25ec547361f539c4fdb3b1/src/fonts/fonts.gstatic.woff2

--------------------------------------------------------------------------------
/src/fonts/iconfont.e0fd.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XboxYan/notes/8814a8957ec0f6e98f25ec547361f539c4fdb3b1/src/fonts/iconfont.e0fd.woff

--------------------------------------------------------------------------------
/src/img/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XboxYan/notes/8814a8957ec0f6e98f25ec547361f539c4fdb3b1/src/img/about.jpg

--------------------------------------------------------------------------------
/src/img/alipay.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XboxYan/notes/8814a8957ec0f6e98f25ec547361f539c4fdb3b1/src/img/alipay.jpg

--------------------------------------------------------------------------------
/src/img/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XboxYan/notes/8814a8957ec0f6e98f25ec547361f539c4fdb3b1/src/img/header.png

--------------------------------------------------------------------------------
/src/img/wechat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/XboxYan/notes/8814a8957ec0f6e98f25ec547361f539c4fdb3b1/src/img/wechat.png

--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import registerServiceWorker from './registerServiceWorker';
5 | 
6 | ReactDOM.render(<App />, document.getElementById('root'));
7 | registerServiceWorker();
8 |

--------------------------------------------------------------------------------
/src/login/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import Back from '../components/back';
 3 | import fetchData from '../util/Fetch';
 4 | 
 5 | export default class extends PureComponent {
 6 | 
 7 |     state = {
 8 |         username:window.localStorage.loginInfo ? JSON.parse(window.localStorage.loginInfo).username:'',
 9 |         password:''
10 |     }
11 | 
12 |     onSubmit = async (ev) => {
13 |         ev.preventDefault();
14 |         const { username,password } = this.state;
15 |         const loginInfo = await fetchData(`/api/login`,{
16 |             method:'POST',
17 |             body:JSON.stringify({username,password})
18 |         });
19 |         if(loginInfo.success){
20 |             window.localStorage.loginInfo = JSON.stringify(loginInfo.info);
21 |             this.props.login(loginInfo.info);
22 |         }
23 |     }
24 | 
25 |     onChange = (name) => (ev) => {
26 |         this.setState({[name]:ev.target.value})
27 |     }
28 | 
29 |     render() {
30 |         const { username,password } = this.state;
31 |         return (
32 |             <div className="app app-center">
33 |                 <Back/>
34 |                 <form className="login-con sildeUpMin" onSubmit={this.onSubmit}>
35 |                     <h3 className="login-title">LOGIN</h3>
36 |                     <label className="login-label">USER</label>
37 |                     <input className="login-input" value={username} onChange={this.onChange('username')} />
38 |                     <label className="login-label">PASSWORD</label>
39 |                     <input className="login-input" type="password" value={password} onChange={this.onChange('password')} />
40 |                     <button type="submit" className="login-btn" onClick={this.onSubmit}>LOGIN</button>
41 |                 </form>
42 |             </div>
43 |         );
44 |     }
45 | }
46 |

--------------------------------------------------------------------------------
/src/mark.css:
--------------------------------------------------------------------------------
  1 | hr {
  2 |     margin: 1em 0;
  3 |     border:0;
  4 |     border-top: 1px solid #eee;
  5 | }
  6 | 
  7 | ol,ul {
  8 |     margin-left: 22px;
  9 |     padding-left: 0
 10 | }
 11 | 
 12 | ol p,ul p {
 13 |     margin: 0
 14 | }
 15 | 
 16 | li {
 17 |     font-size: 15px;
 18 |     margin: 8px 0;
 19 |     list-style-type: none;
 20 |     position: relative
 21 | }
 22 | 
 23 | ul li:before {
 24 |     position: absolute;
 25 |     left: -12px;
 26 |     top: 0;
 27 |     content: "-";
 28 |     width: 2px;
 29 |     height: 2px
 30 | }
 31 | 
 32 | ol {
 33 |     counter-reset:count;
 34 | }
 35 | 
 36 | ol li:before {
 37 |     position: absolute;
 38 |     left: -15px;
 39 |     top: 0;
 40 |     content: counter(count) '.'; 
 41 |     counter-increment: count;
 42 |     width: 2px;
 43 |     height: 2px
 44 | }
 45 | 
 46 | pre {
 47 |     overflow: auto;
 48 |     margin: 20px 0;
 49 |     font-size: 13.5px;
 50 |     color: #4d4d4c;
 51 |     background: #fcfdfd
 52 | }
 53 | 
 54 | code,.code,pre {
 55 |     font-family: consolas
 56 | }
 57 | 
 58 | code, {
 59 |     padding: 2px 4px;
 60 |     word-wrap: break-word;
 61 |     font-size: 13.5px
 62 | }
 63 | 
 64 | pre code {
 65 |     padding: 0;
 66 |     color: #4d4d4c;
 67 |     background: none;
 68 |     text-shadow: none
 69 | }
 70 | 
 71 | pre {
 72 |     padding: 10px;
 73 |     margin: 20px 0;
 74 |     border-radius: 6px;
 75 |     text-shadow: 1px 2px 1px rgba(0,0,0,.009);
 76 |     box-shadow: 0 1px 2px rgba(0,0,0,.05)
 77 | }
 78 | 
 79 | pre table {
 80 |     margin: 0;
 81 |     width: auto;
 82 |     border: none
 83 | }
 84 | 
 85 | pre td {
 86 |     border: none;
 87 |     padding: 0
 88 | }
 89 | 
 90 | pre figcaption {
 91 |     font-size: 1em;
 92 |     color: #4d4d4c;
 93 |     line-height: 1em;
 94 |     margin-bottom: 1em
 95 | }
 96 | 
 97 | pre figcaption:after,.highlight figcaption:before {
 98 |     content: " ";
 99 |     display: table
100 | }
101 | 
102 | pre figcaption:after {
103 |     clear: both
104 | }
105 | 
106 | pre figcaption a {
107 |     float: right;
108 |     color: #4d4d4c
109 | }
110 | 
111 | pre figcaption a:hover {
112 |     border-bottom-color: #4d4d4c
113 | }
114 | 
115 | pre .gutter pre {
116 |     margin: 0;
117 |     text-align: right;
118 |     font-size: 12px;
119 |     color: #606a6d;
120 |     font-family: Arial,"sans-serif"
121 | }
122 | 
123 | pre .gutter pre {
124 |     padding-left: 10px;
125 |     padding-right: 10px;
126 |     background-color: #fcfdfd
127 | }
128 | 
129 | pre  pre {
130 |     width: 100%
131 | }
132 | 
133 | pre .line, pre hr {
134 |     display: inline-block;
135 |     padding: 2px 0;
136 |     height: 20px;
137 |     border: none
138 | }
139 | 
140 | pre .marked {
141 |     width: 100%;
142 |     border-left: 2px solid #727272;
143 |     margin: .5em 0;
144 |     padding-left: .5em
145 | }
146 | 
147 | .gutter {
148 |     user-select: none
149 | }
150 | 
151 | .gist table {
152 |     width: auto
153 | }
154 | 
155 | .gist table td {
156 |     border: none
157 | }
158 | 
159 | pre .deletion {
160 |     background: #fdd
161 | }
162 | 
163 | pre .addition {
164 |     background: #dfd
165 | }
166 | 
167 | pre .meta, pre .quote {
168 |     color: #8959a8
169 | }
170 | 
171 | .code {
172 |     color: #4271ae
173 | }
174 | 
175 | pre .comment {
176 |     color: #c6c6c6
177 | }
178 | 
179 | pre .attribute,pre .name,pre .css .class,pre .css .id,pre .css .pseudo,pre .html .doctype,pre .regexp,pre .ruby .constant,pre .variable,pre .xml .doctype,pre .xml .pi,pre .xml .tag .title {
180 |     color: #e24c38
181 | }
182 | 
183 | pre .tag{
184 |     color: #8e908c
185 | }
186 | 
187 | pre .attr, pre .bullet{
188 |     color: #3e999f
189 | }
190 | 
191 | pre .built_in,pre .symbol,pre .command,pre .constant,pre .literal,pre .number,pre .params,pre preprocessor {
192 |     color: #e78c45
193 | }
194 | 
195 | pre .formula,pre .header,pre .inheritance,pre .number,pre .ruby .class .title,pre .ruby .symbol,pre .special,pre .string,pre .value,pre .xml .cdata {
196 |     color: #718c00
197 | }
198 | 
199 | pre .css .hexcolor,pre .title {
200 |     color: #3e999f
201 | }
202 | 
203 | pre .css .hexcolor,pre .title {
204 |     color: #3e999f
205 | }
206 | 
207 | pre .css .selector-class {
208 |     color: #3e999f
209 | }
210 | 
211 | pre .css .attribute {
212 |     color: #8293ef
213 | }
214 | 
215 | pre .coffeescript .title,pre .function,pre .javascript .title,pre .perl .sub,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword {
216 |     color: #4271ae
217 | }
218 | 
219 | pre .javascript .function,pre .keyword, pre .section {
220 |     color: #e24c38
221 | }
222 | 
223 | pre {
224 |     position: relative;
225 |     width: 100%
226 | }
227 | 
228 | pre .emphasis{
229 |     font-style: italic;
230 |     color: #718c00
231 | }
232 | 
233 | pre .strong{
234 |     font-weight: bold;
235 |     color: #8293ef
236 | }
237 | 
238 | pre .link{
239 |     text-decoration: underline;
240 |     color: #e78c45
241 | }
242 | 
243 | pre code:after {
244 |     position: absolute;
245 |     top: 0;
246 |     right: 0;
247 |     color: #ccc;
248 |     content: "Code";
249 |     font-size: 12px;
250 |     padding: 5px 10px 0;
251 |     height: 15px
252 | }
253 | 
254 | code.html:after {
255 |     content: "HTML"
256 | }
257 | 
258 | code.javascript:after,code.js:after {
259 |     content: "JS"
260 | }
261 | 
262 | code.bash:after,code.sh:after,code.cmd:after,code.Powershell:after {
263 |     content: "Shell"
264 | }
265 | 
266 | code.css:after {
267 |     content: "CSS"
268 | }
269 | 
270 | code.sass:after {
271 |     content: "SASS"
272 | }
273 | 
274 | code.less:after {
275 |     content: "LESS"
276 | }
277 | 
278 | code.style:after {
279 |     content: "Style"
280 | }
281 | 
282 | code.json:after {
283 |     content: "JSON"
284 | }
285 | 
286 | code.markdown:after {
287 |     content: "MD"
288 | }
289 | 
290 | code.diff:after {
291 |     content: "DIFF"
292 | }
293 | 
294 | code.java:after {
295 |     content: "Java"
296 | }
297 | 
298 | code.c:after {
299 |     content: "C"
300 | }
301 | 
302 | code.yml:after {
303 |     content: "YML"
304 | }
305 | 
306 | code.php:after {
307 |     content: "PHP"
308 | }
309 | 
310 | code.react:after {
311 |     content: "REACT"
312 | }
313 | 
314 | p code,h1 code,h2 code,h3 code,h4 code,h5 code,h6 code,li code {
315 |     padding: 2px 5px;
316 |     text-shadow: 1px 2px 1px rgba(0,0,0,.02);
317 |     box-shadow: 0 2px 2px rgba(0,0,0,.05);
318 |     color: #e26d6d;
319 |     margin: 0 .4em;
320 |     background: #fdfcfc
321 | }
322 | 
323 | .preview thead{
324 |     background: #fcfdfd
325 | }

--------------------------------------------------------------------------------
/src/pages/about.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import Footer from '../components/footer';
 3 | 
 4 | export default class extends PureComponent {
 5 |     render() {
 6 |         return (
 7 |             <div className="container">
 8 |                 <section className="main sildeUpMin">
 9 |                     <span className="page-title">关于</span>
10 |                     <div className="post-content "><p><img className="fadeIn" src={require("../img/about.jpg")} alt="no img" /></p>
11 |                         <blockquote>
12 |                             <p>Drawing by Alena Aenami.</p>
13 |                         </blockquote>
14 |                         <h2 id="About-Me">About Me</h2>
15 |                         <blockquote className="scrollIn">
16 |                             <p>世界美好 你也是。<br />
17 |                                 Theme - <a href="https://github.com/Lemonreds/hexo-theme-Nayo" rel="noopener noreferrer" target="_blank">Nayo</a><br />
18 |                                 Location  - HuBei | WuHan CN<br />
19 |                                 Email - <a href="mailto:yanwenbin1991@live.com" rel="noopener noreferrer">yanwenbin1991@live.com</a>
20 |                             </p>
21 |                         </blockquote>
22 |                     </div>
23 |                 </section>
24 |                 <Footer />
25 |             </div>
26 |         )
27 |     }
28 | }

--------------------------------------------------------------------------------
/src/pages/archives.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent,Fragment } from 'react';
 2 | import { CacheLink } from 'react-keeper';
 3 | import fetchData from '../util/Fetch';
 4 | import Loader from '../components/loader';
 5 | import Footer from '../components/footer';
 6 | import moment from 'moment';
 7 | 
 8 | export default class extends PureComponent {
 9 |     state = {
10 |         articles:[],
11 |         isrender: true
12 |     }
13 | 
14 |     getArticle = async () => {
15 |         const articles = await fetchData('/api/archives');
16 |         this.setState({articles:articles.data,isrender:false});
17 |     }
18 |     
19 |     componentDidMount() {
20 |         this.getArticle();
21 |     }
22 | 
23 |     render() {
24 |         const {articles,isrender} = this.state;
25 |         return (
26 |             <div className="container">
27 |                 <section className="main sildeUpMin">
28 |                     <span className="page-title">归档</span>
29 |                     <section className="archive slideDownMin">
30 |                         {
31 |                             isrender?
32 |                             <Loader/>
33 |                             :
34 |                             articles.map((d,i)=>(
35 |                                 <Fragment key={i}>
36 |                                     <h3 className="archive-year">{ moment(d.createdAt).utcOffset(8).format("YYYY年M月") }</h3>
37 |                                     {
38 |                                         d.article.map(article=>(
39 |                                             <div className="archive-item" key={article._id}>
40 |                                                 <span className="archive-time">{moment(article.createdAt).utcOffset(8).format("M月D日")}</span>
41 |                                                 <span className="archive-title">
42 |                                                     <CacheLink to={"/article/"+article._id}>{article.title}</CacheLink>
43 |                                                 </span>
44 |                                             </div>
45 |                                         ))
46 |                                     }
47 |                                 </Fragment>
48 |                             ))
49 |                         }
50 |                     </section>
51 |                 </section>
52 |                 <Footer />
53 |             </div>
54 |         )
55 |     }
56 | }

--------------------------------------------------------------------------------
/src/pages/article.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import fetchData from '../util/Fetch';
  3 | import { Control,CacheLink } from 'react-keeper';
  4 | //import Donate from '../components/donate';
  5 | import Loader from '../components/loader';
  6 | import Footer from '../components/footer';
  7 | import Comment from '../components/comment';
  8 | import Markview from '../components/markview';
  9 | import { getArticleDetail } from '../util/api';
 10 | import moment from 'moment';
 11 | 
 12 | export default class extends PureComponent {
 13 | 
 14 |     state = {
 15 |         article: {},
 16 |         isrender: true
 17 |     }
 18 | 
 19 |     componentDidMount() {
 20 |         const id = Control.path.split('article/')[1];
 21 |         this.getArticle(id);
 22 |     }
 23 | 
 24 |     getArticle = async (id) => {
 25 |         this.setState({isrender:true});
 26 |         const { data:{repository:{issue}} } = await getArticleDetail({number:id});
 27 |         this.setState({ article: issue, isrender: false });
 28 |     }
 29 | 
 30 |     componentWillReceiveProps(nextProps) {
 31 |         if( this.props.pathname.indexOf('article')>=0 && nextProps.pathname.indexOf('article')>=0 && this.props.pathname!==nextProps.pathname){
 32 |             const {id} = nextProps.params;
 33 |             this.getArticle(id);
 34 |         }
 35 |     }
 36 | 
 37 |     render() {
 38 |         const { article:{ title,createdAt,body,labels,prev,next }, isrender } = this.state;
 39 |         return (
 40 |             <div className="container">
 41 |                 <section className="main sildeUpMin">
 42 |                     {
 43 |                         isrender?
 44 |                         <Loader/>
 45 |                         :
 46 |                         <article className="post">
 47 |                             <div className="post-header">
 48 |                                 <p className="post-title">{title}</p>
 49 |                                 <div className="meta-info">
 50 |                                     <span>{moment(createdAt).utcOffset(8).format("YYYY年M月D日 , HH:mm:ss")}</span>
 51 |                                     <i className="iconfont icon-eye"></i><span>{0}</span>
 52 |                                 </div>
 53 |                             </div>
 54 |                             <div className="post-content">
 55 |                                 <Markview value={body} />
 56 |                             </div>
 57 |                             <div className="post-meta">
 58 |                                 <i className="iconfont icon-tag-inner"></i>
 59 |                                 {
 60 |                                     labels.nodes.length>0? 
 61 |                                     labels.nodes.map((category, i) => <CacheLink key={i} className="category-link" to={"/categories/"+category.id}>{category.name}</CacheLink>)
 62 |                                     :
 63 |                                     <CacheLink className="category-link" to="/categories/unknown">未分类</CacheLink>
 64 |                                 }
 65 |                             </div>
 66 |                         </article>
 67 |                     }
 68 |                     <Comment/>
 69 |                     {
 70 |                         /*
 71 |                     <div className="post-footer">
 72 |                         <div className="pf-left">
 73 |                             <img className="pf-avatar" alt="XboxYan" src={require("../img/header.png")} />
 74 |                             <p className="pf-des">hi,i am XboxYan</p>
 75 |                         </div>
 76 |                         <div className="pf-right">
 77 |                             <div className="pf-links">
 78 |                                 <Donate />
 79 |                             </div>
 80 |                             {
 81 |                                 !isrender&&
 82 |                                 <nav className="pf-paginator">
 83 |                                     {
 84 |                                         prev&&<CacheLink to={"/article/"+prev._id} data-hover={prev.title}>上一篇</CacheLink>
 85 |                                     }
 86 |                                     {
 87 |                                         next&&<CacheLink to={"/article/"+next._id} data-hover={next.title}> 下一篇</CacheLink>
 88 |                                     }
 89 |                                 </nav>
 90 |                             }
 91 |                         </div>
 92 |                     </div>
 93 |                     */
 94 |                     }
 95 |                 </section>
 96 |                 <Footer />
 97 |             </div>
 98 |         )
 99 |     }
100 | }

--------------------------------------------------------------------------------
/src/pages/categories.js:
--------------------------------------------------------------------------------
  1 | import React, { PureComponent } from 'react';
  2 | import { Control,CacheLink,Route } from 'react-keeper';
  3 | import Footer from '../components/footer';
  4 | import Loader from '../components/loader';
  5 | import Pager from '../components/pager';
  6 | import fetchData from '../util/Fetch';
  7 | import { getArticleList,getCategory } from '../util/api';
  8 | import moment from 'moment';
  9 | 
 10 | class Category extends PureComponent {
 11 | 
 12 |     pagesize = 5;
 13 | 
 14 |     state = {
 15 |         isrender:true,
 16 |         total:1,
 17 |         renderPage:true,
 18 |         pageInfo:{},
 19 |         articles:[]
 20 |     }
 21 | 
 22 |     getArticle = (category='') => async (page=1) => {
 23 |         if(category){
 24 |             this.setState({isrender:true});
 25 |             const { data:{repository:{issues:{nodes,pageInfo,totalCount}}} } = await getArticleList({pagesize:this.pagesize,labels:category});
 26 |             this.setState({articles:nodes,total:totalCount,isrender:false,pageInfo:pageInfo,renderPage:true});
 27 |         }
 28 |     }
 29 | 
 30 |     async componentDidMount() {
 31 |         const category = Control.path.split("/categories/")[1]||"";
 32 |         this.category = category;
 33 |         this.getArticle(category)();
 34 |     }
 35 | 
 36 |     componentWillReceiveProps(nextProps) {
 37 |         if( this.category!==nextProps.params.category && nextProps.pathname.indexOf('search')<0 && nextProps.pathname.indexOf('categories/')>=0 && this.props.pathname!==nextProps.pathname){
 38 |             const {category} = nextProps.params;
 39 |             this.category = category;
 40 |             this.setState({renderPage:false});
 41 |             this.getArticle(category)();
 42 |         }
 43 |     }
 44 | 
 45 |     render(){
 46 |         const {articles,total,isrender,renderPage,pageInfo} = this.state;
 47 |         const category = this.category||"";
 48 |         return (
 49 |             <section className="slideDownMin">
 50 |                 {
 51 |                     isrender?
 52 |                     <Loader/>
 53 |                     :
 54 |                     (
 55 |                         articles.length>0?
 56 |                         articles.map(article=>(
 57 |                             <article className="item" key={article.number}>
 58 |                                 <time className="item-date"> {moment(article.createdAt).utcOffset(8).format("YYYY年M月D日")}</time>
 59 |                                 <CacheLink className="item-title" to={"/article/"+article.number}>{article.title}</CacheLink>
 60 |                             </article>
 61 |                         ))
 62 |                         :
 63 |                         <div className="iconfont icon-nofound empty"></div>
 64 |                     )
 65 |                 }
 66 |                 {
 67 |                     renderPage&&<Pager
 68 |                         total={total}
 69 |                         pagesize={this.pagesize}
 70 |                         fetch={this.getArticle(category)}
 71 |                     />
 72 |                 }
 73 |             </section>
 74 |         )
 75 |     }
 76 | }
 77 | 
 78 | export default class extends PureComponent {
 79 |     state = {
 80 |         categories: []
 81 |     }
 82 | 
 83 |     async componentDidMount() {
 84 |         const { data:{repository:{labels:{nodes}}} }= await getCategory();
 85 |         this.setState({ categories: nodes });
 86 |     }
 87 | 
 88 |     render() {
 89 |         const {categories} = this.state;
 90 |         return (
 91 |             <div className="container">
 92 |                 <section className="main sildeUpMin">
 93 |                     <section>
 94 |                         <h2 className="page-title">分类</h2>
 95 |                         {
 96 |                             categories.filter(el=>!el.isDefault).map(d=>(
 97 |                                 <CacheLink key={d.name} activeClassName="tag-active" to={ "/categories/"+ d.name } className="tag-wrap">
 98 |                                     <span className="iconfont icon-tag-inner"></span>
 99 |                                     <span className="tag-name"> {d.name} </span>
100 |                                 </CacheLink>
101 |                             ))
102 |                         }
103 |                     </section>
104 |                     <Route cache='parent' component={Category} path="/:category" />                
105 |                 </section>
106 |                 <Footer />
107 |             </div>
108 |         )
109 |     }
110 | }

--------------------------------------------------------------------------------
/src/pages/home.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import Loader from '../components/loader';
 3 | import Profile from '../components/profile';
 4 | import BackTop from '../components/backTop';
 5 | import Footer from '../components/footer';
 6 | import Pager from '../components/pager';
 7 | import fetchData from '../util/Fetch';
 8 | import { getArticleList } from '../util/api';
 9 | import { CacheLink } from 'react-keeper';
10 | import moment from 'moment';
11 | 
12 | export default class extends PureComponent {
13 | 
14 |     pagesize = 5;
15 | 
16 |     state = {
17 |         articles:[],
18 |         total:1,
19 |         isrender:true,
20 |         pageInfo:{}
21 |     }
22 | 
23 |     getArticle = async (options) => {
24 |         this.goTop();
25 |         this.setState({isrender:true});
26 |         const { data:{repository:{issues:{nodes,pageInfo,totalCount}}} } = await getArticleList({pagesize:this.pagesize,...options});
27 |         // console.log(data)
28 |         // const articles = await fetchData(`/api/article?page=${page}&pagesize=${this.pagesize}`);
29 |         this.setState({articles:nodes,total:totalCount,pageInfo:pageInfo,isrender:false});
30 |     }
31 | 
32 |     toIndex = () => {
33 |         this.getArticle({});
34 |         this.Pager.setState({page:1})
35 |     }
36 |     
37 |     componentDidMount () {
38 |         this.getArticle({});
39 |     }
40 | 
41 |     goTop = () => {
42 |         document.getElementById("index-con").scrollTo({top:0,behavior: 'smooth' })
43 |     }
44 |     
45 |     render() {
46 |         const {articles,total,isrender,pageInfo} = this.state;
47 |         return (
48 |             <div className="container" id="index-con">
49 |                 <section className="main sildeUpMin">
50 |                     <Profile onClick={this.toIndex}/>
51 |                     {
52 |                         isrender?
53 |                         <Loader/>
54 |                         :
55 |                         articles.map((article)=>(
56 |                             <article className="article" key={article.id}>
57 |                                 <div className="article-header">
58 |                                     <CacheLink className="article-title" to={"/article/"+article.number}>{article.title}</CacheLink>
59 |                                     <div className="article-meta">{ moment(article.createdAt).utcOffset(8).format("YYYY年M月D日") }<span className="iconfont icon-star"></span>
60 |                                         {
61 |                                             article.labels.nodes.length>0
62 |                                             ?
63 |                                             article.labels.nodes.map((category,i)=>(
64 |                                                 <CacheLink key={i} className="article-tag" to={"/categories/"+category.name}>{category.name}</CacheLink>
65 |                                             ))
66 |                                             :
67 |                                             <CacheLink className="article-tag" to="/categories/unknown">未分类</CacheLink>
68 |                                         }
69 |                                     </div>
70 |                                 </div>
71 |                                 <div className="article-excerpt">
72 |                                     {article.description}
73 |                                 </div>
74 |                                 <div className="article-bottom">
75 |                                     <CacheLink className="article-readmore" to={"/article/"+article.number}>阅读更多</CacheLink>
76 |                                 </div>
77 |                             </article>
78 |                         ))
79 |                     }
80 |                     <Pager
81 |                         ref={node=>this.Pager=node}
82 |                         total={total}
83 |                         pageInfo={pageInfo}
84 |                         pagesize={this.pagesize}
85 |                         fetch={this.getArticle}
86 |                     />
87 |                 </section>
88 |                 <BackTop onClick={this.goTop} />
89 |                 <Footer/>
90 |             </div>
91 |         )
92 |     }
93 | }

--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import { Route } from 'react-keeper';
 3 | import Header from '../components/header';
 4 | import Loadable from 'react-loadable';
 5 | import Loader from '../components/loader';
 6 | 
 7 | const Home = Loadable({
 8 | 	loader:()=>import('./home'),
 9 | 	loading:Loader
10 | })
11 | 
12 | /*
13 | const Archives = Loadable({
14 | 	loader:()=>import('./archives'),
15 | 	loading:Loader
16 | })
17 | */
18 | 
19 | const Categories = Loadable({
20 | 	loader:()=>import('./categories'),
21 | 	loading:Loader
22 | })
23 | 
24 | const Search = Loadable({
25 | 	loader:()=>import('./search'),
26 | 	loading:Loader
27 | })
28 | 
29 | const About = Loadable({
30 | 	loader:()=>import('./about'),
31 | 	loading:Loader
32 | })
33 | 
34 | const Article = Loadable({
35 | 	loader:()=>import('./article'),
36 | 	loading:Loader
37 | })
38 | 
39 | export default class extends PureComponent {
40 |     render() {
41 |         return (
42 |             <div className="app">
43 |                 <Header {...this.props} />
44 |                 <Route index cache='parent' component={Home} path="/home" />
45 |                 {
46 |                     //<Route cache='parent' component={Archives} path="/archives" />
47 |                 }
48 |                 <Route cache='parent' component={Categories} path="/categories" />
49 |                 <Route cache='parent' component={About} path="/about" />
50 |                 <Route component={Article} path="/article/:id>" />
51 |                 <Route cache='false' component={Search} path="**search" />
52 |             </div>
53 |         );
54 |     }
55 | }
56 |

--------------------------------------------------------------------------------
/src/pages/search.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react';
 2 | import Loader from '../components/loader';
 3 | import fetchData from '../util/Fetch';
 4 | import { Control,Link } from 'react-keeper';
 5 | 
 6 | export default class extends PureComponent {
 7 | 
 8 |     state = {
 9 |         data: [],
10 |         keywords: '',
11 |         isrender: true
12 |     }
13 | 
14 |     getArticles = async (keywords) => {
15 |         this.setState({ isrender: true });
16 |         const articles = await fetchData('/api/search?keywords=' + keywords);
17 |         this.setState({ data: articles.data, isrender: false });
18 |     }
19 | 
20 |     search = (ev) => {
21 |         const { value } = ev.target;
22 |         const keywords = value.replace(/\s+/g, "");
23 |         this.setState({ keywords });
24 |         this.timer && clearTimeout(this.timer);
25 |         this.timer = setTimeout(() => {
26 |             keywords&&this.getArticles(keywords);
27 |         }, 500)
28 |     }
29 | 
30 |     render() {
31 |         const { keywords, data, isrender } = this.state;
32 |         return (
33 |             <div className="mask">
34 |                 <div className="search-container sildeUpMin">
35 |                     <div className="search-header">
36 |                         <input spellCheck={false} type="text" placeholder="输入你想搜索的" onChange={this.search} value={keywords} className="search-input" />
37 |                         <span className="search-cancel iconfont icon-cancel" onClick={()=>Control.go(-1)}></span>
38 |                     </div>
39 |                     <div className="search-result">
40 |                         {
41 |                             keywords && (
42 |                                 isrender ?
43 |                                     <Loader />
44 |                                     :
45 |                                     (
46 |                                         data.length > 0 ?
47 |                                             data.map((d) => (
48 |                                                 <div className="search-item" key={d._id}>
49 |                                                     <Link to={"/article/" + d._id} className="search-title">{d.title}</Link>
50 |                                                     <p className="search-content">{d.description}</p>
51 |                                                 </div>
52 |                                             ))
53 |                                             :
54 |                                             <div className="iconfont icon-nofound empty"></div>
55 |                                     )
56 |                             )
57 |                         }
58 |                     </div>
59 |                 </div>
60 |             </div>
61 |         )
62 |     }
63 | }
64 |

--------------------------------------------------------------------------------
/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/util/Fetch.js:
--------------------------------------------------------------------------------
 1 | const fetchData = async (url, { method = 'GET', headers = { 'Content-Type': 'application/json' }, body } = {}) => {
 2 |     try {
 3 |         return await fetch(url, Object.assign({
 4 |             method: method,
 5 |             headers: headers,
 6 |         },body?{body}:{}))
 7 |         .then((response) => {
 8 |             if (response.ok) {
 9 |                 return response.json();
10 |             }
11 |         })
12 |         .catch((err) => {
13 |             console.warn(err);
14 |         })
15 |     } catch (error) {
16 |         console.err(error)
17 |     }
18 | }
19 | 
20 | export default fetchData;

--------------------------------------------------------------------------------
/src/util/api.js:
--------------------------------------------------------------------------------
  1 | const fetchData = async (url, { method = 'GET', headers = { 'Content-Type': 'application/json' }, body } = {}) => {
  2 |     try {
  3 |         return await fetch(url, Object.assign({
  4 |             method: method,
  5 |             headers: headers,
  6 |         }, body ? { body } : {}))
  7 |             .then((response) => {
  8 |                 if (response.ok) {
  9 |                     return response.json();
 10 |                 }
 11 |             })
 12 |             .catch((err) => {
 13 |                 console.warn(err);
 14 |             })
 15 |     } catch (error) {
 16 |         console.err(error)
 17 |     }
 18 | }
 19 | 
 20 | const url = 'https://api.github.com/graphql';
 21 | 
 22 | const token = '2-7-4-b-0-1-7-e-5-f-a-7-9-b-b-9-b-7-b-b-9-8-8-5-8-6-2-4-7-7-7-7-7-6-f-3-7-c-f-e';
 23 | 
 24 | const headers = {
 25 |     'Content-Type': 'application/json',
 26 |     'Authorization': `token ${token.replace(/-/g,'')}`
 27 | }
 28 | 
 29 | const getArticleList = async ({ pageSize = 5, after = null, before = null, labels=null }) => {
 30 |     return await fetch(url, {
 31 |         method: 'POST',
 32 |         headers: headers,
 33 |         body: JSON.stringify({
 34 |             query: `
 35 |             {
 36 |                 repository(owner: "XboxYan", name: "notes") {
 37 |                   issues(first: ${pageSize}, states: OPEN, orderBy: {field: UPDATED_AT, direction: DESC},after:${after},before:${before},labels:${labels}) {
 38 |                     pageInfo {
 39 |                       hasPreviousPage
 40 |                       startCursor
 41 |                       hasNextPage
 42 |                       endCursor
 43 |                     }
 44 |                     totalCount
 45 |                     nodes {
 46 |                         number
 47 |                         title
 48 |                         id
 49 |                         createdAt
 50 |                         labels(first: 10) {
 51 |                             nodes {
 52 |                                 color
 53 |                                 name
 54 |                                 id
 55 |                           }
 56 |                         }
 57 |                     }
 58 |                   }
 59 |                 }
 60 |               }
 61 |             `
 62 |         })
 63 |     })
 64 |     .then((response) => {
 65 |         if (response.ok) {
 66 |             return response.json();
 67 |         }
 68 |     })
 69 |     .catch((err) => {
 70 |         console.warn(err);
 71 |     })
 72 | }
 73 | 
 74 | const getArticleDetail = async ({ number }) => {
 75 |     return await fetch(url, {
 76 |         method: 'POST',
 77 |         headers: headers,
 78 |         body: JSON.stringify({
 79 |             query: `
 80 |             {
 81 |                 repository(owner: "XboxYan", name: "notes") {
 82 |                   issue(number:${number}) {
 83 |                     body
 84 |                     number
 85 |                     id
 86 |                     title
 87 |                     createdAt
 88 |                     labels(first: 10) {
 89 |                         nodes {
 90 |                             color
 91 |                             name
 92 |                             id
 93 |                         }
 94 |                     }
 95 |                   }
 96 |                 }
 97 |               }
 98 |             `
 99 |         })
100 |     })
101 |     .then((response) => {
102 |         if (response.ok) {
103 |             return response.json();
104 |         }
105 |     })
106 |     .catch((err) => {
107 |         console.warn(err);
108 |     })
109 | }
110 | 
111 | const getCategory = async () => {
112 |     return await fetch(url, {
113 |         method: 'POST',
114 |         headers: headers,
115 |         body: JSON.stringify({
116 |             query: `
117 |             {
118 |                 repository(owner: "XboxYan", name: "notes") {
119 |                   labels(first: 99) {
120 |                           nodes{
121 |                         color
122 |                         description
123 |                         color
124 |                         id
125 |                         isDefault
126 |                         name
127 |                     }
128 |                     totalCount
129 |                   }
130 |                 }
131 |               }
132 |             `
133 |         })
134 |     })
135 |     .then((response) => {
136 |         if (response.ok) {
137 |             return response.json();
138 |         }
139 |     })
140 |     .catch((err) => {
141 |         console.warn(err);
142 |     })
143 | }
144 | 
145 | export { getArticleList,getArticleDetail,getCategory };

--------------------------------------------------------------------------------
/src/util/evanyou.js:
--------------------------------------------------------------------------------
 1 | export default function () {
 2 | 
 3 |     document.addEventListener('click', function (e) {
 4 |         //e.preventDefault()
 5 |     })
 6 |     
 7 |     var c = document.getElementById('evanyou-canvas'),
 8 |         x = c.getContext('2d'),
 9 |         pr = window.devicePixelRatio || 1,
10 |         w = window.innerWidth,
11 |         h = window.innerHeight,
12 |         f = 90,
13 |         q,
14 |         m = Math,
15 |         r = 0,
16 |         u = m.PI*2,
17 |         v = m.cos,
18 |         z = m.random
19 |     c.width = w*pr
20 |     c.height = h*pr
21 |     x.scale(pr, pr)
22 |     x.globalAlpha = 0.6
23 |     function i(){
24 |         x.clearRect(0,0,w,h)
25 |         q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]
26 |         while(q[1].x<w+f) d(q[0], q[1])
27 |     }
28 |     function d(i,j){   
29 |         x.beginPath()
30 |         x.moveTo(i.x, i.y)
31 |         x.lineTo(j.x, j.y)
32 |         var k = j.x + (z()*2-0.25)*f,
33 |             n = y(j.y)
34 |         x.lineTo(k, n)
35 |         x.closePath()
36 |         r-=u/-50
37 |         x.fillStyle = '#'+((v(r)*127+128<<16) | (v(r+u/3)*127+128<<8) | v(r+u/3*2)*127+128).toString(16)
38 |         x.fill()
39 |         q[0] = q[1]
40 |         q[1] = {x:k,y:n}
41 |     }
42 |     function y(p){
43 |         var t = p + (z()*2-1.1)*f
44 |         return (t>h||t<0) ? y(p) : t
45 |     }
46 |     document.onclick = i
47 |     document.ontouchstart = i
48 |     i()
49 |     return i
50 |   }

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