Out-of-date version banner

Author: hello-binit

docs/extra.css

@@ -46,3 +46,19 @@ div.doc-contents {
 .highlight.no-copy .md-clipboard {
   display: none;
 }
+
+/* Old Docs Banner */
+div[data-md-component=announce] {
+    background-color: rgba(255,145,0,.1);
+}
+div[data-md-component=announce]>div#announce-msg{
+    color: var(--md-admonition-fg-color);
+    font-size: .8rem;
+    text-align: center;
+    margin: 15px;
+}
+div[data-md-component=announce]>div#announce-msg>a{
+    color: var(--md-typeset-a-color);
+    text-decoration: underline;
+}
+

docs/extra.js

@@ -0,0 +1,19 @@
+// Show warning banner when displaying old content versions
+window.addEventListener("DOMContentLoaded", function() {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/versions.json");
+    xhr.onload = function() {
+        var versions = JSON.parse(this.responseText);
+        latest_version = ""
+        for (id in versions) {
+            if (versions[id]["aliases"].length > 0 && versions[id]["aliases"].includes("latest")) {
+                latest_version = "/" + versions[id].version + "/";
+            }
+        }
+        if (!window.location.pathname.includes("/latest/") && (latest_version.length > 0 && !window.location.pathname.includes(latest_version))) {
+            document.querySelector("div[data-md-component=announce]").innerHTML = "<div id='announce-msg'>This documentation is for a previous version. We recommend you <a href='/latest/'>use the latest</a>.</div>";
+        }
+    };
+    xhr.send();
+});
+

mkdocs.yml

@@ -26,6 +26,8 @@ theme:
 
 extra_css:
   - extra.css
+extra_javascript:
+  - extra.js
 
 markdown_extensions:
   - pymdownx.highlight