Something went wrong. Try again.
opencode v2 mirror
Something went wrong. Try again.
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152---import openapi from "../../../openapi.json"import type { OpenApiOperation, OpenApiSchema } from "../lib/openapi"import { openApiSchemaLabel } from "../lib/openapi"import OpenApiSchemaView from "./OpenApiSchema.astro"
const methods = ["get", "post", "put", "patch", "delete", "options", "head"] as consttype Method = (typeof methods)[number]
const paths = openapi.paths as unknown as Record<string, Partial<Record<Method, OpenApiOperation>>>const operations = Object.entries(paths).flatMap(([path, item]) => methods.flatMap((method) => { const operation = item[method] if (!operation) return [] return [{ ...operation, path, method, id: operation.operationId ?? `${method}-${path}`.replace(/[^a-z0-9]+/gi, "-") }] }),)const groups = [...new Set(operations.map((operation) => operation.tags?.[0] ?? "other"))].map((tag) => ({ tag, id: `tag-${tag.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`, description: openapi.tags.find((item) => item.name === tag)?.description, operations: operations.filter((operation) => (operation.tags?.[0] ?? "other") === tag),}))const schemas = Object.entries(openapi.components.schemas) as [string, OpenApiSchema][]---
<div class="api-reference"> <nav class="api-navigation" aria-label="API endpoints"> <strong>API reference</strong> <a class="api-navigation-overview" href="#overview">Overview</a> { groups.map((group) => ( <details class="api-navigation-group"> <summary><span>{group.tag}</span><small>{group.operations.length}</small></summary> {group.operations.map((operation) => ( <a href={`#${operation.id}`}> <span class:list={["api-navigation-method", `api-navigation-method-${operation.method}`]}>{operation.method}</span> <span>{operation.summary}</span> </a> ))} </details> )) } <a class="api-navigation-overview" href="#schemas"><span>Schemas</span><small>{schemas.length}</small></a> </nav>
<article class="api-content" id="overview" data-pagefind-body data-pagefind-meta="title:API"> <header class="api-intro"> <p class="api-eyebrow">OpenAPI {openapi.openapi}</p> <h1>HTTP API</h1> <p>{openapi.info.description}</p> <div class="api-meta"> <span>{operations.length} operations</span> <span>{schemas.length} schemas</span> <a href={`${import.meta.env.BASE_URL}openapi.json`}>OpenAPI JSON</a> </div> </header>
{ groups.map((group) => ( <section class="api-group" id={group.id}> <header> <p class="api-eyebrow">Resource</p> <h2>{group.tag}</h2> {group.description && <p>{group.description}</p>} </header> <div class="api-operations"> {group.operations.map((operation) => ( <details class="api-operation" id={operation.id}> <summary> <span class:list={["api-method", `api-method-${operation.method}`]}>{operation.method}</span> <code>{operation.path}</code> <span>{operation.summary}</span> </summary> <div class="api-operation-body"> {operation.description && <p>{operation.description}</p>} <p class="api-operation-id"><span>Operation ID</span><code>{operation.operationId}</code></p> {!!operation.parameters?.length && ( <section class="api-block"> <h3>Parameters</h3> <div class="api-table-scroll"> <table> <thead><tr><th>Name</th><th>Location</th><th>Type</th><th>Description</th></tr></thead> <tbody> {operation.parameters.map((parameter) => ( <tr> <td><code>{parameter.name}</code>{parameter.required && <span class="api-required">required</span>}</td> <td>{parameter.in}</td> <td><OpenApiSchemaView schema={parameter.schema} /></td> <td>{parameter.description ?? <span class="api-muted">No description</span>}</td> </tr> ))} </tbody> </table> </div> </section> )} {operation.requestBody && ( <section class="api-block"> <h3>Request body {operation.requestBody.required && <span class="api-required">required</span>}</h3> {operation.requestBody.description && <p>{operation.requestBody.description}</p>} <div class="api-content-schemas"> {Object.entries(operation.requestBody.content ?? {}).map(([mediaType, content]) => ( <div><code class="api-media-type">{mediaType}</code><OpenApiSchemaView schema={content.schema} /></div> ))} </div> </section> )} <section class="api-block"> <h3>Responses</h3> <div class="api-responses"> {Object.entries(operation.responses ?? {}).map(([status, response]) => ( <div class="api-response"> <div class="api-response-heading"> <code class:list={["api-status", status.startsWith("2") && "api-status-success"]}>{status}</code> <span>{response.description ?? "Response"}</span> </div> {Object.entries(response.content ?? {}).map(([mediaType, content]) => ( <div class="api-response-schema"><code class="api-media-type">{mediaType}</code><OpenApiSchemaView schema={content.schema} /></div> ))} </div> ))} </div> </section> </div> </details> ))} </div> </section> )) }
<section class="api-group api-schemas" id="schemas"> <header> <p class="api-eyebrow">Components</p> <h2>Schemas</h2> <p>Reusable data types referenced by API operations.</p> </header> <div class="api-operations"> { schemas.map(([name, schema]) => ( <details class="api-schema" id={`schema-${name}`}> <summary><code>{name}</code><span>{openApiSchemaLabel(schema)}</span></summary> <div class="api-schema-body"><OpenApiSchemaView schema={schema} /></div> </details> )) } </div> </section> </article></div>