feat: Add GitHub button to navigation bar (#291)

feat: Add GitHub button to navigation bar

<img width="1728" alt="Screenshot 2025-07-03 at 10 00 44 PM"
src="https://github.com/user-attachments/assets/4442cbe5-e93d-46be-b283-d3a2ddd6095c"
/>

---------

Signed-off-by: Daniel Phillips <phiro56@gmail.com>
Signed-off-by: Madelyn Olson <madelyneolson@gmail.com>
Co-authored-by: Madelyn Olson <madelyneolson@gmail.com>

Author: phiro56

sass/_valkey.scss

@@ -119,7 +119,7 @@ p {
     width: 100%;
     padding: 10px;
 
-    @include respond-min(768px) {
+    @include respond-min(1024px) {
       padding: 0 20px;
     }
   }
@@ -163,7 +163,7 @@ p {
       padding: .5rem 0;
       border-bottom: none;
 
-      @include respond-min(768px) {
+      @include respond-min(1024px) {
         border-bottom: 3px solid;
         padding: 1rem 0;
         border-color: transparent;
@@ -176,13 +176,13 @@ p {
         border-color: inherit;
         text-decoration: underline;
 
-        @include respond-min(768px) {
+        @include respond-min(1024px) {
           text-decoration: none;
         }
       }
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 1024px) {
       display: none;
       gap: 1rem;
 
@@ -212,6 +212,50 @@ p {
         }
       }
     }
+
+    .github-button {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem 1rem !important;
+      background-color: #f8f9fa;
+      border: 1px solid #dfe1e4;
+      border-radius: 6px;
+      color: #444;
+      text-decoration: none;
+      transition: all 0.2s ease;
+
+      img {
+        filter: brightness(0) saturate(100%) invert(27%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
+        margin-right: 0.5rem;
+      }
+
+      .star-count {
+        background: #f1f5f9;
+        color: #64748b;
+        font-size: 12px;
+        padding: 2px 6px;
+        border-radius: 10px;
+        margin-left: 0;
+        font-weight: 500;
+        white-space: nowrap;
+        border: 1px solid #e2e8f0;
+        transition: all 0.2s;
+      }
+
+      &:hover {
+        background-color: #e9ecef;
+        border-color: #dee2e6;
+        text-decoration: none;
+        border-bottom-color: #e9ecef;
+      }
+
+      @media (max-width: 1024px) {
+        padding: 0.75rem 1rem !important;
+        margin-top: 0.5rem;
+        justify-content: center;
+        text-align: center;
+      }
+    }
   }
   .btn-menu {
     display: none;
@@ -240,7 +284,7 @@ p {
       transition-duration: .2s;
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 1024px) {
       display: flex;
     }
   }
@@ -251,7 +295,7 @@ p {
   display: block;
   align-items: center;
 
-  @include respond-min(768px) {
+  @include respond-min(1024px) {
     display: flex;
   }
 
@@ -273,7 +317,7 @@ p {
     &:hover {
       text-decoration: underline;
 
-      @include respond-min(768px) {
+      @include respond-min(1024px) {
         text-decoration: none;
       }
     }
@@ -290,7 +334,7 @@ p {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     padding: .25rem 0;
 
-    @include respond-min(768px) {
+    @include respond-min(1024px) {
       display: none;
     }
 

static/assets/js/nav.js

@@ -6,6 +6,45 @@ window.toggleHeaderMenu = function() {
     }
 };
 
+// Fetch and display GitHub stars count
+async function fetchGitHubStars() {
+    try {
+        const response = await fetch('https://api.github.com/repos/valkey-io/valkey');
+        if (response.ok) {
+            const data = await response.json();
+            const starCount = data.stargazers_count;
+            
+            // Find the GitHub button and add star count
+            const githubButton = document.querySelector('.github-button');
+            if (githubButton) {
+                // Create star count element if it doesn't exist
+                let starCountElement = githubButton.querySelector('.star-count');
+                if (!starCountElement) {
+                    starCountElement = document.createElement('span');
+                    starCountElement.className = 'star-count';
+                    starCountElement.style.cssText = `
+                        background: #f1f5f9;
+                        color: #64748b;
+                        font-size: 12px;
+                        padding: 2px 6px;
+                        border-radius: 10px;
+                        margin-left: 6px;
+                        font-weight: 500;
+                        white-space: nowrap;
+                    `;
+                    githubButton.appendChild(starCountElement);
+                }
+                
+                // Format the number with K for thousands
+                const formattedCount = starCount >=100? (starCount / 1000).toFixed(1) + 'k' : starCount.toString();
+                starCountElement.textContent = `${formattedCount} ★`;
+            }
+        }
+    } catch (error) {
+        console.log('Could not fetch GitHub stars:', error);
+    }
+}
+
 // Banner close functionality
 function initBannerClose() {
     const banner = document.querySelector('.banner');
@@ -47,6 +86,7 @@ function setActiveMenuItem() {
 // Run when DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
     setActiveMenuItem();
+    fetchGitHubStars();
     initBannerClose();
 });
 

templates/default.html

@@ -57,6 +57,12 @@
         <a role="menuitem" href="/community/">Community</a>
         <a role="menuitem" href="/participants/">Participants</a>
         <a role="menuitem" href="/try-valkey/">Try Valkey</a>
+        <a role="menuitem" href="https://github.com/valkey-io" target="_blank" class="github-button">
+          <img src="/img/IconGithub.svg" alt="GitHub Icon" width="16" height="16" />
+          GitHub
+          <!-- Star count will be injected here by JS -->
+        </a>
+        
       </nav>
     </div>
   </div>