blodemd 0.0.4 → 0.0.6

package/docs/components/api/api-playground.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import type { ChangeEvent } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import type { OpenApiEntry } from "@/lib/openapi";
+
+const extractParams = (entry: OpenApiEntry, location: "path" | "query") =>
+  (entry.operation.parameters ?? []).filter(
+    (param) => (param as { in?: string }).in === location
+  ) as { name?: string; required?: boolean; description?: string }[];
+
+export const ApiPlayground = ({
+  entry,
+  proxyEnabled,
+}: {
+  entry: OpenApiEntry;
+  proxyEnabled: boolean;
+}) => {
+  const servers = entry.spec.servers ?? [];
+  const [serverIndex, setServerIndex] = useState(0);
+  const [response, setResponse] = useState<string | null>(null);
+  const [status, setStatus] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [body, setBody] = useState("{}");
+  const [authToken, setAuthToken] = useState("");
+  const [useProxy, setUseProxy] = useState(proxyEnabled);
+
+  const pathParams = useMemo(() => extractParams(entry, "path"), [entry]);
+  const queryParams = useMemo(() => extractParams(entry, "query"), [entry]);
+  const [pathValues, setPathValues] = useState<Record<string, string>>({});
+  const [queryValues, setQueryValues] = useState<Record<string, string>>({});
+
+  const baseUrl = servers[serverIndex]?.url ?? "";
+  const canSend = Boolean(baseUrl);
+
+  const buildUrl = useCallback(() => {
+    let { path } = entry.operation;
+    for (const param of pathParams) {
+      const key = param.name ?? "";
+      const value = pathValues[key] ?? "";
+      path = path.replace(`{${key}}`, encodeURIComponent(value));
+    }
+
+    const url = new URL(path, baseUrl || "http://localhost");
+    for (const param of queryParams) {
+      const key = param.name ?? "";
+      const value = queryValues[key];
+      if (value) {
+        url.searchParams.set(key, value);
+      }
+    }
+
+    return url.toString();
+  }, [
+    baseUrl,
+    entry.operation,
+    pathParams,
+    pathValues,
+    queryParams,
+    queryValues,
+  ]);
+
+  const handleUseProxyChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setUseProxy(event.target.checked);
+    },
+    []
+  );
+  const handleServerChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => {
+      setServerIndex(Number(event.target.value));
+    },
+    []
+  );
+  const handlePathValueChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const { name, value } = event.target;
+      setPathValues((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    },
+    []
+  );
+  const handleQueryValueChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const { name, value } = event.target;
+      setQueryValues((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    },
+    []
+  );
+  const handleAuthTokenChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setAuthToken(event.target.value);
+    },
+    []
+  );
+  const handleBodyChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      setBody(event.target.value);
+    },
+    []
+  );
+
+  const handleSend = useCallback(async () => {
+    const url = buildUrl();
+    setIsLoading(true);
+    setResponse(null);
+    setStatus(null);
+
+    try {
+      const { method } = entry.operation;
+      const requestHeaders = {
+        "Content-Type": "application/json",
+        ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
+      };
+
+      const payload = {
+        body,
+        headers: requestHeaders,
+        method,
+        url,
+      };
+
+      const requestUrl = useProxy ? "/blodemd-internal/proxy" : url;
+      const requestMethod = useProxy ? "POST" : method;
+      const requestHeadersToSend = useProxy
+        ? {
+            "Content-Type": "application/json",
+          }
+        : requestHeaders;
+
+      let requestBody: string | undefined;
+      if (useProxy) {
+        requestBody = JSON.stringify(payload);
+      } else if (method === "GET") {
+        requestBody = undefined;
+      } else {
+        requestBody = body;
+      }
+
+      const res = await fetch(requestUrl, {
+        body: requestBody,
+        headers: requestHeadersToSend,
+        method: requestMethod,
+      });
+
+      const text = await res.text();
+      setStatus(res.status);
+      let formatted = text;
+      try {
+        formatted = JSON.stringify(JSON.parse(text), null, 2);
+      } catch {
+        formatted = text;
+      }
+      setResponse(formatted || "(empty response)");
+    } catch (error) {
+      setStatus(0);
+      setResponse(error instanceof Error ? error.message : "Request failed.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [authToken, body, buildUrl, entry.operation, useProxy]);
+
+  return (
+    <section className="mt-7 grid gap-3">
+      <div className="grid gap-3 rounded-xl border border-border bg-surface p-4">
+        <div className="flex items-center justify-between">
+          <h2>Try it out</h2>
+          {proxyEnabled ? (
+            <label className="flex items-center gap-2 text-sm">
+              <input
+                checked={useProxy}
+                className="accent-primary"
+                onChange={handleUseProxyChange}
+                type="checkbox"
+              />
+              Use docs proxy
+            </label>
+          ) : null}
+        </div>
+
+        {servers.length ? (
+          <Field>
+            <FieldLabel htmlFor="api-server">Server</FieldLabel>
+            <select
+              className="flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-sans text-base text-foreground shadow-input transition-colors hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background"
+              id="api-server"
+              onChange={handleServerChange}
+              value={serverIndex}
+            >
+              {servers.map((server, index) => (
+                <option key={server.url} value={index}>
+                  {server.url}
+                </option>
+              ))}
+            </select>
+          </Field>
+        ) : null}
+
+        {pathParams.length ? (
+          <div className="grid gap-2.5 grid-cols-[repeat(auto-fit,minmax(180px,1fr))]">
+            {pathParams.map((param) => (
+              <Field key={param.name}>
+                <FieldLabel htmlFor={`path-${param.name}`}>
+                  {param.name}
+                </FieldLabel>
+                <Input
+                  id={`path-${param.name}`}
+                  name={param.name ?? ""}
+                  onChange={handlePathValueChange}
+                  placeholder={param.required ? "Required" : "Optional"}
+                  type="text"
+                  value={pathValues[param.name ?? ""] ?? ""}
+                />
+              </Field>
+            ))}
+          </div>
+        ) : null}
+
+        {queryParams.length ? (
+          <div className="grid gap-2.5 grid-cols-[repeat(auto-fit,minmax(180px,1fr))]">
+            {queryParams.map((param) => (
+              <Field key={param.name}>
+                <FieldLabel htmlFor={`query-${param.name}`}>
+                  {param.name}
+                </FieldLabel>
+                <Input
+                  id={`query-${param.name}`}
+                  name={param.name ?? ""}
+                  onChange={handleQueryValueChange}
+                  placeholder={param.required ? "Required" : "Optional"}
+                  type="text"
+                  value={queryValues[param.name ?? ""] ?? ""}
+                />
+              </Field>
+            ))}
+          </div>
+        ) : null}
+
+        <Field>
+          <FieldLabel htmlFor="auth-token">Auth token</FieldLabel>
+          <Input
+            id="auth-token"
+            onChange={handleAuthTokenChange}
+            placeholder="Bearer token"
+            type="password"
+            value={authToken}
+          />
+        </Field>
+
+        {entry.operation.method === "GET" ? null : (
+          <Field>
+            <FieldLabel htmlFor="request-body">Request body</FieldLabel>
+            <textarea
+              className="flex w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-sans text-base text-foreground shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background"
+              id="request-body"
+              onChange={handleBodyChange}
+              rows={6}
+              value={body}
+            />
+          </Field>
+        )}
+
+        <Button
+          className="w-full"
+          disabled={isLoading || !canSend}
+          onClick={handleSend}
+          type="button"
+        >
+          {isLoading ? "Sending..." : "Send request"}
+        </Button>
+        {canSend ? null : (
+          <p className="text-sm text-muted-foreground">
+            Add a server URL in your OpenAPI spec to enable requests.
+          </p>
+        )}
+
+        {response === null ? null : (
+          <div className="rounded-xl border border-border bg-primary/[0.08] p-3">
+            <div className="font-semibold">Status: {status}</div>
+            <pre className="mt-2 overflow-x-auto">{response}</pre>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};

package/docs/components/api/api-reference.tsx

@@ -0,0 +1,121 @@
+import dynamic from "next/dynamic";
+
+import type { OpenApiEntry } from "@/lib/openapi";
+import { cn } from "@/lib/utils";
+
+const ApiPlayground = dynamic(async () => {
+  const apiModule = await import("@/components/api/api-playground");
+  return { default: apiModule.ApiPlayground };
+});
+
+const methodColors: Record<string, string> = {
+  delete: "bg-red-500",
+  get: "bg-blue-500",
+  patch: "bg-amber-500",
+  post: "bg-green-500",
+  put: "bg-orange-500",
+};
+
+export const ApiReference = ({
+  entry,
+  proxyEnabled,
+}: {
+  entry: OpenApiEntry;
+  proxyEnabled: boolean;
+}) => {
+  const { operation } = entry;
+  const parameters = operation.parameters ?? [];
+  const requestBody = operation.requestBody as
+    | { content?: Record<string, { schema?: unknown }> }
+    | undefined;
+  const responses = operation.responses ?? {};
+
+  return (
+    <div>
+      <header className="mb-4 flex items-center gap-4">
+        <div
+          className={cn(
+            "rounded-full px-2.5 py-1.5 text-xs font-semibold uppercase text-white",
+            methodColors[operation.method.toLowerCase()] ?? "bg-primary"
+          )}
+        >
+          {operation.method}
+        </div>
+        <div className="font-mono">{operation.path}</div>
+      </header>
+      {operation.summary ? (
+        <p className="font-semibold">{operation.summary}</p>
+      ) : null}
+      {operation.description ? (
+        <p className="text-muted-foreground">{operation.description}</p>
+      ) : null}
+
+      {parameters.length ? (
+        <section className="mt-7 grid gap-3">
+          <h2>Parameters</h2>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-[120px_80px_80px_1fr] gap-3 rounded-lg border border-border bg-background/60 p-2.5 font-bold">
+              <span>Name</span>
+              <span>In</span>
+              <span>Required</span>
+              <span>Description</span>
+            </div>
+            {parameters.map((param) => {
+              const name = (param as { name?: string }).name ?? "";
+              const location = (param as { in?: string }).in ?? "";
+              const required = (param as { required?: boolean }).required
+                ? "Yes"
+                : "No";
+              const description =
+                (param as { description?: string }).description ?? "";
+
+              return (
+                <div
+                  className="grid grid-cols-[120px_80px_80px_1fr] gap-3 rounded-lg border border-border bg-background/60 p-2.5"
+                  key={name}
+                >
+                  <span>{name}</span>
+                  <span>{location}</span>
+                  <span>{required}</span>
+                  <span>{description}</span>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      ) : null}
+
+      {requestBody?.content ? (
+        <section className="mt-7 grid gap-3">
+          <h2>Request Body</h2>
+          <pre className="overflow-x-auto rounded-lg bg-code p-3 text-code-foreground">
+            {JSON.stringify(requestBody.content, null, 2)}
+          </pre>
+        </section>
+      ) : null}
+
+      {Object.keys(responses).length ? (
+        <section className="mt-7 grid gap-3">
+          <h2>Responses</h2>
+          <div className="grid gap-2">
+            {Object.entries(responses).map(([status, response]) => {
+              const description =
+                (response as { description?: string }).description ?? "";
+              return (
+                <div
+                  className="flex justify-between rounded-lg border border-border bg-background/60 p-2.5"
+                  key={status}
+                >
+                  <span className="font-semibold">{status}</span>
+                  <span className="text-muted-foreground">{description}</span>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      ) : null}
+
+      <ApiPlayground entry={entry} proxyEnabled={proxyEnabled} />
+    </div>
+  );
+};

package/docs/components/content/collection-index.tsx

@@ -0,0 +1,114 @@
+import type { ContentEntry } from "@repo/previewing";
+import Link from "next/link";
+
+import { toDocHref } from "@/lib/routes";
+
+type CollectionEntry = Extract<ContentEntry, { kind: "entry" }>;
+
+const formatDate = (value?: string) => {
+  if (!value) {
+    return null;
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  return date.toLocaleDateString("en-US", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+};
+
+const formatPrice = (price?: number, currency?: string) => {
+  if (price === undefined || !currency) {
+    return null;
+  }
+  try {
+    return new Intl.NumberFormat("en-US", {
+      currency,
+      style: "currency",
+    }).format(price);
+  } catch {
+    return `${price} ${currency}`;
+  }
+};
+
+const buildMeta = (entry: CollectionEntry) => {
+  const frontmatter = entry.frontmatter as Record<string, unknown>;
+  switch (entry.type) {
+    case "blog": {
+      const date = formatDate(frontmatter.date as string | undefined);
+      const tags = Array.isArray(frontmatter.tags)
+        ? frontmatter.tags.join(", ")
+        : null;
+      return [date, tags ? `Tags: ${tags}` : null].filter(Boolean);
+    }
+    case "courses": {
+      const order = frontmatter.order as number | undefined;
+      return order === undefined ? [] : [`Lesson ${order}`];
+    }
+    case "products": {
+      const sku = frontmatter.sku as string | undefined;
+      const price = formatPrice(
+        frontmatter.price as number | undefined,
+        frontmatter.currency as string | undefined
+      );
+      return [sku ? `SKU ${sku}` : null, price].filter(Boolean);
+    }
+    case "notes":
+    case "todos": {
+      const date = formatDate(frontmatter.date as string | undefined);
+      return date ? [date] : [];
+    }
+    case "forms": {
+      const fields = Array.isArray(frontmatter.fields)
+        ? frontmatter.fields.length
+        : null;
+      return fields ? [`${fields} fields`] : [];
+    }
+    case "sheets": {
+      const columns = Array.isArray(frontmatter.columns)
+        ? frontmatter.columns.length
+        : null;
+      return columns ? [`${columns} columns`] : [];
+    }
+    default: {
+      return [];
+    }
+  }
+};
+
+export const CollectionIndex = ({
+  entries,
+  basePath,
+}: {
+  entries: CollectionEntry[];
+  basePath: string;
+}) => (
+  <div className="grid gap-4">
+    {entries.map((entry) => {
+      const meta = buildMeta(entry);
+      return (
+        <Link
+          className="block rounded-xl border border-border bg-surface p-4.5 transition-[border-color,box-shadow] hover:border-primary hover:shadow-md"
+          href={toDocHref(entry.slug, basePath)}
+          key={`${entry.collectionId}-${entry.slug}`}
+        >
+          <div className="text-lg font-semibold">{entry.title}</div>
+          {entry.description ? (
+            <p className="mt-1.5 text-muted-foreground">{entry.description}</p>
+          ) : null}
+          {meta.length ? (
+            <div className="mt-2 text-sm text-muted-foreground">
+              {meta.join(" | ")}
+            </div>
+          ) : null}
+          {entry.type === "slides" ? (
+            <div className="mt-2 text-sm text-muted-foreground">Slide deck</div>
+          ) : null}
+        </Link>
+      );
+    })}
+  </div>
+);