Merge pull request #727 from michalv8/feature/github-star-button

Added Github star button
pradoslaw · Sep 14, 2023 · 595a751 · 595a751
2 parents 1af18e7 + 36695ea
commit 595a751
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 1 deletion.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -9,6 +9,7 @@ import './libs/timeago.js';
 import './components/vcard.js';
 import './plugins/flags.ts';
 import './plugins/sociale.js';
+import './plugins/components.ts';
 import '@popperjs/core'; // must be imported before bootstrap
 import './bootstrap';
 import './libs/axios-throttle.ts';

diff --git a/resources/js/components/github-star.vue b/resources/js/components/github-star.vue
@@ -0,0 +1,40 @@
+<template>
+    <iframe v-if="isLoaded"
+      src="https://ghbtns.com/github-btn.html?user=pradoslaw&repo=coyote&type=star&count=true&size=large"
+      frameborder="0"
+      scrolling="0"
+      width="120"
+      height="30"
+      title="GitHub"
+    ></iframe>
+</template>
+
+<script lang="js">
+
+export default {
+  data: () => ({
+    isLoaded: false,
+    isMounted: false,
+  }),
+  methods: {
+    handleLoad() {
+      this.isLoaded = true;
+    }
+  },
+  mounted() {
+    if (this.isMounted) {
+      return;
+    }
+
+    window.addEventListener('load', this.handleLoad)
+
+    this.isMounted = true;
+  },
+  unmounted() {
+    window.removeEventListener('load', this.handleLoad)
+
+    this.isMounted = false;
+    this.isLoaded = false;
+  }
+}
+</script>
diff --git a/resources/js/plugins/components.ts b/resources/js/plugins/components.ts
@@ -0,0 +1,9 @@
+import Vue from "vue";
+import VueGithubStar from "@/components/github-star.vue";
+
+new Vue({
+  el: '#navbar',
+  components: {
+    'vue-github-star': VueGithubStar,
+  },
+});
diff --git a/resources/views/layout.twig b/resources/views/layout.twig
@@ -57,7 +57,7 @@
         {{ form_open({url: route('logout'), name: 'logout-form'}) }}
         {{ form_close() }}
 
-        <nav class="navbar navbar-expand-lg {{ __dark_theme ? 'bg-dark navbar-dark' : 'bg-light navbar-light' }}">
+        <nav id="navbar" class="navbar navbar-expand-lg {{ __dark_theme ? 'bg-dark navbar-dark' : 'bg-light navbar-light' }}">
           <div class="container-xxl d-flex w-100 flex-wrap">
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mobile-menu">
             <span class="navbar-toggler-icon"></span>
@@ -87,12 +87,18 @@
                   {% endif %}
                 </li>
               {% endfor %}
+              <li class="d-block d-md-none">
+                <vue-github-star></vue-github-star>
+              </li>
             </ul>
           </div>
 
           <div id="js-searchbar" class="d-flex flex-grow-1 order-1">
             <vue-searchbar value="{{ input_get('q') }}"></vue-searchbar>
           </div>
+          <div class="d-none d-md-flex order-1 align-self-center">
+            <vue-github-star></vue-github-star>
+          </div>
 
           {% if auth_check() %}
             <ul id="nav-auth" class="nav-auth navbar-nav order-2"></ul>