@wrikka/create-docs 0.1.0

package/src/runtime/pages/AbTestPage.tsx

@@ -0,0 +1,88 @@
+import { useNavigate, useParams, useSearch } from "@tanstack/solid-router";
+import { createResource, createSignal, Show } from "solid-js";
+import { DocMarkdown } from "../components/DocMarkdown";
+import { useDocs } from "../context";
+
+export function AbTestPage() {
+	const params = useParams({ strict: false });
+	const search = useSearch({ strict: false });
+	const navigate = useNavigate();
+	const config = useDocs();
+	const dataSource = config.dataSource;
+	const collection = () => params().collection ?? "docs";
+	const baseId = () => params().docId ?? "index";
+
+	const variant = () =>
+		(search().v as string) ?? (Math.random() > 0.5 ? "a" : "b");
+	const [v, setV] = createSignal(variant());
+
+	const docId = () => `${baseId()}-${v()}`;
+
+	const [doc] = createResource(
+		() => ({ collection: collection(), id: docId() }),
+		async ({ collection, id }) => {
+			try {
+				return await dataSource.get(collection, id);
+			} catch {
+				return {
+					content: `> Variant ${v().toUpperCase()} not found for **${baseId()}**.\n\nCreate \`${baseId()}-a.md\` and \`${baseId()}-b.md\`.`,
+				};
+			}
+		},
+	);
+
+	const [converted, setConverted] = createSignal(false);
+
+	const record = (action: string) => {
+		const key = `ab:${baseId()}:${v()}:${action}`;
+		const count = Number(localStorage.getItem(key) ?? 0) + 1;
+		localStorage.setItem(key, String(count));
+	};
+
+	const switchVariant = () => {
+		const next = v() === "a" ? "b" : "a";
+		setV(next);
+		navigate({
+			to: "/ab/$collection/$docId",
+			params: { collection: collection(), docId: baseId() },
+			search: { v: next },
+		});
+	};
+
+	const convert = () => {
+		setConverted(true);
+		record("convert");
+	};
+
+	return (
+		<div class="max-w-4xl mx-auto px-6 py-8">
+			<div class="flex items-center gap-3 mb-6">
+				<span class="px-2 py-1 text-xs font-medium rounded-full border border-border text-muted">
+					Variant {v().toUpperCase()}
+				</span>
+				<button
+					type="button"
+					onClick={switchVariant}
+					class="inline-flex items-center gap-1.5 px-3 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors bg-transparent"
+				>
+					<span class="i-mdi:swap-horizontal" aria-hidden="true" />
+					Switch variant
+				</button>
+				<button
+					type="button"
+					onClick={convert}
+					class="inline-flex items-center gap-1.5 px-3 h-8 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary-hover transition-colors"
+				>
+					<span class="i-mdi:check" aria-hidden="true" />
+					Convert
+				</button>
+				<Show when={converted()}>
+					<span class="text-xs text-success">Recorded conversion</span>
+				</Show>
+			</div>
+			<Show when={doc()} fallback={<p class="text-muted">Loading variant…</p>}>
+				{(d) => <DocMarkdown source={d().content ?? ""} />}
+			</Show>
+		</div>
+	);
+}

package/src/runtime/pages/AnalyticsPage.tsx

@@ -0,0 +1,90 @@
+import { createMemo, createSignal, For, Show } from "solid-js";
+import { getPageViews, resetPageViews } from "../analytics";
+
+function formatDate(iso: string) {
+	try {
+		return new Date(iso).toLocaleString(undefined, {
+			dateStyle: "medium",
+			timeStyle: "short",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+export function AnalyticsPage() {
+	const [records, setRecords] = createSignal(getPageViews());
+
+	const totalViews = createMemo(() =>
+		records().reduce((sum, r) => sum + r.views, 0),
+	);
+	const sorted = createMemo(() =>
+		[...records()].sort((a, b) => b.views - a.views),
+	);
+	const maxViews = createMemo(() => sorted()[0]?.views ?? 1);
+
+	return (
+		<div class="max-w-3xl mx-auto px-6 py-8">
+			<h1 class="text-3xl font-bold mb-2">Analytics</h1>
+			<p class="text-muted mb-8">Page views tracked locally in this browser</p>
+
+			<div class="grid grid-cols-2 gap-4 mb-8">
+				<div class="border border-border rounded-lg p-4">
+					<div class="text-2xl font-bold">{totalViews()}</div>
+					<div class="text-xs text-muted">Total page views</div>
+				</div>
+				<div class="border border-border rounded-lg p-4">
+					<div class="text-2xl font-bold">{records().length}</div>
+					<div class="text-xs text-muted">Pages visited</div>
+				</div>
+			</div>
+
+			<Show when={records().length === 0}>
+				<p class="text-muted">
+					No page views yet — browse the docs to see stats here.
+				</p>
+			</Show>
+
+			<Show when={records().length > 0}>
+				<div class="space-y-3 mb-8">
+					<For each={sorted()}>
+						{(r) => (
+							<div>
+								<div class="flex items-baseline justify-between gap-3 mb-1">
+									<code class="text-sm truncate">{r.path}</code>
+									<span class="text-xs text-muted shrink-0">
+										{r.views} views · {formatDate(r.lastVisit)}
+									</span>
+								</div>
+								<div
+									class="h-2 rounded-full bg-muted/20 overflow-hidden"
+									role="progressbar"
+									aria-valuenow={r.views}
+									aria-valuemin={0}
+									aria-valuemax={maxViews()}
+								>
+									<div
+										class="h-full bg-primary transition-all"
+										style={{
+											width: `${Math.max((r.views / maxViews()) * 100, 2)}%`,
+										}}
+									/>
+								</div>
+							</div>
+						)}
+					</For>
+				</div>
+				<button
+					type="button"
+					onClick={() => {
+						resetPageViews();
+						setRecords([]);
+					}}
+					class="px-3 h-9 rounded-md border border-border text-sm text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer"
+				>
+					Reset stats
+				</button>
+			</Show>
+		</div>
+	);
+}

package/src/runtime/pages/ApiDiffPage.tsx

@@ -0,0 +1,86 @@
+import { createMemo, For, Show } from "solid-js";
+import { diffApiCollections, type EndpointChange } from "../api-diff";
+import { useDocs } from "../context";
+
+const badgeClass: Record<EndpointChange["type"], string> = {
+	added: "bg-emerald-500/15 text-emerald-500",
+	removed: "bg-red-500/15 text-red-500",
+	changed: "bg-amber-500/15 text-amber-500",
+};
+
+const methodClass: Record<string, string> = {
+	GET: "text-emerald-500",
+	POST: "text-blue-500",
+	PUT: "text-amber-500",
+	DELETE: "text-red-500",
+	PATCH: "text-violet-500",
+};
+
+export function ApiDiffPage() {
+	const config = useDocs();
+
+	const changes = createMemo(() =>
+		diffApiCollections(
+			config.apiDiff?.previous ?? [],
+			config.apiCollections ?? [],
+		),
+	);
+
+	const counts = createMemo(() => ({
+		added: changes().filter((c) => c.type === "added").length,
+		removed: changes().filter((c) => c.type === "removed").length,
+		changed: changes().filter((c) => c.type === "changed").length,
+	}));
+
+	return (
+		<div class="max-w-3xl mx-auto px-6 py-8">
+			<h1 class="text-3xl font-bold mb-2">API Changelog</h1>
+			<p class="text-muted mb-8">
+				Endpoint changes between the previous and current API snapshot
+			</p>
+
+			<div class="flex gap-4 mb-8 text-sm">
+				<span class="text-emerald-500">+{counts().added} added</span>
+				<span class="text-amber-500">~{counts().changed} changed</span>
+				<span class="text-red-500">−{counts().removed} removed</span>
+			</div>
+
+			<Show when={changes().length === 0}>
+				<p class="text-muted">No API changes detected.</p>
+			</Show>
+
+			<div class="space-y-3">
+				<For each={changes()}>
+					{(change) => (
+						<article class="border border-border rounded-lg p-4">
+							<div class="flex items-center gap-2 flex-wrap">
+								<span
+									class={`text-xs font-semibold px-2 py-0.5 rounded-full uppercase ${badgeClass[change.type]}`}
+								>
+									{change.type}
+								</span>
+								<code
+									class={`text-xs font-bold ${methodClass[change.endpoint.method] ?? ""}`}
+								>
+									{change.endpoint.method}
+								</code>
+								<code class="text-sm">{change.endpoint.path}</code>
+								<span class="text-xs text-muted ml-auto">
+									{change.collection}
+								</span>
+							</div>
+							<Show when={change.endpoint.summary}>
+								<p class="text-sm text-muted mt-1">{change.endpoint.summary}</p>
+							</Show>
+							<Show when={change.changes.length > 0}>
+								<ul class="mt-2 text-sm list-disc pl-5 space-y-0.5 text-muted">
+									<For each={change.changes}>{(c) => <li>{c}</li>}</For>
+								</ul>
+							</Show>
+						</article>
+					)}
+				</For>
+			</div>
+		</div>
+	);
+}

package/src/runtime/pages/ApiEndpointPage.tsx

@@ -0,0 +1,248 @@
+import { useParams } from "@tanstack/solid-router";
+import { createMemo, Show } from "solid-js";
+import { ApiPlayground } from "../components/ApiPlayground";
+import { DocMarkdown } from "../components/DocMarkdown";
+import { DocPrevNext } from "../components/DocPrevNext";
+import { findApiCollection, useDocs } from "../context";
+import type { ApiEndpoint, DocEntry } from "../types";
+
+const METHOD_BADGE: Record<string, string> = {
+	GET: "bg-accent/15 text-accent border-accent/30",
+	POST: "bg-success/15 text-success border-success/30",
+	PUT: "bg-warning/15 text-warning border-warning/30",
+	PATCH: "bg-warning/15 text-warning border-warning/30",
+	DELETE: "bg-destructive/15 text-destructive border-destructive/30",
+};
+
+const STYLE_ICON: Record<string, string> = {
+	rest: "i-mdi:earth",
+	graphql: "i-mdi:graphql",
+	cli: "i-mdi:console",
+	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: "" };
+}
+
+export function ApiEndpointPage() {
+	const params = useParams({ strict: false });
+	const collection = () => params().collection ?? "";
+	const docId = () => params().docId ?? "";
+	const config = useDocs();
+
+	const api = createMemo(() => findApiCollection(config, collection()));
+	const style = () => api()?.style ?? "rest";
+	const endpoint = () => api()?.endpoints.find((e) => e.id === docId());
+	const entries = createMemo<DocEntry[]>(() =>
+		(api()?.endpoints ?? []).map((e) => ({
+			id: e.id,
+			label:
+				e.summary ??
+				e.graphql?.operation ??
+				e.cli?.subcommand ??
+				e.cli?.command ??
+				`${e.method} ${e.path}`,
+			category: e.tag ?? style() ?? "Endpoints",
+			description: e.description ?? "",
+			path: e.path,
+			type: "api" as const,
+		})),
+	);
+
+	const header = () => {
+		const ep = endpoint();
+		if (!ep) return { label: "", icon: "" };
+		return endpointHeader(ep, style());
+	};
+
+	return (
+		<div class="flex gap-8 max-w-7xl mx-auto px-6 py-8">
+			<article class="flex-1 min-w-0">
+				<Show
+					when={endpoint()}
+					fallback={<p class="text-muted text-sm">Endpoint not found.</p>}
+				>
+					{(ep) => (
+						<>
+							<div class="flex flex-wrap items-center gap-2 pb-4 mb-4 border-b border-border">
+								<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">
+										{ep().path}
+									</code>
+								</Show>
+
+								<Show when={style() === "graphql" || style() === "cli"}>
+									<span class="inline-flex items-center gap-1.5 text-sm font-mono text-foreground">
+										<span
+											class={`${header().icon} text-primary`}
+											aria-hidden="true"
+										/>
+										{header().label}
+									</span>
+								</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={`${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>
+
+							<DocMarkdown source={endpointMarkdown(ep(), style())} />
+						</>
+					)}
+				</Show>
+				<DocPrevNext
+					collection={collection()}
+					docs={entries()}
+					currentId={docId()}
+				/>
+			</article>
+			<aside class="hidden lg:block w-96 shrink-0">
+				<div class="sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto">
+					<p class="text-[11px] font-semibold uppercase tracking-wide text-muted m-0 mb-2">
+						Try it
+					</p>
+					<Show when={endpoint()}>
+						{(ep) => <ApiPlayground endpoint={ep()} style={style()} />}
+					</Show>
+				</div>
+			</aside>
+		</div>
+	);
+}

package/src/runtime/pages/BuilderPage.tsx

@@ -0,0 +1,150 @@
+import { createSignal, For } from "solid-js";
+import { DocMarkdown } from "../components/DocMarkdown";
+
+type Block = { id: string; label: string; markdown: (title: string) => string };
+
+const blocks: Block[] = [
+	{
+		id: "hero",
+		label: "Hero",
+		markdown: (t) => `---\nlayout: page\n---\n\n# ${t}\n\nA generated page.`,
+	},
+	{
+		id: "features",
+		label: "Feature grid",
+		markdown: () =>
+			`<card-grid>\n<card title="Fast" icon="i-mdi:lightning-bolt">Fast docs</card>\n<card title="Pluggable" icon="i-mdi:puzzle">Pluggable data sources</card>\n</card-grid>`,
+	},
+	{
+		id: "code",
+		label: "Code block",
+		markdown: () => "```ts\nconst app = mountDocsApp();\n```",
+	},
+	{
+		id: "faq",
+		label: "FAQ",
+		markdown: () => `<accordion>\n<item title="Q1?">A1</item>\n</accordion>`,
+	},
+];
+
+export function BuilderPage() {
+	const [title, setTitle] = createSignal("My Page");
+	const [active, setActive] = createSignal<string[]>(["hero", "features"]);
+	const [copyText, setCopyText] = createSignal("");
+
+	const markdown = () => {
+		const parts = [`---\nlayout: page\n---\n\n# ${title()}\n`];
+		for (const id of active()) {
+			const block = blocks.find((b) => b.id === id);
+			if (block) parts.push(block.markdown(title()));
+		}
+		return parts.join("\n\n");
+	};
+
+	const move = (i: number, dir: number) => {
+		const arr = [...active()];
+		const j = i + dir;
+		if (j < 0 || j >= arr.length) return;
+		[arr[i], arr[j]] = [arr[j], arr[i]];
+		setActive(arr);
+	};
+
+	const remove = (i: number) =>
+		setActive(active().filter((_, idx) => idx !== i));
+	const add = (id: string) => setActive([...active(), id]);
+
+	const copy = async () => {
+		await navigator.clipboard.writeText(markdown());
+		setCopyText("Copied!");
+		setTimeout(() => setCopyText(""), 1500);
+	};
+
+	return (
+		<div class="max-w-6xl mx-auto px-6 py-8">
+			<h1 class="text-2xl font-semibold text-foreground mb-6">
+				Visual Page Builder
+			</h1>
+			<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+				<div class="space-y-4">
+					<div class="p-4 rounded-md border border-border bg-surface">
+						<div class="text-sm text-muted mb-1">Page title</div>
+						<input
+							type="text"
+							value={title()}
+							onInput={(e) => setTitle(e.currentTarget.value)}
+							class="w-full px-3 py-2 rounded-md border border-border bg-background text-sm text-foreground outline-none focus:border-focus"
+						/>
+					</div>
+					<div class="p-4 rounded-md border border-border bg-surface">
+						<div class="text-sm font-medium text-foreground mb-2">
+							Add blocks
+						</div>
+						<div class="flex flex-wrap gap-2">
+							<For each={blocks}>
+								{(b) => (
+									<button
+										type="button"
+										onClick={() => add(b.id)}
+										class="px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-background transition-colors"
+									>
+										{b.label}
+									</button>
+								)}
+							</For>
+						</div>
+					</div>
+					<div class="p-4 rounded-md border border-border bg-surface">
+						<div class="text-sm font-medium text-foreground mb-2">Blocks</div>
+						<For each={active()}>
+							{(id, i) => {
+								const label = () =>
+									blocks.find((b) => b.id === id)?.label ?? id;
+								return (
+									<div class="flex items-center gap-2 py-1.5">
+										<span class="text-sm text-foreground flex-1">
+											{label()}
+										</span>
+										<button
+											type="button"
+											onClick={() => move(i(), -1)}
+											class="w-7 h-7 inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-background"
+										>
+											<span class="i-mdi:arrow-up" aria-hidden="true" />
+										</button>
+										<button
+											type="button"
+											onClick={() => move(i(), 1)}
+											class="w-7 h-7 inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-background"
+										>
+											<span class="i-mdi:arrow-down" aria-hidden="true" />
+										</button>
+										<button
+											type="button"
+											onClick={() => remove(i())}
+											class="w-7 h-7 inline-flex items-center justify-center rounded-md border border-border text-destructive hover:bg-background"
+										>
+											<span class="i-mdi:close" aria-hidden="true" />
+										</button>
+									</div>
+								);
+							}}
+						</For>
+						<div class="mt-4 flex gap-2">
+							<button
+								type="button"
+								onClick={copy}
+								class="inline-flex items-center gap-1.5 px-3 h-9 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary-hover transition-colors"
+							>
+								<span class="i-mdi:content-copy" aria-hidden="true" />
+								{copyText() || "Copy markdown"}
+							</button>
+						</div>
+					</div>
+				</div>
+				<div class="lg:col-span-2 rounded-md border border-border bg-surface p-6 min-h-[60vh]">
+					<DocMarkdown source={markdown()} />
+				</div>
+			</div>
+		</div>
+	);
+}