/* * 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. 🇺🇸 US Central) 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-central.api.slng.ai"); * we parse the cluster code (the base-URL subdomain) out of the hostname. * * This hooks Mintlify's client-rendered DOM (select[aria-label="Select base * URL"]), so it is defensive: it no-ops when the select isn't present and * re-attaches via a MutationObserver when Mintlify (re)renders the playground. */ (function () { "use strict"; var SELECTOR = 'select[aria-label="Select base URL"]'; var FLAG_BASE = "https://hatscripts.github.io/circle-flags/flags"; // Regional gateways are "{code}.api.slng.ai" (e.g. "us-central.api.slng.ai", // "eu.api.slng.ai"). Return the cluster code; global/staging hosts -> null. // "https://us-central.api.slng.ai" -> "us-central" // "https://api.slng.ai" / "https://stageapi.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; } // Country flag code for a cluster: "us-central" -> "us", "eu" -> "eu". function flagFor(code) { return code.split("-")[0]; } // Friendly badge label: "us-central" -> "US Central", "eu" -> "EU". function labelFor(code) { 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-central") — 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); parts.flag.style.backgroundImage = "url(" + FLAG_BASE + "/" + flag + ".svg)"; parts.code.textContent = label; 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(); } })();