Adds a Version Selector to Navbar

rundeck · Dec 12, 2024 · c8be3e9 · c8be3e9
1 parent c706454
commit c8be3e9
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 79 deletions.
diff --git a/docs/.vuepress/components/DocVersions.vue b/docs/.vuepress/components/DocVersions.vue
@@ -1,55 +1,61 @@
 <template>
-
-	<label>
-	Version:
-		<select onchange="if(this.value){document.location=this.value}">
-			<option value="" >-Select-</option>
-			<optgroup :label="group.label" v-for="group in versions" :key="group.label">
-			<option v-for="vers in group.values" :value="docsbase+'/'+vers" :key="vers">{{vers}}</option>
-			</optgroup>
-		</select>
-	</label>
-</template>
-
-<script>
-const docsBase= "https://docs.rundeck.com"
-//include the last version in each minor release
-const previousDocsVersions= [
-  "5.8.0",
-  "5.7.0",
-  "5.6.1",
-  "5.6.0",
-  "5.5.0",
-  "5.4.0",
-  "5.3.0",
-  "5.2.0",
-  "5.1.2",
-  "5.1.1",
-  "5.1.0",
-  "5.0.2",
-  "5.0.1", 	
-  "5.0.0",
-  "4.17.6",
-  "4.17.5",
-  "4.17.4",
-  "4.17.3",
-  "4.17.2",  
-  "4.17.1",
-  "4.17.0",
-  "4.16.0",
-  "4.15.0",
-  "4.14.2",
-  "4.14.1",
-  "4.14.0",
-  "4.13.0",
-  "4.12.1",
-  "4.12.0",
-  "4.11.0",
-  "4.10.2",
-  "4.10.1",
-  "4.10.0",
-  "4.9.0",
-  "4.8.0",
+	<VersionPicker>
+	  <template #endBefore>
+		<label>
+		  <select class="version-selector" @change="handleVersionChange($event)">
+			<option value="">-Select your Version-</option>
+			<option v-for="version in versions" :value="version.url" :key="version.version">
+			  {{ version.version }}
+			</option>
+		  </select>
+		</label>
+	  </template>
+	</VersionPicker>
+  </template>
+
+  <script setup lang="ts">
+  import VersionPicker from "vuepress-theme-hope/modules/navbar/components/Navbar.js";
+  
+  const docsBase: string = "https://docs.rundeck.com";
+  
+  // Include the last version in each minor release and "Cloud" as the latest
+  const previousDocsVersions: string[] = [
+	"Cloud",
+	"5.8.0",
+	"5.7.0",
+	"5.6.1",
+	"5.6.0",
+	"5.5.0",
+	"5.4.0",
+	"5.3.0",
+	"5.2.0",
+	"5.1.2",
+	"5.1.1",
+	"5.1.0",
+	"5.0.2",
+	"5.0.1",
+	"5.0.0",
+	"4.17.6",
+	"4.17.5",
+	"4.17.4",
+	"4.17.3",
+	"4.17.2",
+	"4.17.1",
+	"4.17.0",
+	"4.16.0",
+	"4.15.0",
+	"4.14.2",
+	"4.14.1",
+	"4.14.0",
+	"4.13.0",
+	"4.12.1",
+	"4.12.0",
+	"4.11.0",
+	"4.10.2",
+	"4.10.1",
+	"4.10.0",
+	"4.9.0",
+	"4.8.0",
 	"4.7.0",
 	"4.6.1",
 	"4.5.0",
@@ -74,29 +80,34 @@ const previousDocsVersions= [
 	"2.3.2",
 	"2.2.3",
 	"2.1.3",
-	"2.0.4"
-]
-let versarr=[]
-//parse versions to create groups of options
-for(let a in previousDocsVersions){
-	let b = previousDocsVersions[a]
-	let match=b.match(/^(\d+\.\d+)\.(\d+)$/)
-	let minor=match[1]
-	let count=parseInt(match[2])
-	let strings=[]
-	for(let i=count;i>=0;i--){
-		strings.push(minor+`.${i}`)
-	}
-	versarr.push({label:minor,values:strings})
-
-}
-export default {
-	data(){
+	"2.0.4",
+  ];
+  
+  // Parse versions into a flat list
+  const parseVersions = (versions: string[]): { version: string; url: string }[] => {
+	return versions.map((version) => {
+	  if (version === "Cloud") {
 		return {
-			versions: versarr,
-			docsbase: docsBase
-		}
-	},
-
-}
-</script>
+		  version: "Cloud",
+		  url: `${docsBase}/docs/`,
+		};
+	  }
+	  return {
+		version,
+		url: `${docsBase}/${version}`,
+	  };
+	});
+  };
+  
+  // Reactive property for versions
+  const versions = parseVersions(previousDocsVersions);
+  
+  // Handle version change
+  const handleVersionChange = (event: Event): void => {
+	const target = event.target as HTMLSelectElement;
+	const selectedUrl = target.value;
+	if (selectedUrl) {
+	  document.location.href = selectedUrl;
+	}
+  };
+  </script>
diff --git a/docs/.vuepress/components/SidebarAnnounce.vue b/docs/.vuepress/components/SidebarAnnounce.vue
@@ -5,7 +5,7 @@
           <p>
             <b>Process Automation On Prem</b> is now <b>Runbook Automation Self-Hosted</b>
           </p>
-    </div>
+        </div>
       </template>
     </AnnounceBox>
 </template>

diff --git a/docs/.vuepress/components/navbar.vue b/docs/.vuepress/components/navbar.vue
@@ -0,0 +1,11 @@
+<template>
+	<VersionPicker>
+		<template #endBefore>
+			MY TEST TEXT
+		</template>
+	</VersionPicker>
+  </template>
+
+<script setup lang="ts">
+import VersionPicker from "vuepress-theme-hope/modules/navbar/components/Navbar.js";
+</script>
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -292,6 +292,10 @@ export default defineUserConfig({
     __dirname,
     "./components/notFoundCustom.vue",
   ),
+  "@theme-hope/modules/navbar/components/Navbar": path.resolve(
+    __dirname,
+    "./components/DocVersions.vue",
+  ),
   },
   //Plugins Config
   plugins: [

diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
@@ -42,7 +42,26 @@ h6 {
     text-align: center; /* Center the text */
     }
 
-.vp-description{
+
+.version-selector {
+  appearance: none; /* Removes default browser styling */
+  -webkit-appearance: none; /* For Safari */
+  -moz-appearance: none; /* For Firefox */
+  border: 0px solid #ccc; /* Thin grey border */
+  border-radius: 0; /* Removes rounded corners */
+  padding: 8px 12px; /* Adds some padding for better usability */
+  font-size: 14px; /* Adjusts font size */
+  background-color: #fff; /* Flat white background */
+  color: #333; /* Text color */
+  outline: none; /* Removes focus outline */
+  cursor: pointer; /* Changes cursor to pointer */
+}
+
+.version-selector:focus {
+  border-color: #888; /* Slightly darker border on focus */
+}
+
+    .vp-description{
   text-align: center;
   max-width: unset;
 }

diff --git a/docs/manual/old-docs.md b/docs/manual/old-docs.md
@@ -4,7 +4,7 @@ sidebar: false
 
 # Older Documentation Versions
 
-<DocVersions/>
+Select your version here: <DocVersions/>
 
 ## Archives