Add warning for stale version of documentation

Co-Authored-By: Philip Davies <[email protected]>

Rename latestVersion to isStale and use boolean

Co-Authored-By: Austin Ziegler <[email protected]>

Revert "Rename latestVersion to isStale and use boolean"

This reverts commit 8ef47f0.

Use "Go to latest" link

Use actual URL for Go to latest link

Adjust select width

Fix openVersionSelect function

Revert "Adjust select width"

This reverts commit 5835e2e.

Use width calculation select width

Update assets/css/sidebar.css

Co-authored-by: José Valim <[email protected]>

Update assets/css/sidebar.css

Co-authored-by: José Valim <[email protected]>

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(--orangeDark);
   --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(--orangeLight);
   --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