/* * Region badge beside the API playground's base-URL selector. * * Mintlify renders the endpoint's base URL as a native and update it whenever the selected region changes. * * The badge carries a flag + region label (e.g. 🇺🇸 United States (East)) so the region * is obvious, styled with a green token so it reads as distinct from Mintlify's * own blue POST pill and {path_param} tokens. * * The selected option's TEXT is the URL (e.g. "https://us-east.api.slng.ai"); * we parse the gateway code (the base-URL subdomain) out of the hostname. * * This hooks Mintlify's client-rendered playground by content, not aria-label: Mintlify's // base-URL picker (HTTP pages) and server picker (WebSocket pages) may label // differently. enhance() below skips any select whose options aren't regional // gateway hosts, so scanning all selects is safe. var SELECTOR = "select"; var FLAG_BASE = "https://hatscripts.github.io/circle-flags/flags"; // Regional gateways are "{code}.api.slng.ai" (e.g. "us-east.api.slng.ai", // "eu-west.api.slng.ai"). Return the gateway code; the global host -> null. // "https://us-east.api.slng.ai" -> "us-east" // "https://api.slng.ai" -> null function regionFromUrl(url) { var host; try { host = new URL(url).hostname; } catch (e) { return null; } var m = host.match(/^([a-z0-9-]+)\.api\.slng\.ai$/i); return m ? m[1].toLowerCase() : null; } // Cluster code -> real country label + ISO-2 flag. The eu-north / eu-west // gateways are physically Netherlands / Germany (gateway-specs clusters.json // `country` field); without this they'd read "EU North" / "EU West". US keeps // its East/West suffix since those share one country. Kept in sync with // CLUSTER_COUNTRY in scripts/generate-model-pages.mjs / build-reference.cjs. var CLUSTER = { "eu-north": { label: "Netherlands", flag: "nl" }, "eu-west": { label: "Germany", flag: "de" }, "us-east": { label: "United States (East)", flag: "us" }, "us-west": { label: "United States (West)", flag: "us" }, gb: { label: "United Kingdom", flag: "gb" }, il: { label: "Israel", flag: "il" }, za: { label: "South Africa", flag: "za" }, in: { label: "India", flag: "in" }, id: { label: "Indonesia", flag: "id" }, sg: { label: "Singapore", flag: "sg" }, jp: { label: "Japan", flag: "jp" }, au: { label: "Australia", flag: "au" }, br: { label: "Brazil", flag: "br" }, }; // Country flag code for a cluster: "eu-north" -> "nl", "au" -> "au". function flagFor(code) { return (CLUSTER[code] && CLUSTER[code].flag) || code.split("-")[0]; } // Friendly badge label: "eu-north" -> "Netherlands", "us-east" -> "United States (East)". function labelFor(code) { if (CLUSTER[code]) return CLUSTER[code].label; return code .split("-") .map(function (p, i) { return i === 0 ? p.toUpperCase() : p.charAt(0).toUpperCase() + p.slice(1); }) .join(" "); } // Build (once) a badge holding a flag + region label, inserted before the // beside it, so the flag + // label and the picker feel like one control. showPicker() needs the click // gesture (present here); fall back to focus() on older browsers. Stop // propagation so the badge doesn't also trigger Mintlify's click-to-copy on // the surrounding endpoint row. function swallow(e) { e.stopPropagation(); } badge.addEventListener("pointerdown", swallow); badge.addEventListener("mousedown", swallow); badge.addEventListener("click", function (e) { e.stopPropagation(); e.preventDefault(); try { select.showPicker(); } catch (err) { select.focus(); } }); select.parentNode.insertBefore(badge, select); return { badge: badge, flag: flag, code: code }; } // Reflect the selected cluster in the HostingBanner box: mark its country // chip active (data-region = country flag code, e.g. "US") and its exact // cluster element active (data-cluster = code, e.g. "us-east") — the // per-variant buttons and single-cluster chips both carry data-cluster. function syncActive(code) { var country = code ? flagFor(code).toUpperCase() : null; var chips = document.querySelectorAll(".hosting-banner__chip[data-region]"); for (var i = 0; i < chips.length; i++) { chips[i].classList.toggle( "is-active", !!(country && chips[i].getAttribute("data-region") === country) ); } var clusters = document.querySelectorAll(".hosting-banner [data-cluster]"); for (var j = 0; j < clusters.length; j++) { clusters[j].classList.toggle( "is-active", !!(code && clusters[j].getAttribute("data-cluster") === code) ); } } function updateFlag(select) { var opt = select.options[select.selectedIndex]; var code = opt ? regionFromUrl((opt.textContent || "").trim()) : null; var parts = ensureBadge(select); if (code) { var flag = flagFor(code); var label = labelFor(code); // The badge is tight on space beside the method pill and base URL, so it // shows the compact 2-letter code (JP, NL, DE); the full country name lives // in the tooltip and the hosting banner box below. parts.flag.style.backgroundImage = "url(" + FLAG_BASE + "/" + flag + ".svg)"; parts.code.textContent = flag.toUpperCase(); parts.badge.setAttribute("aria-label", label); parts.badge.setAttribute("title", label); parts.badge.style.display = ""; } else { // Global / non-regional host — nothing to badge. parts.badge.style.display = "none"; } syncActive(code || null); } function enhance() { var selects = document.querySelectorAll(SELECTOR); for (var i = 0; i < selects.length; i++) { var select = selects[i]; // Only regionalize pickers whose options are actually regional hosts. var hasRegion = false; for (var j = 0; j < select.options.length; j++) { if (regionFromUrl((select.options[j].textContent || "").trim())) { hasRegion = true; break; } } if (!hasRegion) continue; if (!select.__regionFlagBound) { select.__regionFlagBound = true; (function (s) { s.addEventListener("change", function () { updateFlag(s); }); })(select); } updateFlag(select); // Hide Mintlify's native up/down chevron for this picker — the badge now // carries it. Scoped to the select's own row so other pickers are intact. if (select.parentNode) { var nativeChevron = select.parentNode.querySelector(".lucide-chevrons-up-down"); if (nativeChevron) nativeChevron.style.display = "none"; } } } function init() { enhance(); var scheduled = false; var observer = new MutationObserver(function () { // Coalesce bursts of mutations into one enhance() on the next frame. if (scheduled) return; scheduled = true; (window.requestAnimationFrame || window.setTimeout)(function () { scheduled = false; enhance(); }); }); observer.observe(document.body, { childList: true, subtree: true }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })();