rename version to mode. only show mode selector when we add the mode …

…parameter to the url or if it exists in local storage

Gemfile.lock

@@ -2,7 +2,7 @@ GEM
   remote: https://rubygems.org/
   specs:
     Ascii85 (1.1.1)
-    activesupport (7.2.2.1)
+    activesupport (8.0.0)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -14,6 +14,7 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
+      uri (>= 0.13.1)
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     afm (0.2.2)

_data/sidebar.yml

@@ -301,7 +301,7 @@ docs:
         url: /en/operations/tools.html
 
   - title: Operations - selfhosted
-    version: selfhosted
+    mode: selfhosted
     documents:
       - page: Multinode Systems
         url: /en/operations-selfhosted/multinode-systems.html

_includes/navbar.html

@@ -1,60 +1,68 @@
 <!-- Copyright Vespa.ai. All rights reserved.. -->
 <script>
 
-	function setVersionParam(version) {
+	function setmodeParam(mode) {
 		const currentUrl = new URL(window.location.href);  // Get the current URL
 		const urlParams = new URLSearchParams(currentUrl.search);
-		urlParams.set('version', version);  // Set or update the query parameter
+		urlParams.set('mode', mode);  // Set or update the query parameter
 		currentUrl.search = urlParams.toString();
 		window.history.pushState({}, '', currentUrl);
 	}
 
-	function hideElements(version){
-		const hiddenElements = document.querySelector(`.version-${version}`);
+	function hideElements(mode){
+		const hiddenElements = document.querySelector(`.mode-${mode}`);
 		if (hiddenElements){
 			hiddenElements.style.display = 'none';  
 		}
 	}
 
-	function showElements(version){
-		const hiddenElements = document.querySelector(`.version-${version}`);
+	function showElements(mode){
+		const hiddenElements = document.querySelector(`.mode-${mode}`);
 		if (hiddenElements){
 			hiddenElements.style.display = 'block';  
 		}
 	}
 
-	function handleCurrentVersion(currentVersion){
-        localStorage.setItem('version', currentVersion);
-		if (currentVersion === 'cloud'){
+	function handleCurrentmode(currentmode){
+        localStorage.setItem('mode', currentmode);
+		if (currentmode === 'cloud'){
 			hideElements('selfhosted');
 			showElements('cloud');
-		} else if (currentVersion === 'selfhosted'){
+		} else if (currentmode === 'selfhosted'){
 			hideElements('cloud');
 			showElements('selfhosted')
 		}
 	}
-	function selectVersion(version) {
-		setVersionParam(version);
-		handleCurrentVersion(version);
+	function selectmode(mode) {
+		setmodeParam(mode);
+		handleCurrentmode(mode);
 	}
 
 	document.addEventListener('DOMContentLoaded', function() {
 		const currentUrl = new URL(window.location.href); 
 		const urlParams = new URLSearchParams(currentUrl.search);
-		let currentVersion = urlParams.get('version');
-        if (!currentVersion) {
-            currentVersion = localStorage.getItem('version');
-            setVersionParam(currentVersion);
+		let currentmode = urlParams.get('mode');
+        if (!currentmode) {
+            currentmode = localStorage.getItem('mode');
+            setmodeParam(currentmode);
+            // This is temporairly added so that we can test the new mode selector
+            // The selector will only appear if there is ?mode= in the url or if it is stored in local storage
+            if (!currentmode) {
+                document.getElementById('docs-mode').classList.add('hide');
+                document.getElementById('sidebar').classList.remove('p-t-35');
+                showElements('cloud');
+                showElements('selfhosted');
+            }
         }
 
-		if(currentVersion){
-			document.getElementById('docs-version').value = currentVersion;
-			handleCurrentVersion(currentVersion);
+		if(currentmode){
+			document.getElementById('docs-mode').value = currentmode;
+			handleCurrentmode(currentmode);
 		}
 
-		document.getElementById('docs-version').addEventListener('change', function() {
+		document.getElementById('docs-mode').addEventListener('change', function() {
 			const selectedValue = this.value;
-			selectVersion(selectedValue);
+			selectmode(selectedValue);
 		});
 	});
 
@@ -65,7 +73,7 @@
         <span class="nav-item hide-small-desktop-up" onclick="toggleMenu()"><i class="d-icon d-menu-hamburger"></i></span>
         <a href="https://docs.vespa.ai/">
             <img class="nav-brand" src="{{ site.baseurl }}/assets/logos/{{include.logo}}" alt="Vespa logo"/></a>
-            <select id="docs-version" style="width: 80%; padding: 10px 5px; margin-top: -7px; font-size: 1.6rem;">
+            <select id="docs-mode" style="width: 80%; padding: 10px 5px; margin-top: -7px; font-size: 1.6rem;">
                 <option value="cloud">Vespa Cloud</option>
                 <option value="selfhosted">Vespa Self-hosted</option>
             </select>

_includes/sidebar.html

@@ -1,22 +1,22 @@
 <!-- Copyright Vespa.ai. All rights reserved. -->
 
 
-<div class="tabs is-primary is-vertical p-t-35">
+<div id="sidebar" class="tabs is-primary is-vertical p-t-35">
   <ul class="p-b-0">
     <li class="collapse-all tabs__section-header" onclick="expandAllItems();" id="collapse-all"><span class="d-icon d-add-circle" style="font-size: 16px; max-width: 20px; padding-left: 0"></span>expand all</li>
 	<li class="collapse-all tabs__section-header hide" onclick="collapseAllItems();" id="expand-all"><span class="d-icon d-minus-circle" style="font-size: 16px; max-width: 20px; padding-left: 0"></span>collapse all</li>
   </ul>
   {% if site.data.sidebar.docs[0] %}
     {% for section in site.data.sidebar.docs %}
-      <ul class="p-b-0{% if section.version %} version-{{ section.version }} {% endif %}">
+      <ul class="p-b-0{% if section.mode %} mode-{{ section.mode }} {% endif %}">
         <li class="collapse-parent tabs__section-header" onclick="toggleCollapse(this);">{{ section.title }}</li>
         {% if section.documents[0] %}
           {% for entry in section.documents %}
             {% if entry.sidebar_exclude != true %}
               {% if entry.url == page.url %}
-                <li class="m-l-10 collapsable active{% if section.version %} version-{{ section.version }} {% endif %}"><b><a href="{{ entry.url }}">{{ entry.page }}</a></b></li>
+                <li class="m-l-10 collapsable active{% if section.mode %} mode-{{ section.mode }} {% endif %}"><b><a href="{{ entry.url }}">{{ entry.page }}</a></b></li>
               {% else %}
-                <li class="m-l-10 collapsable{% if section.version %} version-{{ section.version }} {% endif %}"><a href="{{ entry.url }}">{{ entry.page }}</a></li>
+                <li class="m-l-10 collapsable{% if section.mode %} mode-{{ section.mode }} {% endif %}"><a href="{{ entry.url }}">{{ entry.page }}</a></li>
               {% endif %}
             {% endif%}
           {% endfor %}