stars

Author: pierre-b

src/components/Navigation.astro

@@ -31,29 +31,43 @@ import logoMedium from "../assets/logo/logo-medium.png"
 
       <!-- Desktop Actions -->
       <div class="hidden md:flex items-center space-x-4">
-        <a
-          href="https://github.com/notifuse/notifuse"
-          class="text-gray-600 hover:text-gray-900 transition-colors"
-        >
-          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-            <path
-              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-            ></path>
-          </svg>
-        </a>
+        <div class="pt-[7px]">
+          <a
+            class="github-button"
+            href="https://github.com/notifuse/notifuse"
+            data-color-scheme="no-preference: light; light: light; dark: light;"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star notifuse/notifuse on GitHub"
+          >
+            Star
+          </a>
+        </div>
         <a
           href="https://docs.notifuse.com/installation"
           class="bg-primary text-white px-4 py-1 rounded-md hover:bg-primary/80 transition-colors"
           >Get Started</a
         >
       </div>
 
-      <!-- Mobile Menu Button -->
-      <div class="md:hidden">
+      <!-- Mobile Actions -->
+      <div class="md:hidden flex items-center gap-6">
+        <div class="pt-[7px]">
+          <a
+            class="github-button"
+            href="https://github.com/notifuse/notifuse"
+            data-color-scheme="no-preference: light; light: light; dark: light;"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star notifuse/notifuse on GitHub"
+          >
+            Star
+          </a>
+        </div>
         <button
           type="button"
           id="mobile-menu-button"
-          class="text-gray-600 hover:text-gray-900 transition-colors"
+          class="text-gray-600 hover:text-gray-900 transition-colors flex items-center"
           aria-label="Open menu"
         >
           <svg
@@ -109,15 +123,14 @@ import logoMedium from "../assets/logo/logo-medium.png"
         >
         <div class="pt-4 border-t border-gray-200 space-y-4">
           <a
+            class="github-button"
             href="https://github.com/notifuse/notifuse"
-            class="flex items-center text-gray-600 hover:text-gray-900 transition-colors"
+            data-color-scheme="no-preference: light; light: light; dark: light;"
+            data-size="large"
+            data-show-count="true"
+            aria-label="Star notifuse/notifuse on GitHub"
           >
-            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
-              <path
-                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-              ></path>
-            </svg>
-            GitHub
+            Star
           </a>
           <a
             href="#"
@@ -130,6 +143,8 @@ import logoMedium from "../assets/logo/logo-medium.png"
   </div>
 </nav>
 
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+
 <script>
   document.addEventListener("DOMContentLoaded", function () {
     const mobileMenuButton = document.getElementById("mobile-menu-button")