stack/docs-mintlify/code-language-labels.js
2026-05-22 16:28:43 -07:00

60 lines
2.0 KiB
JavaScript

(function () {
const REACT_ICON_URL = "https://d3gk2c5xim1je2.cloudfront.net/devicon/react.svg";
const LANGUAGE_BUTTON_SELECTOR = "button[aria-haspopup='menu']";
const LANGUAGE_ITEM_SELECTOR = "[role='menuitem']";
function getVisibleLabelElement(root) {
const labelCandidates = Array.from(root.querySelectorAll("p, span, div"));
return labelCandidates.find((element) => element.children.length === 0 && element.textContent?.trim().toLowerCase() === "tsx") ?? null;
}
function applyReactIcon(root) {
const icon = root.querySelector("svg");
if (icon == null) {
return;
}
icon.style.WebkitMaskImage = `url(${REACT_ICON_URL})`;
icon.style.WebkitMaskRepeat = "no-repeat";
icon.style.WebkitMaskPosition = "center";
icon.style.maskImage = `url(${REACT_ICON_URL})`;
icon.style.maskRepeat = "no-repeat";
icon.style.maskPosition = "center";
icon.style.maskSize = "100%";
icon.style.backgroundColor = "currentColor";
}
function relabelTsxControl(root) {
if (root.dataset.stackReactLabelApplied === "true") {
return;
}
const labelElement = getVisibleLabelElement(root);
if (labelElement == null) {
return;
}
labelElement.textContent = "React";
applyReactIcon(root);
root.setAttribute("aria-label", root.getAttribute("aria-label")?.replace(/\btsx\b/i, "React") ?? "React");
root.dataset.stackReactLabelApplied = "true";
}
function relabelTsxControls() {
for (const element of document.querySelectorAll(`${LANGUAGE_BUTTON_SELECTOR}, ${LANGUAGE_ITEM_SELECTOR}`)) {
relabelTsxControl(element);
}
}
function installWhenReady() {
relabelTsxControls();
window.setTimeout(relabelTsxControls, 250);
}
if (typeof window !== "undefined" && typeof document !== "undefined") {
window.requestAnimationFrame(installWhenReady);
const observer = new MutationObserver(() => relabelTsxControls());
observer.observe(document.documentElement, { childList: true, subtree: true });
}
})();