feat(docs): add version switcher and make small css fixes

Syncano · Feb 14, 2018 · a6cfda1 · a6cfda1
1 parent e6a8aae
commit a6cfda1
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 6 deletions.
diff --git a/docs/cheatsheet/web/script.js b/docs/cheatsheet/web/script.js
diff --git a/docs/docs/_navbar.md b/docs/docs/_navbar.md
@@ -2,6 +2,10 @@
   - [Cheatsheet](https://cheatsheet.syncano.io/#/)
   - [Cookbook](https://cookbook.syncano.io/#/) 
 
-- Canary version
-  - [v. 0.6](https://syncano.github.io/syncano-node-cli/#/)
-  - [Legacy version](https://docs.syncano.io/)
+<div class="c-version-select">
+  <select data-version>
+    <option value="master">master</option>
+    <option value="0">0.8</option>
+    <option value="legacy" data-url="https://docs.syncano.io">legacy</option>
+  </select>
+</div>
diff --git a/docs/docs/css/coverpage.css b/docs/docs/css/coverpage.css
@@ -22,8 +22,70 @@ body {
  	Top Nav Bar
 ----------------*/
 
+.app-nav {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  top: 25px;
+  right: 80px;
+}
+
+.app-nav > * + * {
+  margin-left: 16px;
+}
+
 .app-nav li ul {
-	overflow-y: hidden;
+  overflow-y: hidden;
+  padding: 8px 0;
+}
+
+.app-nav li ul li {
+  padding: 0;
+  margin: 0;
+}
+
+.app-nav li ul a {
+  padding: 7px 15px;
+  transition: background-color .25s;
+}
+.app-nav li ul a:hover {
+  background-color: rgba(56, 113, 208, .1);
+}
+
+.c-version-select {
+  position: relative;
+  border-radius: 4px;
+  background: #187eef;
+}
+.c-version-select:after {
+  content: '';
+  position: absolute;
+  right: 8px;
+  top: 16px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #ffffff transparent transparent transparent;
+}
+.c-version-select select {
+  position: relative;
+  z-index: 1;
+  border: none;
+  background-color: transparent;
+  padding: 10px 28px 10px 14px;
+  color: #fff;
+  font-weight: bold;
+  display: block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  line-height: 16px;
+  cursor: pointer;
+}
+.c-version-select option { color: #333; }
+.c-version-select select:focus {
+  outline: none;
 }
 
 /*----------------

diff --git a/docs/docs/css/docs.css b/docs/docs/css/docs.css
@@ -3,5 +3,6 @@
 }
 
 button.sidebar-toggle {
-  bottom: 93vh;
+  top: 0;
+  bottom: auto;
 }
diff --git a/docs/docs/index.html b/docs/docs/index.html
@@ -23,7 +23,32 @@
     subMaxLevel: 3,
     homepage: './getting-started/intro.md',
     coverpage: true,
-    loadNavbar: true
+    loadNavbar: true,
+    plugins: [
+      function (hook, vm) {
+        hook.ready(function() {
+          const version = window.location.host.match(/^[0-9\.|master|legacy]+/) || 'master';
+
+          [].forEach.call(document.querySelectorAll('.app-nav a'), a => {
+            a.setAttribute('href', a.getAttribute('href').replace('https://', `https://${version}-`))
+          })
+
+          const $select = document.querySelector('[data-version]')
+          const $options = document.querySelectorAll(`[data-version] option`)
+          const $selectedOption = document.querySelector(`option[value="${version}"]`)
+          const selectedOptionIndex = Array.prototype.indexOf.call($options, $selectedOption)
+
+          $select.selectedIndex = selectedOptionIndex >= 0 ? selectedOptionIndex : 0
+
+          $select.addEventListener('change', event => {
+            const version = event.target.value
+            const url = event.target.options[event.target.selectedIndex].dataset.url
+
+            window.location.href = url || `https://${version}-docs.syncano.io`
+          })
+        })
+      }
+    ]
   };
 </script>
 <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>