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
+
+
+