DOC-4272 Add support for versioned products

assets/css/index.css

@@ -969,4 +969,103 @@ code {
 /* no-click turns off border and click event on small icons */
 a[href*="#no-click"], img[src*="#no-click"] {
   @apply border-none cursor-default pointer-events-none no-underline;
+}
+
+/* Version selector in side menu */
+.menu__version-selector {
+  float: right;
+  left: 18px;
+  padding: 0 22px 0;
+  position: relative;
+  top: -28px;
+  z-index: 1;
+  border: 1px solid #dfdfdf;
+}
+
+.menu__version-selector button {
+  background: transparent;
+  border: none;
+  font-size: 13px;
+  outline: none;
+}
+
+.menu__version-selector button span.menu__version-selector__toggler {
+  display: none;
+  font-size: 8px;
+  transform: translateY(-1px) translateX(2px);
+}
+
+.menu__version-selector span.menu__version-selector__toggler.opener {
+  display: inline-block;
+}
+
+.menu__version-selector span.menu__version-selector__toggler.closer {
+  display: none;
+}
+
+.menu__version-selector .menu__version-selector__list {
+  background: #f7f7f7;
+  border: 1px solid #dfdfdf;
+  border-top: none;
+  display: none;
+  font-size: 13px;
+  left: -1px;
+  position: absolute;
+  width: calc(100% + 2px);
+  z-index: 1;
+}
+
+.menu__version-selector .menu__version-selector__list a {
+  color: #868484;
+  display: block;
+  padding-left: 10px;
+  width: 100%;
+}
+
+.menu__version-selector .menu__version-selector__list a:hover {
+  color: #000;
+}
+
+.menu__version-selector .menu__version-selector__list a.selected-version {
+  display: none;
+}
+
+.menu__version-selector.open {
+  border: 1px solid #dfdfdf;
+}
+
+.menu__version-selector.open .menu__version-selector__toggler.opener {
+  display: none;
+}
+
+.menu__version-selector.open .menu__version-selector__toggler.closer {
+  display: inline-block;
+}
+
+.menu__version-selector.open .menu__version-selector__list {
+  display: block;
+}
+
+.menu__version-selector > li .menu-divider {
+  border-top: 1px solid #5d6876;
+  height: 1px;
+  left: 20px;
+  margin-left: 0 !important;
+  position: absolute;
+  top: 10px;
+  width: calc(100% - 20px);
+}
+
+.menu__version-selector > li > .children {
+  display: none;
+}
+
+.menu__version-selector > li.parent > .children {
+  display: flex;
+  position: relative;
+  padding-top: 60px;
+}
+
+.dd-item .highlight:hover {
+  color: #5961ff;
 }

insert_url_frontmatter.bash

@@ -0,0 +1,16 @@
+#!/bin/bash
+dir="$1"
+pages="$(find $dir -name "*.md")"
+
+for page in $pages; do
+  if [[ "$page" =~ \/_index.md$ ]]; then
+    url=$(sed "s/_index.md$/'/; s/^content/'/"<<< $page)
+  else
+    url=$(sed "s/.md$/\/'/; s/^content/'/"<<< $page)
+  fi
+  # skip if url property is already present
+  if ! grep -q "$url" $page; then
+    awk -v url="$url" '$1 == "---" {delim++; if (delim==2){printf "%s\n", "url: "url}} {print}' $page > tmp.md
+    mv tmp.md $page 
+  fi
+done

layouts/operate/list.html

@@ -54,5 +54,6 @@ <h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/operate/single.html

@@ -40,5 +40,6 @@ <h1>
       </section>
     </div>
     {{ partial "docs-toc.html" . }}
+    {{ partial "scripts.html" . }}
   </main>
 {{ end }}

layouts/partials/docs-nav.html

@@ -17,7 +17,31 @@
         {{ end -}}
         <span>{{.LinkTitle}}</span>
       </a>
+      {{if (eq (.Params.linkTitle) "Redis for Kubernetes")}}
+      <div id="versionSelectorKubernetes" class="menu__version-selector version-selector-control" onclick="_openVersionSelector('Kubernetes')" style="display: none;">
+        <button class="menu__version-selector-btn version-selector-control">
+            <span id="versionSelectorKubernetesValue" class="version-selector-control">latest</span>
+            <span class="menu__version-selector__toggler opener version-selector-control">&#x25BC;</span>
+            <span class="menu__version-selector__toggler closer version-selector-control">&#x25B2;</span>
+        </button>
+        <div id="versionDropdownKubernetes" class="menu__version-selector__list version-selector-control">
+            <a href="https://redis.io/docs/latest/operate/kubernetes/" id="kubernetes-version-select-latest" onclick="_setSelectedVersion('kubernetes', 'latest')">latest</a>
+        </div>
+      </div>
+      {{else if (eq (.Params.linkTitle) "Redis Software")}}
+      <div id="versionSelectorRs" class="menu__version-selector version-selector-control" onclick="_openVersionSelector('Rs')" style="display: none;">
+        <button class="menu__version-selector-btn version-selector-control">
+            <span id="versionSelectorRsValue" class="version-selector-control">latest</span>
+            <span class="menu__version-selector__toggler opener version-selector-control">&#x25BC;</span>
+            <span class="menu__version-selector__toggler closer version-selector-control">&#x25B2;</span>
+        </button>
+        <div id="versionDropdownRs" class="menu__version-selector__list version-selector-control">
+            <a href="https://redis.io/docs/latest/operate/rs/" id="rs-version-select-latest" onclick="_setSelectedVersion('rs', 'latest')">latest</a>
+        </div>
+      </div>
     </li>
+
+    {{end}}
     {{ if and (gt (len $childPages) 0) (or $isActive $isActivePath)}}
       <ul class="child-list">
         {{ template "li" (dict "page" $page "pages" $childPages) }}

layouts/partials/scripts.html

@@ -0,0 +1,81 @@
+<!-- Code for version selectors -->
+
+<script>
+    window.onload = function(){
+        var currentUrl = window.location.href
+        const regex_kubernetes = new RegExp('/docs/latest/operate/kubernetes/.*')
+        const regex_rs = new RegExp('/docs/latest/operate/rs/.*')
+
+        if (regex_kubernetes.test(currentUrl)){
+            // unhide kubernetes version selector
+            document.getElementById( 'versionSelectorKubernetes' ).style.display = '';
+        }
+        else if (regex_rs.test(currentUrl)) {
+            // unhide rs version selector
+            document.getElementById( 'versionSelectorRs' ).style.display = '';
+        }
+    }
+
+    function _setSelectedVersion(product, ver) {
+        if (ver) {
+            var i = document.getElementById(product + '-version-select-' + ver);
+            if (i) {
+                i.classList.toggle('selected-version');
+            }
+        }
+    }
+
+    function _getVersion(product) {
+        return document.getElementById("versionSelector" + product + "Value").innerText
+    }
+
+    function _openVersionSelector(product) {
+        var productLowercase = product.toLowerCase()
+
+        document.getElementById("versionSelector" + product).classList.toggle('open');
+
+        // get currently selected version
+        var currentVersion = _getVersion(product)
+
+        if (currentVersion != "latest") {
+            currentVersion = currentVersion.substring(1)
+        }
+
+        // get current url
+        var currentUrl = window.location.href
+
+        // get version dropdown children
+        var versionsDropdown = document.getElementById("versionDropdown" + product).children
+        var versionsDropdownLength = versionsDropdown.length
+
+        const regex = new RegExp(String.raw`^.+\/operate\/${productLowercase}`,"g");
+        const versionRegex = /^(\/\d+\.\d+(?:\.\d+)?(?:\-\d+)?)?/g;
+
+        // for each version in dropdown, edit its href link
+        for (var i= 0; i < versionsDropdownLength; i ++) {
+            if (versionsDropdown[i].innerText == "latest") {
+                url_start = versionsDropdown[i].href.match(regex)
+                url_end = currentUrl.replace(regex,"").replace(versionRegex,"")
+                versionsDropdown[i].href = url_start + url_end
+            }
+            else {
+                var versionDropdown = versionsDropdown[i].innerText.substring(1)
+                url_start = versionsDropdown[i].href.match(regex)
+                url_end = currentUrl.replace(regex,"").replace(versionRegex,("/" + versionDropdown))
+                versionsDropdown[i].href = url_start + url_end
+            }
+        }
+    }
+
+    window.onclick = function (e) {
+        if (!e.target.matches('.version-selector-control')) {
+            var d = document.getElementsByClassName('menu__version-selector');
+            var i;
+            for (i = 0; i < d.length; i++) {
+                if (d[i].classList.contains('open')) {
+                    d[i].classList.remove('open');
+                }
+            }
+        }
+    }
+</script>