Added Github Star as Vue component

pradoslaw · Aug 24, 2023 · a94ecef · a94ecef
1 parent 746cab3
commit a94ecef
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
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,31 @@
+<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,
+  }),
+  mounted() {
+    if (this.isMounted) {
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      this.isLoaded = true;
+    })
+
+    this.isMounted = true;
+  }
+}
+</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
@@ -51,7 +51,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>
@@ -81,22 +81,17 @@
                   {% 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 id="github-star" class="d-flex order-1 align-self-center">
-            <iframe
-            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>
+          <div class="d-none d-md-flex order-1 align-self-center">
+            <vue-github-star></vue-github-star>
           </div>
 
           {% if auth_check() %}