summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2021-03-19 20:27:26 +0100
committerSanto Cariotti <santo@dcariotti.me>2021-03-19 20:27:26 +0100
commit5c29f010cf52f3ba5ee597a50df97219d8dc04a7 (patch)
tree447f697a5cafda82e57ffc7b98c5360c48c9076b
parenta70a62d2f7188a36a08314ac2151dec7152fffa7 (diff)
feat: commits list
-rw-r--r--package-lock.json13
-rw-r--r--package.json1
-rw-r--r--src/components/Commit.vue53
-rw-r--r--src/main.js1
-rw-r--r--src/sass/_commit.sass88
-rw-r--r--src/sass/main.sass1
-rw-r--r--src/views/Home.vue17
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;
},
}