Add warning for stale version of documentation

Co-Authored-By: Philip Davies <[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, 80%, 50%);
+  --orange: hsl(30, 100%, 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(--orange);
   --sidebarSubheadings:          var(--black);
   --sidebarItem:                 var(--black);
   --sidebarInactiveItemBorder:   var(--gray500);

assets/css/sidebar.css

@@ -109,6 +109,19 @@
   display: none;
 }
 
+.sidebar .sidebar-staleVersion {
+    color: var(--sidebarStaleVersion);
+    padding-left: 28px;
+}
+
+.sidebar .sidebar-staleIcon {
+    color: var(--sidebarStaleVersion);
+    position: absolute;
+    top: 0.5px;
+    left: 10px;
+    font-size: 16px;
+}
+
 .sidebar .sidebar-list-nav {
   display: flex;
   margin: 0;

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

@@ -2,7 +2,10 @@
   <label>
     <span class="sidebar-projectVersionsDropdownCaret" aria-hidden="true">&#x25bc;</span>
     <span class="sr-only">Project version</span>
-    <select class="sidebar-projectVersionsDropdown">
+    {{#if latestVersion}}
+      <i class="ri-alert-line sidebar-staleIcon" aria-hidden="true"></i>
+    {{/if}}
+    <select class="sidebar-projectVersionsDropdown{{#if latestVersion}} sidebar-staleVersion{{/if}}"{{#if latestVersion}} title="This version is not the latest version of the package."{{/if}}>
       {{#each nodes}}
         <option translate="no" value="{{url}}"{{#if isCurrentVersion}} selected disabled{{/if}}>
           {{version}}

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

@@ -15,15 +15,19 @@ export function initialize () {
     const versionsContainer = qs(VERSIONS_CONTAINER_SELECTOR)
     // Initially the container contains only text with the current version
     const currentVersion = versionsContainer.textContent.trim()
+
+    const latestVersionNode = versionNodes.find(node => node.latest)
+    const latestVersion = latestVersionNode?.version !== currentVersion ? latestVersionNode?.version : null
+
     const nodes = decorateVersionNodes(versionNodes, currentVersion)
 
-    renderVersionsDropdown({ nodes })
+    renderVersionsDropdown({ nodes, latestVersion })
   }
 }
 
-function renderVersionsDropdown ({ nodes }) {
+function renderVersionsDropdown ({ nodes, latestVersion }) {
   const versionsContainer = qs(VERSIONS_CONTAINER_SELECTOR)
-  const versionsDropdownHtml = versionsDropdownTemplate({ nodes })
+  const versionsDropdownHtml = versionsDropdownTemplate({ nodes, latestVersion })
   versionsContainer.innerHTML = versionsDropdownHtml
 
   qs(VERSIONS_DROPDOWN_SELECTOR).addEventListener('change', handleVersionSelected)