@wrikka/create-docs 0.1.0 → 0.2.0

package/src/runtime/content.ts

@@ -259,21 +259,23 @@ export function createStaticDataSource(
 		async collections(): Promise<CollectionMeta[]> {
 			return options.collections.map((c) => {
 				const dirs = dirMeta.get(c.meta.id);
-				if (!dirs?.size) return c.meta;
-				const sections = [...dirs.entries()]
-					.map(([dirKey, m]) => ({
-						id: dirKey.split("/").pop() ?? dirKey,
-						label: m.title ?? dirKey.split("/").pop() ?? dirKey,
-						icon: m.icon,
-						order: m.order,
-						collapsed: m.collapsed,
-					}))
-					.sort(
-						(a, b) =>
-							(a.order ?? Number.MAX_SAFE_INTEGER) -
-							(b.order ?? Number.MAX_SAFE_INTEGER),
-					);
-				return { ...c.meta, sections };
+				const fromDirs = [...(dirs?.entries() ?? [])].map(([dirKey, m]) => ({
+					id: dirKey.split("/").pop() ?? dirKey,
+					label: m.title ?? dirKey.split("/").pop() ?? dirKey,
+					icon: m.icon,
+					order: m.order,
+					collapsed: m.collapsed,
+				}));
+				const dirIds = new Set(fromDirs.map((s) => s.id));
+				const fromMeta = (c.meta.sections ?? []).filter(
+					(s) => !dirIds.has(s.id) && !dirIds.has(s.label),
+				);
+				const sections = [...fromDirs, ...fromMeta].sort(
+					(a, b) =>
+						(a.order ?? Number.MAX_SAFE_INTEGER) -
+						(b.order ?? Number.MAX_SAFE_INTEGER),
+				);
+				return sections.length ? { ...c.meta, sections } : c.meta;
 			});
 		},
 

package/src/runtime/index.ts

@@ -15,10 +15,12 @@ export { createDocsApp, mountDocsApp } from "./app";
 // Components (for custom pages/layouts)
 export { AccentPicker } from "./components/AccentPicker";
 export { ApiPlayground } from "./components/ApiPlayground";
+export { ApiReference } from "./components/ApiReference";
 export { AskAiDialog } from "./components/AskAiDialog";
 export { BackToTop } from "./components/BackToTop";
 export { Breadcrumbs } from "./components/Breadcrumbs";
 export { CollectionDropdown } from "./components/CollectionDropdown";
+export { ContextMenu, type ContextMenuItem } from "./components/ContextMenu";
 export { DocMarkdown } from "./components/DocMarkdown";
 export { DocPrevNext } from "./components/DocPrevNext";
 export { DocsDropdown } from "./components/DocsDropdown";
@@ -63,6 +65,7 @@ export type {
 	MarkdownConfig,
 	PluginInfo,
 	ShowcaseInfo,
+	TranslateConfig,
 	VersionsConfig,
 } from "./config";
 export type { DirMeta, StaticSourceOptions } from "./content";
@@ -114,7 +117,10 @@ export { HomePage } from "./pages/HomePage";
 export { IssuesPage } from "./pages/IssuesPage";
 export { OAuthCallbackPage } from "./pages/OAuthCallbackPage";
 export { PluginsPage } from "./pages/PluginsPage";
+export { SearchPage } from "./pages/SearchPage";
 export { ShowcasePage } from "./pages/ShowcasePage";
+export { TranslatePage } from "./pages/TranslatePage";
+export { officialPlugins } from "./plugins-catalog";
 export { setupPwa } from "./pwa";
 export { createDocsRouter } from "./router";
 export type { SeoInput } from "./seo";

package/src/runtime/pages/ApiEndpointPage.tsx

@@ -1,10 +1,10 @@
 import { useParams } from "@tanstack/solid-router";
-import { createMemo, Show } from "solid-js";
+import { createMemo, createSignal, Show } from "solid-js";
 import { ApiPlayground } from "../components/ApiPlayground";
-import { DocMarkdown } from "../components/DocMarkdown";
+import { ApiReference } from "../components/ApiReference";
 import { DocPrevNext } from "../components/DocPrevNext";
 import { findApiCollection, useDocs } from "../context";
-import type { ApiEndpoint, DocEntry } from "../types";
+import type { DocEntry } from "../types";
 
 const METHOD_BADGE: Record<string, string> = {
 	GET: "bg-accent/15 text-accent border-accent/30",
@@ -21,123 +21,25 @@ const STYLE_ICON: Record<string, string> = {
 	rpc: "i-mdi:api",
 };
 
-function endpointMarkdown(ep: ApiEndpoint, style: string): string {
-	const lines: string[] = [];
-
-	if (style === "cli") {
-		if (ep.description) lines.push(ep.description, "");
-		const cmd = ep.cli
-			? [
-					ep.cli.command,
-					ep.cli.subcommand,
-					...(ep.cli.args?.map((a) =>
-						a.required ? `<${a.name}>` : `[${a.name}]`,
-					) ?? []),
-				].join(" ")
-			: `${ep.method} ${ep.path}`;
-		lines.push("## Usage", "", "```bash", cmd, "```", "");
-		if (ep.cli?.args?.length) {
-			lines.push(
-				"## Arguments",
-				"",
-				"| Name | Required | Description |",
-				"| --- | --- | --- |",
-			);
-			for (const a of ep.cli.args) {
-				lines.push(
-					`| \`${a.name}\` | ${a.required ? "yes" : "no"} | ${a.description ?? ""} |`,
-				);
-			}
-			lines.push("");
-		}
-		if (ep.requestBody?.example != null) {
-			lines.push("## Options", "");
-			lines.push(
-				"```json",
-				JSON.stringify(ep.requestBody.example, null, 2),
-				"```",
-				"",
-			);
-		}
-	} else if (style === "graphql") {
-		if (ep.description) lines.push(ep.description, "");
-		if (ep.graphql?.query) {
-			lines.push("## Query", "", "```graphql", ep.graphql.query, "```", "");
-		}
-		if (ep.graphql?.variables != null) {
-			lines.push("## Variables", "");
-			lines.push(
-				"```json",
-				JSON.stringify(ep.graphql.variables, null, 2),
-				"```",
-				"",
-			);
-		}
-	} else {
-		if (ep.description) lines.push(ep.description, "");
-		if (ep.parameters.length > 0) {
-			lines.push(
-				"## Parameters",
-				"",
-				"| Name | In | Required | Description |",
-				"| --- | --- | --- | --- |",
-			);
-			for (const p of ep.parameters) {
-				lines.push(
-					`| \`${p.name}\` | ${p.in} | ${p.required ? "yes" : "no"} | ${p.description ?? ""} |`,
-				);
-			}
-			lines.push("");
-		}
-		if (ep.requestBody) {
-			lines.push("## Request Body", "");
-			if (ep.requestBody.description)
-				lines.push(ep.requestBody.description, "");
-			if (ep.requestBody.example != null) {
-				lines.push(
-					"```json",
-					JSON.stringify(ep.requestBody.example, null, 2),
-					"```",
-					"",
-				);
-			}
-		}
-	}
-
-	const codes = Object.keys(ep.responses);
-	if (codes.length > 0) {
-		lines.push(style === "cli" ? "## Exit codes" : "## Responses", "");
-		for (const code of codes) {
-			const r = ep.responses[code]!;
-			lines.push(`### ${code} — ${r.description}`);
-			if (r.example != null) {
-				lines.push(
-					"",
-					"```json",
-					JSON.stringify(r.example, null, 2),
-					"```",
-					"",
-				);
-			}
-		}
-	}
-	return lines.join("\n");
-}
-
-function endpointHeader(ep: ApiEndpoint, style: string) {
-	if (style === "cli") {
-		const cmd = ep.cli
-			? [ep.cli.command, ep.cli.subcommand].filter(Boolean).join(" ")
-			: `${ep.method} ${ep.path}`;
-		return { label: cmd, icon: "i-mdi:console-line" };
-	}
-	if (style === "graphql") {
-		return {
-			label: ep.graphql?.operation ?? ep.summary ?? "GraphQL",
-			icon: "i-mdi:graphql",
-		};
-	}
-	return { label: `${ep.method} ${ep.path}`, icon: "" };
+function CopyInline(props: { text: () => string }) {
+	const [copied, setCopied] = createSignal(false);
+	return (
+		<button
+			type="button"
+			aria-label="Copy"
+			onClick={() => {
+				navigator.clipboard.writeText(props.text()).catch(() => {});
+				setCopied(true);
+				setTimeout(() => setCopied(false), 1500);
+			}}
+			class="w-7 h-7 inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer"
+		>
+			<span
+				class={copied() ? "i-mdi:check text-success" : "i-mdi:content-copy"}
+				aria-hidden="true"
+			/>
+		</button>
+	);
 }
 
 export function ApiEndpointPage() {
@@ -165,10 +67,15 @@ export function ApiEndpointPage() {
 		})),
 	);
 
-	const header = () => {
+	const cliLabel = () => {
 		const ep = endpoint();
-		if (!ep) return { label: "", icon: "" };
-		return endpointHeader(ep, style());
+		if (!ep) return "";
+		if (style() === "cli") {
+			return ep.cli
+				? [ep.cli.command, ep.cli.subcommand].filter(Boolean).join(" ")
+				: `${ep.method} ${ep.path}`;
+		}
+		return ep.graphql?.operation ?? ep.summary ?? "GraphQL";
 	};
 
 	return (
@@ -180,50 +87,56 @@ export function ApiEndpointPage() {
 				>
 					{(ep) => (
 						<>
-							<div class="flex flex-wrap items-center gap-2 pb-4 mb-4 border-b border-border">
+							<Show when={ep().tag}>
+								<div class="text-[11px] uppercase tracking-wide text-muted mb-2">
+									{ep().tag}
+								</div>
+							</Show>
+							<Show when={ep().summary}>
+								<h1 class="text-2xl font-bold text-foreground mt-0 mb-3">
+									{ep().summary}
+								</h1>
+							</Show>
+
+							<div class="flex flex-wrap items-center gap-2 p-3 mb-6 rounded-xl border border-border bg-surface/50">
 								<Show when={style() === "rest" || style() === "rpc"}>
 									<span
 										class={`inline-flex items-center px-2.5 py-1 rounded-md border text-xs font-bold ${METHOD_BADGE[ep().method] ?? ""}`}
 									>
 										{ep().method}
 									</span>
-									<code class="text-sm font-mono text-foreground">
+									<code class="text-sm font-mono text-foreground break-all">
+										{ep().server ? `${ep().server}` : ""}
 										{ep().path}
 									</code>
+									<CopyInline text={() => `${ep().server ?? ""}${ep().path}`} />
 								</Show>
 
 								<Show when={style() === "graphql" || style() === "cli"}>
-									<span class="inline-flex items-center gap-1.5 text-sm font-mono text-foreground">
+									<span class="inline-flex items-center gap-1.5 text-sm font-mono text-foreground min-w-0">
 										<span
-											class={`${header().icon} text-primary`}
+											class={`${style() === "cli" ? "i-mdi:console-line" : "i-mdi:graphql"} text-primary shrink-0`}
 											aria-hidden="true"
 										/>
-										{header().label}
+										<span class="truncate">{cliLabel()}</span>
 									</span>
+									<CopyInline text={cliLabel} />
 								</Show>
 
-								<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-border bg-surface text-[10px] uppercase tracking-wide font-semibold text-muted">
+								<span class="ml-auto inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-border bg-background text-[10px] uppercase tracking-wide font-semibold text-muted shrink-0">
 									<span
 										class={`${STYLE_ICON[style()] ?? "i-mdi:api"} text-xs`}
 										aria-hidden="true"
 									/>
 									{style()}
 								</span>
-
-								<Show when={ep().tag}>
-									<span class="ml-auto text-[11px] uppercase tracking-wide text-muted">
-										{ep().tag}
-									</span>
-								</Show>
 							</div>
 
-							<Show when={ep().summary}>
-								<h1 class="text-2xl font-bold text-foreground mt-0 mb-4">
-									{ep().summary}
-								</h1>
-							</Show>
+							<ApiReference endpoint={ep()} style={style()} />
 
-							<DocMarkdown source={endpointMarkdown(ep(), style())} />
+							<div class="lg:hidden">
+								<ApiPlayground endpoint={ep()} style={style()} />
+							</div>
 						</>
 					)}
 				</Show>

package/src/runtime/pages/DocPage.tsx

@@ -1,4 +1,4 @@
-import { useParams } from "@tanstack/solid-router";
+import { Link, useParams } from "@tanstack/solid-router";
 import { dump as dumpYaml } from "js-yaml";
 import { createResource, createSignal, Show } from "solid-js";
 import { AskAiDialog } from "../components/AskAiDialog";
@@ -108,6 +108,15 @@ export function DocPage() {
 									<span class="i-mdi:robot-happy-outline" aria-hidden="true" />
 									Ask AI
 								</button>
+								<Show when={config.features?.translate || config.translate}>
+									<Link
+										to="/translate"
+										class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+									>
+										<span class="i-mdi:translate" aria-hidden="true" />
+										Translate
+									</Link>
+								</Show>
 								<Show when={showFrontmatterToggle()}>
 									<button
 										type="button"

package/src/runtime/pages/PluginsPage.tsx

@@ -93,23 +93,32 @@ export function PluginsPage() {
 		const list = plugins() ?? [];
 		const groups = new Map<string, typeof list>();
 		for (const p of list) {
-			const cat = p.name.startsWith("@")
-				? "Packages"
-				: p.name.includes("adapter")
-					? "Adapters"
-					: p.name.startsWith("MCP") ||
-							p.name.includes("LLM") ||
-							p.name.includes("OAuth") ||
-							p.name.includes("PWA") ||
-							p.name.includes("SEO") ||
-							p.name.includes("Search")
-						? "Integrations"
-						: "Core";
+			const cat =
+				p.category ??
+				(p.name.startsWith("@")
+					? "Packages"
+					: p.name.includes("adapter")
+						? "Adapters"
+						: p.name.startsWith("MCP") ||
+								p.name.includes("LLM") ||
+								p.name.includes("OAuth") ||
+								p.name.includes("PWA") ||
+								p.name.includes("SEO") ||
+								p.name.includes("Search")
+							? "Integrations"
+							: "Core");
 			const g = groups.get(cat) ?? [];
 			g.push(p);
 			groups.set(cat, g);
 		}
-		const order = ["Core", "Integrations", "Adapters", "Packages"];
+		const order = [
+			"Core",
+			"Adapters",
+			"AI",
+			"Integrations",
+			"Content",
+			"Packages",
+		];
 		return [...groups.entries()].sort(([a], [b]) => {
 			const ia = order.indexOf(a);
 			const ib = order.indexOf(b);
@@ -120,6 +129,15 @@ export function PluginsPage() {
 		});
 	};
 
+	const statusBadge = (status?: string) => {
+		if (!status || status === "built-in")
+			return "bg-success/10 text-success border-success/30";
+		if (status === "beta")
+			return "bg-warning/10 text-warning border-warning/30";
+		if (status === "planned") return "bg-surface text-muted border-border";
+		return "bg-primary/10 text-primary border-primary/30";
+	};
+
 	return (
 		<div class="max-w-5xl mx-auto px-6 py-10 pb-24">
 			<div class="flex items-start gap-3 mb-2">
@@ -203,6 +221,13 @@ export function PluginsPage() {
 													</span>
 												</Show>
 											</div>
+											<Show when={p.status}>
+												<span
+													class={`text-[10px] px-1.5 py-0.5 rounded border shrink-0 ${statusBadge(p.status)}`}
+												>
+													{p.status}
+												</span>
+											</Show>
 											<Show when={p.url}>
 												<a
 													href={p.url}