docs: show a warning banner for the latest docs

docs/content/assets/warning-banner-for-latest.js

@@ -0,0 +1,31 @@
+document.addEventListener("DOMContentLoaded", function () {
+    load_warning_banner_for_latest();
+});
+
+function load_warning_banner_for_latest() {
+    let currentUrl = window.location.href;
+
+    if (currentUrl.includes('/latest/')) {
+        // Insert the warning banner as the first element in the body
+        document.body.insertAdjacentHTML('afterbegin', `
+            <div id="warning-banner-for-latest" data-md-color-scheme="default" style="display: none;">
+                <aside class="md-banner md-banner--warning">
+                    <div class="md-banner__inner md-grid md-typeset">
+                        You’re viewing the latest unreleased version.
+                        <a href="${currentUrl.replace(/\/latest\//, '/stable/')}">
+                            <strong>Click here to go to stable.</strong>
+                        </a>
+                    </div>
+                </aside>
+            </div>
+        `);
+
+        // Display the warning banner after a delay to reduce flickering
+        setTimeout(() => {
+            let warningBanner = document.getElementById('warning-banner-for-latest');
+            if (warningBanner) {
+                warningBanner.style.display = 'block';
+            }
+        }, 100);
+    }
+}

mkdocs.yml

@@ -10,6 +10,7 @@ extra_javascript:
 - 'assets/jquery-3.5.1.min.js'
 #- 'assets/extra.js'
 - 'assets/temp-fix-header-links-in-tabs.js'
+- 'assets/warning-banner-for-latest.js'
 extra_css:
 - 'assets/extra.css'
 site_author: DDEV Foundation