@wrikka/create-docs 0.1.0

package/src/runtime/pages/CreatePage.tsx

@@ -0,0 +1,448 @@
+import { createSignal, For, onMount, Show } from "solid-js";
+import {
+	clearGitHubToken,
+	GitHubAuthButton,
+	getGitHubToken,
+} from "../components/GitHubAuth";
+
+interface Template {
+	id: string;
+	name: string;
+	description: string;
+	icon: string;
+	tags: string[];
+}
+
+const templates: Template[] = [
+	{
+		id: "docs",
+		name: "Documentation site",
+		description: "VitePress-style docs, changelog, and API references.",
+		icon: "i-mdi:book-open-page-variant",
+		tags: ["Markdown", "API", "Search"],
+	},
+	{
+		id: "api",
+		name: "API reference",
+		description: "Scalar-like API playground with OpenAPI / oRPC / Elysia.",
+		icon: "i-mdi:api",
+		tags: ["OpenAPI", "oRPC", "Playground"],
+	},
+	{
+		id: "showcase",
+		name: "Showcase",
+		description: "A grid of project or product cards with previews.",
+		icon: "i-mdi:view-dashboard",
+		tags: ["Cards", "Portfolio"],
+	},
+];
+
+export function CreatePage() {
+	const [step, setStep] = createSignal<
+		"template" | "github" | "deploy" | "done"
+	>("template");
+	const [selected, setSelected] = createSignal<string>("docs");
+	const [repo, setRepo] = createSignal("");
+	const [repoUrl, setRepoUrl] = createSignal("");
+	const [token, setToken] = createSignal(getGitHubToken() ?? "");
+	const [showManual, setShowManual] = createSignal(!getGitHubToken());
+	const [cfToken, setCfToken] = createSignal("");
+	const [cfAccountId, setCfAccountId] = createSignal("");
+	const [deployUrl, setDeployUrl] = createSignal("");
+	const [loading, setLoading] = createSignal(false);
+	const [error, setError] = createSignal("");
+
+	onMount(() => {
+		const t = getGitHubToken();
+		if (t) setToken(t);
+	});
+
+	const pick = (id: string) => {
+		setSelected(id);
+		setStep("github");
+	};
+
+	const onAuth = (t: string) => {
+		setToken(t);
+		setShowManual(false);
+	};
+
+	const createRepo = async () => {
+		if (!repo() || !token()) {
+			setError("Please enter a repository name and authorize with GitHub.");
+			return;
+		}
+		setLoading(true);
+		setError("");
+		try {
+			const res = await fetch("/api/github/user/repos", {
+				method: "POST",
+				headers: {
+					Authorization: `Bearer ${token()}`,
+					Accept: "application/vnd.github+json",
+					"X-GitHub-Api-Version": "2022-11-28",
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					name: repo(),
+					private: false,
+					auto_init: true,
+				}),
+			});
+			const data = (await res.json().catch(() => ({}))) as {
+				html_url?: string;
+				message?: string;
+			};
+			if (!res.ok) {
+				throw new Error(data.message ?? `GitHub error ${res.status}`);
+			}
+			if (data.html_url) setRepoUrl(data.html_url);
+			setStep("deploy");
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Failed to create repository.");
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const deploy = async () => {
+		if (!cfToken() || !cfAccountId()) {
+			setError("Please enter a Cloudflare API token and account ID.");
+			return;
+		}
+		setLoading(true);
+		setError("");
+		try {
+			const repoInfo = parseRepoUrl(repoUrl());
+			const res = await fetch("/api/deploy", {
+				method: "POST",
+				headers: {
+					Authorization: `Bearer ${cfToken()}`,
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					accountId: cfAccountId(),
+					projectName: repo() || "my-docs",
+					owner: repoInfo?.owner,
+					repo: repoInfo?.repo,
+					productionBranch: "main",
+				}),
+			});
+			const data = (await res.json().catch(() => ({}))) as {
+				ok?: boolean;
+				url?: string;
+				error?: string;
+			};
+			if (!res.ok || data.error) {
+				throw new Error(data.error ?? `Deploy failed (${res.status})`);
+			}
+			if (data.url) setDeployUrl(data.url);
+			setStep("done");
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Deploy failed.");
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<div class="max-w-3xl mx-auto px-6 py-10">
+			<h1 class="text-3xl md:text-4xl font-bold text-center mb-2">
+				Create your docs site
+			</h1>
+			<p class="text-muted text-center mb-10 max-w-xl mx-auto">
+				Pick a template, connect GitHub, and deploy to Cloudflare in one flow.
+			</p>
+
+			<div class="flex items-center justify-center gap-2 mb-8">
+				<For each={["template", "github", "deploy"] as const}>
+					{(s, i) => (
+						<div class="flex items-center gap-2">
+							<div
+								class={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium ${
+									step() === s
+										? "bg-primary text-primary-foreground"
+										: stepOrder(step()) > stepOrder(s)
+											? "bg-surface text-foreground border border-border"
+											: "bg-background text-muted border border-border"
+								}`}
+							>
+								{i() + 1}
+							</div>
+							<Show when={i() < 2}>
+								<div class="w-8 h-px bg-border" />
+							</Show>
+						</div>
+					)}
+				</For>
+			</div>
+
+			<Show when={step() === "template"}>
+				<div class="grid sm:grid-cols-3 gap-4 mb-6">
+					<For each={templates}>
+						{(t) => (
+							<button
+								type="button"
+								onClick={() => pick(t.id)}
+								class={`text-left p-5 rounded-xl border transition-all no-underline group ${
+									selected() === t.id
+										? "border-primary bg-primary/5"
+										: "border-border bg-surface hover:border-focus"
+								}`}
+							>
+								<span
+									class={`${t.icon} text-3xl mb-3 block text-primary`}
+									aria-hidden="true"
+								/>
+								<h2 class="font-semibold mb-1">{t.name}</h2>
+								<p class="text-sm text-muted mb-3 leading-relaxed">
+									{t.description}
+								</p>
+								<div class="flex flex-wrap gap-1">
+									<For each={t.tags}>
+										{(tag) => (
+											<span class="text-[10px] px-1.5 py-0.5 rounded bg-background border border-border text-muted">
+												{tag}
+											</span>
+										)}
+									</For>
+								</div>
+							</button>
+						)}
+					</For>
+				</div>
+				<p class="text-xs text-center text-muted">
+					The template only sets the initial files — you can customize
+					everything after creation.
+				</p>
+			</Show>
+
+			<Show when={step() === "github"}>
+				<form
+					class="border border-border rounded-xl p-6 bg-surface mb-4"
+					onSubmit={(e) => {
+						e.preventDefault();
+						createRepo();
+					}}
+				>
+					<h2 class="font-semibold mb-4 flex items-center gap-2">
+						<span class="i-mdi:github" aria-hidden="true" />
+						Connect GitHub
+					</h2>
+					<label for="repo-name" class="block text-sm text-muted mb-1">
+						Repository name
+					</label>
+					<input
+						id="repo-name"
+						type="text"
+						value={repo()}
+						onInput={(e) => setRepo(e.currentTarget.value)}
+						placeholder="my-docs"
+						class="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground mb-4 outline-none focus:border-focus"
+					/>
+					<div class="mb-4">
+						<Show
+							when={!showManual()}
+							fallback={
+								<div class="space-y-2">
+									<label
+										for="github-token"
+										class="block text-sm text-muted mb-1"
+									>
+										GitHub personal access token
+									</label>
+									<input
+										id="github-token"
+										type="password"
+										value={token()}
+										onInput={(e) => setToken(e.currentTarget.value)}
+										placeholder="ghp_..."
+										class="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground outline-none focus:border-focus"
+									/>
+								</div>
+							}
+						>
+							<div class="flex items-center justify-between">
+								<GitHubAuthButton
+									onToken={onAuth}
+									label={
+										token()
+											? "Re-authorize with GitHub"
+											: "Authorize with GitHub"
+									}
+								/>
+								<Show when={token()}>
+									<div class="flex items-center gap-2 text-sm text-muted">
+										<span
+											class="i-mdi:check-circle text-primary"
+											aria-hidden="true"
+										/>
+										<span>Authorized</span>
+										<button
+											type="button"
+											onClick={() => {
+												clearGitHubToken();
+												setToken("");
+												setShowManual(true);
+											}}
+											class="text-xs text-destructive hover:underline"
+										>
+											Clear
+										</button>
+									</div>
+								</Show>
+							</div>
+						</Show>
+						<div class="mt-2">
+							<button
+								type="button"
+								onClick={() => setShowManual(!showManual())}
+								class="text-xs text-muted hover:text-foreground underline"
+							>
+								{showManual()
+									? "Use GitHub OAuth instead"
+									: "Use personal access token instead"}
+							</button>
+						</div>
+					</div>
+					<Show when={error()}>
+						<p class="text-sm text-destructive mb-3">{error()}</p>
+					</Show>
+					<div class="flex gap-2">
+						<button
+							type="button"
+							onClick={() => setStep("template")}
+							class="px-4 h-10 rounded-md border border-border text-foreground hover:bg-background transition-colors"
+						>
+							Back
+						</button>
+						<button
+							type="submit"
+							disabled={loading()}
+							class="px-4 h-10 rounded-md bg-primary text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-60"
+						>
+							{loading() ? "Creating…" : "Create repository"}
+						</button>
+					</div>
+				</form>
+			</Show>
+
+			<Show when={step() === "deploy"}>
+				<form
+					class="border border-border rounded-xl p-6 bg-surface mb-4"
+					onSubmit={(e) => {
+						e.preventDefault();
+						deploy();
+					}}
+				>
+					<h2 class="font-semibold mb-4 flex items-center gap-2">
+						<span class="i-mdi:cloud" aria-hidden="true" />
+						Deploy to Cloudflare
+					</h2>
+					<p class="text-sm text-muted mb-4">
+						Enter your Cloudflare credentials to create a Pages project for the
+						new docs site.
+						<span class="block mt-1 text-xs">
+							The token needs the "Cloudflare Pages: Edit" permission. Find your
+							account ID on the Cloudflare dashboard sidebar.
+						</span>
+					</p>
+					<label for="cf-token" class="block text-sm text-muted mb-1">
+						Cloudflare API token
+					</label>
+					<input
+						id="cf-token"
+						type="password"
+						value={cfToken()}
+						onInput={(e) => setCfToken(e.currentTarget.value)}
+						placeholder="..."
+						class="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground mb-4 outline-none focus:border-focus"
+					/>
+					<label for="cf-account" class="block text-sm text-muted mb-1">
+						Cloudflare account ID
+					</label>
+					<input
+						id="cf-account"
+						type="text"
+						value={cfAccountId()}
+						onInput={(e) => setCfAccountId(e.currentTarget.value)}
+						placeholder="a1b2c3d4..."
+						class="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground mb-4 outline-none focus:border-focus"
+					/>
+					<Show when={error()}>
+						<p class="text-sm text-destructive mb-3">{error()}</p>
+					</Show>
+					<div class="flex gap-2">
+						<button
+							type="button"
+							onClick={() => setStep("github")}
+							class="px-4 h-10 rounded-md border border-border text-foreground hover:bg-background transition-colors"
+						>
+							Back
+						</button>
+						<button
+							type="submit"
+							disabled={loading()}
+							class="px-4 h-10 rounded-md bg-primary text-primary-foreground hover:bg-primary-hover transition-colors disabled:opacity-60"
+						>
+							{loading() ? "Deploying…" : "Deploy to Cloudflare"}
+						</button>
+					</div>
+				</form>
+			</Show>
+
+			<Show when={step() === "done"}>
+				<div class="text-center border border-border rounded-xl p-8 bg-surface">
+					<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+						<span
+							class="i-mdi:check text-3xl text-primary"
+							aria-hidden="true"
+						/>
+					</div>
+					<h2 class="text-xl font-semibold mb-2">You're ready to ship!</h2>
+					<p class="text-sm text-muted mb-6">
+						Repository <code class="font-mono">{repo()}</code> created
+						<Show when={deployUrl()}>
+							{" "}
+							and a Cloudflare Pages project is connected — the first deployment
+							runs on the next push to <code class="font-mono">main</code>.
+						</Show>
+						.
+					</p>
+					<div class="flex items-center justify-center gap-3 flex-wrap">
+						<a
+							href={repoUrl() || `https://github.com/${repo()}`}
+							target="_blank"
+							rel="noreferrer"
+							class="inline-flex items-center gap-2 px-5 h-11 rounded-md bg-primary text-primary-foreground no-underline font-medium hover:bg-primary-hover transition-colors"
+						>
+							<span class="i-mdi:github" aria-hidden="true" />
+							Open repository
+						</a>
+						<Show when={deployUrl()}>
+							<a
+								href={deployUrl()}
+								target="_blank"
+								rel="noreferrer"
+								class="inline-flex items-center gap-2 px-5 h-11 rounded-md border border-border text-foreground no-underline font-medium hover:bg-background transition-colors"
+							>
+								<span class="i-mdi:cloud" aria-hidden="true" />
+								Open site
+							</a>
+						</Show>
+					</div>
+				</div>
+			</Show>
+		</div>
+	);
+}
+
+function stepOrder(s: "template" | "github" | "deploy" | "done") {
+	return { template: 0, github: 1, deploy: 2, done: 3 }[s];
+}
+
+function parseRepoUrl(url: string) {
+	const match = url.match(/github\.com[:/]([^/]+)\/([^/]+)/);
+	if (!match) return null;
+	return { owner: match[1], repo: match[2].replace(/\.git$/, "") };
+}

package/src/runtime/pages/DocPage.tsx

@@ -0,0 +1,193 @@
+import { useParams } from "@tanstack/solid-router";
+import { dump as dumpYaml } from "js-yaml";
+import { createResource, createSignal, Show } from "solid-js";
+import { AskAiDialog } from "../components/AskAiDialog";
+import { Breadcrumbs } from "../components/Breadcrumbs";
+import { DocMarkdown } from "../components/DocMarkdown";
+import { DocPrevNext } from "../components/DocPrevNext";
+import { DocToc } from "../components/DocToc";
+import { PageActions } from "../components/PageActions";
+import { RelatedDocs } from "../components/RelatedDocs";
+import { SkeletonPage } from "../components/Skeleton";
+import { useDocs } from "../context";
+import { createDocsList } from "../data";
+
+function formatLastUpdated(iso?: string) {
+	if (!iso) return "";
+	try {
+		return new Date(iso).toLocaleDateString(undefined, {
+			year: "numeric",
+			month: "short",
+			day: "numeric",
+		});
+	} catch {
+		return "";
+	}
+}
+
+function formatFrontmatter(value: unknown) {
+	try {
+		return dumpYaml(value, { indent: 2 } as import("js-yaml").DumpOptions);
+	} catch {
+		return JSON.stringify(value, null, 2);
+	}
+}
+
+export function DocPage() {
+	const params = useParams({ strict: false });
+	const collection = () => params().collection ?? "";
+	const docId = () => params().docId ?? "";
+	const [askOpen, setAskOpen] = createSignal(false);
+	const [fmOpen, setFmOpen] = createSignal(false);
+	const config = useDocs();
+	const dataSource = useDocs().dataSource;
+	const showBreadcrumbs = () => config.features?.breadcrumbs !== false;
+	const showLastUpdated = () => config.features?.lastUpdated !== false;
+
+	const [docs] = createDocsList(collection);
+	const meta = () => (docs() ?? []).find((d) => d.id === docId());
+
+	const [doc] = createResource(
+		() => ({ collection: collection(), id: docId() }),
+		async ({ collection, id }) => {
+			if (!collection || !id)
+				return {
+					id: "",
+					label: "",
+					content: "",
+					frontmatter: {},
+				};
+			return dataSource.get(collection, id);
+		},
+	);
+
+	const frontmatter = () => doc()?.frontmatter;
+	const showFrontmatterToggle = () =>
+		config.features?.frontmatterToggle !== false &&
+		frontmatter() &&
+		Object.keys(frontmatter()!).length > 0;
+
+	const pageLayout = () => frontmatter()?.layout ?? "doc";
+	const showToc = () =>
+		pageLayout() === "doc" &&
+		frontmatter()?.toc !== false &&
+		config.features?.toc !== false;
+	const showAside = () =>
+		pageLayout() === "doc" &&
+		frontmatter()?.aside !== false &&
+		config.features?.aside !== false;
+	const showEditLink = () =>
+		frontmatter()?.editLink !== false && config.features?.editLink !== false;
+
+	return (
+		<div class="flex gap-8 max-w-6xl mx-auto px-6 py-8">
+			<article class="flex-1 min-w-0">
+				<Show when={meta()}>
+					{(m) => (
+						<>
+							<Show when={showBreadcrumbs() && pageLayout() === "doc"}>
+								<Breadcrumbs
+									collection={collection()}
+									category={m().category}
+									label={m().label}
+								/>
+							</Show>
+							<div class="flex items-center gap-2 pb-4 mb-2 border-b border-border flex-wrap">
+								<Show when={showEditLink()}>
+									<PageActions
+										collection={collection()}
+										doc={m()}
+										source={doc()?.content ?? ""}
+									/>
+								</Show>
+								<button
+									type="button"
+									onClick={() => setAskOpen(true)}
+									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 cursor-pointer bg-transparent"
+								>
+									<span class="i-mdi:robot-happy-outline" aria-hidden="true" />
+									Ask AI
+								</button>
+								<Show when={showFrontmatterToggle()}>
+									<button
+										type="button"
+										onClick={() => setFmOpen(!fmOpen())}
+										class={`inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border text-xs transition-colors cursor-pointer bg-transparent ${
+											fmOpen()
+												? "border-primary text-primary bg-primary/10"
+												: "border-border text-muted hover:text-foreground hover:bg-surface"
+										}`}
+									>
+										<span
+											class={fmOpen() ? "i-mdi:eye-off" : "i-mdi:eye"}
+											aria-hidden="true"
+										/>
+										{fmOpen() ? "Hide frontmatter" : "Show frontmatter"}
+									</button>
+								</Show>
+								<span class="ml-auto inline-flex items-center gap-1.5 text-xs text-muted min-w-0">
+									<span class="i-mdi:folder-open-outline" aria-hidden="true" />
+									<code class="font-mono truncate">{m().path}</code>
+								</span>
+							</div>
+							<Show when={showLastUpdated() && m().lastUpdated}>
+								<div class="text-xs text-muted pb-4">
+									Last updated: {formatLastUpdated(m().lastUpdated)}
+								</div>
+							</Show>
+						</>
+					)}
+				</Show>
+				<Show when={fmOpen() && frontmatter()}>
+					{(f) => (
+						<div class="mb-4 border border-border rounded-lg overflow-hidden bg-surface/50">
+							<div class="flex items-center gap-2 px-3 py-2 text-xs font-medium text-muted border-b border-border bg-surface">
+								<span class="i-mdi:code-json" aria-hidden="true" />
+								Frontmatter
+							</div>
+							<pre class="text-xs text-foreground p-3 m-0 overflow-x-auto whitespace-pre-wrap break-all font-mono">
+								{formatFrontmatter(f())}
+							</pre>
+						</div>
+					)}
+				</Show>
+				<Show
+					when={doc()}
+					fallback={
+						<Show when={doc.error} fallback={<SkeletonPage />}>
+							<p class="text-muted text-sm">Failed to load document.</p>
+						</Show>
+					}
+				>
+					{(d) => <DocMarkdown source={d().content ?? ""} />}
+				</Show>
+				<Show when={pageLayout() === "doc"}>
+					<DocPrevNext
+						collection={collection()}
+						docs={docs() ?? []}
+						currentId={docId()}
+					/>
+					<Show when={meta()}>
+						{(m) => <RelatedDocs currentId={m().id} currentTags={m().tags} />}
+					</Show>
+				</Show>
+			</article>
+			<Show when={showAside()}>
+				<aside class="hidden xl:block w-56 shrink-0">
+					<div class="sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto pr-2">
+						<Show when={showToc() && doc()}>
+							{(d) => <DocToc source={d().content ?? ""} />}
+						</Show>
+					</div>
+				</aside>
+			</Show>
+			<AskAiDialog
+				open={askOpen()}
+				onClose={() => setAskOpen(false)}
+				collection={collection()}
+				docId={docId()}
+				docTitle={meta()?.label ?? docId()}
+			/>
+		</div>
+	);
+}