Add warning for stale version of documentation

Co-Authored-By: Philip Davies <philip.davies@thekeysupport.com> Rename latestVersion to isStale and use boolean Co-Authored-By: Austin Ziegler <austin@zieglers.ca> 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 <jose.valim@gmail.com> Update assets/css/sidebar.css Co-authored-by: José Valim <jose.valim@gmail.com>
elixir-lang · Jan 9, 2025 · a395784 · a395784
1 parent 878735d
commit a395784
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 2 deletions.
diff --git a/assets/css/custom-props/common.css b/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) {

diff --git a/assets/css/custom-props/theme-dark.css b/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);

diff --git a/assets/css/custom-props/theme-light.css b/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);

diff --git a/assets/css/sidebar.css b/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;

diff --git a/assets/js/handlebars/templates/versions-dropdown.handlebars b/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>
diff --git a/assets/js/sidebar/sidebar-version-select.js b/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