Allow limiting the versions shown by default in the `version-selector` (#3773)

* Allow limiting the versions shown by default in the `version-selector`

Signed-off-by: Miki <miki@amazon.com>

* Add archived versions

* Update versions.json

* Add archived versions for version selector.tpl

* Switch back to old versions

---------

Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: Naarcha-AWS <97990722+Naarcha-AWS@users.noreply.github.com>
Co-authored-by: Naarcha-AWS <97990722+Naarcha-AWS@users.noreply.github.com>

_data/versions.json

@@ -2,6 +2,9 @@
   "current": "2.7",
   "all": [
     "2.7",
+    "1.3"
+  ],
+  "archived": [
     "2.6",
     "2.5",
     "2.4",
@@ -9,10 +12,11 @@
     "2.2",
     "2.1",
     "2.0",
-    "1.3",
     "1.2",
     "1.1",
     "1.0"
-  ],
+    ],
   "latest": "2.7"
-}
+}
+
+

_sass/custom/custom.scss

@@ -1418,8 +1418,7 @@ main {
 version-selector {
   z-index: 1;
   font-size: .9rem;
-  padding-top: 1rem;
+  margin: 1.5rem 3px;
-  padding-bottom: 1rem;
 
   --normal-bg: linear-gradient(#{lighten($blue-300, 5%)}, #{darken($blue-300, 2%)});
   --hover-bg: linear-gradient(#{lighten($blue-300, 2%)}, #{darken($blue-300, 4%)});

assets/js/_version-selector.js

@@ -1,9 +1,10 @@
 /* During build, DOC_VERSIONS is prefixed to convey all the versions available, informed by `_data/versions.json`
  * Example:
- *    const DOC_VERSIONS = ["1.1","1.0"];
+ *    const DOC_VERSIONS = ["2.1","1.1"];
+ *    const DOC_VERSIONS_ARCHIVED = ["2.0","1.0"];
  *
  * DOC_VERSION_LATEST will pick `latest`, or in its absence the `current` version.
- *    const DOC_VERSION_LATEST = "2.0";
+ *    const DOC_VERSION_LATEST = "2.1";
  */
 const PREFIX = "OpenSearch ";
 const tpl = `
@@ -108,6 +109,7 @@ const tpl = `
         text-decoration: none;
         color: var(--link-color);
         position: relative;
+        line-height: 1.6em;
     }
     
     #dropdown > a:last-child {
@@ -128,6 +130,38 @@ const tpl = `
         transform: translateY(-50%);
         color: #999;
     }
+    
+    #spacer > a.archived,
+    #spacer > a.show-archived,
+    #dropdown > a.archived,
+    #dropdown > a.show-archived {
+        font-size: .8em;
+        text-transform: uppercase;
+        color: #999;
+        font-weight: 700;
+        line-height: 2em;
+        display: flex;
+        align-items: center;
+        padding-top: .375em;
+        padding-bottom: .375em;
+        padding-left: calc(1.25em - 1px);
+        gap: .3em;
+        cursor: pointer;
+    }
+    
+    #dropdown > a.show-archived {
+        border: 0;
+    }
+    
+    #dropdown > a.show-archived ~ a,
+    #dropdown > a.show-archived[aria-expanded="true"] {
+        display: none;
+        cursor: unset;
+    }
+    
+    #dropdown > a.show-archived[aria-expanded="true"] ~ a {
+        display: block;
+    }
     </style>
     <a id="root" role="button" aria-labelledby="selected" aria-controls="dropdown" tabindex="0">
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6-6"/></g></svg>
@@ -158,8 +192,16 @@ class VersionSelector extends HTMLElement {
         frag.querySelector('#selected').textContent = `${PREFIX}${this.getAttribute('selected')}.x`;
 
         const pathName = location.pathname.replace(/\/docs(\/((latest|\d+\.\d+)\/?)?)?/, '');
-        const versionsDOMText = DOC_VERSIONS.map((v, idx) => `<a href="/docs/${v}/${pathName}"${v === DOC_VERSION_LATEST ? ' class="latest"' : ''}>${PREFIX}${v}.x</a>`)
+        const versionsDOMNodes = DOC_VERSIONS.map((v, idx) => `<a href="/docs/${v}/${pathName}"${v === DOC_VERSION_LATEST ? ' class="latest"' : ''}>${PREFIX}${v}.x</a>`);
-            .join('');
+        if (Array.isArray(DOC_VERSIONS_ARCHIVED) && DOC_VERSIONS_ARCHIVED.length) {
+            versionsDOMNodes.push(
+                `<a class="show-archived"><span>Show archived</span><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6-6"/></g></svg></a>`,
+                `<a class="archived">Archived</a>`,
+                ...DOC_VERSIONS_ARCHIVED.map((v, idx) => `<a href="/docs/${v}/${pathName}">${PREFIX}${v}.x</a>`)
+            );
+        }
+
+        const versionsDOMText = versionsDOMNodes.join('');
 
         frag.querySelector('#dropdown').appendChild(this._makeFragment(versionsDOMText));
         frag.querySelector('#spacer').appendChild(this._makeFragment(versionsDOMText));
@@ -174,6 +216,11 @@ class VersionSelector extends HTMLElement {
             this._expand(this.getAttribute('aria-expanded') !== 'true');
         });
 
+        const showNode = shadowRoot.querySelector('#dropdown .show-archived');
+        showNode?.addEventListener('click', e => {
+            showNode.setAttribute('aria-expanded', 'true');
+        });
+
         /* On some devices, `blur` is fired on the component before navigation occurs when choosing a version from the
          * dropdown; this ends up hiding the dropdown and preventing the navigation. The `pointerup` on the anchor
          * element is always fired before the `blur` is dispatched on the component and that is used here to trigger
@@ -181,6 +228,7 @@ class VersionSelector extends HTMLElement {
          */
         shadowRoot.querySelector('#dropdown').addEventListener('pointerup', e => {
             const {target} = e;
+            e.preventDefault();
             if (target.matches('a[href]') && target.href) document.location.href = target.href;
         });
     }
@@ -195,4 +243,4 @@ class VersionSelector extends HTMLElement {
     }
 }
 
-customElements.define('version-selector', VersionSelector);
+customElements.define('version-selector', VersionSelector);

assets/js/version-selector.tpl

@@ -9,10 +9,11 @@ permalink: /assets/js/version-selector.js
 {% assign all_versions = current_array | concat: site.data.versions.all %}
 {% endif %}
 const DOC_VERSIONS = {{ all_versions | jsonify }};
+const DOC_VERSIONS_ARCHIVED = {{ site.data.versions.archived | jsonify }};
 {% if site.data.versions.latest %}
 const DOC_VERSION_LATEST = {{ site.data.versions.latest | jsonify }};
 {% else %}
 const DOC_VERSION_LATEST = {{ site.data.versions.current | jsonify }};
 {% endif %}
 {% include_relative _version-selector.js %}
-})();
+})();