@marlinjai/clearify 1.5.3 → 1.6.1

package/src/theme/components/openapi/generate-snippets.ts

@@ -0,0 +1,102 @@
+interface SnippetInput {
+  method: string;
+  path: string;
+  baseUrl: string;
+  parameters?: Array<{ name: string; in: string; required?: boolean; schema?: { type?: string } }>;
+  requestBody?: Record<string, any>;
+  security?: Array<Record<string, string[]>>;
+}
+
+export function generateSnippets(input: SnippetInput): { label: string; code: string }[] {
+  const { method, path, baseUrl, parameters = [], requestBody, security } = input;
+  const upper = method.toUpperCase();
+  const url = `${baseUrl}${path}`;
+
+  // Replace path params with placeholder values
+  const urlWithParams = url.replace(/\{(\w+)\}/g, ':$1');
+
+  const hasBody = !!requestBody;
+  const bodySchema = requestBody?.content?.['application/json']?.schema;
+  const bodyExample = bodySchema ? generateExample(bodySchema) : null;
+  const bodyJson = bodyExample ? JSON.stringify(bodyExample, null, 2) : null;
+
+  const hasAuth = security && security.length > 0;
+  const authHeader = hasAuth ? 'Authorization: Bearer YOUR_TOKEN' : '';
+
+  const queryParams = parameters.filter(p => p.in === 'query');
+  const queryString = queryParams.length > 0
+    ? '?' + queryParams.map(p => `${p.name}=VALUE`).join('&')
+    : '';
+
+  // curl
+  const curlParts = [`curl -X ${upper} '${urlWithParams}${queryString}'`];
+  if (hasAuth) curlParts.push(`  -H '${authHeader}'`);
+  if (hasBody) {
+    curlParts.push("  -H 'Content-Type: application/json'");
+    curlParts.push(`  -d '${bodyJson}'`);
+  }
+  const curl = curlParts.join(' \\\n');
+
+  // JavaScript fetch
+  const fetchHeaders: string[] = [];
+  if (hasAuth) fetchHeaders.push(`    'Authorization': 'Bearer YOUR_TOKEN'`);
+  if (hasBody) fetchHeaders.push(`    'Content-Type': 'application/json'`);
+
+  let jsParts = `const response = await fetch('${urlWithParams}${queryString}', {\n  method: '${upper}',\n`;
+  if (fetchHeaders.length > 0) {
+    jsParts += `  headers: {\n${fetchHeaders.join(',\n')}\n  },\n`;
+  }
+  if (hasBody) {
+    jsParts += `  body: JSON.stringify(${bodyJson}),\n`;
+  }
+  jsParts += '});\n\nconst data = await response.json();';
+
+  // Python requests
+  let pyParts = `import requests\n\n`;
+  pyParts += `response = requests.${method.toLowerCase()}(\n    '${urlWithParams}${queryString}'`;
+  if (hasAuth || hasBody) pyParts += ',';
+  pyParts += '\n';
+  if (hasAuth) {
+    pyParts += `    headers={'Authorization': 'Bearer YOUR_TOKEN'}`;
+    if (hasBody) pyParts += ',';
+    pyParts += '\n';
+  }
+  if (hasBody) {
+    pyParts += `    json=${bodyJson},\n`;
+  }
+  pyParts += ')\n\ndata = response.json()';
+
+  return [
+    { label: 'curl', code: curl },
+    { label: 'JavaScript', code: jsParts },
+    { label: 'Python', code: pyParts },
+  ];
+}
+
+/** Generate a minimal example object from a JSON Schema */
+function generateExample(schema: Record<string, any>): any {
+  if (schema.example !== undefined) return schema.example;
+
+  switch (schema.type) {
+    case 'string':
+      return schema.enum?.[0] ?? schema.default ?? 'string';
+    case 'number':
+    case 'integer':
+      return schema.default ?? schema.minimum ?? 0;
+    case 'boolean':
+      return schema.default ?? true;
+    case 'array':
+      return schema.items ? [generateExample(schema.items)] : [];
+    case 'object': {
+      const obj: Record<string, any> = {};
+      if (schema.properties) {
+        for (const [key, prop] of Object.entries(schema.properties)) {
+          obj[key] = generateExample(prop as Record<string, any>);
+        }
+      }
+      return obj;
+    }
+    default:
+      return null;
+  }
+}

package/src/theme/components/openapi/index.ts

@@ -0,0 +1,8 @@
+export { ApiHeader } from './ApiHeader.js';
+export { TagGroup } from './TagGroup.js';
+export { OperationCard } from './OperationCard.js';
+export { ParameterTable } from './ParameterTable.js';
+export { SchemaViewer } from './SchemaViewer.js';
+export { CodeExamples } from './CodeExamples.js';
+export { ResponseList } from './ResponseList.js';
+export { MethodBadge } from './MethodBadge.js';

package/src/theme/styles/globals.css

@@ -362,130 +362,13 @@ a:hover {
   100% { background-position: 200% 0; }
 }
 
-/* ─── OpenAPI container isolation ─── */
-/* Remove Content wrapper constraints when rendering API reference */
-.clearify-prose:has(.clearify-openapi-page) {
-  max-width: none !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-/* Prevent clearify-prose typography and global styles from bleeding into Scalar */
-.clearify-openapi-container h1,
-.clearify-openapi-container h2,
-.clearify-openapi-container h3,
-.clearify-openapi-container h4 {
-  font-size: inherit;
-  font-weight: inherit;
-  margin: initial;
-  padding: initial;
-  line-height: inherit;
-  letter-spacing: normal;
-  color: inherit;
-  border-bottom: none;
-  text-transform: none;
-}
-
-.clearify-openapi-container p {
-  margin: initial;
-  color: inherit;
-}
-
-.clearify-openapi-container ul,
-.clearify-openapi-container ol {
-  margin: initial;
-  padding: initial;
-  color: inherit;
-}
-
-.clearify-openapi-container li {
-  margin: initial;
-}
-
-.clearify-openapi-container img {
-  max-width: initial;
-  border-radius: initial;
-  border: initial;
-}
-
-.clearify-openapi-container code {
-  background-color: initial;
-  padding: initial;
-  border-radius: initial;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  color: inherit;
-  border: initial;
-}
-
-.clearify-openapi-container pre {
-  background-color: initial;
-  border: initial;
-  border-radius: initial;
-  padding: initial;
-  overflow-x: initial;
-  margin: initial;
-  font-size: inherit;
-  line-height: inherit;
-  font-family: inherit;
-}
-
-.clearify-openapi-container table {
-  width: initial;
-  border-collapse: initial;
-  border-spacing: initial;
-  margin: initial;
-  font-size: inherit;
-  border-radius: initial;
-  overflow: initial;
-  border: initial;
-}
-
-.clearify-openapi-container th,
-.clearify-openapi-container td {
-  padding: initial;
-  text-align: initial;
-  border-bottom: initial;
-}
-
-.clearify-openapi-container th {
-  background-color: initial;
-  font-weight: inherit;
-  font-size: inherit;
-  text-transform: initial;
-  letter-spacing: initial;
-  color: inherit;
-}
-
-.clearify-openapi-container strong {
-  font-weight: inherit;
-  color: inherit;
-}
-
-.clearify-openapi-container blockquote {
-  border-left: initial;
-  padding: initial;
-  color: inherit;
-  margin: initial;
-  background: initial;
-  border-radius: initial;
-  font-style: initial;
-}
-
-.clearify-openapi-container hr {
-  border: initial;
-  border-top: initial;
-  margin: initial;
-}
-
-.clearify-openapi-container a {
-  color: inherit;
-  text-decoration: initial;
-  transition: initial;
+/* ─── OpenAPI page layout ─── */
+.clearify-openapi-page {
+  max-width: none;
 }
 
-.clearify-openapi-container a:hover {
-  color: inherit;
-  text-decoration: initial;
+.clearify-prose:has(.clearify-openapi-page) {
+  max-width: none !important;
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
 }