Add region selector for multi-region documentation URLs

docs/_static/custom.css

@@ -352,3 +352,87 @@ h3 {
 .success-icon {
     color: #28a745; /* or any green color you prefer */
 }
+
+/* Region selector */
+.md-typeset .robusta-region-selector,
+.robusta-region-selector {
+    display: flex !important;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    margin: 1rem 0 1.5rem !important;
+    padding: 0.7rem 0.9rem;
+    border: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.12));
+    border-left: 3px solid var(--md-primary-fg-color, #1976d2);
+    border-radius: 4px;
+    background-color: var(--md-code-bg-color, rgba(0, 0, 0, 0.04));
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+.md-typeset .robusta-region-selector__label,
+.robusta-region-selector__label {
+    font-weight: 600;
+    color: var(--md-default-fg-color, inherit);
+    margin-right: 0.25rem;
+}
+
+.md-typeset .robusta-region-selector__options,
+.robusta-region-selector__options {
+    display: inline-flex !important;
+    gap: 0.35rem;
+    align-items: center;
+}
+
+.md-typeset .robusta-region-selector__btn,
+.robusta-region-selector__btn {
+    display: inline-block !important;
+    -webkit-appearance: none;
+    appearance: none;
+    border: 1px solid var(--md-default-fg-color--lighter, rgba(0, 0, 0, 0.26)) !important;
+    background: var(--md-default-bg-color, #fff) !important;
+    color: var(--md-default-fg-color, #333) !important;
+    padding: 0.3rem 0.85rem !important;
+    border-radius: 3px !important;
+    cursor: pointer;
+    font: inherit;
+    font-weight: 500;
+    line-height: 1.2;
+    min-width: 2.5rem;
+    text-align: center;
+    box-shadow: none;
+    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.md-typeset .robusta-region-selector__btn:hover,
+.robusta-region-selector__btn:hover {
+    border-color: var(--md-primary-fg-color, #1976d2) !important;
+    color: var(--md-primary-fg-color, #1976d2) !important;
+}
+
+.md-typeset .robusta-region-selector__btn.is-active,
+.robusta-region-selector__btn.is-active {
+    background: var(--md-primary-fg-color, #1976d2) !important;
+    border-color: var(--md-primary-fg-color, #1976d2) !important;
+    color: var(--md-primary-bg-color, #fff) !important;
+}
+
+.md-typeset .robusta-region-selector__btn:focus-visible,
+.robusta-region-selector__btn:focus-visible {
+    outline: 2px solid var(--md-accent-fg-color, #1976d2);
+    outline-offset: 2px;
+}
+
+.md-typeset .robusta-region-selector__note,
+.robusta-region-selector__note {
+    color: var(--md-default-fg-color--light, rgba(0, 0, 0, 0.6));
+    font-size: 0.72rem;
+    margin-left: auto;
+}
+
+@media (max-width: 600px) {
+    .robusta-region-selector__note {
+        flex-basis: 100%;
+        margin-left: 0;
+    }
+}

docs/_static/region-selector.js

@@ -0,0 +1,177 @@
+(function () {
+  "use strict";
+
+  const REGIONS = {
+    us: { label: "US", infix: "" },
+    eu: { label: "EU", infix: ".eu" },
+    ap: { label: "AP", infix: ".ap" },
+  };
+  const STORAGE_KEY = "robusta-docs-region";
+  const URL_PATTERN = /\b(platform|api)(?:\.(?:eu|ap))?\.robusta\.dev\b/g;
+  const DETECT_PATTERN = /\b(?:platform|api)(?:\.(?:eu|ap))?\.robusta\.dev\b/;
+
+  function getRegion() {
+    try {
+      const r = localStorage.getItem(STORAGE_KEY);
+      return REGIONS[r] ? r : "us";
+    } catch (e) {
+      return "us";
+    }
+  }
+
+  function saveRegion(r) {
+    try {
+      localStorage.setItem(STORAGE_KEY, r);
+    } catch (e) {}
+  }
+
+  function rewrite(text, regionKey) {
+    const infix = REGIONS[regionKey].infix;
+    return text.replace(URL_PATTERN, function (_, sub) {
+      return sub + infix + ".robusta.dev";
+    });
+  }
+
+  const targets = [];
+
+  function resetTargets() {
+    targets.length = 0;
+  }
+
+  function collectTextNodes(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode: function (node) {
+        if (!node.nodeValue || !DETECT_PATTERN.test(node.nodeValue)) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        const parent = node.parentNode;
+        if (parent && (parent.tagName === "SCRIPT" || parent.tagName === "STYLE")) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    });
+    let node;
+    while ((node = walker.nextNode())) {
+      targets.push({ kind: "text", node: node, original: node.nodeValue });
+    }
+  }
+
+  function collectAttributes(root) {
+    const ATTR_NAMES = ["href", "src", "data-clipboard-text", "value", "title"];
+    const selector = ATTR_NAMES.map(function (a) { return "[" + a + "]"; }).join(",");
+    root.querySelectorAll(selector).forEach(function (el) {
+      ATTR_NAMES.forEach(function (attr) {
+        const v = el.getAttribute(attr);
+        if (v && DETECT_PATTERN.test(v)) {
+          targets.push({ kind: "attr", node: el, attr: attr, original: v });
+        }
+      });
+    });
+  }
+
+  function applyRegion(regionKey) {
+    for (let i = 0; i < targets.length; i++) {
+      const t = targets[i];
+      const next = rewrite(t.original, regionKey);
+      if (t.kind === "text") {
+        if (t.node.nodeValue !== next) t.node.nodeValue = next;
+      } else {
+        if (t.node.getAttribute(t.attr) !== next) t.node.setAttribute(t.attr, next);
+      }
+    }
+  }
+
+  function buildToggle(current) {
+    const wrap = document.createElement("div");
+    wrap.className = "robusta-region-selector";
+    wrap.setAttribute("role", "region");
+    wrap.setAttribute("aria-label", "Robusta region selector");
+
+    const label = document.createElement("span");
+    label.className = "robusta-region-selector__label";
+    label.textContent = "Select your region:";
+    wrap.appendChild(label);
+
+    const group = document.createElement("div");
+    group.className = "robusta-region-selector__options";
+    group.setAttribute("role", "radiogroup");
+
+    Object.keys(REGIONS).forEach(function (key) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.setAttribute("role", "radio");
+      btn.setAttribute("data-region", key);
+      btn.className = "robusta-region-selector__btn";
+      btn.textContent = REGIONS[key].label;
+      const active = key === current;
+      btn.setAttribute("aria-checked", String(active));
+      if (active) btn.classList.add("is-active");
+      btn.addEventListener("click", function () {
+        const r = btn.getAttribute("data-region");
+        saveRegion(r);
+        applyRegion(r);
+        group.querySelectorAll("button[data-region]").forEach(function (b) {
+          const isActive = b.getAttribute("data-region") === r;
+          b.classList.toggle("is-active", isActive);
+          b.setAttribute("aria-checked", String(isActive));
+        });
+      });
+      group.appendChild(btn);
+    });
+
+    wrap.appendChild(group);
+
+    const note = document.createElement("span");
+    note.className = "robusta-region-selector__note";
+    note.textContent = "URLs on this page will update to match.";
+    wrap.appendChild(note);
+
+    return wrap;
+  }
+
+  function init() {
+    const content =
+      document.querySelector(".md-content__inner") ||
+      document.querySelector("article.md-content__inner") ||
+      document.querySelector("article") ||
+      document.querySelector("main");
+    if (!content) return;
+
+    resetTargets();
+
+    const existing = content.querySelector(".robusta-region-selector");
+    if (existing && existing.parentNode) {
+      existing.parentNode.removeChild(existing);
+    }
+
+    collectTextNodes(content);
+    collectAttributes(content);
+    if (targets.length === 0) return;
+
+    const region = getRegion();
+    const toggle = buildToggle(region);
+
+    const firstHeading = content.querySelector("h1");
+    if (firstHeading && firstHeading.parentNode) {
+      firstHeading.parentNode.insertBefore(toggle, firstHeading.nextSibling);
+    } else {
+      content.insertBefore(toggle, content.firstChild);
+    }
+
+    applyRegion(region);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  // Material/Sphinx-Immaterial instant navigation swaps the content area
+  // without firing DOMContentLoaded. The theme exposes an RxJS `document$`
+  // observable that emits on every swap; re-run init() on each emission.
+  if (typeof window !== "undefined" && window.document$ && typeof window.document$.subscribe === "function") {
+    window.document$.subscribe(init);
+  }
+})();

docs/conf.py

@@ -370,7 +370,7 @@
     "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css",
 ]
 
-html_js_files = ["analytics.js"]
+html_js_files = ["analytics.js", "region-selector.js"]
 
 html_favicon = "_static/favicon.png"