added version selector

Author: dgraf-gh

docs/assets/css/styles.css

@@ -17,4 +17,39 @@ article table tbody tr td {
 .badge.version-badge .value {
     background-color: #fddca1;
     color: black;
+}
+/* Light Mode (Default) */
+#version-selector {
+    background-color: #f6f8fa;
+    color: #24292f;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
+    padding: 4px 24px 4px 8px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2324292f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 4px center;
+    background-size: 16px;
+    transition: background-color 0.2s, border-color 0.2s;
+}
+
+#version-selector:hover {
+    background-color: #f3f4f6;
+    border-color: #afb8c1;
+}
+
+/* Dark Mode (When html has .dark class) */
+html.dark #version-selector {
+    background-color: #24292f;
+    color: #ffffff;
+    border-color: #444c56;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+}
+
+html.dark #version-selector:hover {
+    background-color: #2c333a;
+    border-color: #768390;
 }

docs/assets/js/scripts.js

@@ -0,0 +1,50 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const base_url = window.location.pathname.split('/')[1];
+    const json_url = '/' + base_url + "/versions.json";
+    const stargazers_element = document.querySelector('header div div:nth-child(3) a');
+
+    if (!stargazers_element) {
+        console.warn("Could not find the stargazers element to attach the version selector.");
+        return;
+    }
+    fetch(json_url)
+        .then(response => response.json())
+        .then(data => {
+            const container = document.createElement("div");
+            container.style.display = "flex";
+            container.style.alignItems = "center";
+            container.style.marginLeft = "12px"; // Space between stars and version
+
+            // 2. Create the select element
+            const select = document.createElement("select");
+            select.id = "version-selector";
+            select.style.padding = "4px 8px";
+            select.style.border = "1px solid #444";
+            select.style.borderRadius = "6px";
+            select.style.fontSize = "12px";
+            select.style.fontWeight = "600";
+            select.onchange = function() { window.location.href = this.value; };
+
+            // 3. Populate options
+            const currentPath = window.location.pathname;
+            data.forEach(v => {
+                const opt = document.createElement("option");
+                const isLatest = v.aliases.includes("latest");
+
+                // If it's the latest, point to the /latest/ alias instead of the version folder
+                opt.value = isLatest ? `/${base_url}/latest/` : `/${base_url}/${v.version}/`;
+
+                opt.textContent = isLatest ? `${v.title} (latest)` : v.title;
+
+                if (currentPath.includes(`/${v.version}/`) || (isLatest && currentPath.includes('/latest/'))) {
+                    opt.selected = true;
+                }
+                select.appendChild(opt);
+            });
+
+            container.appendChild(select);
+
+            stargazers_element.insertAdjacentElement('afterend', container);
+        })
+        .catch(error => console.error("Error loading versions:", error));
+});

mkdocs.yml

@@ -21,6 +21,10 @@ plugins:
       'configurations/reitti-integration.md': 'integrations/reitti.md'
 markdown_extensions:
   - codehilite
-
+extra:
+  version:
+    provider: mike
+extra_javascript:
+  - assets/js/scripts.js
 extra_css:
   - assets/css/styles.css