Add versioned documentation

Reduce font size and expand width

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

_data/versions.json

@@ -0,0 +1,3 @@
+{
+  "current": "1.0"
+}

_includes/head_custom.html

@@ -6,3 +6,9 @@
   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>
 {% endif %}
+
+{% if jekyll.environment == "development" %}
+  <script src="{{ '/assets/js/version-selector.js' | relative_url }}"></script>
+{% else %}
+  <script src="{{ '/docs/latest/assets/js/version-selector.js' }}"></script>
+{% endif %}

_layouts/default.html

@@ -57,6 +57,10 @@ layout: table_wrappers
         </a>
       </div>
       <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
+        {% assign past_versions = site.data.versions.past | join: ";" %}
+        <div class="version-wrapper">
+          <version-selector selected="{{ site.data.versions.current }}"></version-selector>
+        </div>
         {% assign pages_top_size = site.html_pages
             | where_exp:"item", "item.title != nil"
             | where_exp:"item", "item.parent == nil"

_sass/color_schemes/opensearch.scss

@@ -1,3 +1,5 @@
+$content-width: 900px;
+
 //
 // Brand colors
 //

_sass/custom/custom.scss

@@ -60,7 +60,7 @@ code {
 }
 
 .site-nav {
-  padding-top: 2rem;
+  padding-top: 1rem;
 }
 
 .nav-category {
@@ -389,7 +389,7 @@ html {
 
 body {
   @include serif;
-  @include font-size(18);
+  @include font-size(16);
   background: $background-lightest;
   color: $text;
   line-height: 1.6;
@@ -962,6 +962,7 @@ main {
     line-height: 1.3;
     padding: 1px 0 6px;
     margin: .45em 0 .35em;
+    letter-spacing: -1px;
 
     @include mq(md) {
       @include font-size(32, true);
@@ -975,6 +976,7 @@ main {
     a {
       font-weight: 300;
       background: none;
+      color: $text-link-alternate;
 
       &:hover, :active {
         background: none;
@@ -1102,3 +1104,17 @@ main {
     }
   }
 }
+
+.version-wrapper {
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+version-selector {
+  z-index: 1;
+  font-size: .9rem;
+
+  --normal-bg: linear-gradient(#{lighten($blue-300, 5%)}, #{darken($blue-300, 2%)});
+  --hover-bg: linear-gradient(#{lighten($blue-300, 2%)}, #{darken($blue-300, 4%)});
+  --link-color: #{$blue-300};
+}

assets/js/_version-selector.js

@@ -0,0 +1,176 @@
+const PREFIX = "OpenSearch ";
+const tpl = `
+    <style>
+    :host {
+        display: inline-block;
+        position: relative;
+        box-sizing: border-box;
+        font-size: 1em;
+        user-select: none;
+        margin: 3px;
+        text-align: left;
+    }
+    
+    * {
+        box-sizing: border-box;
+    }
+    
+    #root {
+        text-decoration: none;
+        color: #FFFFFF;
+        background-color: #00509c;
+        background-image: var(--normal-bg);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
+        border-radius: 4px;
+        padding: 0.3em 3em 0.3em 1em;
+        margin: 0;
+        
+        position: relative;
+        display: block;
+        z-index: 2;
+        cursor: pointer;
+    }
+    
+    #root:hover {
+        background-image: var(--hover-bg);
+    }
+    
+    #root:focus:hover {
+        box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.25);
+    }
+    
+    #root:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        bottom: 5px;
+        width: 0;
+        border-width: 0 1px;
+        border-color: #000 rgba(0, 0, 0, .2) #000 rgba(255, 255, 255, .6);
+        right: 2em;
+        border-style: solid;
+        background-blend-mode: multiply;
+    }
+    
+    #root > svg {
+        position: absolute;
+        right: .5em;
+        top: .6em;
+    }
+    
+    #dropdown {
+        position: absolute;
+        min-width: calc(100% - 2px);
+        top: 100%;
+        left: 0;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
+        
+        margin: -5px 1px 0 1px;
+        padding-top: 5px;
+        white-space: nowrap;
+        border-radius: 0 0 4px 4px;
+        
+        background: #fff;
+        z-index: 1;
+    }
+    
+    :host(:not([aria-expanded="true"])) #dropdown {
+        display: none;
+    }
+    
+    #spacer {
+        appearance: none;
+        visibility: hidden;
+        pointer-events: none;
+        height: 0;
+        margin: 0 1px;
+        overflow: hidden;
+    }
+    
+    #spacer > a,
+    #dropdown > a {
+        display: block;
+        white-space: nowrap;
+        padding: 0.3em calc(3em - 1px) 0.3em calc(1em - 1px);
+        border-bottom: 1px solid #eee;
+        text-decoration: none;
+        color: var(--link-color);
+        position: relative;
+    }
+    
+    #dropdown > a:last-child {
+        border: 0;
+    }
+    
+    #dropdown > a:hover {
+        background: #efefef;
+    }
+    
+    a.latest:after {
+        content: "LATEST";
+        position: absolute;
+        right: .4rem;
+        font-size: 0.6em;
+        font-weight: 700;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #999;
+    }
+    </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>
+      <span id="selected"></span>
+    </a>
+    <div id="dropdown" role="navigation"></div>
+    <div id="spacer" aria-hidden="true"></div>
+`;
+
+class VersionSelector extends HTMLElement {
+    static get observedAttributes() {
+        return ['selected'];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this._onBlur = (e => {
+            this._expand(false);
+            this.removeEventListener('blur', this._onBlur);
+        }).bind(this);
+    }
+
+    async connectedCallback() {
+        const {shadowRoot} = this;
+        const frag = this._makeFragment(tpl);
+
+        frag.querySelector('#selected').textContent = `${PREFIX}${this.getAttribute('selected')}`;
+
+        const pathName = location.pathname.replace(/\/docs(\/((latest|\d+\.\d+)\/?)?)?/, '');
+        const versionsDOMText = DOC_VERSIONS.map((v, idx) => `<a href="/docs/${v}/${pathName}"${idx === 0 ? ' class="latest"' : ''}>${PREFIX}${v}</a>`)
+            .join('');
+
+        frag.querySelector('#dropdown').appendChild(this._makeFragment(versionsDOMText));
+        frag.querySelector('#spacer').appendChild(this._makeFragment(versionsDOMText));
+
+        shadowRoot.appendChild(frag);
+
+        this._instrument(shadowRoot);
+    }
+
+    _instrument(shadowRoot) {
+        shadowRoot.querySelector('#root').addEventListener('click', e => {
+            this._expand(this.getAttribute('aria-expanded') !== 'true');
+        });
+    }
+
+    _expand(flag) {
+        this.setAttribute('aria-expanded', flag);
+        if (flag) this.addEventListener('blur', this._onBlur);
+    }
+
+    _makeFragment(html) {
+        return document.createRange().createContextualFragment(html);
+    }
+}
+
+customElements.define('version-selector', VersionSelector);

assets/js/version-selector.tpl

@@ -0,0 +1,9 @@
+---
+permalink: /assets/js/version-selector.js
+---
+(() => {
+{% assign current_array = site.data.versions.current | split: '!' %}
+{% assign all_versions = current_array | concat: site.data.versions.past %}
+const DOC_VERSIONS = {{ all_versions | jsonify }};
+{% include_relative _version-selector.js %}
+})();