UI Enhancements: URLs, Web-font path and CSS fixes (#661)

- Only the external links are set to open in new windows/tab
- Fixed incorrect web-font paths being called for preload. 
- Minor CSS transition fixes.
- Conditionally called the search modal's keyboard events.

source/_static/js/instantSearch.js

@@ -123,13 +123,6 @@ window.addEventListener("DOMContentLoaded", () => {
           clearRefinements();
         }
 
-        // Clear the filters on x click
-        document
-          .querySelector(".search__reset")
-          .addEventListener("click", () => {
-            clearRefinements("btn");
-          });
-
         // Fire the search
         search(query);
       },
@@ -271,7 +264,7 @@ window.addEventListener("DOMContentLoaded", () => {
             return false;
           }
 
-          return `<a target="_blank" href="${docUrl}">
+          return `<a target="_blank" rel="noreferrer noopener" href="${docUrl}">
                     ${returnString}
                   </a>`;
         },
@@ -325,13 +318,31 @@ window.addEventListener("DOMContentLoaded", () => {
     });
   });
 
+  // Clear the filters on x click
+  document.addEventListener("click", (e) => {
+    if(e.target.classList.contains("search__reset")) {
+      clearRefinements("btn");
+    }
+  }, false);
+
+  // Close the search modal on outside click
+  document.addEventListener("pointerdown", function (e) {
+    if (e.target.id === "search") {
+      closeSearchModal();
+    }
+  })
+  
+
   // Keyboard events
   document.addEventListener(
     "keydown",
     (e) => {
       // Close the search on esc key press
       if (e.key === "Escape") {
-        closeSearchModal();
+        if(searchModalEl.classList.contains("search--focused") 
+        || searchModalEl.classList.contains("search--active")) {
+          closeSearchModal();
+        }
       }
 
       // Focus the search input on "Meta + K" key press

source/_static/js/main.js

@@ -361,4 +361,18 @@ window.addEventListener("DOMContentLoaded", (event) => {
       });
     }
   })();
+
+  // --------------------------------------------------
+  // Handle internal and external links
+  // --------------------------------------------------
+  (function () {
+    const links = document.querySelectorAll(".content__main a.external");
+    if(links.length > 0) {
+      links.forEach((item) => {
+        item.setAttribute("target", "_blank");
+        item.setAttribute("rel", "noopener");
+        item.setAttribute("rel", "noreferrer");
+      });
+    }
+  })();
 });

source/_static/scss/includes/_nav.scss

@@ -544,7 +544,6 @@
 		font-style: normal;
 		width: fit-content;
 		color: var(--text-muted-color);
-		transition: background-color 200ms;
 	}
 
 	&:hover {

source/_static/scss/includes/_search.scss

@@ -155,6 +155,7 @@
 	& > svg {
 		width: 0.5rem;
 		fill: var(--text-color);
+		pointer-events: none;
 	}
 }
 
@@ -277,6 +278,7 @@
 	align-items: center;
 	line-height: 1;
 	margin-top: 0.35rem;
+	min-height: 1rem;
 
 	.search__hits__platform {
 		margin-top: 0;

source/_templates/head.html

@@ -3,9 +3,9 @@
 <meta name="docsearch:version" content="{{ doc_platform }}"/>
 
 <!-- Preload fonts and scripts -->
-<link rel="preload" href="_static/fonts/inter/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ pathto('_static/fonts/inter/Inter-Regular.woff2', 1) }}" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="_static/fonts/inter/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ pathto('_static/fonts/inter/Inter-Medium.woff2', 1) }}" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="_static/fonts/inter/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ pathto('_static/fonts/inter/Inter-Bold.woff2', 1) }}" as="font" type="font/woff2" crossorigin>
 <link rel="preconnect" href="https://E1CSOK3UC2-dsn.algolia.net" crossorigin />
 
 <!-- Google Tag Manager -->