@writedocs/generator 0.1.0

package/src/components/ApiPlayground.astro

@@ -0,0 +1,281 @@
+---
+import fs from 'node:fs';
+import ApiSchemaField from './ApiSchemaField.astro';
+import Tabs from './Tabs.astro';
+import Tab from './Tab.astro';
+import {
+  schemaRows,
+  exampleFromSchema,
+  primaryContentType,
+  methodClass,
+  pathSegments,
+  findOperationFile,
+  type OpenApiOperation,
+} from '../lib/openapi-render';
+
+interface Props {
+  operation: string; // "METHOD /path", matching a page's `openapi` frontmatter
+  contentDir: string;
+}
+const { operation, contentDir } = Astro.props as Props;
+
+const [method = '', urlPath = ''] = operation.trim().split(/\s+/, 2);
+const opFile = findOperationFile(contentDir, method, urlPath);
+const op: OpenApiOperation | null = opFile ? JSON.parse(fs.readFileSync(opFile, 'utf-8')) : null;
+
+const pathParams = op?.parameters.filter((p) => p.in === 'path') ?? [];
+const queryParams = op?.parameters.filter((p) => p.in === 'query') ?? [];
+const headerParams = op?.parameters.filter((p) => p.in === 'header') ?? [];
+
+const requestContentType = op ? primaryContentType(op.requestBody?.content) : null;
+const requestSchema = requestContentType ? op?.requestBody?.content?.[requestContentType]?.schema : undefined;
+const requestRows = requestSchema ? schemaRows(requestSchema) : [];
+
+const responseEntries = op ? Object.entries(op.responses) : [];
+const segments = op ? pathSegments(op.path) : [];
+---
+
+{!op && (
+  <div class="wd-api-error">
+    No OpenAPI operation found for <code>{operation}</code>. Check that this page's <code>openapi</code>
+    frontmatter matches an operation in writedocs.json's <code>openapi</code> spec exactly (e.g.
+    <code>"GET /pets/&#123;petId&#125;"</code>), and that the spec still defines it.
+  </div>
+)}
+
+{op && (
+  <div class="wd-api-playground" data-operation={operation}>
+    <div class="wd-api-header">
+      <span class={`wd-api-method wd-api-method-${methodClass(op.method)}`}>{op.method}</span>
+      <code class="wd-api-path">
+        {segments.map((seg) =>
+          seg.isParam ? <span class="wd-api-path-param">{seg.text}</span> : <span>{seg.text}</span>
+        )}
+      </code>
+    </div>
+    {op.description && <p class="wd-api-description">{op.description}</p>}
+
+    {headerParams.length > 0 && (
+      <section class="wd-api-section">
+        <h4>Header Parameters</h4>
+        <div class="wd-api-param-list">
+          {headerParams.map((p) => (
+            <div class="wd-api-param">
+              <div class="wd-api-param-head">
+                <span class="wd-api-param-name">{p.name}</span>
+                <span class="wd-api-pill wd-api-pill-type">{p.schema?.type ?? 'string'}</span>
+                {p.required && <span class="wd-api-pill wd-api-pill-required">required</span>}
+              </div>
+              {p.description && <p class="wd-api-param-desc">{p.description}</p>}
+            </div>
+          ))}
+        </div>
+      </section>
+    )}
+
+    {pathParams.length > 0 && (
+      <section class="wd-api-section">
+        <h4>Path Parameters</h4>
+        <div class="wd-api-param-list">
+          {pathParams.map((p) => (
+            <div class="wd-api-param">
+              <div class="wd-api-param-head">
+                <span class="wd-api-param-name">{p.name}</span>
+                <span class="wd-api-pill wd-api-pill-type">{p.schema?.type ?? 'string'}</span>
+                {p.required && <span class="wd-api-pill wd-api-pill-required">required</span>}
+              </div>
+              {p.description && <p class="wd-api-param-desc">{p.description}</p>}
+            </div>
+          ))}
+        </div>
+      </section>
+    )}
+
+    {queryParams.length > 0 && (
+      <section class="wd-api-section">
+        <h4>Query Parameters</h4>
+        <div class="wd-api-param-list">
+          {queryParams.map((p) => (
+            <div class="wd-api-param">
+              <div class="wd-api-param-head">
+                <span class="wd-api-param-name">{p.name}</span>
+                <span class="wd-api-pill wd-api-pill-type">{p.schema?.type ?? 'string'}</span>
+                {p.required && <span class="wd-api-pill wd-api-pill-required">required</span>}
+              </div>
+              {p.description && <p class="wd-api-param-desc">{p.description}</p>}
+            </div>
+          ))}
+        </div>
+      </section>
+    )}
+
+    {requestSchema && requestRows.length > 0 && (
+      <section class="wd-api-section">
+        <h4>Body {requestContentType && <span class="wd-api-content-type">{requestContentType}</span>}</h4>
+        <div class="wd-api-param-list">
+          <ApiSchemaField rows={requestRows} />
+        </div>
+      </section>
+    )}
+
+    {responseEntries.length > 0 && (
+      <section class="wd-api-section">
+        <h4>Response</h4>
+        <Tabs>
+          {responseEntries.map(([status, resp]) => {
+            const contentType = primaryContentType(resp.content);
+            const schema = contentType ? resp.content?.[contentType]?.schema : undefined;
+            const rows = schema ? schemaRows(schema) : [];
+            return (
+              <Tab title={status}>
+                {resp.description && (
+                  <p class="wd-api-param-desc-inline wd-api-response-desc">{resp.description}</p>
+                )}
+                {rows.length > 0 && (
+                  <div class="wd-api-param-list wd-api-param-list-nested">
+                    <ApiSchemaField rows={rows} showRequired={false} />
+                  </div>
+                )}
+              </Tab>
+            );
+          })}
+        </Tabs>
+      </section>
+    )}
+  </div>
+)}
+
+<style is:global>
+  .wd-api-error {
+    padding: 1rem 1.25rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--wd-border);
+    background: var(--wd-surface);
+    color: var(--wd-text-muted);
+    font-size: 0.9rem;
+    margin: 1.25rem 0;
+  }
+  .wd-api-playground {
+    margin: 1.5rem 0;
+  }
+  .wd-api-header {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
+    padding: 0.6rem 0.9rem;
+    border: 1px solid var(--wd-border);
+    border-radius: 0.5rem;
+    background: var(--wd-surface);
+  }
+  .wd-api-method {
+    display: inline-block;
+    padding: 0.2rem 0.55rem;
+    border-radius: 0.3rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    color: #fff;
+    flex-shrink: 0;
+  }
+  .wd-api-method-get { background: #16a34a; }
+  .wd-api-method-post { background: #2563eb; }
+  .wd-api-method-put { background: #9333ea; }
+  .wd-api-method-patch { background: #d97706; }
+  .wd-api-method-delete { background: #dc2626; }
+  .wd-api-method-other { background: var(--wd-text-muted); }
+  .wd-api-path {
+    font-size: 0.88rem;
+    background: none;
+    padding: 0;
+    word-break: break-all;
+    color: var(--wd-text-muted);
+  }
+  .wd-api-path-param {
+    color: var(--wd-primary);
+    font-weight: 600;
+  }
+  .wd-api-description {
+    color: var(--wd-text-muted);
+    margin: 0.9rem 0 0;
+  }
+  .wd-api-section {
+    margin-top: 2rem;
+  }
+  .wd-api-section h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--wd-text);
+    margin: 0 0 0.9rem;
+  }
+  .wd-api-content-type {
+    font-weight: 400;
+    font-size: 0.78rem;
+    color: var(--wd-text-muted);
+    margin-left: 0.4rem;
+  }
+  .wd-api-param-list {
+    display: flex;
+    flex-direction: column;
+  }
+  .wd-api-param {
+    padding: 0.9rem 0;
+    border-bottom: 1px solid var(--wd-border);
+  }
+  .wd-api-param:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+  .wd-api-param-list-nested {
+    margin-top: 0.6rem;
+  }
+  .wd-api-param-list-nested .wd-api-param {
+    padding: 0.6rem 0;
+  }
+  .wd-api-param-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .wd-api-param-name {
+    font-family: monospace;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--wd-primary);
+  }
+  .wd-api-pill {
+    display: inline-block;
+    padding: 0.1rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    background: var(--wd-surface);
+    color: var(--wd-text-muted);
+    border: 1px solid var(--wd-border);
+  }
+  .wd-api-pill-required {
+    background: color-mix(in srgb, #dc2626 12%, transparent);
+    color: #dc2626;
+    border-color: transparent;
+  }
+  .wd-api-param-desc {
+    margin: 0.4rem 0 0;
+    color: var(--wd-text-muted);
+    font-size: 0.88rem;
+  }
+  .wd-api-param-desc-inline {
+    color: var(--wd-text-muted);
+    font-size: 0.85rem;
+  }
+  /* Sits above a response tab's own schema field list (when there's a
+     body to show) - a little breathing room below it, same as
+     Parameter.astro's own Expandable-spacing rule, so the description
+     doesn't crowd directly against the first field row. Only the
+     response tabs use this (a plain wd-api-param-desc-inline elsewhere -
+     the path/query/header param rows - sits right under a name/type
+     row that's already got its own margin, no gap needed there). */
+  .wd-api-response-desc {
+    margin: 0 0 0.75rem;
+  }
+</style>