From 9486f7fda828cc668b592bae31aea1d88f3192c6 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 15:08:10 +0100
Subject: style: size bootstrap headers

---
 src/sass/_bootstrap.sass | 8 +++++++-
 src/sass/_header.sass    | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/sass/_bootstrap.sass b/src/sass/_bootstrap.sass
index 755ffb1..c83c1eb 100644
--- a/src/sass/_bootstrap.sass
+++ b/src/sass/_bootstrap.sass
@@ -1,8 +1,14 @@
 @import "_variables.sass";
 
-h1
+h1, h2, h3
   font-family: $font-family-big
 
+h1
+  font-size: 3em
+
+h2
+  font-size: 2em
+
 @mixin breakpoint($point)
   @if $point == desktop
     @media (min-width: 70em)
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
index 33f9271..e64a031 100644
--- a/src/sass/_header.sass
+++ b/src/sass/_header.sass
@@ -5,6 +5,7 @@ header
   color: $color-w
   padding: 10px 0
   box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
+  margin-bottom: 30px
   h1
     font-size: 3em
     margin: 0
-- 
cgit v1.2.3-18-g5258


From a686db800f50db4f6585fcdf1110873f577bfaeb Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 15:13:27 +0100
Subject: conf: move router and store folders

---
 src/main.js         |  4 ++--
 src/router.js       | 22 ++++++++++++++++++++++
 src/router/index.js | 22 ----------------------
 src/store.js        | 17 +++++++++++++++++
 src/store/index.js  | 15 ---------------
 5 files changed, 41 insertions(+), 39 deletions(-)
 create mode 100644 src/router.js
 delete mode 100644 src/router/index.js
 create mode 100644 src/store.js
 delete mode 100644 src/store/index.js

diff --git a/src/main.js b/src/main.js
index 1329a63..838c5f3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import App from './App.vue';
-import router from './router';
-import store from './store';
+import router from '@/router.js';
+import store from '@/store.js';
 
 import { BootstrapVue } from 'bootstrap-vue';
 
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..5dc4e51
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import Home from '@/views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router
diff --git a/src/router/index.js b/src/router/index.js
deleted file mode 100644
index 5dc4e51..0000000
--- a/src/router/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-import Home from '@/views/Home.vue'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-  }
-]
-
-const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes
-})
-
-export default router
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 0000000..0e96ac7
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    api: process.env.VUE_APP_BACKEND_URL,
+    commits: [],
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
diff --git a/src/store/index.js b/src/store/index.js
deleted file mode 100644
index 332b916..0000000
--- a/src/store/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  }
-})
-- 
cgit v1.2.3-18-g5258


From 4410f2e46cbf961f2100038b53426bd07aebc4e9 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 15:51:04 +0100
Subject: feat: get all commits

---
 src/store.js       | 15 +++++++++++++++
 src/views/Home.vue | 10 ++++++++++
 2 files changed, 25 insertions(+)

diff --git a/src/store.js b/src/store.js
index 0e96ac7..9080bd0 100644
--- a/src/store.js
+++ b/src/store.js
@@ -8,9 +8,24 @@ export default new Vuex.Store({
     api: process.env.VUE_APP_BACKEND_URL,
     commits: [],
   },
+  get: {
+    commits: state => {
+      return state.commits
+    },
+  },
   mutations: {
+    load_commits: (state, value) => {
+      state.commits = value
+    },
   },
   actions: {
+    // Get all commits from the api backend
+    async get_commits({commit}) {
+      await fetch(`${this.state.api}/commit/`)
+        .then(async response => {
+          commit('load_commits', await response.json());
+        })
+    },
   },
   modules: {
   }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 55c3c08..28da86b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
   main
     header-blue
+    b-container
+      h2 List of commits
 </template>
 
 <script>
@@ -10,6 +12,14 @@ export default {
   name: "Home",
   components: {
     'header-blue': HeaderBlue,
+  },
+  mounted() {
+    this.$store.dispatch('get_commits');
+  },
+  computed: {
+    commits: () => {
+      return this.$store.get.commits;
+    }
   }
 }
 </script>
-- 
cgit v1.2.3-18-g5258


From d383bd08f0266406d4b0c9eb68c76e62c9d4a460 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 16:06:10 +0100
Subject: feat: get emails

---
 src/store.js       | 22 ++++++++++++++++++++++
 src/views/Home.vue |  6 +++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/store.js b/src/store.js
index 9080bd0..888add2 100644
--- a/src/store.js
+++ b/src/store.js
@@ -7,16 +7,24 @@ export default new Vuex.Store({
   state: {
     api: process.env.VUE_APP_BACKEND_URL,
     commits: [],
+    emails: {},
   },
   get: {
     commits: state => {
       return state.commits
     },
+    emails: state => {
+      return state.emails
+    },
   },
   mutations: {
     load_commits: (state, value) => {
       state.commits = value
     },
+    load_emails: (state, value) => {
+      console.log(JSON.stringify(value))
+      state.emails = value
+    },
   },
   actions: {
     // Get all commits from the api backend
@@ -26,6 +34,20 @@ export default new Vuex.Store({
           commit('load_commits', await response.json());
         })
     },
+    // Get all emails and map them like an hash
+    async get_emails({commit}) {
+      await fetch(`${this.state.api}/email/`)
+        .then(async response => {
+          const emails_list = await response.json();
+          const emails_obj = emails_list
+                                .reduce((dict, elem) => {
+                                  dict[elem['email']] = elem['hash_md5']
+                                  return dict;
+                                }, {})
+
+          commit('load_emails', emails_obj);
+        })
+    },
   },
   modules: {
   }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 28da86b..e507ef8 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -15,11 +15,15 @@ export default {
   },
   mounted() {
     this.$store.dispatch('get_commits');
+    this.$store.dispatch('get_emails');
   },
   computed: {
     commits: () => {
       return this.$store.get.commits;
-    }
+    },
+    emails: () => {
+      return this.$store.get.emails;
+    },
   }
 }
 </script>
-- 
cgit v1.2.3-18-g5258


From 0d6bd4aefc4e651be3f2fff15043d598e852df54 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 16:22:41 +0100
Subject: feat: add loading

---
 src/components/HeaderBlue.vue        | 19 +++++++++++++++++++
 src/components/design/HeaderBlue.vue | 12 ------------
 src/sass/_header.sass                | 14 ++++++++++++++
 src/store.js                         | 14 ++++++++++++--
 src/views/Home.vue                   |  6 +++---
 5 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 src/components/HeaderBlue.vue
 delete mode 100644 src/components/design/HeaderBlue.vue

diff --git a/src/components/HeaderBlue.vue b/src/components/HeaderBlue.vue
new file mode 100644
index 0000000..d4ffa9f
--- /dev/null
+++ b/src/components/HeaderBlue.vue
@@ -0,0 +1,19 @@
+<template lang="pug">
+  header(:class="{active: loading}")
+    #big-loading(v-if="loading")
+      b-overlay(:show="true" spinner-large)
+    b-container
+      h1
+        a(href="/" rel="home") Gico
+</template>
+
+<script>
+export default {
+  name: "HeaderBlue",
+  computed: {
+    loading: function() {
+      return this.$store.getters.loading;
+    },
+  }
+}
+</script>
diff --git a/src/components/design/HeaderBlue.vue b/src/components/design/HeaderBlue.vue
deleted file mode 100644
index fd6d731..0000000
--- a/src/components/design/HeaderBlue.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template lang="pug">
-  header
-    b-container
-      h1
-        a(href="/" rel="home") Gico
-</template>
-
-<script>
-export default {
-  name: "HeaderBlue",
-}
-</script>
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
index e64a031..21f11bb 100644
--- a/src/sass/_header.sass
+++ b/src/sass/_header.sass
@@ -6,6 +6,20 @@ header
   padding: 10px 0
   box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
   margin-bottom: 30px
+  &.active
+    z-index: 1044
+  #big-loading
+    top: 0
+    width: 100%
+    height: 100%
+    position: fixed
+    z-index: 1045
+    .b-overlay-wrap
+      height: 100%
+      background-color: rgba(0, 0, 0, .8)
+      .spinner-border
+        border-color: $primary
+        border-right-color: transparent
   h1
     font-size: 3em
     margin: 0
diff --git a/src/store.js b/src/store.js
index 888add2..dab3529 100644
--- a/src/store.js
+++ b/src/store.js
@@ -6,10 +6,14 @@ Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     api: process.env.VUE_APP_BACKEND_URL,
+    loading: false,
     commits: [],
     emails: {},
   },
-  get: {
+  getters: {
+    loading: state => {
+      return state.loading
+    },
     commits: state => {
       return state.commits
     },
@@ -18,24 +22,29 @@ export default new Vuex.Store({
     },
   },
   mutations: {
+    loading_state: (state, value) => {
+      state.loading = value
+    },
     load_commits: (state, value) => {
       state.commits = value
     },
     load_emails: (state, value) => {
-      console.log(JSON.stringify(value))
       state.emails = value
     },
   },
   actions: {
     // Get all commits from the api backend
     async get_commits({commit}) {
+      commit('loading_state', true)
       await fetch(`${this.state.api}/commit/`)
         .then(async response => {
           commit('load_commits', await response.json());
         })
+      commit('loading_state', false)
     },
     // Get all emails and map them like an hash
     async get_emails({commit}) {
+      commit('loading_state', true)
       await fetch(`${this.state.api}/email/`)
         .then(async response => {
           const emails_list = await response.json();
@@ -47,6 +56,7 @@ export default new Vuex.Store({
 
           commit('load_emails', emails_obj);
         })
+      commit('loading_state', false)
     },
   },
   modules: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e507ef8..b5fbda0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import HeaderBlue from '@/components/design/HeaderBlue';
+import HeaderBlue from '@/components/HeaderBlue';
 
 export default {
   name: "Home",
@@ -19,10 +19,10 @@ export default {
   },
   computed: {
     commits: () => {
-      return this.$store.get.commits;
+      return this.$store.getters.commits;
     },
     emails: () => {
-      return this.$store.get.emails;
+      return this.$store.getters.emails;
     },
   }
 }
-- 
cgit v1.2.3-18-g5258


From bfb31b38540438432b60e1ccd8445c29748c67ee Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 20:25:18 +0100
Subject: style: change secondary color

---
 src/sass/_variables.sass | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/sass/_variables.sass b/src/sass/_variables.sass
index e716c3c..b13c03e 100644
--- a/src/sass/_variables.sass
+++ b/src/sass/_variables.sass
@@ -2,9 +2,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
 
 $font-family: "Ubuntu", sans-serif
+$font-family-mono: "Ubuntu Mono", "Ubuntu", sans-serif
 $font-family-big: "Bebas Neue", corsive
 
 $primary: #34495e
-$secondary: #e8a83c
+$secondary: #d35400
 
 $color-w: #fafafa
-- 
cgit v1.2.3-18-g5258


From a70a62d2f7188a36a08314ac2151dec7152fffa7 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 20:26:48 +0100
Subject: chore: remove loading on get emails

---
 src/store.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/store.js b/src/store.js
index dab3529..2fd04eb 100644
--- a/src/store.js
+++ b/src/store.js
@@ -44,7 +44,6 @@ export default new Vuex.Store({
     },
     // Get all emails and map them like an hash
     async get_emails({commit}) {
-      commit('loading_state', true)
       await fetch(`${this.state.api}/email/`)
         .then(async response => {
           const emails_list = await response.json();
@@ -56,7 +55,6 @@ export default new Vuex.Store({
 
           commit('load_emails', emails_obj);
         })
-      commit('loading_state', false)
     },
   },
   modules: {
-- 
cgit v1.2.3-18-g5258


From 5c29f010cf52f3ba5ee597a50df97219d8dc04a7 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 20:27:26 +0100
Subject: feat: commits list

---
 package-lock.json         | 13 +++++++
 package.json              |  1 +
 src/components/Commit.vue | 53 ++++++++++++++++++++++++++++
 src/main.js               |  1 +
 src/sass/_commit.sass     | 88 +++++++++++++++++++++++++++++++++++++++++++++++
 src/sass/main.sass        |  1 +
 src/views/Home.vue        | 17 +++++++--
 7 files changed, 171 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Commit.vue
 create mode 100644 src/sass/_commit.sass

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;
     },
   }
-- 
cgit v1.2.3-18-g5258


From 69c4d36ed09f170c14ef0f187528596552491f0a Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 20:33:33 +0100
Subject: style: width of repo name in mobile

---
 src/sass/_commit.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sass/_commit.sass b/src/sass/_commit.sass
index e9e0e06..f6971d3 100644
--- a/src/sass/_commit.sass
+++ b/src/sass/_commit.sass
@@ -85,4 +85,4 @@
     white-space: nowrap
     border-radius: 2px
     @include breakpoint(phablet)
-      width: 180px
+      max-width: 180px
-- 
cgit v1.2.3-18-g5258


From 024560588a7afbfa1fa1dbaf0440beefb695108c Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Fri, 19 Mar 2021 20:36:16 +0100
Subject: style: fix padding on author only on mobile

---
 src/sass/_commit.sass | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sass/_commit.sass b/src/sass/_commit.sass
index f6971d3..64a315c 100644
--- a/src/sass/_commit.sass
+++ b/src/sass/_commit.sass
@@ -27,8 +27,8 @@
     div
       width: 100%
       @include breakpoint(phablet)
-      &:first-child
-        padding-bottom: 10px
+        &:first-child
+          padding-bottom: 10px
     .avatar
       width: 30px
       float: left
-- 
cgit v1.2.3-18-g5258


From a9ece91610c7f33cbc6445b58cfd1a9b43a89a49 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Sat, 20 Mar 2021 11:12:39 +0100
Subject: chore: isolated loadings

---
 src/components/HeaderBlue.vue |  9 +--------
 src/sass/_header.sass         | 14 --------------
 src/views/Home.vue            |  6 ++++++
 3 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/components/HeaderBlue.vue b/src/components/HeaderBlue.vue
index d4ffa9f..fd6d731 100644
--- a/src/components/HeaderBlue.vue
+++ b/src/components/HeaderBlue.vue
@@ -1,7 +1,5 @@
 <template lang="pug">
-  header(:class="{active: loading}")
-    #big-loading(v-if="loading")
-      b-overlay(:show="true" spinner-large)
+  header
     b-container
       h1
         a(href="/" rel="home") Gico
@@ -10,10 +8,5 @@
 <script>
 export default {
   name: "HeaderBlue",
-  computed: {
-    loading: function() {
-      return this.$store.getters.loading;
-    },
-  }
 }
 </script>
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
index 21f11bb..e64a031 100644
--- a/src/sass/_header.sass
+++ b/src/sass/_header.sass
@@ -6,20 +6,6 @@ header
   padding: 10px 0
   box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
   margin-bottom: 30px
-  &.active
-    z-index: 1044
-  #big-loading
-    top: 0
-    width: 100%
-    height: 100%
-    position: fixed
-    z-index: 1045
-    .b-overlay-wrap
-      height: 100%
-      background-color: rgba(0, 0, 0, .8)
-      .spinner-border
-        border-color: $primary
-        border-right-color: transparent
   h1
     font-size: 3em
     margin: 0
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c1d9420..3ca1445 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,7 +6,10 @@
         b-col(md="8" sm="12")
           h2 List of commits
           section#commits
+            .commit(style="padding: 50px" v-if="loading")
+              b-overlay(:show="true" spinner-large)
             commit-card(
+              v-else
               v-for="i in commits" :key="i.hash" :data="i"
               :author="emails[i.author_email]"
               :committer="emails[i.committer_email]"
@@ -35,6 +38,9 @@ export default {
     emails: function() {
       return this.$store.getters.emails;
     },
+    loading: function() {
+      return this.$store.getters.loading;
+    }
   }
 }
 </script>
-- 
cgit v1.2.3-18-g5258


From 45e5a794ae423e81afa7fdde329f34e3d4a0bcd3 Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Sat, 20 Mar 2021 18:01:09 +0100
Subject: feat: add top authors section

---
 src/components/TopAuthor.vue | 16 ++++++++++++++++
 src/sass/_commit.sass        | 18 ++++++++++++++++++
 src/sass/main.sass           |  6 ++++++
 src/store.js                 | 23 +++++++++++++++++++++++
 src/views/Home.vue           | 25 +++++++++++++++++++++++--
 5 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TopAuthor.vue

diff --git a/src/components/TopAuthor.vue b/src/components/TopAuthor.vue
new file mode 100644
index 0000000..e8a0241
--- /dev/null
+++ b/src/components/TopAuthor.vue
@@ -0,0 +1,16 @@
+<template lang="pug">
+  .top-author
+    .user
+      img(:src="'https://gravatar.com/avatar/'+avatar" :alt="data.author_email")
+      strong(:title="data.author_email")
+        | {{ data.author_name }} <{{ data.author_email }}>
+    .number
+      h2 {{ data.num }}
+</template>
+
+<script>
+export default {
+  name: "TopAuthor",
+  props: ['data', 'avatar'],
+}
+</script>
diff --git a/src/sass/_commit.sass b/src/sass/_commit.sass
index 64a315c..d59afa0 100644
--- a/src/sass/_commit.sass
+++ b/src/sass/_commit.sass
@@ -86,3 +86,21 @@
     border-radius: 2px
     @include breakpoint(phablet)
       max-width: 180px
+
+.top-author
+  display: grid
+  grid-template-columns: 80% 20%
+  .user
+    display: flex
+    img
+      width: 30px
+      height: 30px
+      margin-right: 5px
+    strong
+      text-overflow: ellipsis
+      white-space: nowrap
+      overflow: hidden
+
+  .number
+    justify-self: end
+    color: $secondary
diff --git a/src/sass/main.sass b/src/sass/main.sass
index 09acd39..deab05d 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -5,3 +5,9 @@ body
   color: #2c3e50
   font-family: $font-family
   background-color: #fbfcfc 
+
+#home
+  @include breakpoint(phablet)
+    flex-direction: column-reverse
+    > div
+      margin-bottom: 42px
diff --git a/src/store.js b/src/store.js
index 2fd04eb..79bdaff 100644
--- a/src/store.js
+++ b/src/store.js
@@ -7,16 +7,24 @@ export default new Vuex.Store({
   state: {
     api: process.env.VUE_APP_BACKEND_URL,
     loading: false,
+    loading_top_authors: false,
     commits: [],
+    top_authors: [],
     emails: {},
   },
   getters: {
     loading: state => {
       return state.loading
     },
+    loading_top_authors: state => {
+      return state.loading_top_authors
+    },
     commits: state => {
       return state.commits
     },
+    top_authors: state => {
+      return state.top_authors
+    },
     emails: state => {
       return state.emails
     },
@@ -25,9 +33,15 @@ export default new Vuex.Store({
     loading_state: (state, value) => {
       state.loading = value
     },
+    loading_top_authors_state: (state, value) => {
+      state.loading_top_authors = value
+    },
     load_commits: (state, value) => {
       state.commits = value
     },
+    load_top_authors: (state, value) => {
+      state.top_authors = value
+    },
     load_emails: (state, value) => {
       state.emails = value
     },
@@ -56,6 +70,15 @@ export default new Vuex.Store({
           commit('load_emails', emails_obj);
         })
     },
+    /// Get the ranking of commits authors
+    async get_top_authors({commit}) {
+      commit('loading_top_authors_state', true)
+      await fetch(`${this.state.api}/commit/top/`)
+        .then(async response => {
+          commit('load_top_authors', await response.json());
+        })
+      commit('loading_top_authors_state', false)
+    }
   },
   modules: {
   }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3ca1445..49e42b3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,7 +2,7 @@
   main
     header-blue
     b-container
-      b-row
+      b-row#home
         b-col(md="8" sm="12")
           h2 List of commits
           section#commits
@@ -14,22 +14,37 @@
               :author="emails[i.author_email]"
               :committer="emails[i.committer_email]"
             )
-        b-col
+        b-col(md="4" sm="12")
+          h2 Top authors
+          b-list-group
+            b-list-group-item(v-if="loading_top_authors")
+              b-overlay(:show="true" spinner-large)
+            b-list-group-item(
+              v-else v-for="author in top_authors.slice(0, 7)" :key="author.email"
+              button
+            )
+              author(
+                :data="author"
+                :avatar="emails[author.author_email]"
+              )
 </template>
 
 <script>
 import HeaderBlue from '@/components/HeaderBlue';
 import Commit from '@/components/Commit';
+import TopAuthor from '@/components/TopAuthor';
 
 export default {
   name: "Home",
   components: {
     'header-blue': HeaderBlue,
     'commit-card': Commit,
+    'author': TopAuthor,
   },
   mounted() {
     this.$store.dispatch('get_commits');
     this.$store.dispatch('get_emails');
+    this.$store.dispatch('get_top_authors');
   },
   computed: {
     commits: function() {
@@ -38,8 +53,14 @@ export default {
     emails: function() {
       return this.$store.getters.emails;
     },
+    top_authors: function() {
+      return this.$store.getters.top_authors;
+    },
     loading: function() {
       return this.$store.getters.loading;
+    },
+    loading_top_authors: function() {
+      return this.$store.getters.loading_top_authors;
     }
   }
 }
-- 
cgit v1.2.3-18-g5258