Merge pull request #210 from AMoo-Miki/1.0

Add 1.1 release header

_clients/go.md

@@ -0,0 +1,145 @@
+---
+layout: default
+title: Go client
+nav_order: 80
+---
+
+# Go client
+
+The OpenSearch Go client lets you connect your Go application with the data in your OpenSearch cluster.
+
+
+## Setup
+
+If you're creating a new project:
+
+```go
+go mod init
+```
+
+To add the client to your project, import it like any other module:
+
+```go
+go get github.com/opensearch-project/opensearch-go
+```
+
+## Sample code
+
+This sample code creates a client, adds an index with non-default settings, inserts a document, searches for the document, deletes the document, and finally deletes the index:
+
+```go
+package main
+import (
+    "os"
+    "context"
+    "crypto/tls"
+    "fmt"
+    opensearch "github.com/opensearch-project/opensearch-go"
+    opensearchapi "github.com/opensearch-project/opensearch-go/opensearchapi"
+    "net/http"
+    "strings"
+)
+const IndexName = "go-test-index1"
+func main() {
+    // Initialize the client with SSL/TLS enabled.
+    client, err := opensearch.NewClient(opensearch.Config{
+        Transport: &http.Transport{
+            TLSClientConfig: &tls.Config{InsecureSkipVerify: true},
+        },
+        Addresses: []string{"https://localhost:9200"},
+        Username:  "admin", // For testing only. Don't store credentials in code.
+        Password:  "admin",
+    })
+    if err != nil {
+        fmt.Println("cannot initialize", err)
+        os.Exit(1)
+    }
+
+    // Print OpenSearch version information on console.
+    fmt.Println(client.Info())
+
+    // Define index mapping.
+    mapping := strings.NewReader(`{
+     'settings': {
+       'index': {
+            'number_of_shards': 4
+            }
+          }
+     }`)
+
+    // Create an index with non-default settings.
+    res := opensearchapi.CreateRequest{
+        Index: IndexName,
+        Body:  mapping,
+    }
+    fmt.Println("creating index", res)
+
+    // Add a document to the index.
+    document := strings.NewReader(`{
+        "title": "Moneyball",
+        "director": "Bennett Miller",
+        "year": "2011"
+    }`)
+
+    docId := "1"
+    req := opensearchapi.IndexRequest{
+        Index:      IndexName,
+        DocumentID: docId,
+        Body:       document,
+    }
+    insertResponse, err := req.Do(context.Background(), client)
+    if err != nil {
+        fmt.Println("failed to insert document ", err)
+        os.Exit(1)
+    }
+    fmt.Println(insertResponse)
+
+    // Search for the document.
+    content := strings.NewReader(`{
+       "size": 5,
+       "query": {
+           "multi_match": {
+           "query": "miller",
+           "fields": ["title^2", "director"]
+           }
+      }
+    }`)
+
+    search := opensearchapi.SearchRequest{
+        Body: content,
+    }
+
+    searchResponse, err := search.Do(context.Background(), client)
+    if err != nil {
+        fmt.Println("failed to search document ", err)
+        os.Exit(1)
+    }
+    fmt.Println(searchResponse)
+
+    // Delete the document.
+    delete := opensearchapi.DeleteRequest{
+        Index:      IndexName,
+        DocumentID: docId,
+    }
+
+    deleteResponse, err := delete.Do(context.Background(), client)
+    if err != nil {
+        fmt.Println("failed to delete document ", err)
+        os.Exit(1)
+    }
+    fmt.Println("deleting document")
+    fmt.Println(deleteResponse)
+
+    // Delete previously created index.
+    deleteIndex := opensearchapi.IndicesDeleteRequest{
+        Index: []string{IndexName},
+    }
+
+    deleteIndexResponse, err := deleteIndex.Do(context.Background(), client)
+    if err != nil {
+        fmt.Println("failed to delete index ", err)
+        os.Exit(1)
+    }
+    fmt.Println("deleting index", deleteIndexResponse)
+}
+```

_clients/index.md

@@ -9,6 +9,20 @@ redirect_from:
 
 # OpenSearch client compatibility
 
+OpenSearch provides clients for several popular programming languages, with more coming. In general, clients are compatible with clusters running the same major version of OpenSearch (`major.minor.patch`).
+
+For example, a 1.0.0 client works with an OpenSearch 1.1.0 cluster, but might not support any non-breaking API changes in OpenSearch 1.1.0. A 1.2.0 client works with the same cluster, but might allow you to pass unsupported options in certain functions. We recommend using the same version for both, but if your tests pass after a cluster upgrade, you don't necessarily need to upgrade your clients immediately.
+
+{% comment %}
+* [OpenSearch Java client]({{site.url}}{{site.baseurl}}/clients/java/)
+{% endcomment %}
+* [OpenSearch Python client]({{site.url}}{{site.baseurl}}/clients/python/)
+* [OpenSearch JavaScript (Node.js) client]({{site.url}}{{site.baseurl}}/clients/javascript/)
+* [OpenSearch Go client]({{site.url}}{{site.baseurl}}/clients/go/)
+
+
+## Legacy clients
+
 Most clients that work with Elasticsearch OSS 7.10.2 *should* work with OpenSearch, but the latest versions of those clients might include license or version checks that artificially break compatibility. This page includes recommendations around which versions of those clients to use for best compatibility with OpenSearch.
 
 Client | Recommended version
@@ -18,7 +32,7 @@ Client | Recommended version
 [Python Elasticsearch client](https://pypi.org/project/elasticsearch/7.13.4/) | 7.13.4
 [Elasticsearch Node.js client](https://www.npmjs.com/package/@elastic/elasticsearch/v/7.13.0) | 7.13.0
 
-Clients exist for a wide variety of languages, so if you test a client and verify that it works, please [submit a PR](https://github.com/opensearch-project/documentation-website/pulls) and add it to this table.
+If you test a legacy client and verify that it works, please [submit a PR](https://github.com/opensearch-project/documentation-website/pulls) and add it to this table.
 
 
 {% comment %}

_clients/java-rest-high-level.md

@@ -1,10 +1,10 @@
 ---
 layout: default
-title: Java high-level REST client
-nav_order: 97
+title: Elasticsearch OSS Java high-level REST client
+nav_order: 60
 ---
 
-# Java high-level REST client
+# Elasticsearch OSS Java high-level REST client
 
 The Elasticsearch OSS Java high-level REST client allows you to interact with your OpenSearch clusters and indices through Java methods and data structures rather than HTTP methods and JSON.
 
@@ -22,7 +22,7 @@ To start using the Elasticsearch OSS Java high-level REST client, ensure that yo
 </dependency>
 ```
 
-You can now start your OpenSearch cluster. The 7.10.2 high-level REST client works with the 1.x versions of OpenSearch.
+You can now start your OpenSearch cluster. The 7.10.2 Elasticsearch OSS high-level REST client works with the 1.x versions of OpenSearch.
 
 ## Sample code
 
@@ -93,7 +93,7 @@ public class RESTClientSample {
     HashMap<String, Object> mapping = new HashMap<String, Object>();
     mapping.put("properties", ageMapping);
     createIndexRequest.mapping(mapping);
-    CreateIndexResponse createIndexResponse = client.indices().create(createIndexRequest, RequestOptions.DEFAULT
+    CreateIndexResponse createIndexResponse = client.indices().create(createIndexRequest, RequestOptions.DEFAULT);
 
     //Adding data to the index.
     IndexRequest request = new IndexRequest("custom-index"); //Add a document to the custom-index we created.

_clients/javascript.md

@@ -0,0 +1,141 @@
+---
+layout: default
+title: JavaScript client
+nav_order: 90
+---
+
+# JavaScript client
+
+The OpenSearch JavaScript client provides a safer and easier way to interact with your OpenSearch cluster. Rather than using OpenSearch from the browser and potentially exposing your data to the public, you can build an OpenSearch client that takes care of sending requests to your cluster.
+
+The client contains a library of APIs that let you perform different operations on your cluster and return a standard response body. The example here demonstrates some basic operations like creating an index, adding documents, and searching your data.
+
+## Setup
+
+To add the client to your project, install it from [npm](https://www.npmjs.com):
+
+```bash
+npm install @opensearch-project/opensearch
+```
+
+To install a specific major version of the client, run the following command:
+
+```bash
+npm install @opensearch-project/opensearch@<version>
+```
+
+If you prefer to add the client manually or just want to examine the source code, see [opensearch-js](https://github.com/opensearch-project/opensearch-js) on GitHub.
+
+Then require the client:
+
+```javascript
+const { Client } = require("@opensearch-project/opensearch");
+```
+
+## Sample code
+
+```javascript
+"use strict";
+
+var host = "localhost";
+var protocol = "https";
+var port = 9200;
+var auth = "admin:admin"; // For testing only. Don't store credentials in code.
+var ca_certs_path = "/full/path/to/root-ca.pem";
+
+// Optional client certificates if you don't want to use HTTP basic authentication.
+// var client_cert_path = '/full/path/to/client.pem'
+// var client_key_path = '/full/path/to/client-key.pem'
+
+// Create a client with SSL/TLS enabled.
+var { Client } = require("@opensearch-project/opensearch");
+var fs = require("fs");
+var client = new Client({
+  node: protocol + "://" + auth + "@" + host + ":" + port,
+  ssl: {
+    ca: fs.readFileSync(ca_certs_path),
+    // You can turn off certificate verification (rejectUnauthorized: false) if you're using self-signed certificates with a hostname mismatch.
+    // cert: fs.readFileSync(client_cert_path),
+    // key: fs.readFileSync(client_key_path)
+  },
+});
+
+async function search() {
+  // Create an index with non-default settings.
+  var index_name = "books";
+  var settings = {
+    settings: {
+      index: {
+        number_of_shards: 4,
+        number_of_replicas: 3,
+      },
+    },
+  };
+
+  var response = await client.indices.create({
+    index: index_name,
+    body: settings,
+  });
+
+  console.log("Creating index:");
+  console.log(response.body);
+
+  // Add a document to the index.
+  var document = {
+    title: "The Outsider",
+    author: "Stephen King",
+    year: "2018",
+    genre: "Crime fiction",
+  };
+
+  var id = "1";
+
+  var response = await client.index({
+    id: id,
+    index: index_name,
+    body: document,
+    refresh: true,
+  });
+
+  console.log("Adding document:");
+  console.log(response.body);
+
+  // Search for the document.
+  var query = {
+    query: {
+      match: {
+        title: {
+          query: "The Outsider",
+        },
+      },
+    },
+  };
+
+  var response = await client.search({
+    index: index_name,
+    body: query,
+  });
+
+  console.log("Search results:");
+  console.log(response.body.hits);
+
+  // Delete the document.
+  var response = await client.delete({
+    index: index_name,
+    id: id,
+  });
+
+  console.log("Deleting document:");
+  console.log(response.body);
+
+  // Delete the index.
+  var response = await client.indices.delete({
+    index: index_name,
+  });
+
+  console.log("Deleting index:");
+  console.log(response.body);
+}
+
+search().catch(console.log);
+```

_clients/python.md

@@ -0,0 +1,128 @@
+---
+layout: default
+title: Python client
+nav_order: 70
+---
+
+# Python client
+
+The OpenSearch Python client provides a more natural syntax for interacting with your cluster. Rather than sending HTTP requests to a given URL, you can create an OpenSearch client for your cluster and call the client's built-in functions.
+
+{% comment %}
+`opensearch-py` is the lower-level of the two Python clients. If you want a general client for assorted operations, it's a great choice. If you want a higher-level client strictly for indexing and search operations, consider [opensearch-dsl-py]({{site.url}}{{site.baseurl}}/clients/python-dsl/).
+{% endcomment %}
+
+
+## Setup
+
+To add the client to your project, install it using [pip](https://pip.pypa.io/):
+
+```bash
+pip install opensearch-py
+```
+
+Then import it like any other module:
+
+```python
+from opensearchpy import OpenSearch
+```
+
+If you prefer to add the client manually or just want to examine the source code, see [opensearch-py on GitHub](https://github.com/opensearch-project/opensearch-py).
+
+
+## Sample code
+
+```python
+from opensearchpy import OpenSearch
+
+host = 'localhost'
+port = 9200
+auth = ('admin', 'admin') # For testing only. Don't store credentials in code.
+ca_certs_path = '/full/path/to/root-ca.pem' # Provide a CA bundle if you use intermediate CAs with your root CA.
+
+# Optional client certificates if you don't want to use HTTP basic authentication.
+# client_cert_path = '/full/path/to/client.pem'
+# client_key_path = '/full/path/to/client-key.pem'
+
+# Create the client with SSL/TLS enabled, but hostname verification disabled.
+client = OpenSearch(
+    hosts = [{'host': host, 'port': port}],
+    http_compress = True, # enables gzip compression for request bodies
+    http_auth = auth,
+    # client_cert = client_cert_path,
+    # client_key = client_key_path,
+    use_ssl = True,
+    verify_certs = True,
+    ssl_assert_hostname = False,
+    ssl_show_warn = False,
+    ca_certs = ca_certs_path
+)
+
+# Create an index with non-default settings.
+index_name = 'python-test-index'
+index_body = {
+  'settings': {
+    'index': {
+      'number_of_shards': 4
+    }
+  }
+}
+
+response = client.indices.create(index_name, body=index_body)
+print('\nCreating index:')
+print(response)
+
+# Add a document to the index.
+document = {
+  'title': 'Moneyball',
+  'director': 'Bennett Miller',
+  'year': '2011'
+}
+id = '1'
+
+response = client.index(
+    index = index_name,
+    body = document,
+    id = id,
+    refresh = True
+)
+
+print('\nAdding document:')
+print(response)
+
+# Search for the document.
+q = 'miller'
+query = {
+  'size': 5,
+  'query': {
+    'multi_match': {
+      'query': q,
+      'fields': ['title^2', 'director']
+    }
+  }
+}
+
+response = client.search(
+    body = query,
+    index = index_name
+)
+print('\nSearch results:')
+print(response)
+
+# Delete the document.
+response = client.delete(
+    index = index_name,
+    id = id
+)
+
+print('\nDeleting document:')
+print(response)
+
+# Delete the index.
+response = client.indices.delete(
+    index = index_name
+)
+
+print('\nDeleting index:')
+print(response)
+```

_dashboards/install/helm.md

@@ -20,7 +20,7 @@ Resource | Description
 The specification in the default Helm chart supports many standard use cases and setups. You can modify the default chart to configure your desired specifications and set Transport Layer Security (TLS) and role-based access control (RBAC).
 
 For information about the default configuration, steps to configure security, and configurable parameters, see the
-[README](https://github.com/opensearch-project/opensearch-devops/blob/main/Helm/README.md).
+[README](https://github.com/opensearch-project/helm-charts/tree/main/charts).
 
 The instructions here assume you have a Kubernetes cluster with Helm preinstalled. See the [Kubernetes documentation](https://kubernetes.io/docs/setup/) for steps to configure a Kubernetes cluster and the [Helm documentation](https://helm.sh/docs/intro/install/) to install Helm.
 {: .note }

_data/_alert.yml

@@ -1 +0,0 @@
-message: "🔥 [OpenSearch 1.0 released on July 12th! Get it now!](/downloads.html)"

_data/alert.yml

@@ -0,0 +1 @@
+message: "🌡️ [OpenSearch 1.1.0 is here, get it while it's hot!](/downloads.html)"

_data/versions.json

@@ -0,0 +1,4 @@
+{
+  "current": "1.0",
+  "past": []
+}

_im-plugin/ism/policies.md

@@ -558,9 +558,11 @@ The following sample template policy is for a rollover use case.
    PUT _index_template/ism_rollover
    {
      "index_patterns": ["log*"],
-     "settings": {
+     "template": {
+      "settings": {
        "plugins.index_state_management.rollover_alias": "log"
-     }
+      }
+    }
    }
    ```
 
@@ -586,6 +588,12 @@ The following sample template policy is for a rollover use case.
    }
    ```
 
+5. Verify if the policy is attached to the `log-000001` index:
+
+   ```json
+   GET _plugins/_ism/explain/log-000001?pretty
+   ```
+
 ## Example policy
 
 The following example policy implements a `hot`, `warm`, and `delete` workflow. You can use this policy as a template to prioritize resources to your indices based on their levels of activity.

_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"

_opensearch/install/helm.md

@@ -20,7 +20,7 @@ Resource | Description
 The specification in the default Helm chart supports many standard use cases and setups. You can modify the default chart to configure your desired specifications and set Transport Layer Security (TLS) and role-based access control (RBAC).
 
 For information about the default configuration, steps to configure security, and configurable parameters, see the
-[README](https://github.com/opensearch-project/opensearch-devops/blob/main/Helm/README.md).
+[README](https://github.com/opensearch-project/helm-charts/tree/main/charts).
 
 The instructions here assume you have a Kubernetes cluster with Helm preinstalled. See the [Kubernetes documentation](https://kubernetes.io/docs/setup/) for steps to configure a Kubernetes cluster and the [Helm documentation](https://helm.sh/docs/intro/install/) to install Helm.
 {: .note }

_opensearch/rest-api/create-index.md

@@ -1,9 +1,8 @@
 ---
 layout: default
 title: Create index
-parent: Index APIs
-grand_parent: REST API reference
-nav_order: 1
+parent: REST API reference
+nav_order: 3
 ---
 
 # Create index

_opensearch/rest-api/index-apis/delete-index.md

@@ -1,45 +0,0 @@
----
-layout: default
-title: Delete index
-parent: Index APIs
-grand_parent: REST API reference
-nav_order: 5
----
-
-# Delete index
-Introduced 1.0
-{: .label .label-purple }
-
-If you no longer need an index, you can use the delete index API operation to delete it.
-
-## Example
-
-```json
-DELETE /sample-index
-```
-
-## Path and HTTP methods
-
-```
-DELETE /<index-name>
-```
-
-## URL parameters
-
-All parameters are optional.
-
-Parameter | Type | Description
-:--- | :--- | :---
-allow_no_indices | Boolean | Whether to ignore wildcards that don't match any indices. Default is true.
-expand_wildcards | String | Expands wildcard expressions to different indices. Combine multiple values with commas. Available values are all (match all indices), open (match open indices), closed (match closed indices), hidden (match hidden indices), and none (do not accept wildcard expressions), which must be used with open, closed, or both. Default is open.
-ignore_unavailable | Boolean | If true, OpenSearch does not include missing or closed indices in the response.
-master_timeout | Time | How long to wait for a connection to the master node. Default is `30s`.
-timeout | Time | How long to wait for the response to return. Default is `30s`.
-
-
-## Response
-```json
-{
-  "acknowledged": true
-}
-```

_opensearch/rest-api/index-apis/get-index.md

@@ -1,76 +0,0 @@
----
-layout: default
-title: Get index
-parent: Index APIs
-grand_parent: REST API reference
-nav_order: 10
----
-
-# Get index
-Introduced 1.0
-{: .label .label-purple }
-
-You can use the get index API operation to return information about an index.
-
-## Example
-
-```json
-GET /sample-index
-```
-
-## Path and HTTP methods
-
-```
-GET /<index-name>
-```
-
-## URL parameters
-
-All parameters are optional.
-
-Parameter | Type | Description
-:--- | :--- | :---
-allow_no_indices | Boolean | Whether to ignore wildcards that don't match any indices. Default is true.
-expand_wildcards | String | Expands wildcard expressions to different indices. Combine multiple values with commas. Available values are all (match all indices), open (match open indices), closed (match closed indices), hidden (match hidden indices), and none (do not accept wildcard expressions), which must be used with open, closed, or both. Default is open.
-flat_settings | Boolean | Whether to return settings in the flat form, which can improve readability, especially for heavily nested settings. For example, the flat form of "index": { "creation_date": "123456789" } is "index.creation_date": "123456789".
-include_defaults | Boolean | Whether to include default settings as part of the response. This parameter is useful for identifying the names and current values of settings you want to update.
-ignore_unavailable | Boolean | If true, OpenSearch does not include missing or closed indices in the response.
-local | Boolean | Whether to return information from only the local node instead of from the master node. Default is false.
-master_timeout | Time | How long to wait for a connection to the master node. Default is `30s`.
-
-
-## Response
-```json
-{
-  "sample-index1": {
-    "aliases": {},
-    "mappings": {},
-    "settings": {
-      "index": {
-        "creation_date": "1633044652108",
-        "number_of_shards": "2",
-        "number_of_replicas": "1",
-        "uuid": "XcXA0aZ5S0aiqx3i1Ce95w",
-        "version": {
-          "created": "135217827"
-        },
-        "provided_name": "sample-index1"
-      }
-    }
-  }
-}
-```
-
-## Response body fields
-
-Field | Description
-:--- | :---
-aliases | Any aliases associated with the index.
-mappings | Any mappings in the index.
-settings | The index's settings
-creation_date | The Unix epoch time of when the index was created.
-number_of_shards | How many shards the index has.
-number_of_replicas | How many replicas the index has.
-uuid | The index's uuid.
-created | The version of OpenSearch when the index was created.
-provided_name | Name of the index.

_opensearch/rest-api/index-apis/index.md

@@ -1,16 +0,0 @@
----
-layout: default
-title: Index APIs
-parent: REST API reference
-has_children: true
-nav_order: 3
-redirect_from:
-  - /opensearch/rest-api/index-apis/
----
-
-# Index APIs
-
-The index API operations let you interact with indices in your cluster. Using these operations, you can create, delete, close, and complete other index-related operations.
-
-If you use the security plugin, make sure you have the appropriate permissions.
-{: .note }

_opensearch/rest-api/update-mapping.md

@@ -6,8 +6,6 @@ nav_order: 6
 ---
 
 # Update mapping
-Introduced 1.0
-{: .label .label-purple }
 
 If you want to update an index's mappings to add or update field types after index creation, you can do so with the update mapping API operation.
 

_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;
@@ -1082,6 +1084,11 @@ main {
   @include sans-serif;
   @include warning-stripes;
 
+  /* To match the website */
+  font-size: 1.125rem;
+  text-decoration-thickness: 0.5px;
+  text-underline-offset: 1px;
+
   a {
     color: $text;
 
@@ -1102,3 +1109,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 %}
+})();