Merge branch 'main' into release/v25.0

Author: raphael-istari

themes/hugo-docs/layouts/partials/topbar.html

@@ -12,6 +12,9 @@
       </div>
     </a>
     <nav role="navigation" class="dgraph-menu">
+
+      {{ partial "version-selector.html" . }}
+
       <div class="nav_buttons-inside">
       {{ partial "theme-toggle.html" (dict "showLabel" false) }}
         <!--div class="nav_button_wrapper">

themes/hugo-docs/layouts/partials/version-selector.html

@@ -1,9 +1,9 @@
 <!-- layouts/partials/version-selector.html -->
 <div class="version-selector">
-    <button class="version-button" id="versionButton">
+    <button class="version-button" id="versionButton" type="button">
       <span id="currentVersion">Loading...</span>
-      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-        <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="2"/>
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="version-arrow">
+        <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
     <div class="version-dropdown" id="versionDropdown">
@@ -17,40 +17,80 @@
   .version-selector {
     position: relative;
     display: inline-block;
+    outline: none !important;
+  }
+  
+  .version-selector span,
+  .version-selector svg {
+    outline: none !important;
   }
 
   .version-button {
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    background: #f5f5f5;
-    border: 1px solid #ddd;
-    border-radius: 6px;
+    gap: 6px;
+    padding: 0;
+    background: none;
+    border: none;
     cursor: pointer;
     font-size: 14px;
-    font-weight: 500;
-    transition: all 0.2s;
+    font-weight: 400;
+    color: inherit;
+    transition: opacity 0.2s;
+    font-family: inherit;
+    outline: none !important;
+    box-shadow: none !important;
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    -webkit-focus-ring-color: transparent !important;
+    -webkit-tap-highlight-color: transparent !important;
   }
 
   .version-button:hover {
-    background: #e8e8e8;
-    border-color: #ccc;
+    opacity: 0.7;
+  }
+  
+  .version-button:focus,
+  .version-button:focus-visible,
+  .version-button:focus-within,
+  .version-button:active {
+    outline: none !important;
+    box-shadow: none !important;
+    border: none !important;
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    -webkit-focus-ring-color: transparent !important;
+    -webkit-tap-highlight-color: transparent !important;
+  }
+  .version-arrow {
+    transition: transform 0.2s, opacity 0.2s;
+    opacity: 0.6;
+  }
+  
+  .version-button:hover .version-arrow {
+    opacity: 0.8;
+  }
+  
+  .version-selector.active .version-arrow {
+    transform: rotate(180deg);
+    opacity: 0.8;
   }
 
   .version-dropdown {
     position: absolute;
-    top: calc(100% + 4px);
+    top: calc(100% + 8px);
     left: 0;
     min-width: 200px;
     background: white;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     opacity: 0;
     visibility: hidden;
-    transform: translateY(-8px);
-    transition: all 0.2s;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
     z-index: 1000;
   }
 
@@ -61,16 +101,17 @@
   }
 
   .version-list {
-    padding: 8px 0;
+    padding: 4px 0;
   }
 
   .version-item {
     display: block;
     padding: 10px 16px;
     color: #333;
     text-decoration: none;
-    transition: background 0.2s;
+    transition: background 0.15s;
     cursor: pointer;
+    font-size: 14px;
   }
 
   .version-item:hover {
@@ -80,7 +121,51 @@
   .version-item.active {
     background: #e3f2fd;
     color: #1976d2;
-    font-weight: 600;
+    font-weight: 500;
+  }
+  
+  /* Dark mode styles using .dark-blog selector */
+  .dark-blog .version-dropdown {
+    background: #2a2a2a;
+    border-color: #444;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+  
+  .dark-blog .version-item {
+    color: #ffffff;
+  }
+  
+  .dark-blog .version-item:hover {
+    background: #3a3a3a;
+    color: #ffffff;
+  }
+  
+  .dark-blog .version-item.active {
+    background: #1a3a5c;
+    color: #64b5f6;
+    font-weight: 500;
+  }
+  
+  /* Also support [data-theme="dark"] for compatibility */
+  [data-theme="dark"] .version-dropdown {
+    background: #2a2a2a;
+    border-color: #444;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  }
+  
+  [data-theme="dark"] .version-item {
+    color: #ffffff;
+  }
+  
+  [data-theme="dark"] .version-item:hover {
+    background: #3a3a3a;
+    color: #ffffff;
+  }
+  
+  [data-theme="dark"] .version-item.active {
+    background: #1a3a5c;
+    color: #64b5f6;
+    font-weight: 500;
   }
   </style>
 
@@ -94,31 +179,70 @@
     // Get current path to determine active version
     function getCurrentVersion() {
       const path = window.location.pathname;
-      const match = path.match(/^\/(v[\d.]+)\//);
-      return match ? match[1] : 'latest';
+      // Check for versioned path like /v24.1/ or /v25.0/
+      const versionMatch = path.match(/^\/(v[\d.]+)\//);
+      if (versionMatch) {
+        return versionMatch[1];
+      }
+      // If no version in path, check if we're at root
+      // Root path should match "main" version
+      return 'main';
+    }
+    
+    // Find current version by matching URL or version key
+    function findCurrentVersion(data) {
+      const currentPath = window.location.pathname;
+      
+      // First try to match by version key
+      const currentVersionKey = getCurrentVersion();
+      let versionData = data.versions.find(v => v.version === currentVersionKey);
+      
+      // If not found, try to match by URL
+      if (!versionData) {
+        versionData = data.versions.find(v => {
+          const url = v.url.replace(/\/$/, '') || '/';
+          const normalizedPath = currentPath.replace(/\/$/, '') || '/';
+          return normalizedPath === url || normalizedPath.startsWith(url + '/');
+        });
+      }
+      
+      // If still not found, try to match if path starts with version URL
+      if (!versionData) {
+        versionData = data.versions.find(v => {
+          const url = v.url.replace(/\/$/, '') || '/';
+          return currentPath.startsWith(url);
+        });
+      }
+      
+      return versionData || data.versions[0]; // Fallback to first version
     }
 
     // Load versions from versions.json
     async function loadVersions() {
       try {
-        // Determine the base URL for versions.json
-        const path = window.location.pathname;
-        const versionMatch = path.match(/^\/(v[\d.]+)\//);
-        const baseUrl = versionMatch ? `/${versionMatch[1]}` : '';
-        
         const response = await fetch('/versions.json');
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
         const data = await response.json();
-        const currentVersion = getCurrentVersion();
 
-        // Update current version display
-        const currentVersionData = data.versions.find(v => v.version === currentVersion);
+        if (!data.versions || data.versions.length === 0) {
+          throw new Error('No versions found in versions.json');
+        }
+        
+        // Find and display current version
+        const currentVersionData = findCurrentVersion(data);
         if (currentVersionData) {
           currentVersionSpan.textContent = currentVersionData.title;
+        } else {
+          currentVersionSpan.textContent = data.versions[0].title;
         }
 
         // Populate version list
+        const currentVersionKey = getCurrentVersion();
         versionList.innerHTML = data.versions.map(version => {
-          const isActive = version.version === currentVersion;
+          const isActive = version.version === currentVersionKey || 
+                          (currentVersionData && version.version === currentVersionData.version);
           return `
             <a href="${version.url}" class="version-item ${isActive ? 'active' : ''}">
               ${version.title}
@@ -135,12 +259,15 @@
     // Toggle dropdown
     button.addEventListener('click', (e) => {
       e.stopPropagation();
-      dropdown.classList.toggle('active');
+      const isActive = dropdown.classList.toggle('active');
+      // Toggle active class on parent for arrow rotation
+      button.closest('.version-selector').classList.toggle('active', isActive);
     });
 
     // Close dropdown when clicking outside
     document.addEventListener('click', () => {
       dropdown.classList.remove('active');
+      button.closest('.version-selector').classList.remove('active');
     });
 
     // Prevent dropdown from closing when clicking inside
@@ -151,4 +278,5 @@
     // Load versions on page load
     loadVersions();
   })();
+  </script>
   </script>

themes/hugo-docs/static/css/theme.css

@@ -2531,17 +2531,6 @@ body:not(.dark-blog) .single-footer .legal-notices-wrap:hover .legal-notices {
   color: #ef265a;
 }
 
-.version-selector {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 24px;
-  color: #100c19;
-  padding: 14px;
-  border: 1px solid #f4f4f4;
-  border-radius: 8px;
-  outline: none;
-}
 
 @media all and (min-width:1024px) {
   .single-footer {
@@ -2595,10 +2584,7 @@ body:not(.dark-blog) .single-footer .legal-notices-wrap:hover .legal-notices {
     display: none;
   }
 
-  .version-selector {
-    font-size: 14px;
-    padding: 10px 12px;
-  }
+  
 
   .dgraph-logo-wrap {
     margin-bottom: 60px;