Support comments

package.json

@@ -97,6 +97,7 @@
     "reqjs": "^1.0.3",
     "svelte": "^1.30.0",
     "v-tippy": "^1.0.0",
+    "vue-bytesize-icons": "^0.1.1",
     "vue-feather-icons": "^0.1.1",
     "vue-ga": "^1.0.0",
     "vue-inline": "^1.0.1",

src/components/App.vue

@@ -54,6 +54,12 @@ pre > code
   z-index: 9999
   position: relative
 
+.el-button
+  svg
+    height: 14px
+    width: 14px
+    margin-right: 8px
+
 .el-dropdown-menu
   .fake-anchor
     color: #333

src/components/Comments.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="comments-wrapper">
+    <div v-if="loading">Loading...</div>
+    <div class="comments">
+      <div class="comment" :key="comment.id" v-for="comment in comments">
+        <div class="comment-avatar">
+          <img width="50" :src="comment.user.avatar_url">
+        </div>
+        <div class="comment-main">
+          <h3 class="comment-username">{{ comment.user.login }}</h3>
+          <div class="comment-body">{{ comment.body }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="add-comment">
+      <el-input
+        type="textarea"
+        :rows="5"
+        v-model="text">
+      </el-input>
+      <div class="comment-actions">
+        <el-button type="primary" plain @click="addComment">Add comment</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { Button, Input } from 'element-ui'
+
+export default {
+  components: {
+    'el-button': Button,
+    'el-input': Input
+  },
+
+  data() {
+    return {
+      comments: [],
+      loading: true,
+      text: ''
+    }
+  },
+
+  created() {
+    this.getComments()
+  },
+
+  methods: {
+    async getComments() {
+      this.loading = true
+      const gist = this.$route.params.gist
+      const { data } = await axios.get(`https://api.github.com/gists/${gist}/comments?access_token=${this.$store.state.githubToken || ''}`)
+      this.comments = data
+      this.loading = false
+    },
+
+    addComment() {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="stylus">
+.comment
+  display: flex
+  padding: 10px 0
+  &:not(:last-child)
+    border-bottom: 1px solid #e2e2e2
+
+.comment-avatar
+  margin-right: 10px
+  img
+    border-radius: 3px
+
+.comment-username
+  margin: 0
+  line-height: 1
+
+.comment-body
+  margin-top: 5px
+
+.comment-actions
+  margin-top: 20px
+
+.add-comment
+  margin-top: 20px
+</style>

src/components/HomeHeader.vue

@@ -68,8 +68,10 @@
       </span>
     </div>
     <div class="home-header-right home-header-block">
+      <open-comments-button v-if="$route.name === 'gist'" />
       <el-checkbox
         border
+        class="home-header-right-item"
         size="mini"
         :value="autoRun"
         v-if="!inIframe"
@@ -164,6 +166,7 @@
     InfoIcon
   } from 'vue-feather-icons'
   import SvgIcon from './SvgIcon.vue'
+  import OpenCommentsButton from './OpenCommentsButton.vue'
 
   export default {
     data() {
@@ -311,7 +314,8 @@
       TwitterIcon,
       SvgIcon,
       LogOutIcon,
-      InfoIcon
+      InfoIcon,
+      OpenCommentsButton
     }
   }
 </script>

src/components/OpenCommentsButton.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="open-comments">
+    <el-button
+      @click="toggleComments"
+      class="comment-icon"
+      size="mini">
+      <message-icon></message-icon> 0
+    </el-button>
+    <el-dialog title="Comments" :visible.sync="showComments">
+      <comments></comments>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { Button, Dialog } from 'element-ui'
+import { MessageIcon } from 'vue-bytesize-icons'
+import axios from 'axios'
+import Comments from './Comments.vue'
+
+export default {
+  components: {
+    'el-button': Button,
+    'el-dialog': Dialog,
+    MessageIcon,
+    Comments
+  },
+
+  data() {
+    return {
+      showComments: false
+    }
+  },
+
+  methods: {
+    toggleComments() {
+      this.showComments = !this.showComments
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.open-comments
+  >>> > button
+    height: 28px
+  >>> span
+    display: flex
+    align-items: center
+    justify-content: center
+</style>

yarn.lock

@@ -7231,6 +7231,12 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-bytesize-icons@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/vue-bytesize-icons/-/vue-bytesize-icons-0.1.1.tgz#0308e01d0a23d181f0228b223c44134b8e722a61"
+  dependencies:
+    babel-helper-vue-jsx-merge-props "^2.0.2"
+
 vue-feather-icons@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/vue-feather-icons/-/vue-feather-icons-0.1.1.tgz#360cefc2a8a6f99912e4b8f82d7fbc04056063c3"