(() => { const endpoints = JSON.parse(document.getElementById("playground-endpoints").textContent || "[]"); const selectedButtonClass = "w-full text-left px-3 py-2.5 rounded-[var(--radius-md)] text-sm transition-colors bg-[var(--accent)]/10 border border-[var(--accent)]/30 text-[var(--fg)]"; const unselectedButtonClass = "w-full text-left px-3 py-2.5 rounded-[var(--radius-md)] text-sm transition-colors bg-[var(--card)] border border-[var(--border)] text-[var(--muted)] hover:text-[var(--fg)] hover:border-[var(--accent)]/20"; const getMethodClass = "bg-[var(--success)]/10 text-[var(--success)]"; const postMethodClass = "bg-[var(--warning)]/10 text-[var(--warning)]"; let selected = endpoints[0]; let params = {}; let body = endpoints[1]?.body || ""; let apiKey = ""; let loading = false; const qs = (selector) => document.querySelector(selector); const qsa = (selector) => Array.from(document.querySelectorAll(selector)); function escapeHtml(value) { return String(value) .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """); } function syntaxHighlight(json) { return escapeHtml(json) .replace(/"([^&]*)"(\s*:)/g, '"$1"$2') .replace(/"([^&]*)"/g, '"$1"') .replace(/\b(\d+)\b/g, '$1') .replace(/\b(true|false|null)\b/g, '$1'); } function resetParams(endpoint) { params = {}; (endpoint.params || []).forEach((param) => { params[param.name] = param.default || ""; }); if (endpoint.body) { body = endpoint.body; } } function methodPillClass(method) { return "px-2 py-0.5 rounded text-xs font-bold " + (method === "GET" ? getMethodClass : postMethodClass); } function buildCurlCommand() { let command = "curl"; if (selected.method === "POST") { command += " -X POST"; } let url = "https://foglift.io" + selected.path; if (selected.method === "GET" && selected.params) { const searchParams = new URLSearchParams(); selected.params.forEach((param) => { const value = params[param.name]; if (value) { searchParams.set(param.name, value); } }); const query = searchParams.toString(); if (query) { url += "?" + query; } } command += ' "' + url + '"'; if (apiKey) { command += ' \\\n -H "Authorization: Bearer ' + apiKey + '"'; } if (selected.method === "POST") { command += ' \\\n -H "Content-Type: application/json"'; command += " \\\n -d '" + body.replace(/\n/g, "").replace(/\s+/g, " ") + "'"; } return command; } function updateCurl() { const curl = qs("#curl-command"); if (curl) { curl.textContent = buildCurlCommand(); } } function clearResponse() { qs("#response-section")?.classList.add("hidden"); const output = qs("#response-output"); if (output) { output.textContent = ""; output.innerHTML = ""; } const status = qs("#status-code"); if (status) { status.className = "hidden text-xs font-mono"; status.textContent = ""; } } function renderParams() { const container = qs("#params-container"); if (!container) return; if (!selected.params?.length) { container.innerHTML = ""; container.classList.add("hidden"); return; } container.classList.remove("hidden"); container.innerHTML = [ '

Parameters

', ...selected.params.map((param) => { const value = params[param.name] || ""; const required = param.required ? '*' : ""; return [ '

', '' + escapeHtml(param.name) + required + '', '', '

', ].join(""); }), ].join(""); } function renderEndpoint() { qsa("[data-endpoint-id]").forEach((button) => { const isSelected = button.getAttribute("data-endpoint-id") === selected.id; button.className = isSelected ? selectedButtonClass : unselectedButtonClass; }); const method = qs("#request-method"); if (method) { method.textContent = selected.method; method.className = methodPillClass(selected.method); } const path = qs("#request-path"); if (path) { path.textContent = selected.path; } renderParams(); const bodySection = qs("#body-section"); const bodyInput = qs("#request-body"); if (bodySection && bodyInput) { bodySection.classList.toggle("hidden", selected.method !== "POST"); bodyInput.value = body; } qs("#auth-section")?.classList.toggle("hidden", !selected.needsAuth); const apiInput = qs("#api-key"); if (apiInput) { apiInput.value = apiKey; } clearResponse(); updateCurl(); } async function sendRequest() { if (loading) return; loading = true; clearResponse(); const button = qs("#send-request"); if (button) { button.textContent = "Sending..."; button.disabled = true; button.classList.add("opacity-50"); } const start = Date.now(); let statusCode = 0; try { let url = selected.path; const headers = {}; if (selected.method === "GET" && selected.params) { const searchParams = new URLSearchParams(); selected.params.forEach((param) => { const value = params[param.name]; if (value) { searchParams.set(param.name, value); } }); const query = searchParams.toString(); if (query) { url += "?" + query; } } if (apiKey) { headers.Authorization = "Bearer " + apiKey; } let response; if (selected.method === "POST") { headers["Content-Type"] = "application/json"; response = await fetch(url, { method: "POST", headers, body }); } else { response = await fetch(url, { headers }); } statusCode = response.status; const contentType = response.headers.get("content-type") || ""; const responseText = contentType.includes("image/svg") ? await response.text() : JSON.stringify(await response.json(), null, 2); showResponse(statusCode, Date.now() - start, responseText, contentType.includes("image/svg")); } catch (error) { const message = error instanceof Error ? error.message : "Request failed"; showResponse(statusCode, Date.now() - start, JSON.stringify({ error: message }, null, 2), false); } finally { loading = false; if (button) { button.textContent = "Send Request"; button.disabled = false; button.classList.remove("opacity-50"); } } } function showResponse(statusCode, duration, responseText, isSvg) { const status = qs("#status-code"); if (status) { const colorClass = statusCode >= 200 && statusCode < 300 ? "text-[var(--success)]" : statusCode >= 400 ? "text-[var(--danger)]" : "text-[var(--warning)]"; status.className = "text-xs font-mono " + colorClass; status.textContent = statusCode + " (" + duration + "ms)"; } const responseSection = qs("#response-section"); const output = qs("#response-output"); if (!responseSection || !output) return; responseSection.classList.remove("hidden"); if (isSvg) { output.textContent = responseText; } else { output.innerHTML = syntaxHighlight(responseText); } } document.addEventListener("click", (event) => { const clickedElement = event.target instanceof Element ? event.target : null; const endpointButton = clickedElement?.closest("[data-endpoint-id]"); if (endpointButton) { const next = endpoints.find((endpoint) => endpoint.id === endpointButton.getAttribute("data-endpoint-id")); if (next) { selected = next; resetParams(selected); renderEndpoint(); } } if (clickedElement?.closest("#copy-curl")) { navigator.clipboard?.writeText(buildCurlCommand()); } if (clickedElement?.closest("#send-request")) { sendRequest(); } }); document.addEventListener("input", (event) => { const target = event.target; if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return; const paramName = target.getAttribute("data-param-name"); if (paramName) { params[paramName] = target.value; } else if (target.id === "request-body") { body = target.value; } else if (target.id === "api-key") { apiKey = target.value; } updateCurl(); }); resetParams(selected); renderEndpoint(); })();

API Playground

Endpoints

Request Body

API Key

cURL

Response