feat: add a GitHub button on the demo and scroll back to the top

pulsardev · Mar 16, 2018 · 94adbdd · 94adbdd
1 parent 8cd3883
commit 94adbdd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/demo/public/index.html b/demo/public/index.html
@@ -10,5 +10,6 @@
   <body>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
   </body>
 </html>
diff --git a/demo/src/components/MyTour.vue b/demo/src/components/MyTour.vue
@@ -64,7 +64,13 @@ export default {
       ],
       callbacks: {
         onPreviousStep: this.myCustomPreviousStepCallback,
-        onNextStep: this.myCustomNextStepCallback
+        onNextStep: this.myCustomNextStepCallback,
+        onStop: () => {
+          window.scroll({
+            top: 0,
+            behavior: 'smooth'
+          })
+        }
       }
     }
   },

diff --git a/demo/src/views/Home.vue b/demo/src/views/Home.vue
@@ -8,14 +8,20 @@
             <h2>VUE TOUR</h2>
           </a>
         </div>
+
         <h1>vue-tour</h1>
         <h2>a <u>Lightweight</u>, <u>Simple</u> and <u>Customizable</u> tour plugin for use with Vue.js</h2>
 
         <p>
           <a href="https://pulsar.gitbooks.io/vue-tour/" class="btn btn-primary btn-lg">Docs</a>
           <a href="https://github.com/pulsardev/vue-tour" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
         </p>
-        <p class="text-gray">Latest version: <span class="version">1.0.0</span></p>
+
+        <p>
+          <a class="github-button" href="https://github.com/pulsardev/vue-tour" data-size="large" data-show-count="true" aria-label="Star pulsardev/vue-tour on GitHub">Star</a>
+        </p>
+
+        <p class="text-gray">Latest version: <span class="version">{{ version }}</span></p>
         <div class="columns">
           <div class="column col-4 col-xs-12">
             <div class="card text-center">
@@ -106,7 +112,7 @@
 
     <footer class="section section-footer">
       <div id="copyright" class="grid-footer container grid-lg">
-        <p><a href="https://pulsar.gitbooks.io/vue-tour/" target="_blank">Documents</a> | <a href="https://github.com/pulsardev/vue-tour" target="_blank">GitHub</a> | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CLK49A83DXCQ8" target="_blank">PayPal Donate</a> | Version <span class="version">1.0.0</span></p>
+        <p><a href="https://pulsar.gitbooks.io/vue-tour/" target="_blank">Documents</a> | <a href="https://github.com/pulsardev/vue-tour" target="_blank">GitHub</a> | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CLK49A83DXCQ8" target="_blank">PayPal Donate</a> | Version <span class="version">{{ version }}</span></p>
         <p>Built with <span class="text-error">♥</span> by <a href="https://pulsar.surge.sh" target="_blank">Pulsar</a>. Licensed under the <a href="https://github.com/pulsardev/vue-tour/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
       </div>
     </footer>
@@ -120,6 +126,11 @@ export default {
   name: 'home',
   components: {
     MyTour
+  },
+  data () {
+    return {
+      version: '1.0.0'
+    }
   }
 }
 </script>
diff --git a/demo/vue.config.js b/demo/vue.config.js
@@ -1,3 +1,3 @@
 module.exports = {
   baseUrl: './'
-}
+}