Merge pull request #15 from nusr/use-online-api

feat: Development Environment Could Use Online Api
deno-china · Jul 1, 2019 · eeb27d2 · eeb27d2
2 parents 8557547 + 7efd384
commit eeb27d2
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 9 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,2 @@
 # Created by .ignore support plugin (hsz.mobi)
-
+dev.js
diff --git a/README.md b/README.md
@@ -1,4 +1,74 @@
-## Deno 中文社区前端部分
+# Deno 中文社区前端部分
+
+## 安装
+
+```bash
+npm install
+```
+
+## 运行
+
+```bash
+npm run dev
+```
+
+浏览器输入 [http://localhost:1234](http://localhost:1234)。
+
+## 使用线上地址开发
+
+### 1. 更改电脑 **hosts**
+
+#### Mac 更改 **hosts**
+
+```bash
+sudo vim  /private/etc/hosts # 需要管理员权限
+```
+
+```
+127.0.0.1	localhost
+255.255.255.255	broadcasthost
+::1             localhost
+127.0.0.1	denocn.org # 增加此行配置
+```
+
+**更改 hosts 后，重启才能生效！**
+
+#### Windows 更改 **hosts**
+
+```
+# 需要管理员权限
+# win10 hosts 文件位置
+C:\Windows\System32\drivers\etc\hosts
+```
+
+更改 **hosts** 后，将导致 [https://denocn.org](https://denocn.org)无法访问。
+开发完成后，使用 **#** 注释掉添加的配置即可。
+
+### 2. 修改 [dev.js](dev.js)
+
+更改为如下配置：
+
+```js
+// ... 其他不变
+// 请求地址设置为线上地址
+const targetHost = 'http://api.denocn.org';
+
+const server = new ParcelProxyServer({
+  entryPoint: './src/index.html',
+  parcelOptions: {},
+  proxies: {
+    '/api': {
+      target: targetHost,
+    },
+    '/seo': {
+      target: targetHost,
+    },
+  },
+});
+// ... 其他不变
+```
+
+## 持续集成
 
 前端部分通过 **Netilfy** 持续部署。通过 redirects 实现单页以及 api 代理。
 
@@ -20,7 +90,7 @@
   status = 200
 ```
 
-### API 列表
+## API 列表
 
 列表中所有 API 需要加上 `/api/` 前缀实现代理
 

diff --git a/dev.js b/dev.js
@@ -20,6 +20,6 @@ const server = new ParcelProxyServer({
 
 server.listen(1234, () => {
   console.log(
-    'Parcel proxy server has started,running in http://localhost:1234'
+    'Parcel proxy server has started,running in http://localhost:1234',
   );
 });
diff --git a/src/views/detail/$id.less b/src/views/detail/$id.less
@@ -1,8 +1,9 @@
-@import "../../common.less";
+@import '../../common.less';
 
 .page-detail {
   > .header {
     padding: 20px 20px;
+
     .tag {
       display: inline;
       border-radius: 3px;
@@ -14,25 +15,31 @@
       font-style: normal;
       color: #fff;
     }
+
     h2 {
       margin: 0 0;
       margin-bottom: 10px;
+
       .type {
         margin-right: 10px;
         color: #999;
         font-weight: normal;
       }
     }
+
     .icon {
       margin-left: 10px;
       color: #bbb;
     }
+
     svg {
       margin-right: 5px;
     }
+
     .ops {
       margin-top: 10px;
       font-size: 12px;
+
       button {
         padding: 3px 5px;
         margin-right: 10px;
@@ -41,15 +48,28 @@
         cursor: pointer;
         border-radius: 4px;
       }
+
       .edit {
         background-color: @primary;
       }
+
       .del {
         background-color: rgb(255, 136, 136);
       }
     }
   }
+
   > .body {
     padding: 0;
   }
 }
+
+.page-not-logged {
+  &.base-panel {
+    border-top-color: #eee;
+  }
+
+  .tip {
+    padding-bottom: 10px;
+  }
+}
diff --git a/src/views/detail/$id.tsx b/src/views/detail/$id.tsx
@@ -41,12 +41,12 @@ class Detail extends DefaultLayout<RouteComponentProps<{ id?: string }>> {
         <RepliesPanel replies={detailStore.replies} />
         {isLogged && <AddReply topicId={detailStore.topic.id} />}
         {!isLogged && (
-          <div>
-            <p>登录后发表评论!</p>
+          <BasePanel className="page-not-logged">
+            <div className="tip">登录后发表评论!</div>
             <a className="btn green" href="/api/user/login">
               通过Github登录
             </a>
-          </div>
+          </BasePanel>
         )}
 
       </>

diff --git a/src/views/detail/_replies.less b/src/views/detail/_replies.less
@@ -1,40 +1,53 @@
-@import "../../common.less";
+@import '../../common.less';
 
 .panel-detail-replies {
   .body {
     padding: 0 20px;
+
     > ul {
       > li {
         display: flex;
         flex-direction: row;
         padding: 10px 0;
         border-bottom: 1px solid #eee;
+
         &:last-child {
           border-bottom: none;
         }
+
         .avatar {
           width: 40px;
           height: 40px;
           border-radius: 50%;
           border: 1px solid #ddd;
           margin-right: 10px;
         }
+
         .author {
           flex: 1;
           font-size: 13px;
+
           .name {
             font-size: 14px;
             color: #404040;
             margin-right: 10px;
           }
+
           .floor {
             color: @primary;
             margin-right: 10px;
           }
+
           .time {
             color: #777;
           }
+
+          > a {
+            color: #797776;
+            text-decoration: underline;
+          }
         }
+
         .com-markdown-preview {
           padding: 0;
         }