Docs Search Bar improvements (#17669)

Signed-off-by: UltralyticsAssistant <web@ultralytics.com>
Co-authored-by: UltralyticsAssistant <web@ultralytics.com>

docs/overrides/javascript/extra.js

@@ -1,4 +1,4 @@
-// Apply theme based on user preference
+// Light/Dark Mode -----------------------------------------------------------------------------------------------------
 const applyTheme = (isDark) => {
   document.body.setAttribute(
     "data-md-color-scheme",
@@ -12,24 +12,7 @@ const applyTheme = (isDark) => {
 
 // Check and apply auto theme
 const checkAutoTheme = () => {
-  const supportedLangCodes = [
+  const palette = JSON.parse(localStorage.getItem(".__palette") || "{}");
-    "en",
-    "zh",
-    "ko",
-    "ja",
-    "ru",
-    "de",
-    "fr",
-    "es",
-    "pt",
-    "it",
-    "tr",
-    "vi",
-    "ar",
-  ];
-  const langCode = window.location.pathname.split("/")[1];
-  const localStorageKey = `${supportedLangCodes.includes(langCode) ? `/${langCode}` : ""}/.__palette`;
-  const palette = JSON.parse(localStorage.getItem(localStorageKey) || "{}");
 
   if (palette.index === 0) {
     applyTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
@@ -47,45 +30,51 @@ checkAutoTheme();
 document.addEventListener("DOMContentLoaded", () => {
   const autoThemeInput = document.getElementById("__palette_1");
   autoThemeInput?.addEventListener("click", () => {
-    if (autoThemeInput.checked) {
+    if (autoThemeInput.checked) setTimeout(checkAutoTheme);
-      setTimeout(checkAutoTheme);
-    }
   });
 });
 
-// Iframe navigation
+// Inkeep --------------------------------------------------------------------------------------------------------------
-window.onhashchange = () => {
-  window.parent.postMessage(
-    {
-      type: "navigation",
-      hash:
-        window.location.pathname +
-        window.location.search +
-        window.location.hash,
-    },
-    "*",
-  );
-};
-
-// Add Inkeep button
 document.addEventListener("DOMContentLoaded", () => {
+  const enableSearchBar = true;
+
   const inkeepScript = document.createElement("script");
   inkeepScript.src = "https://unpkg.com/@inkeep/uikit-js@0.3.18/dist/embed.js";
   inkeepScript.type = "module";
   inkeepScript.defer = true;
   document.head.appendChild(inkeepScript);
 
-  // Configure and initialize the widget
+  if (enableSearchBar) {
-  const addInkeepWidget = () => {
+    const containerDiv = document.createElement("div");
+    containerDiv.style.transform = "scale(0.7)";
+    containerDiv.style.transformOrigin = "left center";
+
+    const inkeepDiv = document.createElement("div");
+    inkeepDiv.id = "inkeepSearchBar";
+    containerDiv.appendChild(inkeepDiv);
+
+    const headerElement = document.querySelector(".md-header__inner");
+    const searchContainer = headerElement.querySelector(".md-header__source");
+
+    if (headerElement && searchContainer) {
+      headerElement.insertBefore(containerDiv, searchContainer);
+    }
+  }
+
+  // configure and initialize the widget
+  const addInkeepWidget = (componentType, targetElementId) => {
     const inkeepWidget = Inkeep().embed({
-      componentType: "ChatButton",
+      componentType,
+      ...(componentType !== "ChatButton"
+        ? { targetElement: targetElementId }
+        : {}),
       colorModeSync: {
         observedElement: document.documentElement,
         isDarkModeCallback: (el) => {
           const currentTheme = el.getAttribute("data-color-mode");
           return currentTheme === "dark";
         },
-        colorModeAttribute: "data-color-mode",
+        colorModeAttribute: "data-color-mode-scheme",
       },
       properties: {
         chatButtonType: "PILL",
@@ -101,13 +90,12 @@ document.addEventListener("DOMContentLoaded", () => {
           theme: {
             stylesheetUrls: ["/stylesheets/style.css"],
           },
-          // ...optional settings
         },
         modalSettings: {
           // optional settings
         },
         searchSettings: {
-          // optional settings
+          placeholder: "Search",
         },
         aiChatSettings: {
           chatSubjectName: "Ultralytics",
@@ -146,11 +134,14 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   };
   inkeepScript.addEventListener("load", () => {
-    addInkeepWidget(); // initialize the widget
+    const widgetContainer = document.getElementById("inkeepSearchBar");
+
+    addInkeepWidget("ChatButton");
+    widgetContainer && addInkeepWidget("SearchBar", "#inkeepSearchBar");
   });
 });
 
-// This object contains the benchmark data for various object detection models.
+// YOLO models chart ---------------------------------------------------------------------------------------------------
 const data = {
   YOLO11: {
     n: { speed: 1.55, mAP: 39.5 },

docs/overrides/stylesheets/style.css

@@ -265,8 +265,15 @@ div.highlight {
 }
 /* MkDocs Ultralytics Plugin ---------------------------------------------------------------------------------------- */
 
-/* Inkeep button font color ----------------------------------------------------------------------------------------- */
+/* Inkeep ----------------------------------------------------------------------------------------------------------- */
 .ikp-floating-button {
   color: #111f68;
 }
-/* Inkeep button ---------------------------------------------------------------------------------------------------- */
+#inkeepSearchBar {
+  transition: all 0.2s ease-in-out;
+}
+#inkeepSearchBar:hover {
+  transform: scale(1.1);
+  filter: brightness(1.2);
+}
+/* Inkeep ----------------------------------------------------------------------------------------------------------- */

mkdocs.yml

@@ -628,8 +628,8 @@ nav:
 # Plugins including 301 redirects navigation ---------------------------------------------------------------------------
 plugins:
   - macros
-  - search:
+  # - search:
-      lang: en
+  #     lang: en
   - mkdocstrings:
       enabled: true
       default_handler: python