Add warning for stale version of documentation (#2012)

Author: alisinabh

assets/css/custom-props/common.css

@@ -52,6 +52,8 @@
   --black: hsl(0, 0%, 0%);
   --black-opacity-10: hsla(0, 0%, 0%, 10%);
   --black-opacity-50: hsla(0, 0%, 0%, 50%);
+  --orangeDark: hsl(30, 90%, 40%);
+  --orangeLight: hsl(30, 80%, 50%);
 }
 
 @media screen and (max-width: 768px) {

assets/css/custom-props/theme-dark.css

@@ -80,6 +80,7 @@ body.dark {
   --sidebarHover:                var(--white);
   --sidebarScrollbarThumb:       var(--coldGray);
   --sidebarScrollbarTrack:       var(--sidebarBackground);
+  --sidebarStaleVersion:         var(--orangeLight);
   --sidebarSubheadings:          var(--gray400);
   --sidebarItem:                 var(--gray200);
   --sidebarInactiveItemBorder:   var(--gray400);

assets/css/custom-props/theme-light.css

@@ -80,6 +80,7 @@
   --sidebarHover:                var(--black);
   --sidebarScrollbarThumb:       var(--coldGrayLight);
   --sidebarScrollbarTrack:       var(--sidebarBackground);
+  --sidebarStaleVersion:         var(--orangeDark);
   --sidebarSubheadings:          var(--black);
   --sidebarItem:                 var(--black);
   --sidebarInactiveItemBorder:   var(--gray500);

assets/css/sidebar.css

@@ -109,6 +109,22 @@
   display: none;
 }
 
+.sidebar .sidebar-staleVersion {
+    display: inline;
+}
+
+.sidebar .sidebar-staleVersion > a {
+    color: var(--sidebarStaleVersion);
+    font-weight: 400;
+}
+
+.sidebar .sidebar-staleIcon {
+    font-size: 18px;
+    position: relative;
+    top: 3px;
+    line-height: 0;
+}
+
 .sidebar .sidebar-list-nav {
   display: flex;
   margin: 0;

assets/js/handlebars/templates/versions-dropdown.handlebars

@@ -10,4 +10,12 @@
       {{/each}}
     </select>
   </label>
+  {{#if latestVersion}}
+    <div class="sidebar-staleVersion">
+      <a href="{{latestVersion}}" title="This version of package is not the latest version">
+        <i class="ri-alert-line sidebar-staleIcon" aria-hidden="true"></i>
+        <span>Go to latest</span>
+      </a>
+    </div>
+  {{/if}}
 </form>

assets/js/sidebar/sidebar-version-select.js

@@ -26,12 +26,32 @@ if (!isEmbedded) {
       isCurrentVersion: node.version === currentVersion
     }))
 
-    versionsContainer.innerHTML = versionsDropdownTemplate({ nodes })
+    const latestVersionNode = versionNodes.find(node => node.latest)
+    const latestVersion = latestVersionNode?.version !== currentVersion ? latestVersionNode?.url : null
 
-    qs(VERSIONS_DROPDOWN_SELECTOR).addEventListener('change', handleVersionSelected)
+    versionsContainer.innerHTML = versionsDropdownTemplate({ nodes, latestVersion})
+
+    const select = qs(VERSIONS_DROPDOWN_SELECTOR)
+    select.addEventListener('change', handleVersionSelected)
+    adjustWidth(select)
   }
 }
 
+// Function to adjust the width of the select element
+function adjustWidth (select) {
+  // Create a temporary element to measure the width
+  const temp = document.createElement('span')
+  temp.style.visibility = 'hidden'
+  temp.style.position = 'absolute'
+  temp.style.whiteSpace = 'nowrap'
+  temp.style.font = window.getComputedStyle(select).font
+  temp.textContent = select.options[select.selectedIndex].text
+
+  document.body.appendChild(temp)
+  select.style.width = `${temp.offsetWidth + 20}px`
+  document.body.removeChild(temp)
+}
+
 function handleVersionSelected (event) {
   const url = event.target.value
   const pathSuffix = window.location.pathname.split('/').pop() + window.location.hash