From 3328c4af0ae37626f57b63381b1fb8a15d36b98e Mon Sep 17 00:00:00 2001
From: An Phan <an@construct.sg>
Date: Wed, 22 Jun 2016 16:23:43 +0800
Subject: [PATCH] Add GitHub badges

---
 app/site/src/components/Item.vue | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/site/src/components/Item.vue b/app/site/src/components/Item.vue
index 6f2b31c9..2cc7f296 100644
--- a/app/site/src/components/Item.vue
+++ b/app/site/src/components/Item.vue
@@ -7,6 +7,9 @@
         <a v-if="item.author.url" :href="item.author.url">{{ item.author.name }}</a>
         <template v-else>{{ item.author.name }}</template>
       </span>
+      <a v-if="githubBadgeUrl" :href="item.url" class="github-badge">
+        <img :src="githubBadgeUrl">
+      </a>
     </h1>
     <div class="thin" v-if="item.description" v-html="item.description"></div>
     <footer class="thin" v-if="item.tags">
@@ -24,7 +27,18 @@ import { filterByTag } from '../mixins'
 
 export default {
   props: ['item'],
-  mixins: [filterByTag]
+  mixins: [filterByTag],
+  computed: {
+    githubBadgeUrl() {
+      const re = /https?:\/\/github\.com\/([A-Za-z0-9-_]*)\/([A-Za-z0-9-_]*)\/?$/i
+      const matches = re.exec(this.item.url)
+      if (!matches) {
+        return null
+      }
+
+      return `https://img.shields.io/github/stars/${matches[1]}/${matches[2]}.svg?style=social&label=★`
+    }
+  }
 }
 </script>
 
@@ -45,6 +59,13 @@ article {
     &:only-child {
       margin-bottom: 0;
     }
+
+    .github-badge {
+      padding-top: .3rem;
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 6px;
+    }
   }
 
   footer {