Apply CC license for articles

Author: balthild

public/assets/img/cc/by.svg

@@ -38,3 +38,15 @@
     align-items: center;
     margin-top: 16px;
 }
+
+.copyleft {
+    display: block;
+    margin-top: 8px;
+    text-align: right;
+
+    .cc-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+    }
+}

public/assets/img/cc/cc.svg

@@ -110,11 +110,23 @@ export default class Article extends React.Component<ArticleProps, ArticleState>
                                     __html: renderMarkdown(article.content)
                                 }}
                             />
+
                             {article.tags.length > 0 && (
                                 <div className="article-footer">
                                     {article.tags.map((tag, i) => <Tag key={i}>{tag}</Tag>)}
                                 </div>
                             )}
+
+                            <a
+                                className="copyleft"
+                                href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
+                                target="_blank"
+                            >
+                                <img className="cc-icon" src="/assets/img/cc/cc.svg" alt="CC" />
+                                <img className="cc-icon" src="/assets/img/cc/by.svg" alt="BY" />
+                                <img className="cc-icon" src="/assets/img/cc/nc.svg" alt="NC" />
+                                <img className="cc-icon" src="/assets/img/cc/sa.svg" alt="SA" />
+                            </a>
                         </Card>
                     </WithSidebar>
                 </div>

public/assets/img/cc/nc.svg

@@ -1,4 +1,3 @@
-import './parts/Editor.scss';
 import React from 'react';
 import { Article, nullArticle, User } from '@/types';
 import { State } from '@/reducers';

public/assets/img/cc/sa.svg

@@ -1,4 +1,3 @@
-import './parts/Editor.scss';
 import React from 'react';
 import { Article, nullArticle, User } from '@/types';
 import { State } from '@/reducers';

src/components/Article.scss

@@ -62,10 +62,14 @@ export class Admin extends React.PureComponent<AdminProps> {
                 <div className={'flex-spacer ' + (this.props.immersive || 'container-fluid panel-container')}>
                     <Switch>
                         <Route exact path="/admin" component={Overview} />
+
                         <Route path="/admin/articles/all" component={AllArticles} />
                         <Route path="/admin/articles/pending" component={PendingArticles} />
                         <Route path="/admin/articles/published" component={PublishedArticles} />
                         <Route path="/admin/articles/preview/:id(\w+)" component={PreviewArticle} />
+
+                        <Route path="/admin/join/invalid" component={PendingArticles} />
+                        <Route path="/admin/join/approved" component={PublishedArticles} />
                     </Switch>
                 </div>
             </Layout>

src/components/Article.tsx

@@ -1,4 +1,3 @@
-import '@/components/parts/Editor.scss';
 import React from 'react';
 import { Article, ArticleStatus, nullArticle } from '@/types';
 import { State } from '@/reducers';

src/components/EditArticle.tsx

@@ -65,6 +65,13 @@
 
     display: flex;
     flex-direction: row;
+    align-items: center;
+
+    .cc-icon {
+        width: 28px;
+        height: 28px;
+        margin-left: 4px;
+    }
 
     .submit-button {
         margin-left: 16px;

src/components/NewArticle.tsx

@@ -1,7 +1,7 @@
 import './Editor.scss';
 import React, { ChangeEvent } from 'react';
 import { Article } from '@/types';
-import { Button } from 'antd';
+import { Button, Popover } from 'antd';
 import Measure, { BoundingRect, ContentRect } from 'react-measure';
 import AceEditor from 'react-ace';
 import 'brace/mode/markdown';
@@ -39,6 +39,15 @@ interface EditorState {
 }
 
 export default class Editor extends React.Component<EditorProps, EditorState> {
+    static copyrightDescription = (
+        <React.Fragment>
+            <p>您在本站提交文章时，即授权本站以 CC BY-NC-SA 协议发布该文章。</p>
+            <p><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank">
+                什么是 CC BY-NC-SA?
+            </a></p>
+        </React.Fragment>
+    );
+
     state = {
         title: this.props.article.title,
         content: this.props.article.content,
@@ -164,6 +173,13 @@ export default class Editor extends React.Component<EditorProps, EditorState> {
                 </div>
 
                 <div className="editor-footer">
+                    <Popover content={Editor.copyrightDescription} title="著作权说明" placement="topLeft">
+                        <img className="cc-icon" src="/assets/img/cc/cc.svg" alt="CC" />
+                        <img className="cc-icon" src="/assets/img/cc/by.svg" alt="BY" />
+                        <img className="cc-icon" src="/assets/img/cc/nc.svg" alt="NC" />
+                        <img className="cc-icon" src="/assets/img/cc/sa.svg" alt="SA" />
+                    </Popover>
+
                     <div className="flex-spacer" />
 
                     <Button