radiant-docs 0.1.34 → 0.1.37

package/template/package.json

@@ -6,10 +6,10 @@
     "dev": "astro dev",
     "start": "tsx runner.ts",
     "prebuild": "rm -rf public/pagefind",
-    "build": "astro build && node scripts/generate-og-metadata.mjs && node scripts/generate-og-images.mjs && node scripts/stamp-og-image-versions.mjs && node scripts/stamp-image-versions.mjs && pagefind --site dist && node scripts/stamp-pagefind-runtime-version.mjs && node scripts/rewrite-static-asset-host.mjs",
+    "build": "astro build && node scripts/generate-og-metadata.mjs && node scripts/generate-og-images.mjs && node scripts/stamp-og-image-versions.mjs && node scripts/stamp-image-versions.mjs && pagefind --site dist && node scripts/stamp-pagefind-runtime-version.mjs && node scripts/generate-proxy-allowed-origins.mjs && node scripts/generate-robots-txt.mjs",
     "preview": "astro preview",
     "astro": "astro",
-    "search:index": "astro build && node scripts/generate-og-metadata.mjs && node scripts/generate-og-images.mjs && node scripts/stamp-og-image-versions.mjs && node scripts/stamp-image-versions.mjs && pagefind --site dist && node scripts/stamp-pagefind-runtime-version.mjs && node scripts/rewrite-static-asset-host.mjs && cp -r dist/pagefind public/"
+    "search:index": "astro build && node scripts/generate-og-metadata.mjs && node scripts/generate-og-images.mjs && node scripts/stamp-og-image-versions.mjs && node scripts/stamp-image-versions.mjs && pagefind --site dist && node scripts/stamp-pagefind-runtime-version.mjs && node scripts/generate-proxy-allowed-origins.mjs && node scripts/generate-robots-txt.mjs && cp -r dist/pagefind public/"
   },
   "dependencies": {
     "@alpinejs/collapse": "^3.15.2",
@@ -18,6 +18,7 @@
     "@astrojs/alpinejs": "^0.4.9",
     "@astrojs/mdx": "^4.3.12",
     "@astrojs/preact": "^4.1.3",
+    "@astrojs/sitemap": "^3.7.2",
     "@aws-sdk/client-s3": "^3.964.0",
     "@fontsource/google-sans-flex": "^5.2.2",
     "@iconify-json/lucide": "^1.2.79",

package/template/scripts/generate-proxy-allowed-origins.mjs

@@ -0,0 +1,217 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import YAML from "yaml";
+
+const CWD = process.cwd();
+const DOCS_DIR = path.join(CWD, "src/content/docs");
+const DOCS_CONFIG_PATH = path.join(DOCS_DIR, "docs.json");
+const OUTPUT_DIR = path.join(CWD, ".radiant");
+const OUTPUT_FILE = path.join(OUTPUT_DIR, "proxy-allowed-origins.json");
+
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+
+function isHttpUrl(value) {
+  return /^https?:\/\//i.test(String(value).trim());
+}
+
+function collectOpenApiSourcesFromNavigation(navigationNode, target) {
+  if (!isRecord(navigationNode)) {
+    return;
+  }
+
+  const openApiConfig = navigationNode.openapi;
+  if (typeof openApiConfig === "string") {
+    const trimmed = openApiConfig.trim();
+    if (trimmed) {
+      target.add(trimmed);
+    }
+  } else if (
+    isRecord(openApiConfig) &&
+    typeof openApiConfig.source === "string"
+  ) {
+    const trimmed = openApiConfig.source.trim();
+    if (trimmed) {
+      target.add(trimmed);
+    }
+  }
+
+  const menu = navigationNode.menu;
+  if (!isRecord(menu) || !Array.isArray(menu.items)) {
+    return;
+  }
+
+  for (const menuItem of menu.items) {
+    if (!isRecord(menuItem) || !isRecord(menuItem.submenu)) {
+      continue;
+    }
+    collectOpenApiSourcesFromNavigation(menuItem.submenu, target);
+  }
+}
+
+function resolveServerTemplateUrl(rawUrl, rawVariables) {
+  let unresolved = false;
+  const variables = isRecord(rawVariables) ? rawVariables : null;
+
+  const resolved = rawUrl.replace(/\{([^}]+)\}/g, (_match, tokenName) => {
+    if (!variables) {
+      unresolved = true;
+      return "";
+    }
+
+    const variableConfig = variables[tokenName];
+    if (
+      !isRecord(variableConfig) ||
+      typeof variableConfig.default !== "string"
+    ) {
+      unresolved = true;
+      return "";
+    }
+
+    const defaultValue = variableConfig.default.trim();
+    if (!defaultValue) {
+      unresolved = true;
+      return "";
+    }
+
+    return defaultValue;
+  });
+
+  if (unresolved) {
+    return null;
+  }
+
+  return resolved;
+}
+
+function normalizeAllowedOrigin(rawUrl) {
+  let parsed;
+  try {
+    parsed = new URL(rawUrl);
+  } catch {
+    return null;
+  }
+
+  if (parsed.protocol !== "https:") {
+    return null;
+  }
+
+  if (!parsed.hostname || parsed.username || parsed.password) {
+    return null;
+  }
+
+  return parsed.origin.toLowerCase();
+}
+
+async function loadOpenApiSpec(source) {
+  let fileContent;
+
+  if (isHttpUrl(source)) {
+    const response = await fetch(source);
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch OpenAPI spec (${response.status} ${response.statusText})`,
+      );
+    }
+    fileContent = await response.text();
+  } else {
+    const absolutePath = path.join(DOCS_DIR, source);
+    fileContent = await fs.readFile(absolutePath, "utf8");
+  }
+
+  const trimmed = fileContent.trim();
+  if (trimmed.startsWith("<!DOCTYPE") || trimmed.startsWith("<html")) {
+    throw new Error("OpenAPI source returned HTML instead of JSON or YAML");
+  }
+
+  try {
+    return JSON.parse(fileContent);
+  } catch {
+    return YAML.parse(fileContent);
+  }
+}
+
+async function buildAllowedOrigins() {
+  const docsConfigRaw = await fs.readFile(DOCS_CONFIG_PATH, "utf8");
+  const docsConfig = JSON.parse(docsConfigRaw);
+
+  if (!isRecord(docsConfig) || !isRecord(docsConfig.navigation)) {
+    return [];
+  }
+
+  const sources = new Set();
+  collectOpenApiSourcesFromNavigation(docsConfig.navigation, sources);
+  if (sources.size === 0) {
+    return [];
+  }
+
+  const allowedOrigins = new Set();
+
+  for (const source of sources) {
+    try {
+      const spec = await loadOpenApiSpec(source);
+      const servers =
+        isRecord(spec) && Array.isArray(spec.servers) ? spec.servers : [];
+
+      for (const server of servers) {
+        if (!isRecord(server) || typeof server.url !== "string") {
+          continue;
+        }
+
+        const resolvedUrl = resolveServerTemplateUrl(
+          server.url,
+          server.variables,
+        );
+        if (!resolvedUrl) {
+          continue;
+        }
+
+        const normalizedOrigin = normalizeAllowedOrigin(resolvedUrl);
+        if (normalizedOrigin) {
+          allowedOrigins.add(normalizedOrigin);
+        }
+      }
+    } catch (error) {
+      console.warn(
+        `⚠️ Failed to extract OpenAPI server origins from "${source}":`,
+        error instanceof Error ? error.message : String(error),
+      );
+    }
+  }
+
+  return Array.from(allowedOrigins).sort();
+}
+
+async function run() {
+  let allowedOrigins = [];
+
+  try {
+    allowedOrigins = await buildAllowedOrigins();
+  } catch (error) {
+    console.warn(
+      "⚠️ Failed to generate proxy allowed origins. Falling back to empty allowlist.",
+      error instanceof Error ? error.message : String(error),
+    );
+    allowedOrigins = [];
+  }
+
+  await fs.mkdir(OUTPUT_DIR, { recursive: true });
+  await fs.writeFile(
+    OUTPUT_FILE,
+    `${JSON.stringify(allowedOrigins, null, 2)}\n`,
+    "utf8",
+  );
+
+  console.log(
+    `✅ Wrote ${allowedOrigins.length} proxy allowed origins to ${path.relative(CWD, OUTPUT_FILE)}`,
+  );
+}
+
+run().catch((error) => {
+  console.error(
+    "❌ Failed to write proxy allowed origins manifest:",
+    error instanceof Error ? error.message : String(error),
+  );
+  process.exit(1);
+});

package/template/scripts/generate-robots-txt.mjs

@@ -0,0 +1,19 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const CWD = process.cwd();
+const DIST_DIR = path.join(CWD, "dist");
+const ROBOTS_TXT_PATH = path.join(DIST_DIR, "robots.txt");
+
+function main() {
+  if (!fs.existsSync(DIST_DIR)) {
+    console.log("Skipping robots.txt generation: dist directory not found.");
+    return;
+  }
+
+  const robotsTxt = "User-agent: *\nAllow: /\nSitemap: /sitemap-index.xml\n";
+  fs.writeFileSync(ROBOTS_TXT_PATH, robotsTxt, "utf8");
+  console.log("✅ robots.txt generated.");
+}
+
+main();

package/template/scripts/stamp-image-versions.mjs

@@ -6,6 +6,28 @@ const CWD = process.cwd();
 const DIST_DIR = path.join(CWD, "dist");
 const VERSION_LENGTH = 12;
 const DIST_ROOT = path.resolve(DIST_DIR);
+const CONFIGURED_STATIC_HOST = (() => {
+  const raw =
+    typeof process.env.STATIC_ASSET_HOST === "string"
+      ? process.env.STATIC_ASSET_HOST.trim()
+      : "";
+  if (!raw) return null;
+  const withScheme = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(raw)
+    ? raw
+    : `https://${raw}`;
+
+  try {
+    const parsed = new URL(withScheme);
+    return parsed.hostname.toLowerCase();
+  } catch {
+    return null;
+  }
+})();
+const CONFIGURED_PREFIX =
+  typeof process.env.R2_BUCKET_PREFIX === "string" &&
+  process.env.R2_BUCKET_PREFIX.trim().length > 0
+    ? process.env.R2_BUCKET_PREFIX.trim().replace(/^\/+|\/+$/g, "")
+    : null;
 const VERSIONED_EXTENSIONS = new Set([
   ".avif",
   ".gif",
@@ -76,6 +98,24 @@ function getHash(filePath) {
   return hash;
 }
 
+function normalizePathForDistLookup(pathname) {
+  const normalizedPathname = path.posix.normalize(pathname);
+  if (!CONFIGURED_PREFIX) {
+    return normalizedPathname;
+  }
+
+  const prefix = `/${CONFIGURED_PREFIX}`;
+  if (
+    normalizedPathname === prefix ||
+    normalizedPathname.startsWith(`${prefix}/`)
+  ) {
+    const stripped = normalizedPathname.slice(prefix.length);
+    return stripped.startsWith("/") ? stripped : `/${stripped}`;
+  }
+
+  return normalizedPathname;
+}
+
 function resolveLocalImagePath(urlValue, filePath) {
   const trimmed = urlValue.trim();
   if (!trimmed) return null;
@@ -91,11 +131,6 @@ function resolveLocalImagePath(urlValue, filePath) {
     return null;
   }
 
-  // Ignore fully-qualified URLs.
-  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(decoded)) {
-    return null;
-  }
-
   let parsed;
   try {
     parsed = new URL(decoded, `https://radiant.invalid${htmlBasePathname(filePath)}`);
@@ -103,13 +138,27 @@ function resolveLocalImagePath(urlValue, filePath) {
     return null;
   }
 
+  const isAbsoluteUrl = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(decoded);
+  if (isAbsoluteUrl) {
+    if (!CONFIGURED_STATIC_HOST) {
+      return null;
+    }
+
+    if (parsed.protocol !== "https:") {
+      return null;
+    }
+
+    if (parsed.hostname.toLowerCase() !== CONFIGURED_STATIC_HOST) {
+      return null;
+    }
+  }
+
   const extension = path.extname(parsed.pathname).toLowerCase();
   if (!VERSIONED_EXTENSIONS.has(extension)) {
     return null;
   }
 
-  const normalizedPathname = path.posix
-    .normalize(parsed.pathname)
+  const normalizedPathname = normalizePathForDistLookup(parsed.pathname)
     .replace(/^\/+/, "");
   const absolutePath = path.resolve(DIST_DIR, normalizedPathname);
 
@@ -124,12 +173,15 @@ function resolveLocalImagePath(urlValue, filePath) {
     return null;
   }
 
-  return { parsed, absolutePath };
+  return { parsed, absolutePath, isAbsoluteUrl };
 }
 
-function formatUpdatedUrl(parsed) {
+function formatUpdatedUrl(parsed, isAbsoluteUrl) {
   const pathnameWithParams = `${parsed.pathname}${parsed.search}${parsed.hash}`;
-  return pathnameWithParams.replace(/&/g, "&");
+  const fullValue = isAbsoluteUrl
+    ? `${parsed.origin}${pathnameWithParams}`
+    : pathnameWithParams;
+  return fullValue.replace(/&/g, "&");
 }
 
 function stampSingleUrl(urlValue, filePath) {
@@ -141,7 +193,7 @@ function stampSingleUrl(urlValue, filePath) {
   const version = getHash(resolved.absolutePath);
   resolved.parsed.searchParams.set("v", version);
 
-  const updated = formatUpdatedUrl(resolved.parsed);
+  const updated = formatUpdatedUrl(resolved.parsed, resolved.isAbsoluteUrl);
   return { value: updated, changed: updated !== urlValue };
 }
 

package/template/src/components/Header.astro

@@ -58,14 +58,14 @@ const config = await getConfig();
             showAskAiTrigger ? (
               <button
                 type="button"
-                class="hidden md:inline-flex items-center gap-1.5 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 px-3 text-xs text-white shadow-sm dark:bg-white dark:text-neutral-900 cursor-pointer"
+                class="hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 px-3 text-[13px] font-[350] text-white shadow-sm dark:bg-white dark:text-neutral-900 cursor-pointer"
                 onclick="window.dispatchEvent(new CustomEvent('ask-ai:open'));"
               >
                 <img
                   src={sparkleIcon}
                   alt=""
                   aria-hidden="true"
-                  class="size-3 invert dark:invert-0"
+                  class="size-3 -ml-px invert dark:invert-0"
                 />
                 Ask AI
               </button>
@@ -110,7 +110,7 @@ const config = await getConfig();
               {config.navbar.secondary && (
                 <a
                   class:list={[
-                    "h-[33px] items-center gap-1.5 px-3 text-[13px] bg-white/90 text-neutral-600/85 hover:text-neutral-600 rounded-lg [corner-shape:superellipse(1.2)] border border-neutral-200 shadow-xs hover:shadow-sm. transition-all whitespace-nowrap",
+                    "h-[33px] items-center gap-1.5 px-[11px] text-[13px] bg-white/90 text-neutral-600/85 hover:text-neutral-600 rounded-lg [corner-shape:superellipse(1.2)] border border-neutral-200 shadow-xs hover:shadow-sm. transition-all whitespace-nowrap",
                     config.navbar.primary ? "hidden lg:flex" : "flex",
                   ]}
                   href={config.navbar.secondary.href}
@@ -129,7 +129,7 @@ const config = await getConfig();
               {config.navbar.primary && (
                 <a
                   class:list={[
-                    "h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 text-white duration-200 shadow-sm transition-all whitespace-nowrap",
+                    "font-[350] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 text-white duration-200 shadow-sm transition-all whitespace-nowrap",
                   ]}
                   href={config.navbar.primary.href}
                 >

package/template/src/components/LogoLink.astro

@@ -1,5 +1,6 @@
 ---
 import { getConfig, type LogoVariant } from "../lib/validation";
+import { resolveStaticAssetUrl } from "../lib/static-asset-url";
 
 const config = await getConfig();
 
@@ -12,7 +13,7 @@ function getLogoUrl(logoPath: string | undefined): string | null {
     : logoPath;
 
   // Return public URL - Vite plugin ensures file exists in public
-  return `/${normalizedPath}`;
+  return resolveStaticAssetUrl(`/${normalizedPath}`);
 }
 
 function resolveLogoVariant(

package/template/src/components/SidebarDropdown.astro

@@ -72,7 +72,7 @@ const currentPrefix = parentSlug
   <div
     class:list={[
       "mt-3 mx-2 z-10 relative",
-      menu.label && "rounded-lg bg-neutral-100 p-[3px]",
+      menu.label && "rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]",
     ]}
   >
     {
@@ -84,7 +84,7 @@ const currentPrefix = parentSlug
     }
     <div class="relative">
       <button
-        class="flex items-center w-full text-sm text-neutral-700 bg-white border-t border-x border-neutral-200/70 rounded-lg shadow-sm shadow-neutral-200 px-3 py-2 cursor-pointer"
+        class="flex items-center w-full text-sm text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-700/50 border-t border-x border-neutral-200/70 dark:border-neutral-700/40 dark:border-b rounded-lg shadow-xs px-3 py-2 cursor-pointer"
         x-on:click="open = true"
         aria-haspopup="menu"
         aria-expanded
@@ -104,7 +104,7 @@ const currentPrefix = parentSlug
       </div>
       <ul
         class:list={[
-          "z-50 absolute bg-white border border-neutral-200 rounded-lg inset-x-0 top-full py-[3px] shadow-xl overflow-hidden",
+          "z-50 absolute bg-white dark:bg-neutral-700/50 border border-neutral-200 rounded-lg inset-x-0 top-full py-[3px] shadow-xl overflow-hidden",
           menu.label ? "mt-1.5" : "mt-1",
         ]}
         x-init

package/template/src/components/SidebarGroup.astro

@@ -1,6 +1,7 @@
 ---
 import type { NavGroup } from "../lib/validation";
 import SidebarLink from "./SidebarLink.astro";
+import SidebarOpenApiPageLink from "./sidebar/SidebarOpenApiPageLink.astro";
 import SidebarSubgroup from "./SidebarSubgroup.astro";
 import { slugify } from "../lib/utils";
 import Tag from "./ui/Tag.astro";
@@ -38,6 +39,8 @@ const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
               title={child.title}
               groupSlug={currentPrefix}
             />
+          ) : "openapi" in child ? (
+            <SidebarOpenApiPageLink item={child} parentSlug={currentPrefix} />
           ) : (
             <SidebarSubgroup item={child} parentSlug={currentPrefix} />
           )}

package/template/src/components/SidebarMenu.astro

@@ -1,6 +1,12 @@
 ---
-import type { NavGroup, NavigationItem, NavPage } from "../lib/validation";
+import type {
+  NavGroup,
+  NavigationItem,
+  NavOpenApiPage,
+  NavPage,
+} from "../lib/validation";
 import SidebarOpenApi from "./sidebar/SidebarOpenApi.astro";
+import SidebarOpenApiPageLink from "./sidebar/SidebarOpenApiPageLink.astro";
 import SidebarDropdown from "./SidebarDropdown.astro";
 import SidebarSegmented from "./SidebarSegmented.astro";
 import SidebarGroup from "./SidebarGroup.astro";
@@ -24,6 +30,13 @@ let { navigation, parentSlug = "" } = Astro.props;
           </li>
         ) : "group" in item ? (
           <SidebarGroup item={item as NavGroup} parentSlug={parentSlug} />
+        ) : "openapi" in item ? (
+          <li>
+            <SidebarOpenApiPageLink
+              item={item as NavOpenApiPage}
+              parentSlug={parentSlug}
+            />
+          </li>
         ) : (
           <li>
             <SidebarLink

package/template/src/components/SidebarSubgroup.astro

@@ -1,7 +1,13 @@
 ---
 import { getConfig, type NavGroup } from "../lib/validation";
 import SidebarLink from "./SidebarLink.astro";
-import { buildMdxPageHref, slugify } from "../lib/utils";
+import SidebarOpenApiPageLink from "./sidebar/SidebarOpenApiPageLink.astro";
+import {
+  buildMdxPageHref,
+  buildOpenApiEndpointHref,
+  parseOpenApiEndpoint,
+  slugify,
+} from "../lib/utils";
 import Tag from "./ui/Tag.astro";
 import Icon from "./ui/Icon.astro";
 
@@ -21,22 +27,37 @@ const listId = `list-${groupId}`;
 
 // Check if any child page is active (shallow check, no recursion needed)
 const containsActivePage = item.pages.some((child) => {
-  const pagePath =
-    typeof child === "string" ? child : "pages" in child ? null : child.page;
+  let href: string | null = null;
 
-  if (pagePath) {
-    const href = buildMdxPageHref({
-      filePath: pagePath,
+  if (typeof child === "string") {
+    href = buildMdxPageHref({
+      filePath: child,
       groupSlug: currentPrefix,
       homePath: config.home,
     });
-
-    // Normalize paths for comparison (remove trailing slashes)
-    const normalizedCurrent = Astro.url.pathname.replace(/\/$/, "");
-    const normalizedTarget = href.replace(/\/$/, "");
-    return normalizedCurrent === normalizedTarget;
+  } else if ("page" in child) {
+    href = buildMdxPageHref({
+      filePath: child.page,
+      groupSlug: currentPrefix,
+      homePath: config.home,
+    });
+  } else if ("openapi" in child) {
+    const parsedEndpoint = parseOpenApiEndpoint(child.openapi.endpoint);
+    if (parsedEndpoint) {
+      href = buildOpenApiEndpointHref({
+        path: parsedEndpoint.path,
+        method: parsedEndpoint.method,
+        groupSlug: currentPrefix,
+      });
+    }
   }
-  return false;
+
+  if (!href) return false;
+
+  // Normalize paths for comparison (remove trailing slashes)
+  const normalizedCurrent = Astro.url.pathname.replace(/\/$/, "");
+  const normalizedTarget = href.replace(/\/$/, "");
+  return normalizedCurrent === normalizedTarget;
 });
 ---
 
@@ -100,6 +121,8 @@ const containsActivePage = item.pages.some((child) => {
               title={child.title}
               groupSlug={currentPrefix}
             />
+          ) : "openapi" in child ? (
+            <SidebarOpenApiPageLink item={child} parentSlug={currentPrefix} />
           ) : null}
         </li>
       ))

package/template/src/components/chat/AskAiWidget.tsx

@@ -1496,8 +1496,12 @@ export default function AskAiWidget({
           </form>
         </>
       ) : (
-        <div className={mobile ? "flex-1 px-4 py-4" : "px-4 py-4"}>
-          <p className="text-sm text-neutral-600 dark:text-neutral-300">
+        <div className="flex-1 px-4 py-4 flex items-center justify-center">
+          <p className="text-sm text-neutral-600 dark:text-neutral-300 flex justify-center gap-1.5">
+            <Icon
+              icon="lucide:circle-alert"
+              className="size-5 shrink-0 self-start justify-self-start mt-0.5 block"
+            />
             {unavailableMessage}
           </p>
         </div>
@@ -1703,7 +1707,7 @@ export default function AskAiWidget({
         }
       `}</style>
       {!isOpen ? (
-        <div className="fixed bottom-5 right-6 size-12 z-40 bg-white hover:scale-105 transition duration-300 ease-in-out">
+        <div className="fixed bottom-5 right-6 size-12 z-40 bg-white rounded-full hover:scale-105 transition duration-300 ease-in-out">
           <button
             type="button"
             className="w-full h-full inline-flex items-center justify-center gap-2 rounded-full bg-linear-to-b from-neutral-900/85 to-neutral-900 shadow-xl dark:bg-white cursor-pointer"

package/template/src/components/endpoint/PlaygroundButton.astro

@@ -38,10 +38,10 @@ import { Icon } from "astro-icon/components";
 >
   <button
     x-on:click="open = true"
-    class="m-px flex items-center gap-1.5 px-4 py-[5px] text-sm font-medium rounded-lg bg-neutral-900 text-white/95 hover:text-white shadow-[inset_0_1px_0_rgb(255,255,255,0.3),0_0_0_1px_var(--color-neutral-800)] duration-200 transition-all whitespace-nowrap cursor-pointer relative before:absolute before:inset-0 before:shadow-sm before:rounded-lg before:bg-transparent"
+    class="font-[350] m-px flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 px-3 text-[13px] text-white shadow-sm dark:bg-white dark:text-neutral-900 transition-all duration-200 whitespace-nowrap cursor-pointer"
   >
+    <Icon class="-ml-px size-3.5" name="lucide:square-mouse-pointer" />
     Try it
-    <Icon class="ml-2" name="lucide:square-mouse-pointer" />
   </button>
   <div
     x-show="open"

package/template/src/components/endpoint/PlaygroundForm.astro

@@ -37,11 +37,7 @@ const configuredProxyUrl =
   typeof import.meta.env.PUBLIC_PROXY_URL === "string"
     ? import.meta.env.PUBLIC_PROXY_URL.trim()
     : "";
-const proxyUrl =
-  configuredProxyUrl ||
-  (import.meta.env.DEV
-    ? "https://docs-proxy-dev.stefanjoseph-dev.workers.dev"
-    : "");
+const proxyUrl = configuredProxyUrl || "/_platform/proxy";
 const proxyEnabled = config.playground?.proxy !== false && proxyUrl.length > 0;
 const formattedBodyDescription = bodyDescription
   ? await renderMarkdown(bodyDescription)
@@ -544,20 +540,22 @@ const sectionVariantFieldNames = Object.fromEntries(
       <button
         @click="sendRequest($event)"
         :disabled="loading"
-        class="m-px flex items-center gap-1.5 px-4 py-[5px] text-sm font-medium rounded-lg bg-neutral-900 text-white/95 hover:text-white shadow-[inset_0_1px_0_rgb(255,255,255,0.3),0_0_0_1px_var(--color-neutral-800)] duration-200 whitespace-nowrap cursor-pointer relative before:absolute before:inset-0 before:shadow-sm before:rounded-lg before:bg-transparent disabled:opacity-70"
+        class="m-px font-[350] relative flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 px-3 text-[13px] text-white shadow-sm dark:bg-white dark:text-neutral-900 transition-all duration-200 whitespace-nowrap cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed"
       >
-        <span
-          class="flex items-center gap-2"
-          x-bind:class="loading ? 'opacity-0':''"
-        >
+      <span class="flex items-center gap-2">
+          <Icon
+            x-show="!loading"
+            class="size-3.5 -ml-px"
+            name="lucide:square-arrow-up-right"
+          />
+          <Icon
+            x-show="loading"
+            x-cloak
+            class="size-3.5 animate-spin -ml-px"
+            name="lucide:loader"
+          />
           Send <span class="hidden xs:inline">Request</span>
-          <Icon class="size-4" name="lucide:square-arrow-up-right" />
         </span>
-        <Icon
-          x-show="loading"
-          class="size-4 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 animate-spin **:stroke-3"
-          name="lucide:loader"
-        />
       </button>
     </PlaygroundBar>
 
@@ -584,7 +582,7 @@ const sectionVariantFieldNames = Object.fromEntries(
             }
 
             return (
-              <div class="border border-neutral-200 shadow-xs rounded-xl p-4">
+              <div class="border border-neutral-200 shadow-xs rounded-xl p-4 pb-0 [&_[role='region']]:border-b-0">
                 <Accordion title={headers[key]} defaultOpen titleSize="xl">
                   {key === "body" && formattedBodyDescription && (
                     <div