radiant-docs 0.1.0

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

@@ -0,0 +1,54 @@
+---
+import { Icon } from "astro-icon/components";
+import type { Field as FieldType } from "../OpenApiPage.astro";
+import Field from "../ui/Field.astro";
+
+interface Props {
+  field: FieldType;
+  requestPart: string;
+}
+
+const { field, requestPart } = Astro.props;
+---
+
+<div
+  class="flex justify-between flex-col sm:flex-row lg:flex-col xl:flex-row gap-4"
+>
+  <div class="w-full mt-1.5">
+    <Field
+      name={field.name}
+      type={field.type}
+      description={field.description}
+      required={field.required}
+    />
+  </div>
+  <div class="w-full">
+    {
+      field.enum && field.enum.length > 0 ? (
+        <div class="relative">
+          <select
+            name={`${requestPart}_${field.name}`}
+            x-model={`inputs['${requestPart}']['${field.name}']`}
+            class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white appearance-none"
+          >
+            {field.enum.map((value) => (
+              <option value={String(value)}>{value}</option>
+            ))}
+          </select>
+          <Icon
+            class="absolute right-3 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-neutral-400"
+            name="lucide:chevrons-up-down"
+          />
+        </div>
+      ) : (
+        <input
+          name={field.name}
+          placeholder={`Enter ${field.name}`}
+          type={field.type === "number" ? "number" : "text"}
+          x-model={`inputs['${requestPart}']['${field.name}']`}
+          class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200"
+        />
+      )
+    }
+  </div>
+</div>

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

@@ -0,0 +1,203 @@
+---
+import { Icon } from "astro-icon/components";
+import type { OpenApiRoute } from "../../lib/routes";
+import { renderMarkdown } from "../../lib/utils";
+import { headers, type RequestFields } from "../OpenApiPage.astro";
+import Accordian from "../user/Accordian.astro";
+import PlaygroundBar from "./PlaygroundBar.astro";
+import Field from "../ui/Field.astro";
+import ResponseDisplay from "./ResponseDisplay.astro";
+import PlaygroundField from "./PlaygroundField.astro";
+
+interface Props {
+  route: OpenApiRoute;
+  serverUrl?: string;
+  requestFields: RequestFields;
+}
+
+const { route, serverUrl, requestFields } = Astro.props;
+---
+
+<div
+  x-data=`{
+    loading: false,
+    response: null,
+    inputs: {
+      header: {},
+      path: {},
+      query: {},
+      body: {}
+    },
+    async sendRequest() {
+      this.loading = true;
+        await new Promise(resolve => setTimeout(resolve, 2000))
+      try {
+        // 1. Construct URL with Path Parameters
+        let url = ${JSON.stringify(serverUrl + route.openApiPath)};
+        Object.entries(this.inputs.path).forEach(([key, val]) => {
+          url = url.replace('{' + key + '}', encodeURIComponent(val));
+        });
+
+        // 2. Add Query Parameters
+        const queryParams = new URLSearchParams(this.inputs.query).toString();
+        if (queryParams) url += '?' + queryParams;
+
+        // 3. Prepare Fetch Options
+        console.log("Hello", this.inputs)
+        const options = {
+          method: ${JSON.stringify(route.openApiMethod.toUpperCase())},
+          headers: {
+            'Content-Type': 'application/json',
+            ...this.inputs.header
+          }
+        };
+
+        // 4. Add Body if needed
+        if (['POST', 'PUT', 'PATCH'].includes(options.method)) {
+          options.body = JSON.stringify(this.inputs.body);
+        }
+
+        // 5. Execute Request
+        const res = await fetch(url, options);
+
+        const status = res.status;
+        const statusTextMap = {
+          400: 'Bad Request', 401: 'Unauthorized', 403: 'Forbidden',
+          404: 'Not Found', 405: 'Method Not Allowed', 409: 'Conflict',
+          422: 'Unprocessable Entity', 429: 'Too Many Requests',
+          500: 'Internal Server Error', 502: 'Bad Gateway',
+          503: 'Service Unavailable', 504: 'Gateway Timeout'
+        };
+        const statusText = res.statusText || statusTextMap[status] || 'Unknown';
+
+        const headers = {};
+        res.headers.forEach((value, key) => {
+          headers[key] = value;
+        });
+
+        let data;
+        let highlightedData;
+        const contentType = res.headers.get('content-type') || '';
+
+        try {
+          if (contentType.includes('application/json')) {
+            data = await res.json();
+            highlightedData = Prism.highlight(
+              JSON.stringify(data, null, 2), 
+              Prism.languages.json, 
+              'json'
+            );
+          } else {
+            // For non-JSON responses, try to get as text
+            const text = await res.text();
+            console.log("TEXT", text)
+            highlightedData = Prism.highlight(
+              text || '(empty response)', 
+              Prism.languages.plaintext, 
+              'plaintext'
+            );
+          }
+        } catch (parseError) {
+          // If parsing fails, still show the response with error info
+          highlightedData = Prism.highlight(
+            JSON.stringify({ error: 'Failed to parse response', message: parseError.message }, null, 2),
+            Prism.languages.json,
+            'json'
+          );
+        }
+
+        this.response = {
+          status,
+          statusText,
+          headers,
+          highlightedData
+        };
+        
+      } catch (err) {
+        console.log('error', err)
+        this.response = {
+          status: err.status || 0,
+          statusText: err.statusText || err.message || 'Network Error',
+        };
+      } finally {
+        this.loading = false;
+      }
+    }
+  }`
+  class="flex flex-col gap-4"
+>
+  <div class="w-full">
+    <PlaygroundBar route={route} serverUrl={serverUrl}>
+      <button
+        @click="sendRequest()"
+        :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:bg-neutral-300 disabled:shadow-none disabled:before:shadow-none disabled:duration-0"
+      >
+        <span
+          class="flex items-center gap-2"
+          x-bind:class="loading ? 'opacity-0':''"
+        >
+          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>
+  </div>
+
+  <div class="flex flex-col lg:flex-row-reverse gap-4">
+    <div class="lg:max-w-xl w-full">
+      <ResponseDisplay />
+    </div>
+    <div class="flex-3 space-y-4">
+      {
+        Object.keys(requestFields).map(
+          (key) =>
+            requestFields[key as keyof RequestFields].length > 0 && (
+              <div class="border border-neutral-200 shadow-xs rounded-xl p-4">
+                <Accordian title={headers[key]} defaultOpen titleSize="xl">
+                  {requestFields[key as keyof RequestFields].map((field) => (
+                    <div class="border-b border-b-neutral-100 last:border-none pb-4 mb-4 last:pb-0 last:mb-0 first:pt-2">
+                      <PlaygroundField field={field} requestPart={key} />
+                    </div>
+                  ))}
+                </Accordian>
+              </div>
+            )
+        )
+      }
+    </div>
+  </div>
+</div>
+
+<script>
+  import Prism from "prismjs";
+  import "prismjs/components/prism-json";
+  // Use a dark theme that matches the #0d1117 background
+  import "prismjs/themes/prism-tomorrow.css";
+  // Make Prism available to Alpine
+  window.Prism = Prism;
+</script>
+
+<style>
+  @reference "../../styles/global.css";
+
+  :global(pre code span.token.punctuation) {
+    @apply text-[#24292E];
+  }
+
+  :global(pre code span.token.operator) {
+    @apply text-[#24292E];
+  }
+
+  :global(pre code span.token.property) {
+    @apply text-[#C62C2C];
+  }
+  :global(pre code span.token.string) {
+    @apply text-[#1E7734];
+  }
+</style>

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

@@ -0,0 +1,308 @@
+---
+import { Code } from "astro-expressive-code/components";
+import { Icon } from "astro-icon/components";
+import { methodColors } from "../../lib/utils";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { resolve, dirname } from "node:path";
+import oasToSnippet from "@readme/oas-to-snippet";
+import type { Language } from "@readme/oas-to-snippet/languages";
+import type { DataForHAR, HttpMethods, MediaTypeObject } from "oas/types";
+import * as Sampler from "openapi-sampler";
+import type { JSONSchema7 } from "json-schema";
+import type Oas from "oas";
+
+interface Props {
+  api: Oas;
+  method: string;
+  path: string;
+}
+
+const { method, path, api } = Astro.props;
+
+const operation = api.operation(path, method as HttpMethods);
+
+// Identify and build the Auth object
+const auth: Record<string, string | number | { user?: string; pass?: string }> =
+  {};
+const securityByType = operation.prepareSecurity();
+Object.values(securityByType).forEach((schemes) => {
+  // schemes is an array of security scheme objects
+  (schemes as any[]).forEach((scheme) => {
+    const schemeName = scheme._key || scheme.name;
+
+    // Keep the original conditionals - they're correct!
+    if (scheme?.type === "http" && scheme?.scheme === "bearer") {
+      auth[schemeName] = "<BEARER_TOKEN>";
+    } else if (scheme?.type === "apiKey") {
+      auth[schemeName] = "<API_KEY>";
+    } else if (scheme?.type === "http" && scheme?.scheme === "basic") {
+      auth[schemeName] = { user: "<USERNAME>", pass: "<PASSWORD>" };
+    }
+  });
+});
+
+// 1. Initialize the values object
+const values: DataForHAR = {
+  path: {},
+  query: {},
+  body: undefined,
+};
+
+// 2. Process Parameters (Path and Query)
+const parameters = operation.getParameters();
+parameters.forEach((param) => {
+  const name = param.name;
+
+  // Get example if it exists
+  const example =
+    param.example ||
+    (param.schema as any)?.example ||
+    (param.schema as any)?.default;
+
+  if (param.in === "path") {
+    // Per your request: Maintain curly braces for path
+    values.path![name] = `{${name}}`;
+  } else if (param.in === "query") {
+    // Precedence: Example -> Placeholder
+    values.query![name] = example ? String(example) : `<${name.toUpperCase()}>`;
+  }
+});
+
+// Process Request Body
+if (operation.hasRequestBody()) {
+  const requestBody = operation.getRequestBody(
+    "application/json"
+  ) as MediaTypeObject;
+  const schema = requestBody?.schema;
+
+  if (schema) {
+    values.body = Sampler.sample(schema as JSONSchema7, { skipReadOnly: true });
+  }
+}
+
+let snippets: {
+  code: string | false;
+  highlightMode: string | false;
+  install: string | false;
+}[] = [];
+
+const languages = [
+  ["go", "native"],
+  ["shell", "curl"],
+  ["javascript", "fetch"],
+  ["python", "requests"],
+];
+
+languages.forEach(([lang, target]) => {
+  try {
+    // Generate the snippet
+    // formData and auth can be empty objects for generic examples
+    const res = oasToSnippet(api, operation, values, auth, [
+      lang,
+      target,
+    ] as Language);
+
+    if (res && res.code) {
+      res.code = res.code
+        .replace(/%7B/g, "{")
+        .replace(/%7D/g, "}")
+        .replace(/%3C/g, "<")
+        .replace(/%3E/g, ">");
+    }
+
+    snippets.push(res);
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : String(err);
+    console.error(`Failed to generate ${lang} snippet:`, errorMessage);
+  }
+});
+
+// Resolve the path to node_modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const iconsPath = resolve(
+  __dirname,
+  "../../../node_modules/@xt0rted/expressive-code-file-icons/dist/icons"
+);
+
+// Helper function to read SVG file
+function getIconSvg(iconName: string): string {
+  try {
+    return readFileSync(resolve(iconsPath, `${iconName}.svg`), "utf-8");
+  } catch {
+    return "";
+  }
+}
+
+// Map language to display label
+const displayLabelMap: Record<string, string> = {
+  shell: "cURL",
+  javascript: "JavaScript",
+  python: "Python",
+  go: "Go",
+};
+
+// Map language to icon filename
+const iconFilenameMap: Record<string, string> = {
+  shell: "file_type_shell",
+  javascript: "file_type_js_official",
+  python: "file_type_python",
+  go: "file_type_go",
+};
+
+// Create icon map with SVG content
+const iconMap: Record<string, string> = {};
+for (const [lang, iconName] of Object.entries(iconFilenameMap)) {
+  iconMap[lang] = getIconSvg(iconName);
+}
+
+// Prepare snippets with display labels
+const snippetsWithIcons = snippets.map((snippet) => {
+  if (!snippet.highlightMode) {
+    return { ...snippet, iconSvg: null, displayLabel: snippet.highlightMode };
+  }
+  const iconSvg = iconMap[snippet.highlightMode.toLowerCase()] || null;
+  const displayLabel =
+    displayLabelMap[snippet.highlightMode.toLowerCase()] ||
+    snippet.highlightMode;
+  return { ...snippet, iconSvg, displayLabel };
+});
+---
+
+<div
+  x-data={`{
+    snippets: ${JSON.stringify(snippetsWithIcons)},
+    selected: 0,
+    select(index) {
+      this.selected = index;
+      this.$refs.button?.focus();
+      this.close();
+    },
+    close(focusAfter) {
+      if (!this.open) return;
+      this.open = false;
+      focusAfter?.focus();
+    }
+  }`}
+  class="request-code-snippets bg-neutral-100 rounded-[14px] border border-neutral-200 p-[3px] inset-shadow-xs"
+>
+  <div class="flex justify-between items-center">
+    <div class="font-medium ml-2 text-neutral-700 text-sm truncate">
+      <span
+        class:list={[
+          "text-xs uppercase font-semibold px-1.5 border py-px rounded-md mr-1.5",
+          methodColors[method],
+        ]}>{method}</span
+      >{path}
+    </div>
+    <div
+      x-data="{
+    open: false,
+    toggle() {
+        if (this.open) {
+            return this.close()
+        }
+
+        this.$refs.button.focus()
+
+        this.open = true
+    },
+    close(focusAfter) {
+        if (! this.open) return
+
+        this.open = false
+
+        focusAfter && focusAfter.focus()
+    }
+}"
+      x-on:keydown.escape.prevent.stop="close($refs.button)"
+      x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
+      x-id="['dropdown-button']"
+      class="shrink-0 relative max-w-36 w-full"
+    >
+      <button
+        x-ref="button"
+        x-on:click="toggle()"
+        :aria-expanded="open"
+        :aria-controls="$id('dropdown-button')"
+        type="button"
+        class="flex items-center px-3 pt-2 pb-1.5 relative border-x border-t border-neutral-200/70 rounded-t-xl w-full text-sm font-medium bg-white shadow-[-1px_0px_2px_0px_rgba(0,0,0,0.01)]. shadow-sm cursor-pointer after:absolute after:-bottom-[1.5px] after:inset-x-0 after:z-10 after:h-[3px] after:bg-white"
+      >
+        <span class="flex items-center gap-2">
+          <span
+            x-show="snippets[selected].iconSvg"
+            x-html="snippets[selected].iconSvg"
+            class="size-4 [&>svg]:w-full [&>svg]:h-full rounded overflow-hidden"
+            set:html={snippetsWithIcons[0]?.iconSvg || ""}
+          />
+          <span
+            x-text="snippets[selected].displayLabel"
+            set:html={snippetsWithIcons[0]?.displayLabel || ""}
+          />
+        </span>
+        <Icon name="lucide:chevrons-up-down" class="ml-auto" />
+      </button>
+      <!-- Panel -->
+      <ul
+        x-ref="panel"
+        x-show="open"
+        x-transition.origin.top.left
+        x-on:click.outside="close($refs.button)"
+        :id="$id('dropdown-button')"
+        x-cloak
+        role="menu"
+        class="absolute top-full right-2 min-w-48 rounded-lg shadow-xl mt-2 z-10 origin-top-right bg-white py-0.5 outline-none border border-neutral-200"
+      >
+        <template x-for="(snippet, index) in snippets" :key="index">
+          <li role="menuitem">
+            <button
+              x-on:click="select(index)"
+              type="button"
+              class="w-full text-left px-3 py-2 text-sm text-neutral-700 rounded-md transition-colors flex items-center gap-2 relative before:absolute before:inset-x-1 before:inset-y-0.5 before:-z-10 before:rounded-md before:duration-150 cursor-pointer"
+              x-bind:class="index === selected ? 'before:bg-neutral-200/50 text-neutral-900' : 'hover:before:bg-neutral-100/70'"
+            >
+              <span
+                x-show="snippet.iconSvg"
+                x-html="snippet.iconSvg"
+                class="size-4 [&>svg]:w-full [&>svg]:h-full rounded overflow-hidden"
+              ></span>
+              <span x-text="snippet.displayLabel"></span>
+            </button>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+  {
+    snippets.map((snippet, index) => (
+      <div
+        {...(index !== 0 ? { "x-cloak": true } : {})}
+        x-show={`selected === ${index}`}
+        data-snippet-index={index}
+      >
+        {snippet.code && snippet.highlightMode && (
+          <Code
+            code={snippet.code as string}
+            lang={snippet.highlightMode as string}
+            frame="code"
+          />
+        )}
+      </div>
+    ))
+  }
+</div>
+
+<style>
+  @reference "../../styles/global.css";
+  :global(.request-code-snippets .expressive-code .frame) {
+    @apply shadow-sm;
+  }
+  :global(.request-code-snippets .expressive-code pre) {
+    @apply rounded-xl! rounded-tr-none! border-neutral-200/70!;
+  }
+
+  :global(.request-code-snippets .expressive-code pre code) {
+    @apply max-h-64 overflow-y-auto;
+  }
+</style>