add star count

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>

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);