// ============================================================================= // Code Placeholder Replacement System // ============================================================================= // Automatically adds a configuration bar below code snippets containing // placeholders (AXIOM_DOMAIN, DATASET_NAME, API_TOKEN). Values persist in // sessionStorage and never leave the client. (function() { // Check if sessionStorage is available var storageAvailable = (function() { try { var test = "__storage_test__"; sessionStorage.setItem(test, test); sessionStorage.removeItem(test); return true; } catch (e) { return false; } })(); var STORAGE_KEY = "axiom-docs-placeholders"; var PLACEHOLDERS = { "AXIOM_DOMAIN": { label: "Edge domain", placeholder: "us-east-1.aws.edge.axiom.co", help: 'The base domain of your edge deployment. For more information, see Edge deployments.', type: "select", options: [ { value: "", label: "Select edge deployment" }, { value: "us-east-1.aws.edge.axiom.co", label: "US East 1 (AWS)" }, { value: "eu-central-1.aws.edge.axiom.co", label: "EU Central 1 (AWS)" } ] }, "API_TOKEN": { label: "API token", placeholder: "xaat-api-token", help: "The Axiom API token you have generated. For added security, store the API token in an environment variable." }, "DATASET_NAME": { label: "Dataset name", placeholder: "dataset-name", help: "The name of the Axiom dataset where you send your data." }, "ORGANIZATION_ID": { label: "Organization ID", placeholder: "org-id", help: 'The ID of your Axiom organization. For more information, see Determine organization ID.' } }; var PLACEHOLDER_PATTERNS = Object.keys(PLACEHOLDERS); var originalCodeContent = new WeakMap(); var originalCodeHTML = new WeakMap(); var additionalPlaceholders = new WeakMap(); // Track extra placeholders from info callouts // Generate unique IDs using timestamp + random function generateUniqueId(key) { return "axiom-" + key.toLowerCase().replace(/_/g, "-") + "-" + Date.now() + "-" + Math.random().toString(36).substr(2, 9); } function loadStoredValues() { if (!storageAvailable) return {}; try { var stored = sessionStorage.getItem(STORAGE_KEY); return stored ? JSON.parse(stored) : {}; } catch (e) { return {}; } } function saveValues(values) { if (!storageAvailable) return; try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify(values)); } catch (e) {} } function getPlaceholdersInText(text) { return PLACEHOLDER_PATTERNS.filter(function(p) { return text.includes(p); }); } // Update select element color based on whether a value is selected function updateSelectColor(selectElement, hasValue) { selectElement.classList.toggle("is-placeholder", !hasValue); } // Inject styles for select element colors // Uses Tailwind color values - equivalent classes noted in comments function injectSelectStyles() { if (document.getElementById("axiom-placeholder-styles")) return; var style = document.createElement("style"); style.id = "axiom-placeholder-styles"; style.textContent = [ // Normal state: text-neutral-800 / dark:text-neutral-200 ".axiom-placeholder-select { color: rgb(38 38 38); }", ".dark .axiom-placeholder-select { color: rgb(229 229 229); }", // Placeholder state: text-neutral-400 / dark:text-neutral-500 ".axiom-placeholder-select.is-placeholder { color: rgb(163 163 163); }", ".dark .axiom-placeholder-select.is-placeholder { color: rgb(115 115 115); }" ].join("\n"); document.head.appendChild(style); } function replacePlaceholders(text, values) { var result = text; PLACEHOLDER_PATTERNS.forEach(function(pattern) { if (values[pattern]) { var regex = new RegExp(pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'); result = result.replace(regex, values[pattern]); } }); return result; } // Detect if dark mode is active (only check explicit site theme, not system preference) function isDarkMode() { return document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || document.body.getAttribute("data-theme") === "dark"; } // Get the highlight color based on current theme function getHighlightColor() { return isDarkMode() ? "rgb(96, 165, 250)" : "rgb(59, 130, 246)"; // blue-400 / blue-500 } function escapeHTML(str) { var div = document.createElement("div"); div.textContent = str; return div.innerHTML; } // Create highlight span with inline style for guaranteed color function createHighlightSpan(text) { return '' + escapeHTML(text) + ''; } function updateCodeBlock(codeElement, values) { var original = originalCodeContent.get(codeElement); if (!original) return; var originalHTML = originalCodeHTML.get(codeElement); var extraPlaceholders = additionalPlaceholders.get(codeElement) || []; // Combine standard and additional placeholders var allPatterns = PLACEHOLDER_PATTERNS.concat(extraPlaceholders); // Always start from original content for replacements if (originalHTML && codeElement.children.length > 0) { // For syntax-highlighted code, replace placeholders with highlighted values var html = originalHTML; allPatterns.forEach(function(pattern) { var escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); var displayValue = values[pattern] || pattern; html = html.replace( new RegExp(escapedPattern, 'g'), createHighlightSpan(displayValue) ); }); codeElement.innerHTML = html; } else { // For plain text code blocks var tempDiv = document.createElement("div"); tempDiv.textContent = original; var html = tempDiv.innerHTML; allPatterns.forEach(function(pattern) { var escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); var displayValue = values[pattern] || pattern; html = html.replace( new RegExp(escapedPattern, 'g'), createHighlightSpan(displayValue) ); }); codeElement.innerHTML = html; } } function resetCodeBlock(codeElement) { // Just call updateCodeBlock with empty values to show original placeholders highlighted updateCodeBlock(codeElement, {}); } // Find info callout that follows a code block and extract placeholder info function findFollowingInfoCallout(codeBlockContainer) { var sibling = codeBlockContainer.nextElementSibling; // Skip any existing placeholder bar to find the callout while (sibling && sibling.classList.contains("axiom-placeholder-bar")) { sibling = sibling.nextElementSibling; } // Check if sibling is an info callout if (sibling && sibling.classList.contains("callout") && sibling.getAttribute("data-callout-type") === "info") { return sibling; } return null; } // Parse callout content to extract placeholder mentions and their descriptions function parseCalloutPlaceholders(callout) { var result = { coveredPlaceholders: [], // Placeholders we handle uncoveredDescriptions: [] // Descriptions for placeholders we don't handle }; // Get the callout content element var contentEl = callout.querySelector("[data-component-part='callout-content']"); if (!contentEl) return result; // Find all paragraph-like elements (spans with data-as="p" or actual p tags) var paragraphs = contentEl.querySelectorAll("span[data-as='p'], p"); paragraphs.forEach(function(p) { var text = p.textContent; var html = p.innerHTML; // Check which placeholders are mentioned in this paragraph var mentionedPlaceholders = PLACEHOLDER_PATTERNS.filter(function(pattern) { return text.includes(pattern); }); if (mentionedPlaceholders.length > 0) { // All mentioned placeholders are covered by our config mentionedPlaceholders.forEach(function(placeholder) { if (result.coveredPlaceholders.indexOf(placeholder) === -1) { result.coveredPlaceholders.push(placeholder); } }); } else { // Check if this paragraph mentions any placeholder-like pattern (ALL_CAPS_WITH_UNDERSCORES) var placeholderPattern = /\b[A-Z][A-Z0-9]*(?:_[A-Z0-9]+)+\b/g; var matches = text.match(placeholderPattern); if (matches && matches.length > 0) { // This paragraph mentions placeholders we don't handle result.uncoveredDescriptions.push({ html: html, placeholders: matches }); } } }); return result; } // Process info callout - hide if fully covered, extract uncovered info function processInfoCallout(codeBlockContainer, bar) { var callout = findFollowingInfoCallout(codeBlockContainer); if (!callout) return; // Skip if already processed if (callout.hasAttribute("data-placeholder-callout-processed")) return; callout.setAttribute("data-placeholder-callout-processed", "true"); var parsed = parseCalloutPlaceholders(callout); // If all content is about placeholders we handle, hide the callout if (parsed.coveredPlaceholders.length > 0 && parsed.uncoveredDescriptions.length === 0) { callout.style.display = "none"; callout.setAttribute("data-placeholder-hidden", "true"); return; } // If there are uncovered descriptions, add them to the config bar if (parsed.uncoveredDescriptions.length > 0 && bar) { // Collect all unique uncovered placeholders var allUncoveredPlaceholders = []; // Create a section for additional info var additionalSection = document.createElement("div"); additionalSection.className = "axiom-placeholder-additional mt-2 pt-3 border-t border-neutral-200 dark:border-neutral-700"; parsed.uncoveredDescriptions.forEach(function(desc) { var infoRow = document.createElement("div"); infoRow.className = "axiom-placeholder-info-row text-sm text-neutral-600 dark:text-neutral-400"; // Highlight placeholder patterns in the description var highlightedHtml = desc.html; desc.placeholders.forEach(function(placeholder) { var escapedPattern = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); highlightedHtml = highlightedHtml.replace( new RegExp(escapedPattern, 'g'), '' + placeholder + '' ); // Collect unique placeholders if (allUncoveredPlaceholders.indexOf(placeholder) === -1) { allUncoveredPlaceholders.push(placeholder); } }); infoRow.innerHTML = highlightedHtml; additionalSection.appendChild(infoRow); }); bar.appendChild(additionalSection); // Store additional placeholders and re-render code block to highlight them if (bar._codeElement && allUncoveredPlaceholders.length > 0) { additionalPlaceholders.set(bar._codeElement, allUncoveredPlaceholders); updateCodeBlock(bar._codeElement, loadStoredValues()); } // Hide the callout since we've extracted the uncovered info to the bar callout.style.display = "none"; callout.setAttribute("data-placeholder-hidden", "true"); } } function createConfigBar(preElement, codeElement, placeholdersInCode) { var values = loadStoredValues(); // Create the bar container - uses same Tailwind classes as Mintlify's callout box var bar = document.createElement("div"); bar.className = "axiom-placeholder-bar my-4 px-5 py-4 overflow-hidden rounded-2xl flex flex-col gap-3 border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-white/10"; placeholdersInCode.forEach(function(key) { var config = PLACEHOLDERS[key]; var inputId = generateUniqueId(key); // Outer wrapper for the entire field including help text var fieldContainer = document.createElement("div"); fieldContainer.className = "axiom-placeholder-field-container"; // Row with label and input/select var fieldRow = document.createElement("div"); fieldRow.className = "axiom-placeholder-field flex items-center gap-3"; var fieldLabel = document.createElement("label"); fieldLabel.textContent = config.label; fieldLabel.className = "axiom-placeholder-label text-sm font-medium text-neutral-800 dark:text-neutral-300 min-w-[100px]"; fieldLabel.setAttribute("for", inputId); var inputElement; if (config.type === "select" && config.options) { // Create dropdown for select-type fields inputElement = document.createElement("select"); inputElement.id = inputId; inputElement.name = inputId; inputElement.setAttribute("data-key", key); inputElement.className = "axiom-placeholder-select flex-1 px-3 py-2 pr-8 text-sm font-mono border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 cursor-pointer"; // Custom styling for dropdown arrow and placeholder state inputElement.style.appearance = "none"; inputElement.style.WebkitAppearance = "none"; inputElement.style.MozAppearance = "none"; inputElement.style.backgroundImage = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\")"; inputElement.style.backgroundRepeat = "no-repeat"; inputElement.style.backgroundPosition = "right 0.75rem center"; inputElement.style.backgroundSize = "12px"; config.options.forEach(function(opt, index) { var option = document.createElement("option"); option.value = opt.value; option.textContent = opt.label; if (values[key] === opt.value || (!values[key] && index === 0)) { option.selected = true; } inputElement.appendChild(option); }); // Apply placeholder or normal text color updateSelectColor(inputElement, values[key]); inputElement.addEventListener("change", function() { var vals = loadStoredValues(); if (inputElement.value) { vals[key] = inputElement.value; } else { delete vals[key]; } saveValues(vals); updateSelectColor(inputElement, inputElement.value); updateAllCodeBlocks(); updateAllBars(); }); } else { // Create text input for regular fields inputElement = document.createElement("input"); inputElement.type = "text"; inputElement.id = inputId; inputElement.name = inputId; inputElement.placeholder = config.placeholder; inputElement.value = values[key] || ""; inputElement.setAttribute("data-key", key); inputElement.className = "axiom-placeholder-input flex-1 px-3 py-2 text-sm font-mono border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"; inputElement.autocomplete = "off"; inputElement.setAttribute("data-1p-ignore", "true"); inputElement.setAttribute("data-lpignore", "true"); inputElement.addEventListener("input", function() { var vals = loadStoredValues(); if (inputElement.value.trim()) { vals[key] = inputElement.value; } else { delete vals[key]; } saveValues(vals); updateAllCodeBlocks(); updateAllBars(); }); } fieldRow.appendChild(fieldLabel); fieldRow.appendChild(inputElement); fieldContainer.appendChild(fieldRow); // Help text below the input if (config.help) { var helpText = document.createElement("p"); helpText.innerHTML = config.help; helpText.className = "axiom-placeholder-help text-neutral-500 dark:text-neutral-400"; fieldContainer.appendChild(helpText); } bar.appendChild(fieldContainer); }); // Find the .code-block container and insert after it var codeBlockContainer = preElement.closest(".code-block"); if (!codeBlockContainer) { // No .code-block container - don't add a bar return null; } codeBlockContainer.parentNode.insertBefore(bar, codeBlockContainer.nextSibling); // Store references before processing callout (so it can access _codeElement) bar._codeElement = codeElement; bar._placeholders = placeholdersInCode; // Process any info callout that follows the code block processInfoCallout(codeBlockContainer, bar); return bar; } function updateAllBars() { var values = loadStoredValues(); var bars = document.querySelectorAll(".axiom-placeholder-bar"); bars.forEach(function(bar) { // Sync input and select values across all bars var fields = bar.querySelectorAll("input[data-key], select[data-key]"); fields.forEach(function(field) { var key = field.getAttribute("data-key"); var newVal = values[key] || ""; if (field.value !== newVal && document.activeElement !== field) { field.value = newVal; // Update placeholder styling for select elements if (field.tagName === "SELECT") { updateSelectColor(field, newVal); } } }); }); } function updateAllCodeBlocks() { var values = loadStoredValues(); var codeBlocks = document.querySelectorAll("pre code, pre"); codeBlocks.forEach(function(codeBlock) { var codeElement = codeBlock.tagName === "CODE" ? codeBlock : codeBlock.querySelector("code") || codeBlock; if (originalCodeContent.has(codeElement)) { if (Object.keys(values).length > 0) { updateCodeBlock(codeElement, values); } else { resetCodeBlock(codeElement); } } }); } function processCodeBlocks() { var values = loadStoredValues(); var hasStoredValues = Object.keys(values).length > 0; var codeBlocks = document.querySelectorAll("pre"); var processedCount = 0; // Track which .code-block containers have been processed this run var processedContainers = new Set(); codeBlocks.forEach(function(preElement) { var codeBlockContainer = preElement.closest(".code-block"); // Skip if no .code-block container (not a proper code block) if (!codeBlockContainer) return; // Skip if we already processed this container in this run if (processedContainers.has(codeBlockContainer)) return; processedContainers.add(codeBlockContainer); var codeElement = preElement.querySelector("code") || preElement; // Check if this code element is already tracked in our WeakMap // This is the authoritative check - DOM attributes can persist across // SPA navigation but the actual element reference will be new var isAlreadyTracked = originalCodeContent.has(codeElement); // Check if a bar already exists for this code block var existingBar = codeBlockContainer.nextElementSibling; var hasExistingBar = existingBar && existingBar.classList.contains("axiom-placeholder-bar"); // If we have a bar but the code element isn't tracked, the DOM was replaced // during SPA navigation - remove the orphaned bar and re-process if (hasExistingBar && !isAlreadyTracked) { existingBar.remove(); codeBlockContainer.removeAttribute("data-placeholder-processed"); hasExistingBar = false; } // Skip if already fully processed (tracked in WeakMap AND has bar) if (isAlreadyTracked && hasExistingBar) { // Still process info callout in case it wasn't done before processInfoCallout(codeBlockContainer, existingBar); return; } var text = codeElement.textContent; var placeholdersInCode = getPlaceholdersInText(text); // Only show configurator for code blocks with actual placeholder strings if (placeholdersInCode.length === 0) return; // Mark as processed codeBlockContainer.setAttribute("data-placeholder-processed", "true"); // Store original content (both text and HTML for syntax-highlighted code) if (!isAlreadyTracked) { originalCodeContent.set(codeElement, text); originalCodeHTML.set(codeElement, codeElement.innerHTML); } // Intercept copy button to copy replaced content interceptCopyButton(codeBlockContainer, codeElement); // Create config bar below the code block if it doesn't exist if (!hasExistingBar) { createConfigBar(preElement, codeElement, placeholdersInCode); processedCount++; } // Apply stored values and/or highlight placeholders updateCodeBlock(codeElement, values); }); updateAllBars(); // Return status for retry logic return { processed: processedCount, hasStoredValues: hasStoredValues }; } // Intercept the copy button to copy replaced content function interceptCopyButton(codeBlockContainer, codeElement) { // Find copy button - it's usually a button inside the code block header var copyButtons = codeBlockContainer.querySelectorAll("button[data-testid='copy-code-button']"); copyButtons.forEach(function(btn) { // Skip if already intercepted if (btn.hasAttribute("data-copy-intercepted")) return; btn.setAttribute("data-copy-intercepted", "true"); // Add our click handler that runs first btn.addEventListener("click", function(e) { // Get the current text content (with replacements applied, highlights stripped) var textToCopy = codeElement.textContent; // Copy to clipboard navigator.clipboard.writeText(textToCopy).then(function() { showCopyFeedback(btn); }).catch(function(err) { // Fallback for older browsers var textArea = document.createElement("textarea"); textArea.value = textToCopy; textArea.style.position = "fixed"; textArea.style.left = "-9999px"; document.body.appendChild(textArea); textArea.select(); document.execCommand("copy"); document.body.removeChild(textArea); showCopyFeedback(btn); }); // Prevent the default copy behavior e.stopImmediatePropagation(); e.preventDefault(); }, true); // Use capture to run before other handlers }); } // Show feedback when the code is copied to the clipboard function showCopyFeedback(btn) { // Store original button content var originalHTML = btn.innerHTML; // Show copied state in checkmark btn.innerHTML = ''; // Update the tooltip text var tooltip = btn.parentElement && btn.parentElement.querySelector(".text-tooltip-foreground"); var originalTooltipText = null; if (tooltip) { originalTooltipText = tooltip.textContent; tooltip.textContent = "Copied!"; } // Revert after delay setTimeout(function() { btn.innerHTML = originalHTML; if (tooltip && originalTooltipText !== null) { tooltip.textContent = originalTooltipText; } }, 2000); } // Restore a hidden callout when its associated bar is removed function restoreHiddenCallout(bar) { // Look for hidden callout after the bar var sibling = bar.nextElementSibling; while (sibling) { if (sibling.classList.contains("callout") && sibling.hasAttribute("data-placeholder-hidden")) { sibling.style.display = ""; sibling.removeAttribute("data-placeholder-hidden"); sibling.removeAttribute("data-placeholder-callout-processed"); break; } // Stop if we hit another code block if (sibling.classList.contains("code-block")) break; sibling = sibling.nextElementSibling; } } // Clean up orphaned bars (bars whose code block was removed/re-rendered) function cleanupOrphanedBars() { var bars = document.querySelectorAll(".axiom-placeholder-bar"); bars.forEach(function(bar) { var prevSibling = bar.previousElementSibling; // Remove bar if it's not preceded by a code block if (!prevSibling || !prevSibling.classList.contains("code-block")) { restoreHiddenCallout(bar); bar.remove(); return; } // Also check if the code element in the preceding block is still tracked var codeElement = prevSibling.querySelector("code") || prevSibling.querySelector("pre"); if (codeElement && !originalCodeContent.has(codeElement)) { // The code element was replaced - remove the orphaned bar restoreHiddenCallout(bar); bar.remove(); prevSibling.removeAttribute("data-placeholder-processed"); } }); } function init() { // Inject styles for select placeholder state injectSelectStyles(); // Process on initial page load processCodeBlocks(); // Watch for new code blocks (SPA navigation, theme switch, etc.) var debounceTimer = null; function scheduleReprocess(delay) { clearTimeout(debounceTimer); debounceTimer = setTimeout(function() { cleanupOrphanedBars(); processCodeBlocks(); }, delay || 100); } var observer = new MutationObserver(function(mutations) { var shouldReprocess = mutations.some(function(mutation) { return Array.from(mutation.addedNodes).some(function(node) { if (node.nodeType !== 1) return false; if (node.classList && node.classList.contains("code-block")) return true; if (node.querySelector && node.querySelector(".code-block")) return true; if (node.tagName === "MAIN" || node.querySelector && node.querySelector("main")) return true; if (node.tagName === "ARTICLE" || node.querySelector && node.querySelector("article")) return true; return false; }); }); if (shouldReprocess) { scheduleReprocess(100); } // Try to attach the chat assistant watcher whenever DOM changes watchChatAssistant(); }); observer.observe(document.body, { childList: true, subtree: true }); // Watch the AI chat assistant sheet for close events. // The sheet stays in the DOM but toggles via attributes (e.g. data-state). // Closing can cause the underlying page content to re-render, so we // need to reprocess code blocks when it happens. var chatAssistantObserver = null; function watchChatAssistant() { if (chatAssistantObserver) return; var sheet = document.getElementById("chat-assistant-sheet"); if (!sheet) return; chatAssistantObserver = new MutationObserver(function() { scheduleReprocess(200); }); chatAssistantObserver.observe(sheet, { attributes: true }); } watchChatAssistant(); // Watch for theme changes (dark/light mode toggle) var themeObserver = new MutationObserver(function(mutations) { var themeChanged = mutations.some(function(mutation) { return mutation.attributeName === "class" || mutation.attributeName === "data-theme"; }); if (themeChanged) { // Re-render all code blocks to update highlight colors updateAllCodeBlocks(); } }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] }); themeObserver.observe(document.body, { attributes: true, attributeFilter: ["class", "data-theme"] }); // Handle browser back/forward navigation window.addEventListener("popstate", function() { // Delay slightly to let the DOM update setTimeout(function() { cleanupOrphanedBars(); processCodeBlocks(); }, 150); }); // Handle clicks on navigation links (left nav, right nav TOC, etc.) // This catches SPA navigation that might not trigger MutationObserver properly document.addEventListener("click", function(e) { var link = e.target.closest("a"); if (!link) return; var href = link.getAttribute("href"); if (!href) return; // Check if it's an internal navigation link (not external) var isInternal = href.startsWith("/") || href.startsWith("#") || (link.hostname === location.hostname); if (isInternal) { // Delay to let the SPA router update the DOM setTimeout(function() { cleanupOrphanedBars(); processCodeBlocks(); }, 200); // Also check again after a longer delay for slower renders setTimeout(function() { cleanupOrphanedBars(); processCodeBlocks(); }, 500); } }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { init(); } })();

Get started

Functions

Operators

Reference

Migration

Page Not Found