optimize version banner warning in our docs

On-behalf-of: @SAP christoph.mewes@sap.com

Author: xrstf

docs/mkdocs.yml

@@ -52,8 +52,12 @@ theme:
         name: Switch to system preference
 
 extra_css:
+  - stylesheets/version_banner.css
   - stylesheets/crd.css
 
+extra_javascript:
+  - scripts/version_banner.js
+
 extra:
   version:
     # Enable mike for multi-version selection

docs/overrides/main.html

@@ -0,0 +1,61 @@
+(function () {
+  "use strict";
+
+  const UNRELEASED_VERSION = "main";
+
+  function getCurrentVersion() {
+    const path = window.location.pathname;
+    const versionMatch = path.match(/\/(main|v\d+\.\d+[^\/]*)/);
+    return versionMatch ? versionMatch[1] : null;
+  }
+
+  function getAvailableVersions() {
+    const versionList = document.querySelector("ul.md-version__list");
+    if (!versionList) return [];
+
+    const links = Array.from(
+      versionList.querySelectorAll("a.md-version__link")
+    );
+
+    return links
+      .map((link) => {
+        const href = link.href || link.getAttribute("href");
+        const match = href.match(/\/(v\d+\.\d+[^\/]*)\//);
+        return match ? match[1] : null;
+      })
+      .filter((v) => v && /^v\d+\.\d+/.test(v))
+      .filter((v, i, arr) => arr.indexOf(v) === i);
+  }
+
+  function getLatestVersionPath() {
+    const versions = getAvailableVersions();
+    const latestVersion = versions[0];
+    const currentPath = window.location.pathname;
+
+    return (
+      currentPath.replace(/\/main(\/|$)/, `/${latestVersion}$1`) ||
+      `/${latestVersion}/`
+    );
+  }
+
+  function createBanner() {
+    const banner = document.createElement("div");
+    banner.id = "version-banner";
+    banner.innerHTML = `
+    <strong>You are viewing the docs for an unreleased version.</strong>
+    <a href="#" id="latest-version-link">Click here to go to the latest stable version.</a>
+  `;
+
+    banner.querySelector("#latest-version-link").href = getLatestVersionPath();
+
+    document.body.insertBefore(banner, document.body.firstChild);
+
+    return banner;
+  }
+
+  if (getCurrentVersion() !== UNRELEASED_VERSION) {
+    return;
+  }
+
+  createBanner();
+})();

docs/overrides/scripts/version_banner.js

@@ -0,0 +1,28 @@
+#version-banner {
+  display: block;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background-color: #448aff;
+  color: white;
+  padding: 8px 16px;
+  text-align: center;
+  font-size: 0.7rem;
+  z-index: 10000;
+}
+
+#version-banner a {
+  color: white;
+  text-decoration: underline;
+  margin-left: 8px;
+}
+
+#version-banner a:hover {
+  text-decoration: none;
+}
+
+.md-header {
+  transition: top 0.2s ease;
+}