feat: commits list

7 files changed, 171 insertions, 3 deletions

diff --git a/package-lock.json b/package-lock.json
index f2c733b..9e82b75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7881,6 +7881,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -12191,6 +12196,14 @@
         }
       }
     },
+    "vue-moment": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
+      "integrity": "sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==",
+      "requires": {
+        "moment": "^2.19.2"
+      }
+    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1615477699509&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
diff --git a/package.json b/package.json
index 8f8ac17..6045822 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
     "vue": "^2.6.11",
+    "vue-moment": "^4.1.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
diff --git a/src/components/Commit.vue b/src/components/Commit.vue
new file mode 100644
index 0000000..63e1764
--- /dev/null
+++ b/src/components/Commit.vue
@@ -0,0 +1,53 @@
+<template lang="pug">
+  .commit(:id="data.hash")
+    .repo
+      a(
+        :href="'/repo/'+data.repository_url" :title="data.repository_url"
+      ) {{ data.repository_url }}
+
+    .head
+      h5
+        a(:href="'/commit/'+data.hash") {{ data.hash }}
+      div
+        span.tree tree:
+        h6
+          a(:href="'/commit/'+data.tree") {{ data.tree }}
+
+    .author_committer
+      div
+        img.avatar(
+          :src="'https://gravatar.com/avatar/'+author"
+          :alt="data.author_email"
+        )
+        p Author: 
+          b(:title="data.author_email") {{ data.author_name }} 
+            | <{{data.author_email}}></b>
+      div
+        img.avatar(
+          :src="'https://gravatar.com/avatar/'+committer"
+          :alt="data.committer_email"
+        )
+        p Committer: 
+          b(:title="data.committer_email") {{ data.committer_name }} 
+            | <{{data.committer_email}}></b>
+
+    .text
+      p
+        | {{ first_line(data.text) }}
+        span.middot ·
+        span.date {{ data.date | moment("ddd, D MMM YYYY HH:mm:ss ZZ") }}
+</template>
+
+<script>
+export default {
+  name: 'Commit',
+  // `author` is the hash md5 of the author's gravatar
+  // `committer` is the hash md5 of the committer's gravatar
+  props: ['data', 'author', 'committer'],
+  methods: {
+    first_line(text) {
+      return text.split('\n')[0]
+    }
+  }
+}
+</script>
diff --git a/src/main.js b/src/main.js
index 838c5f3..a05771b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,7 @@ import { BootstrapVue } from 'bootstrap-vue';
 
 Vue.config.productionTip = false;
 Vue.use(BootstrapVue);
+Vue.use(require('vue-moment'));
 
 new Vue({
   router,
diff --git a/src/sass/_commit.sass b/src/sass/_commit.sass
new file mode 100644
index 0000000..e9e0e06
--- /dev/null
+++ b/src/sass/_commit.sass
@@ -0,0 +1,88 @@
+@import "_bootstrap.sass";
+
+.commit
+  border-bottom: #ccc 1px solid
+  padding: 20px 10px
+  margin: 0
+  &:hover
+    background-color: darken(#fbfcfc, 3%)
+  .head
+    > div
+      span
+        color: #9f9ca5
+        @include breakpoint(phablet)
+          margin-right: 8px
+      h6 a
+        color: $secondary
+        font-weight: 100
+    span
+      float: left
+  .author_committer
+    display: grid
+    grid-template-columns: 50% 50%
+    align-items: center
+    justify-items: center
+    @include breakpoint(phablet)
+      grid-template-columns: 100%
+    div
+      width: 100%
+      @include breakpoint(phablet)
+      &:first-child
+        padding-bottom: 10px
+    .avatar
+      width: 30px
+      float: left
+      margin-right: 5px
+    p
+      margin: 0
+      line-height: 30px
+      overflow: hidden
+      height: 30px
+      text-overflow: ellipsis
+      white-space: nowrap
+      padding-right: 5px
+  h5, h6
+    font-weight: bold
+    font-family: $font-family-mono
+    font-size: 2em
+    a
+      color: $primary
+      text-decoration: underline
+      @include breakpoint(phablet)
+        overflow: hidden
+        width: 111px
+        display: block
+
+  h6
+    font-size: 1em
+    a
+      line-height: 24px
+      margin-left: 5px
+      @include breakpoint(phablet)
+        width: 56px
+
+
+  .text
+    p
+      margin: 5px 0 0
+      span.middot
+        margin: 0 10px
+        color: #ccc
+      span.date
+        color: $secondary
+        white-space: pre
+        display: inline-block
+
+  .repo a
+    color: #fff
+    text-decoration: none !important
+    background: $primary
+    padding: 3px
+    float: right
+    max-width: 200px
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+    border-radius: 2px
+    @include breakpoint(phablet)
+      width: 180px
diff --git a/src/sass/main.sass b/src/sass/main.sass
index 18b025a..09acd39 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -1,4 +1,5 @@
 @import "_header.sass";
+@import "_commit.sass";
 
 body
   color: #2c3e50
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b5fbda0..c1d9420 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,26 +2,37 @@
   main
     header-blue
     b-container
-      h2 List of commits
+      b-row
+        b-col(md="8" sm="12")
+          h2 List of commits
+          section#commits
+            commit-card(
+              v-for="i in commits" :key="i.hash" :data="i"
+              :author="emails[i.author_email]"
+              :committer="emails[i.committer_email]"
+            )
+        b-col
 </template>
 
 <script>
 import HeaderBlue from '@/components/HeaderBlue';
+import Commit from '@/components/Commit';
 
 export default {
   name: "Home",
   components: {
     'header-blue': HeaderBlue,
+    'commit-card': Commit,
   },
   mounted() {
     this.$store.dispatch('get_commits');
     this.$store.dispatch('get_emails');
   },
   computed: {
-    commits: () => {
+    commits: function() {
       return this.$store.getters.commits;
     },
-    emails: () => {
+    emails: function() {
       return this.$store.getters.emails;
     },
   }