language switcher

docs/mkdocs.yml

@@ -398,4 +398,6 @@ extra_css:
   - stylesheets/logos.css
   - stylesheets/sticky_navigation.css
   - stylesheets/agent_graph_widget.css
-
+  - language-switcher.css
+extra_javascript:
+  - language-switcher.js

docs/overrides/language-switcher.css

@@ -0,0 +1,41 @@
+.lang-python,
+.lang-javascript {
+    display: none;
+}
+
+.language-switcher-global {
+    display: flex;
+    align-items: center;
+    padding-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+/* Style the select to match the header */
+.language-switcher-global select {
+    appearance: none;
+    font: inherit;
+    border: none;
+    padding: 0.25rem 0.6rem;
+    cursor: pointer;
+    outline: none;
+    font-weight: bolder;
+}
+
+/* Hover/focus effect */
+.language-switcher-global select:hover,
+.language-switcher-global select:focus {
+    text-decoration: underline;
+}
+
+/* Theme-specific overrides */
+html[data-md-color-scheme="default"] .language-switcher-global select,
+html[data-md-color-scheme="default"] .language-switcher-global option {
+    color: #333;
+    background-color: transparent;
+}
+
+html[data-md-color-scheme="slate"] .language-switcher-global select,
+html[data-md-color-scheme="slate"] .language-switcher-global option {
+    color: #eee;
+    background-color: transparent;
+}

docs/overrides/language-switcher.js

@@ -0,0 +1,38 @@
+function applyLanguageSwitching() {
+    const selector = document.getElementById("global-language-selector");
+
+    const langBlocks = {
+        python: document.querySelectorAll(".lang-python"),
+        javascript: document.querySelectorAll(".lang-javascript"),
+    };
+
+    const setLanguage = (lang) => {
+        for (const [key, blocks] of Object.entries(langBlocks)) {
+            blocks.forEach((block) => {
+                block.style.display = key === lang ? "block" : "none";
+            });
+        }
+        localStorage.setItem("preferredLang", lang);
+    };
+
+    const saved = localStorage.getItem("preferredLang") || "python";
+
+    if (selector) {
+        selector.value = saved;
+        selector.addEventListener("change", (e) => setLanguage(e.target.value));
+    }
+
+    setLanguage(saved);
+}
+
+// Run on initial load
+document.addEventListener("DOMContentLoaded", applyLanguageSwitching);
+
+// Re-run after client-side navigation (MkDocs Material)
+document.addEventListener("pjax:success", applyLanguageSwitching);
+
+// Optional: observe DOM changes (e.g., for late-loaded content)
+if (window.MutationObserver) {
+    const observer = new MutationObserver(() => applyLanguageSwitching());
+    observer.observe(document.body, { childList: true, subtree: true });
+}

docs/overrides/partials/header.html

@@ -0,0 +1,70 @@
+{#-
+  This file was automatically generated - do not edit
+-#}
+{% set class = "md-header" %}
+{% if "navigation.tabs.sticky" in features %}
+  {% set class = class ~ " md-header--shadow md-header--lifted" %}
+{% elif "navigation.tabs" not in features %}
+  {% set class = class ~ " md-header--shadow" %}
+{% endif %}
+<header class="{{ class }}" data-md-component="header">
+  <nav class="md-header__inner md-grid" aria-label="{{ lang.t('header') }}">
+    <a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" title="{{ config.site_name | e }}" class="md-header__button md-logo" aria-label="{{ config.site_name }}" data-md-component="logo">
+      {% include "partials/logo.html" %}
+    </a>
+    <label class="md-header__button md-icon" for="__drawer">
+      {% set icon = config.theme.icon.menu or "material/menu" %}
+      {% include ".icons/" ~ icon ~ ".svg" %}
+    </label>
+    <div class="md-header__title" data-md-component="header-title">
+      <div class="md-header__ellipsis">
+        <div class="md-header__topic">
+          <span class="md-ellipsis">
+            {{ config.site_name }}
+          </span>
+        </div>
+        <div class="md-header__topic" data-md-component="header-topic">
+          <span class="md-ellipsis">
+            {% if page.meta and page.meta.title %}
+              {{ page.meta.title }}
+            {% else %}
+              {{ page.title }}
+            {% endif %}
+          </span>
+        </div>
+      </div>
+    </div>
+    {% if config.theme.palette %}
+      {% if not config.theme.palette is mapping %}
+        {% include "partials/palette.html" %}
+      {% endif %}
+    {% endif %}
+    {% if not config.theme.palette is mapping %}
+      {% include "partials/javascripts/palette.html" %}
+    {% endif %}
+    {% if config.extra.alternate %}
+      {% include "partials/alternate.html" %}
+    {% endif %}
+    {% if "material/search" in config.plugins %}
+      {% set search = config.plugins["material/search"] | attr("config") %}
+      {% if search.enabled %}
+        <label class="md-header__button md-icon" for="__search">
+          {% set icon = config.theme.icon.search or "material/magnify" %}
+          {% include ".icons/" ~ icon ~ ".svg" %}
+        </label>
+        {% include "partials/search.html" %}
+      {% endif %}
+    {% endif %}
+    {% if config.repo_url %}
+      <div class="md-header__source">
+        {% include "partials/source.html" %}
+      </div>
+    {% endif %}
+    {% include "partials/language-toggle.html" %}
+  </nav>
+  {% if "navigation.tabs.sticky" in features %}
+    {% if "navigation.tabs" in features %}
+      {% include "partials/tabs.html" %}
+    {% endif %}
+  {% endif %}
+</header>

docs/overrides/partials/language-toggle.html

@@ -0,0 +1,6 @@
+<div class="md-header__button language-switcher-global" title="Select Language">
+  <select id="global-language-selector" aria-label="Select Language">
+    <option value="python">🐍 Python</option>
+    <option value="javascript">⚡️ JavaScript</option>
+  </select>
+</div>