From 149dd26afe280e9893db4e94f8bd7e8a9d1bb845 Mon Sep 17 00:00:00 2001
From: Glenn Jocher <glenn.jocher@ultralytics.com>
Date: Mon, 5 May 2025 21:54:11 +0200
Subject: [PATCH] Fix language switch HTML solution with JS (#20504)

Co-authored-by: UltralyticsAssistant <web@ultralytics.com>
---
 docs/build_docs.py                 | 29 ---------------
 docs/mkdocs_github_authors.yaml    |  3 ++
 docs/overrides/javascript/extra.js | 57 ++++++++++++++++++++++++++++--
 mkdocs.yml                         | 26 +++++++-------
 4 files changed, 71 insertions(+), 44 deletions(-)

diff --git a/docs/build_docs.py b/docs/build_docs.py
index 51a356c6ac..247ec99c76 100644
--- a/docs/build_docs.py
+++ b/docs/build_docs.py
@@ -224,35 +224,6 @@ def update_docs_soup(content: str, html_file: Path = None, max_title_length: int
             a.replace_with(soup.new_tag("span"))  # Replace with an empty span
         modified = True
 
-    # Fix language switcher links
-    if html_file:
-        # Get page path without index.html
-        current_path = file_path = "/" + str(html_file.relative_to(SITE)).replace("\\", "/").replace("index.html", "")
-
-        # Get language links and extract language codes
-        lang_links = soup.select(".md-select__link")
-        lang_codes = [m.group(1) for link in lang_links if (m := re.match(r"^/([a-z]{2})/?$", link.get("href", "")))]
-
-        # Find current language and path
-        for lang in lang_codes:
-            if file_path.startswith(f"/{lang}/"):
-                current_path = file_path[len(f"/{lang}") :]
-                break
-
-        # Update all language links
-        for link in lang_links:
-            href = link.get("href", "")
-            match = re.match(r"^/([a-z]{2})/?$", href)
-
-            if match:
-                # Language root link (e.g., /zh/)
-                link["href"] = f"/{match.group(1)}{current_path}"
-                modified = True
-            elif href == "/" or href == "":
-                # Default language link
-                link["href"] = current_path
-                modified = True
-
     return str(soup) if modified else content
 
 
diff --git a/docs/mkdocs_github_authors.yaml b/docs/mkdocs_github_authors.yaml
index fdd88cc1d8..5bf58deb43 100644
--- a/docs/mkdocs_github_authors.yaml
+++ b/docs/mkdocs_github_authors.yaml
@@ -67,6 +67,9 @@
 40165666+berry-ding@users.noreply.github.com:
   avatar: https://avatars.githubusercontent.com/u/40165666?v=4
   username: berry-ding
+40582518+erfan-zekri@users.noreply.github.com:
+  avatar: https://avatars.githubusercontent.com/u/40582518?v=4
+  username: erfan-zekri
 44016758+M-Amrollahi@users.noreply.github.com:
   avatar: https://avatars.githubusercontent.com/u/44016758?v=4
   username: M-Amrollahi
diff --git a/docs/overrides/javascript/extra.js b/docs/overrides/javascript/extra.js
index 58b9024bb6..234ba3011c 100644
--- a/docs/overrides/javascript/extra.js
+++ b/docs/overrides/javascript/extra.js
@@ -71,8 +71,6 @@ document.addEventListener("DOMContentLoaded", () => {
   const config = {
     baseSettings: {
       apiKey: "13dfec2e75982bc9bae3199a08e13b86b5fbacd64e9b2f89",
-      integrationId: "cm1shscmm00y26sj83lgxzvkw",
-      organizationId: "org_e3869az6hQZ0mXdF",
       primaryBrandColor: "#E1FF25",
       organizationDisplayName: "Ultralytics",
       colorMode: {
@@ -164,3 +162,58 @@ document.addEventListener("DOMContentLoaded", () => {
     widgetContainer && Inkeep.SearchBar("#inkeepSearchBar", config);
   });
 });
+
+// Fix language switcher links
+(function () {
+  function fixLanguageLinks() {
+    const path = location.pathname;
+    const links = document.querySelectorAll(".md-select__link");
+    if (!links.length) return;
+
+    const langs = [];
+    let defaultLink = null;
+
+    // Extract language codes
+    links.forEach((link) => {
+      const href = link.getAttribute("href");
+      if (!href) return;
+
+      const url = new URL(href, location.origin);
+      const match = url.pathname.match(/^\/([a-z]{2})\/?$/);
+
+      if (match) langs.push({ code: match[1], link });
+      else if (url.pathname === "/" || url.pathname === "") defaultLink = link;
+    });
+
+    // Find current language and base path
+    let basePath = path;
+    for (const lang of langs) {
+      if (path.startsWith("/" + lang.code + "/")) {
+        basePath = path.substring(lang.code.length + 1);
+        break;
+      }
+    }
+
+    // Update links
+    langs.forEach(
+      (lang) => (lang.link.href = location.origin + "/" + lang.code + basePath),
+    );
+    if (defaultLink) defaultLink.href = location.origin + basePath;
+  }
+
+  // Run immediately
+  fixLanguageLinks();
+
+  // Handle SPA navigation
+  if (typeof document$ !== "undefined") {
+    document$.subscribe(() => setTimeout(fixLanguageLinks, 50));
+  } else {
+    let lastPath = location.pathname;
+    setInterval(() => {
+      if (location.pathname !== lastPath) {
+        lastPath = location.pathname;
+        setTimeout(fixLanguageLinks, 50);
+      }
+    }, 200);
+  }
+})();
diff --git a/mkdocs.yml b/mkdocs.yml
index 266aed1b1d..4e00537fae 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -98,43 +98,43 @@ extra: # version:
     - icon: fontawesome/brands/weixin
       link: https://weixin.qq.com/r/mp/LxckPDfEgWr_rXNf90I9
   alternate:
-    - name: English
+    - name: 🇬🇧 English
       link: /
       lang: en
-    - name: 简体中文
+    - name: 🇨🇳 简体中文
       link: /zh/
       lang: zh
-    - name: 한국어
+    - name: 🇰🇷 한국어
       link: /ko/
       lang: ko
-    - name: 日本語
+    - name: 🇯🇵 日本語
       link: /ja/
       lang: ja
-    - name: Русский
+    - name: 🇷🇺 Русский
       link: /ru/
       lang: ru
-    - name: Deutsch
+    - name: 🇩🇪 Deutsch
       link: /de/
       lang: de
-    - name: Français
+    - name: 🇫🇷 Français
       link: /fr/
       lang: fr
-    - name: Español
+    - name: 🇪🇸 Español
       link: /es/
       lang: es
-    - name: Português
+    - name: 🇵🇹 Português
       link: /pt/
       lang: pt
-    - name: Italiano
+    - name: 🇮🇹 Italiano
       link: /it/
       lang: it
-    - name: Türkçe
+    - name: 🇹🇷 Türkçe
       link: /tr/
       lang: tr
-    - name: Tiếng Việt
+    - name: 🇻🇳 Tiếng Việt
       link: /vi/
       lang: vi
-    - name: العربية
+    - name: 🇸🇦 العربية
       link: /ar/
       lang: ar