Make error page version aware (#2935)

* Make error page version aware

* Fixed search link

* Removed alt text from image

* Removed double slash

Author: mnocon

docs/css/page-not-found.css

@@ -1,38 +1,13 @@
 .page-not-found {
-    text-align: center;
-    margin: 50px;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 50px;   
 }
 
 .page-not-found h1 {
     font-weight: normal;
+    text-align: center;
     font-size: 37px;
     margin: 30px 0 10px;
 }
-
-.page-not-found h2 {
-    font-weight: normal;
-    font-size: 30px;
-    margin: 0 0 70px;
-}
-
-.page-not-found h3 {
-    font-weight: normal;
-    font-size: 25px;
-    margin: 0 0 20px;
-    color: var(--dark-grey);
-}
-
-.page-not-found ul {
-    display: inline-flex;
-    list-style-type: none;
-    margin: 0;
-}
-
-.page-not-found ul li {
-    padding: 0 30px;
-    margin: 0;
-}
-
-.page-not-found li + li {
-    border-left: 1px solid black;
-}

docs/js/error-page.js

@@ -0,0 +1,20 @@
+(function (global, doc) {
+    const errorPageContainer = doc.querySelector('.page-not-found');
+
+    if (!errorPageContainer) {
+        return;
+    }
+
+    // Replace all TOC links with the correct version
+    let currentVersion = '5.0';
+    const branchNameRegexp = /\/en\/([a-z0-9-_.]*)\//g.exec(document.location.href);
+
+    if (branchNameRegexp !== null && branchNameRegexp.hasOwnProperty(1) && branchNameRegexp[1].length) {
+        currentVersion = branchNameRegexp[1];
+    }
+
+    doc.querySelectorAll('.md-sidebar--primary .md-nav__item a, .page-not-found a').forEach(link => {
+        link.href = link.href.replace(/\/en\/([a-z0-9-_.]*)\//, `/en/${currentVersion}/`);
+    });
+
+})(window, window.document);

mkdocs.yml

@@ -1005,6 +1005,7 @@ extra_javascript:
   - js/jquery.min.js
   - js/jquery-ui.min.js
   - js/custom.js
+  - js/error-page.js
   - js/release-notes.js
   - js/docs.switcher.js
   - '//cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js'

theme/404.html

@@ -2,8 +2,19 @@
 
 {% block content %}
 <div class="page-not-found">
-    <img src="/images/404.png" alt="Not found" />
     <h1>Page not found.</h1>
-    <a href="/">Back to front page</a>
+    <img src="/images/404.png" alt="" />
+    {% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
+    <p>This link might be out-of-date. Go to the <a href="{{ site_url }}">main documentation page</a> or <a id="search-link"href="{{ site_url }}search_results/?sq=&p=1">use the search</a> to find what you are looking for.</p>
 </div>
+
+<script>
+    // Get the actual 404 URL path and use it in initial search query
+    const searchLink = document.querySelector('#search-link');
+    const basePath = '{{ site_url }}';
+    const suffix = window.location.href.substring(basePath.length);
+    const searchQuery = suffix.replaceAll('/', ' ').replaceAll('_', ' ');
+    searchLink.href = searchLink.href.replace('?sq=', '?sq=' + encodeURIComponent(searchQuery));
+</script>
+
 {% endblock %}