From 40495d222a92e092e75d6a24053307f44649e323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 23 Jul 2019 20:26:45 +0200
Subject: [PATCH] add star count

---
 examples/Components/Navigation/index.vue  | 16 +++++++++++++---
 examples/Components/Navigation/style.scss | 10 ++++++++++
 package.json                              |  3 ++-
 yarn.lock                                 | 12 ++++++++++++
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/examples/Components/Navigation/index.vue b/examples/Components/Navigation/index.vue
index 89f41a0d..b5b42d31 100644
--- a/examples/Components/Navigation/index.vue
+++ b/examples/Components/Navigation/index.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="navigation">
 
-    <h1 class="navigation__logo">
-      tiptap
-    </h1>
+    <div>
+      <h1 class="navigation__logo">
+        tiptap
+      </h1>
+      <github-button
+        class="navigation__count"
+        href="https://github.com/scrumpy/tiptap"
+        data-show-count="true"
+        aria-label="Star scrumpy/tiptap on GitHub"
+      />
+    </div>
 
     <div>
       <a class="navigation__link" href="https://tiptap.scrumpy.io/docs" target="_blank">
@@ -22,10 +30,12 @@
 
 <script>
 import Icon from 'Components/Icon'
+import GithubButton from 'vue-github-button'
 
 export default {
   components: {
     Icon,
+    GithubButton,
   },
 }
 </script>
diff --git a/examples/Components/Navigation/style.scss b/examples/Components/Navigation/style.scss
index 2e478ce0..ebb318bd 100644
--- a/examples/Components/Navigation/style.scss
+++ b/examples/Components/Navigation/style.scss
@@ -8,11 +8,15 @@
   padding: 0.75rem;
   background-color: $color-black;
   color: $color-white;
+  flex-wrap: wrap;
 
   &__logo {
+    display: inline-block;
+    vertical-align: middle;
     font-size: 1.1rem;
     font-weight: bold;
     margin: 0;
+    margin-right: 0.5rem;
   }
 
   &__icon {
@@ -20,6 +24,12 @@
     height: 1.5rem;
   }
 
+  &__count {
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: 0.3rem;
+  }
+
   &__link {
     display: inline-block;
     color: rgba($color-white, 0.5);
diff --git a/package.json b/package.json
index 36ecb779..f0e1bc3b 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "zlib": "^1.0.5"
   },
   "dependencies": {
-    "socket.io-client": "^2.2.0"
+    "socket.io-client": "^2.2.0",
+    "vue-github-button": "^1.0.8"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index b7f9de49..cb4bb5d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5855,6 +5855,11 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
+github-buttons@^2.2.9:
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.2.10.tgz#7ddf66679b4c23e4c4558fedbba6d8aa48241cd6"
+  integrity sha512-hkcYkzru6yq33FZleeiryFxR62uDdqHJMQeNiUeh03uHpCSGGdpq3V9RKH7+Xa0pjyce+ftNTx4C3CgO/Auw2A==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -12674,6 +12679,13 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
+vue-github-button@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/vue-github-button/-/vue-github-button-1.0.8.tgz#c8e1efa579f9cab05baba03ba7e44101a33b1baa"
+  integrity sha512-d/5E88YmdRz6lWeYdf4G+siFpDQa8wtl1sjUby8lktJDdPWxNRshIWNn5Udt/8TbgElcZCCGaIOJ6819YZkkhQ==
+  dependencies:
+    github-buttons "^2.2.9"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"