OpenAPI: Add code sample generation support for variable url

.changeset/famous-crabs-walk.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Add code sample generation support for variable url

packages/openapi/src/server/api-page.tsx

@@ -7,6 +7,7 @@ import { createRenders, type Renderer } from '@/render/renderer';
 import type { OpenAPIV3_1 } from 'openapi-types';
 import type { NoReference } from '@/utils/schema';
 import { type DocumentInput, processDocument } from '@/utils/process-document';
+import { getUrl } from '@/utils/server-url';
 
 type ApiPageContextProps = Pick<
   Partial<RenderContext>,
@@ -115,6 +116,12 @@ export async function getContext(
     renderer?: Partial<Renderer>;
   } = {},
 ): Promise<RenderContext> {
+  const servers =
+    document.servers && document.servers.length > 0
+      ? document.servers
+      : [{ url: 'https://example.com' }];
+  const server = servers[0];
+
   return {
     document: document,
     dereferenceMap,
@@ -126,8 +133,15 @@ export async function getContext(
     shikiOptions: options.shikiOptions,
     generateTypeScriptSchema: options.generateTypeScriptSchema,
     generateCodeSamples: options.generateCodeSamples,
-    baseUrl: document.servers?.[0].url ?? 'https://example.com',
-    servers: document.servers ?? [],
+    baseUrl: getUrl(
+      server.url,
+      server.variables
+        ? Object.fromEntries(
+            Object.entries(server.variables).map(([k, v]) => [k, v.default]),
+          )
+        : {},
+    ),
+    servers,
     slugger: new Slugger(),
   };
 }

packages/openapi/src/ui/components/select.tsx

@@ -16,14 +16,14 @@ const SelectTrigger = forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 items-center justify-between rounded-md border px-3 py-2 text-sm text-fd-foreground hover:bg-fd-accent focus:outline-none focus:ring-2 focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 items-center rounded-md border px-3 py-2 text-start text-sm text-fd-foreground hover:bg-fd-accent focus:outline-none focus:ring-2 focus:ring-fd-ring disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="size-4 text-fd-muted-foreground" />
+      <ChevronDown className="ms-auto size-4 text-fd-muted-foreground" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));