@wrikka/create-docs 0.1.0

package/src/runtime/pages/EditPage.tsx

@@ -0,0 +1,201 @@
+import { useParams } from "@tanstack/solid-router";
+import { dump as dumpYaml } from "js-yaml";
+import { createResource, createSignal, Show } from "solid-js";
+import { DocMarkdown } from "../components/DocMarkdown";
+import { getGitHubToken } from "../components/GitHubAuth";
+import { useDocs } from "../context";
+import { useCollections } from "../data";
+
+function repoInfo(url?: string) {
+	if (!url) return null;
+	const match = url.match(/github\.com[:/]([^/]+)\/([^/]+)/);
+	if (!match) return null;
+	return { owner: match[1], repo: match[2].replace(/\.git$/, "") };
+}
+
+function stringifyFrontmatter(fm: Record<string, unknown>): string {
+	const body = dumpYaml(fm, { lineWidth: -1, noRefs: true }).trimEnd();
+	return `---\n${body}\n---`;
+}
+
+export function EditPage() {
+	const params = useParams({ strict: false });
+	const collection = () => params().collection ?? "";
+	const docId = () => params().docId ?? "";
+	const config = useDocs();
+	const dataSource = config.dataSource;
+	const collections = useCollections();
+	const colMeta = () => collections()?.find((c) => c.id === collection());
+
+	const [doc] = createResource(
+		() => ({ collection: collection(), id: docId() }),
+		async ({ collection, id }) => {
+			if (!collection || !id)
+				return {
+					id: "",
+					label: "",
+					content: "",
+					frontmatter: {},
+				};
+			return dataSource.get(collection, id);
+		},
+	);
+
+	const [source, setSource] = createSignal("");
+	const [message, setMessage] = createSignal("");
+	const [showPreview, setShowPreview] = createSignal(true);
+
+	const fullSource = () => {
+		const d = doc();
+		if (!d) return "";
+		const fm = d.frontmatter;
+		if (!fm || Object.keys(fm).length === 0) return d.content ?? "";
+		return `${stringifyFrontmatter(fm)}\n${d.content ?? ""}`;
+	};
+
+	createResource(
+		() => doc(),
+		(d) => {
+			if (d) setSource(fullSource());
+		},
+	);
+
+	const handleDownload = () => {
+		const blob = new Blob([source()], { type: "text/markdown" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `${docId()}.md`;
+		a.click();
+		URL.revokeObjectURL(url);
+		setMessage("Downloaded .md");
+	};
+
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(source());
+			setMessage("Copied .md to clipboard");
+		} catch {
+			setMessage("Copy failed");
+		}
+	};
+
+	const handleSave = async () => {
+		const repo = config.site.repoUrl ? repoInfo(config.site.repoUrl) : null;
+		if (!repo) {
+			setMessage("GitHub repo not configured");
+			return;
+		}
+		const filePath = doc()?.path;
+		if (!filePath) {
+			setMessage("Document path unknown");
+			return;
+		}
+		try {
+			const userToken = getGitHubToken();
+			const res = await fetch("/api/content/save", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					...(userToken ? { Authorization: `Bearer ${userToken}` } : {}),
+				},
+				body: JSON.stringify({
+					...repo,
+					path: `apps/web/create-docs/${collection()}/${filePath}`,
+					content: source(),
+					message: `docs: update ${collection()}/${docId()} [via create-docs editor]`,
+					branch: config.github?.branch ?? "main",
+					owner: repo.owner,
+					repo: repo.repo,
+				}),
+			});
+			const data = (await res.json()) as { ok?: boolean; error?: string };
+			if (!res.ok) throw new Error(data.error ?? "Save failed");
+			setMessage("Saved to GitHub");
+		} catch (e) {
+			setMessage(e instanceof Error ? e.message : "Save failed");
+		}
+	};
+
+	const canSave = () => !!config.site.repoUrl;
+
+	return (
+		<div class="max-w-6xl mx-auto px-6 py-8">
+			<div class="flex items-center gap-3 mb-6 flex-wrap">
+				<h1 class="text-xl font-semibold text-foreground">
+					Edit: {collection()}/{docId()}
+				</h1>
+				<span class="text-sm text-muted">{colMeta()?.label}</span>
+				<div class="flex-1" />
+				<button
+					type="button"
+					onClick={() => setShowPreview((s) => !s)}
+					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:eye" aria-hidden="true" />
+					{showPreview() ? "Hide preview" : "Show preview"}
+				</button>
+				<button
+					type="button"
+					onClick={handleCopy}
+					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:content-copy" aria-hidden="true" />
+					Copy .md
+				</button>
+				<button
+					type="button"
+					onClick={handleDownload}
+					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:download" aria-hidden="true" />
+					Download .md
+				</button>
+				<Show when={canSave()}>
+					<button
+						type="button"
+						onClick={handleSave}
+						class="inline-flex items-center gap-1.5 px-3 h-8 rounded-md border border-border text-xs text-success hover:text-foreground hover:bg-surface transition-colors bg-transparent"
+					>
+						<span class="i-mdi:github" aria-hidden="true" />
+						Save to GitHub
+					</button>
+				</Show>
+			</div>
+			<Show when={message()}>
+				<div class="mb-4 text-sm text-success">{message()}</div>
+			</Show>
+			<div
+				class={`grid gap-6 ${showPreview() ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1"}`}
+			>
+				<div class="flex flex-col gap-2">
+					<label class="text-xs text-muted uppercase tracking-wider">
+						Markdown source
+						<textarea
+							value={source()}
+							onInput={(e) => setSource(e.currentTarget.value)}
+							class="w-full h-[70vh] p-4 mt-2 rounded-md border border-border bg-surface font-mono text-sm text-foreground resize-none focus:outline-none focus:border-focus"
+							spellcheck={false}
+						/>
+					</label>
+				</div>
+				<Show when={showPreview()}>
+					<div class="flex flex-col gap-2 min-w-0">
+						<div
+							id="edit-preview-label"
+							class="text-xs text-muted uppercase tracking-wider"
+						>
+							Live preview
+						</div>
+						<section
+							aria-labelledby="edit-preview-label"
+							class="flex-1 rounded-md border border-border bg-surface p-4 overflow-auto h-[70vh]"
+						>
+							<DocMarkdown source={source()} />
+						</section>
+					</div>
+				</Show>
+			</div>
+		</div>
+	);
+}

package/src/runtime/pages/HomePage.tsx

@@ -0,0 +1,187 @@
+import { Link } from "@tanstack/solid-router";
+import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { GitHubStats } from "../components/GitHubStats";
+import type { HomeFeature } from "../config";
+import { useDocs } from "../context";
+
+function FeatureCard(props: { f: HomeFeature; class?: string }) {
+	const f = () => props.f;
+	const inner = (
+		<>
+			<Show when={f().icon}>
+				<span class={`${f().icon} text-2xl text-primary`} aria-hidden="true" />
+			</Show>
+			<h2 class="text-base font-semibold text-foreground m-0">{f().title}</h2>
+			<Show when={f().details}>
+				<p class="text-sm text-muted m-0 leading-relaxed">{f().details}</p>
+			</Show>
+		</>
+	);
+	const cls = `flex flex-col gap-2 p-5 rounded-xl border border-border bg-surface no-underline hover:border-focus hover:-translate-y-0.5 hover:shadow-lg transition-all ${props.class ?? ""}`;
+	return f().link ? (
+		<Link to={f().link ?? "/"} class={cls}>
+			{inner}
+		</Link>
+	) : (
+		<div class={cls}>{inner}</div>
+	);
+}
+
+function FeatureSlider(props: { items: HomeFeature[] }) {
+	const [index, setIndex] = createSignal(0);
+	const [paused, setPaused] = createSignal(false);
+	let track: HTMLDivElement | undefined;
+
+	const go = (i: number) => {
+		const n = props.items.length;
+		if (!n) return;
+		const next = ((i % n) + n) % n;
+		setIndex(next);
+		const child = track?.children[next] as HTMLElement | undefined;
+		child?.scrollIntoView({
+			behavior: "smooth",
+			inline: "nearest",
+			block: "nearest",
+		});
+	};
+
+	onMount(() => {
+		const t = setInterval(() => {
+			if (!paused()) go(index() + 1);
+		}, 5000);
+		onCleanup(() => clearInterval(t));
+	});
+
+	return (
+		<section
+			class="max-w-5xl mx-auto px-6 pb-16"
+			aria-label="Feature highlights"
+			onMouseEnter={() => setPaused(true)}
+			onMouseLeave={() => setPaused(false)}
+		>
+			<div class="flex items-center justify-between mb-4">
+				<h2 class="text-lg font-semibold text-foreground m-0">Highlights</h2>
+				<div class="flex items-center gap-1">
+					<button
+						type="button"
+						onClick={() => go(index() - 1)}
+						aria-label="Previous slide"
+						class="w-8 h-8 inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer bg-transparent"
+					>
+						<span class="i-mdi:chevron-left" aria-hidden="true" />
+					</button>
+					<button
+						type="button"
+						onClick={() => go(index() + 1)}
+						aria-label="Next slide"
+						class="w-8 h-8 inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer bg-transparent"
+					>
+						<span class="i-mdi:chevron-right" aria-hidden="true" />
+					</button>
+				</div>
+			</div>
+			<div
+				ref={track}
+				class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-2 [scrollbar-width:thin]"
+			>
+				<For each={props.items}>
+					{(f) => (
+						<div class="snap-start shrink-0 w-72">
+							<FeatureCard f={f} class="h-full" />
+						</div>
+					)}
+				</For>
+			</div>
+			<div class="flex justify-center gap-1.5 mt-3">
+				<For each={props.items}>
+					{(_, i) => (
+						<button
+							type="button"
+							onClick={() => go(i())}
+							aria-label={`Go to slide ${i() + 1}`}
+							class={`h-1.5 rounded-full transition-all cursor-pointer border-none p-0 ${
+								index() === i()
+									? "w-5 bg-primary"
+									: "w-1.5 bg-border hover:bg-muted"
+							}`}
+						/>
+					)}
+				</For>
+			</div>
+		</section>
+	);
+}
+
+/** VitePress-style home layout: hero + actions + feature cards + slider. */
+export function HomePage() {
+	const config = useDocs();
+	const home = () => config.home;
+	const slides = () => home()?.slides ?? home()?.features ?? [];
+
+	return (
+		<div class="flex-1">
+			<Show when={home()?.hero}>
+				{(hero) => (
+					<section class="relative max-w-4xl mx-auto px-6 pt-20 pb-12 text-center overflow-hidden">
+						<div
+							class="absolute inset-0 -z-10 pointer-events-none"
+							aria-hidden="true"
+							style={{
+								background:
+									"radial-gradient(ellipse 60% 50% at 50% 0%, hsl(var(--color-primary) / 0.12), transparent 70%)",
+							}}
+						/>
+						<Show when={hero().badge}>
+							<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-border bg-surface text-xs text-muted mb-4">
+								<span class="i-mdi:sparkles text-primary" aria-hidden="true" />
+								{hero().badge}
+							</span>
+						</Show>
+						<Show when={hero().name}>
+							<p class="text-sm font-semibold tracking-widest uppercase text-primary m-0 mb-3">
+								{hero().name}
+							</p>
+						</Show>
+						<h1 class="text-4xl md:text-5xl font-bold text-foreground m-0 mb-4 leading-tight">
+							{hero().text ?? config.site.title}
+						</h1>
+						<Show when={hero().tagline}>
+							<p class="text-lg text-muted m-0 mb-8 max-w-2xl mx-auto">
+								{hero().tagline}
+							</p>
+						</Show>
+						<Show when={hero().actions?.length}>
+							<div class="flex items-center justify-center gap-3 flex-wrap">
+								<For each={hero().actions}>
+									{(a) => (
+										<Link
+											to={a.link}
+											class={`inline-flex items-center px-5 h-11 rounded-lg text-sm font-medium no-underline transition-colors ${
+												a.theme === "alt"
+													? "border border-border text-foreground hover:bg-surface"
+													: "bg-primary text-primary-foreground hover:bg-primary-hover"
+											}`}
+										>
+											{a.text}
+										</Link>
+									)}
+								</For>
+							</div>
+						</Show>
+						<div class="mt-8 flex justify-center">
+							<GitHubStats />
+						</div>
+					</section>
+				)}
+			</Show>
+			<Show when={slides().length > 0}>
+				<FeatureSlider items={slides()} />
+			</Show>
+			<Show when={home()?.features?.length}>
+				<section class="max-w-5xl mx-auto px-6 pb-20 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+					<For each={home()?.features}>{(f) => <FeatureCard f={f} />}</For>
+				</section>
+			</Show>
+		</div>
+	);
+}

package/src/runtime/pages/IssuesPage.tsx

@@ -0,0 +1,140 @@
+import { createSignal, For, onMount, Show } from "solid-js";
+import { SkeletonPage } from "../components/Skeleton";
+import { useDocs } from "../context";
+import { fetchIssues, GitHubFetchError, type IssueInfo } from "../github";
+
+function formatDate(iso: string) {
+	try {
+		return new Date(iso).toLocaleDateString(undefined, {
+			year: "numeric",
+			month: "short",
+			day: "numeric",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+export function IssuesPage() {
+	const config = useDocs();
+	const [issues, setIssues] = createSignal<IssueInfo[]>([]);
+	const [loading, setLoading] = createSignal(true);
+	const [error, setError] = createSignal<string | null>(null);
+
+	onMount(async () => {
+		const cfg = config.github;
+		if (!cfg?.issues) {
+			setLoading(false);
+			return;
+		}
+		try {
+			setIssues(await fetchIssues(cfg));
+		} catch (err) {
+			if (err instanceof GitHubFetchError) {
+				setError(
+					err.status === 404
+						? "Issues not found. Make sure the repository is public."
+						: `${err.message}: ${err.payload ?? ""}`.slice(0, 200),
+				);
+			} else if (err instanceof Error) {
+				setError(err.message);
+			} else {
+				setError("Could not load issues from GitHub.");
+			}
+		} finally {
+			setLoading(false);
+		}
+	});
+
+	return (
+		<div class="max-w-4xl mx-auto px-6 py-8">
+			<h1 class="text-3xl font-bold mb-2">Issues</h1>
+			<p class="text-muted mb-8">Open issues from GitHub</p>
+
+			<Show when={loading()}>
+				<SkeletonPage />
+			</Show>
+
+			<Show when={!loading() && error()}>
+				<div class="border border-destructive/30 bg-destructive/10 rounded-lg p-5 mb-6">
+					<div class="flex items-center gap-2 mb-1 text-destructive font-medium">
+						<span class="i-mdi:alert-circle" aria-hidden="true" />
+						Failed to load issues
+					</div>
+					<p class="text-sm text-destructive/90 mb-3">{error()}</p>
+					<Show when={config.site.repoUrl}>
+						<a
+							href={`${config.site.repoUrl}/issues`}
+							target="_blank"
+							rel="noreferrer"
+							class="inline-flex items-center gap-1.5 text-sm text-primary hover:underline"
+						>
+							<span class="i-mdi:open-in-new" aria-hidden="true" />
+							View on GitHub
+						</a>
+					</Show>
+				</div>
+			</Show>
+
+			<Show when={!loading() && !error() && issues().length === 0}>
+				<div class="flex flex-col items-center gap-3 py-16 rounded-lg border border-dashed border-border text-muted">
+					<span class="i-mdi:check-circle text-4xl" aria-hidden="true" />
+					<p class="m-0">No open issues.</p>
+				</div>
+			</Show>
+
+			<div class="space-y-3">
+				<For each={issues()}>
+					{(issue) => (
+						<article class="border border-border rounded-lg p-4 bg-surface/30 hover:border-focus transition-colors">
+							<div class="flex items-start gap-3">
+								<span
+									class="i-mdi:alert-circle-outline text-lg text-primary mt-0.5"
+									aria-hidden="true"
+								/>
+								<div class="flex-1 min-w-0">
+									<div class="flex items-center gap-2 mb-1">
+										<span class="text-xs text-muted font-mono">
+											#{issue.number}
+										</span>
+										<a
+											href={issue.html_url}
+											target="_blank"
+											rel="noreferrer"
+											class="font-medium hover:text-primary transition-colors truncate"
+										>
+											{issue.title}
+										</a>
+									</div>
+									<div class="flex flex-wrap items-center gap-2 text-xs text-muted mb-2">
+										<span>opened {formatDate(issue.created_at)}</span>
+										<span>·</span>
+										<span>{issue.comments} comments</span>
+									</div>
+									<Show when={issue.labels.length}>
+										<div class="flex flex-wrap gap-1.5">
+											<For each={issue.labels}>
+												{(label) => (
+													<span
+														class="text-[10px] px-2 py-0.5 rounded-full border border-border"
+														style={{
+															"background-color": `#${label.color}20`,
+															color: `#${label.color}`,
+															"border-color": `#${label.color}40`,
+														}}
+													>
+														{label.name}
+													</span>
+												)}
+											</For>
+										</div>
+									</Show>
+								</div>
+							</div>
+						</article>
+					)}
+				</For>
+			</div>
+		</div>
+	);
+}

package/src/runtime/pages/OAuthCallbackPage.tsx

@@ -0,0 +1,80 @@
+import { useNavigate } from "@tanstack/solid-router";
+import { createSignal, onMount, Show } from "solid-js";
+import { setGitHubToken } from "../components/GitHubAuth";
+
+export function OAuthCallbackPage() {
+	const navigate = useNavigate();
+	const [error, setError] = createSignal("");
+
+	onMount(async () => {
+		const params = new URLSearchParams(window.location.search);
+		const code = params.get("code");
+		const state = params.get("state");
+		const expected = sessionStorage.getItem("create-docs:oauth-state");
+		const oauthError = params.get("error");
+		const errorDescription = params.get("error_description");
+
+		if (oauthError) {
+			setError(errorDescription ?? oauthError);
+			return;
+		}
+
+		sessionStorage.removeItem("create-docs:oauth-state");
+
+		if (!code || !state || state !== expected) {
+			setError("Invalid OAuth callback. Please try authorizing again.");
+			return;
+		}
+
+		try {
+			const res = await fetch("/api/github/token", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ code }),
+			});
+			const data = (await res.json()) as {
+				access_token?: string;
+				error?: string;
+				message?: string;
+			};
+			if (!res.ok || data.error || !data.access_token) {
+				throw new Error(data.message ?? data.error ?? "Token exchange failed.");
+			}
+			setGitHubToken(data.access_token);
+			navigate({ to: "/create" });
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Token exchange failed.");
+		}
+	});
+
+	return (
+		<div class="min-h-[70vh] flex flex-col items-center justify-center px-6 py-20 text-center">
+			<Show
+				when={!error()}
+				fallback={
+					<>
+						<span
+							class="i-mdi:alert-circle text-3xl text-destructive mb-4"
+							aria-hidden="true"
+						/>
+						<h1 class="text-xl font-bold mb-2">Authorization failed</h1>
+						<p class="text-sm text-muted mb-6">{error()}</p>
+						<a
+							href="/create"
+							class="inline-flex items-center gap-2 px-4 h-10 rounded-md bg-primary text-primary-foreground no-underline font-medium"
+						>
+							Back to create
+						</a>
+					</>
+				}
+			>
+				<span
+					class="i-mdi:loading animate-spin text-3xl text-primary mb-4"
+					aria-hidden="true"
+				/>
+				<h1 class="text-xl font-bold mb-2">Completing GitHub authorization…</h1>
+				<p class="text-sm text-muted">You will be redirected in a moment.</p>
+			</Show>
+		</div>
+	);
+}