fix: base docs domain

Author: DanielRivers

src/components/ScalarApiReference.astro

@@ -5,13 +5,32 @@ interface Props {
 }
 
 const {specURL, proxyURL = import.meta.env.PUBLIC_KINDE_PROXY_URL} = Astro.props;
+
+// Build configuration object
+const config: Record<string, any> = {
+  theme: "deepSpace",
+  hideDarkModeToggle: "true",
+  searchHotKey: "j",
+  servers: [
+    {
+      url: "https://{your_kinde_subdomain}.kinde.com",
+      variables: {
+        your_kinde_subdomain: {
+          default: "your_kinde_subdomain"
+        }
+      }
+    }
+  ]
+};
+
+const configString = JSON.stringify(config);
 ---
 
 <script
   id="api-reference"
   data-url={specURL}
   data-proxy-url={proxyURL}
-  data-configuration='{"theme": "deepSpace", "hideDarkModeToggle": "true", "searchHotKey": "j"}'
+  data-configuration={configString}
 ></script>
 <script
   src="https://cdn.jsdelivr.net/npm/@scalar/[email protected]/dist/browser/standalone.min.js"
@@ -20,6 +39,85 @@ const {specURL, proxyURL = import.meta.env.PUBLIC_KINDE_PROXY_URL} = Astro.props
 <script>
   import waitForElement from "@utils/waitForElement";
 
+  // Configure servers after Scalar loads
+  const targetServers = [
+    {
+      url: "https://{your_kinde_subdomain}.kinde.com",
+      variables: {
+        your_kinde_subdomain: {
+          default: "your_kinde_subdomain"
+        }
+      }
+    }
+  ];
+
+  function updateScalarServers() {
+    const apiReferenceElement = document.getElementById("api-reference");
+    if (!apiReferenceElement) return;
+
+    // Method 1: Try to access Scalar's internal API
+    const scalarInstance = (window as any).ScalarApiReference;
+    if (scalarInstance && scalarInstance.updateConfiguration) {
+      scalarInstance.updateConfiguration({
+        servers: targetServers
+      });
+      return;
+    }
+    
+    // Method 2: Access the parsed spec directly
+    const scalarRef = (apiReferenceElement as any).__scalarApiReference;
+    if (scalarRef) {
+      if (scalarRef.spec) {
+        scalarRef.spec.servers = targetServers;
+        if (scalarRef.update) {
+          scalarRef.update();
+        }
+      }
+      // Also try to update configuration
+      if (scalarRef.configuration) {
+        scalarRef.configuration.servers = targetServers;
+      }
+    }
+
+    // Method 3: Update server selector in DOM if it exists
+    const serverSelect = document.querySelector('.scalar-api-reference select[data-scalar-server], .scalar-api-reference .server-selector select');
+    if (serverSelect) {
+      const serverUrl = targetServers[0].url;
+      (serverSelect as HTMLSelectElement).value = serverUrl;
+      serverSelect.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    // Method 4: Find and update base URL display
+    const baseUrlElement = document.querySelector('.scalar-api-reference .base-url, .scalar-api-reference a.base-url');
+    if (baseUrlElement) {
+      baseUrlElement.textContent = targetServers[0].url.replace('{your_kinde_subdomain}', 'your_kinde_subdomain');
+    }
+  }
+
+  // Wait for Scalar to load and then update servers
+  waitForElement(".scalar-api-reference", () => {
+    // Try multiple times as Scalar might load async
+    setTimeout(updateScalarServers, 500);
+    setTimeout(updateScalarServers, 1000);
+    setTimeout(updateScalarServers, 2000);
+    
+    // Also watch for changes in the DOM (server selector might load later)
+    const observer = new MutationObserver(() => {
+      updateScalarServers();
+    });
+    
+    const scalarContainer = document.querySelector('.scalar-api-reference');
+    if (scalarContainer) {
+      observer.observe(scalarContainer, {
+        childList: true,
+        subtree: true
+      });
+      
+      // Stop observing after 5 seconds to avoid performance issues
+      setTimeout(() => observer.disconnect(), 5000);
+    }
+  });
+
   // Wait for subdomain input to be ready, then focus and select text on focus, making it easier for users to enter their Kinde subdomain
   waitForElement("#variable-subdomain", (inputElement: HTMLInputElement) => {
     inputElement.addEventListener("focus", () => {