diff --git a/docs/overrides/javascript/extra.js b/docs/overrides/javascript/extra.js index 5e3d613cbd..916cc8da23 100644 --- a/docs/overrides/javascript/extra.js +++ b/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 = [ - "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) || "{}"); + const palette = JSON.parse(localStorage.getItem(".__palette") || "{}"); 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) { - setTimeout(checkAutoTheme); - } + if (autoThemeInput.checked) setTimeout(checkAutoTheme); }); }); -// Iframe navigation -window.onhashchange = () => { - window.parent.postMessage( - { - type: "navigation", - hash: - window.location.pathname + - window.location.search + - window.location.hash, - }, - "*", - ); -}; - -// Add Inkeep button +// Inkeep -------------------------------------------------------------------------------------------------------------- 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 - const addInkeepWidget = () => { + if (enableSearchBar) { + 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 }, diff --git a/docs/overrides/stylesheets/style.css b/docs/overrides/stylesheets/style.css index d10582db41..5c9f3c22df 100644 --- a/docs/overrides/stylesheets/style.css +++ b/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 ----------------------------------------------------------------------------------------------------------- */ diff --git a/mkdocs.yml b/mkdocs.yml index a92743fab1..7046ba43fa 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -628,8 +628,8 @@ nav: # Plugins including 301 redirects navigation --------------------------------------------------------------------------- plugins: - macros - - search: - lang: en + # - search: + # lang: en - mkdocstrings: enabled: true default_handler: python