diff options
| -rw-r--r-- | package-lock.json | 13 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/Commit.vue | 53 | ||||
| -rw-r--r-- | src/main.js | 1 | ||||
| -rw-r--r-- | src/sass/_commit.sass | 88 | ||||
| -rw-r--r-- | src/sass/main.sass | 1 | ||||
| -rw-r--r-- | src/views/Home.vue | 17 |
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; }, } |