diff --git a/sass/_valkey.scss b/sass/_valkey.scss index df1222ce..d0c5d6a1 100644 --- a/sass/_valkey.scss +++ b/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; @@ -173,16 +173,16 @@ p { >a { &:hover, &.active { - border-color: inherit; + 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; } diff --git a/static/assets/js/nav.js b/static/assets/js/nav.js index f90a8e05..8f82ecd8 100644 --- a/static/assets/js/nav.js +++ b/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(); }); diff --git a/templates/default.html b/templates/default.html index 66f404ef..8783c635 100644 --- a/templates/default.html +++ b/templates/default.html @@ -57,6 +57,12 @@ Community Participants Try Valkey + + GitHub Icon + GitHub + + +