docs(ui): sorting version (#20181) (#20203)

Signed-off-by: nueavv <nuguni@kakao.com>
Co-authored-by: 1102 <90682513+nueavv@users.noreply.github.com>

docs/assets/versions.js

@@ -32,30 +32,100 @@ function initializeVersionDropdown() {
   window[callbackName] = function(response) {
     const div = document.createElement('div');
     div.innerHTML = response.html;
-    document.querySelector(".md-header__inner > .md-header__title").appendChild(div);
+    const headerTitle = document.querySelector(".md-header__inner > .md-header__title");
+    if (headerTitle) {
+      headerTitle.appendChild(div);
+    }
+
     const container = div.querySelector('.rst-versions');
+    if (!container) return; // Exit if container not found
+
+    // Add caret icon
     var caret = document.createElement('div');
     caret.innerHTML = "<i class='fa fa-caret-down dropdown-caret'></i>";
     caret.classList.add('dropdown-caret');
-    div.querySelector('.rst-current-version').appendChild(caret);
+    const currentVersionElem = div.querySelector('.rst-current-version');
+    if (currentVersionElem) {
+      currentVersionElem.appendChild(caret);
+    }
 
-    div.querySelector('.rst-current-version').addEventListener('click', function() {
-      container.classList.toggle('shift-up');
-    });
+    // Add click listener to toggle dropdown
+    if (currentVersionElem && container) {
+      currentVersionElem.addEventListener('click', function() {
+        container.classList.toggle('shift-up');
+      });
+    }
+
+    // Sorting Logic
+    sortVersionLinks(container);
   };
 
+  // Load CSS
   var CSSLink = document.createElement('link');
   CSSLink.rel = 'stylesheet';
   CSSLink.href = '/assets/versions.css';
   document.getElementsByTagName('head')[0].appendChild(CSSLink);
 
+  // Load JSONP Script
   var script = document.createElement('script');
   const currentVersion = getCurrentVersion();
   script.src = 'https://argo-cd.readthedocs.io/_/api/v2/footer_html/?' +
       'callback=' + callbackName + '&project=argo-cd&page=&theme=mkdocs&format=jsonp&docroot=docs&source_suffix=.md&version=' + (currentVersion || 'latest');
   document.getElementsByTagName('head')[0].appendChild(script);
 }
 
+// Function to sort version links
+function sortVersionLinks(container) {
+  // Find all <dl> elements within the container
+  const dlElements = container.querySelectorAll('dl');
+
+  dlElements.forEach(dl => {
+    const dt = dl.querySelector('dt');
+    if (dt && dt.textContent.trim().toLowerCase() === 'versions') {
+      // Found the Versions <dl>
+      const ddElements = Array.from(dl.querySelectorAll('dd'));
+
+      // Define sorting criteria
+      ddElements.sort((a, b) => {
+        const aText = a.textContent.trim().toLowerCase();
+        const bText = b.textContent.trim().toLowerCase();
+
+        // Prioritize 'latest' and 'stable'
+        if (aText === 'latest') return -1;
+        if (bText === 'latest') return 1;
+        if (aText === 'stable') return -1;
+        if (bText === 'stable') return 1;
+
+        // Extract version numbers (e.g., release-2.9)
+        const aVersionMatch = aText.match(/release-(\d+(\.\d+)*)/);
+        const bVersionMatch = bText.match(/release-(\d+(\.\d+)*)/);
+
+        if (aVersionMatch && bVersionMatch) {
+          const aVersion = aVersionMatch[1].split('.').map(Number);
+          const bVersion = bVersionMatch[1].split('.').map(Number);
+
+          for (let i = 0; i < Math.max(aVersion.length, bVersion.length); i++) {
+            const aNum = aVersion[i] || 0;
+            const bNum = bVersion[i] || 0;
+            if (aNum > bNum) return -1;
+            if (aNum < bNum) return 1;
+          }
+          return 0;
+        }
+
+        // Fallback to alphabetical order
+        return aText.localeCompare(bText);
+      });
+
+      // Remove existing <dd> elements
+      ddElements.forEach(dd => dl.removeChild(dd));
+
+      // Append sorted <dd> elements
+      ddElements.forEach(dd => dl.appendChild(dd));
+    }
+  });
+}
+
 // VERSION WARNINGS
 window.addEventListener("DOMContentLoaded", function() {
   var margin = 30;