@wrikka/create-docs 0.1.0

package/src/runtime/pages/ChangelogPage.tsx

@@ -0,0 +1,210 @@
+import { createResource, createSignal, For, onMount, Show } from "solid-js";
+import { DocMarkdown } from "../components/DocMarkdown";
+import { SkeletonPage } from "../components/Skeleton";
+import { useDocs } from "../context";
+import {
+	fetchReleases,
+	fetchTags,
+	GitHubFetchError,
+	type ReleaseInfo,
+	type TagInfo,
+} from "../github";
+
+function formatDate(iso: string) {
+	try {
+		return new Date(iso).toLocaleDateString(undefined, {
+			year: "numeric",
+			month: "short",
+			day: "numeric",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+export function ChangelogPage() {
+	const config = useDocs();
+	const [tab, setTab] = createSignal<"releases" | "file">("releases");
+	const [releases, setReleases] = createSignal<ReleaseInfo[]>([]);
+	const [tags, setTags] = createSignal<TagInfo[]>([]);
+	const [loading, setLoading] = createSignal(true);
+	const [error, setError] = createSignal<string | null>(null);
+
+	const currentCollection = () => config.defaultCollection ?? "";
+
+	const [fileChangelog] = createResource(
+		() => currentCollection(),
+		async (collection) => {
+			try {
+				const entries = await config.dataSource.list(collection);
+				const id = entries.find(
+					(e) =>
+						e.id.toLowerCase().includes("changelog") ||
+						e.label.toLowerCase().includes("changelog"),
+				)?.id;
+				if (!id) return null;
+				const c = await config.dataSource.get(collection, id);
+				return c.content;
+			} catch {
+				return null;
+			}
+		},
+	);
+
+	onMount(async () => {
+		const cfg = config.github;
+		if (!cfg?.releases) {
+			setLoading(false);
+			return;
+		}
+		try {
+			const [r, t] = await Promise.all([
+				fetchReleases(cfg),
+				cfg?.releases ? fetchTags(cfg) : ([] as TagInfo[]),
+			]);
+			setReleases(r);
+			setTags(t);
+		} catch (err) {
+			if (err instanceof GitHubFetchError) {
+				setError(
+					err.status === 404
+						? "Releases 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 releases from GitHub.");
+			}
+		} finally {
+			setLoading(false);
+		}
+	});
+
+	return (
+		<div class="max-w-3xl mx-auto px-6 py-8 pb-24">
+			<h1 class="text-3xl font-bold mb-2">Changelog</h1>
+			<p class="text-muted mb-6">Releases and file-based changelog.</p>
+
+			<div class="flex items-center gap-2 mb-6 border-b border-border">
+				<button
+					type="button"
+					onClick={() => setTab("releases")}
+					class={`px-3 py-2 text-sm border-b-2 transition-colors cursor-pointer border-none bg-transparent ${
+						tab() === "releases"
+							? "border-primary text-foreground"
+							: "border-transparent text-muted hover:text-foreground"
+					}`}
+				>
+					<span class="i-mdi:tag-outline" aria-hidden="true" /> Releases
+				</button>
+				<Show when={fileChangelog()}>
+					<button
+						type="button"
+						onClick={() => setTab("file")}
+						class={`px-3 py-2 text-sm border-b-2 transition-colors cursor-pointer border-none bg-transparent ${
+							tab() === "file"
+								? "border-primary text-foreground"
+								: "border-transparent text-muted hover:text-foreground"
+						}`}
+					>
+						<span class="i-mdi:file-document-outline" aria-hidden="true" />{" "}
+						Changelog file
+					</button>
+				</Show>
+			</div>
+
+			<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 releases
+					</div>
+					<p class="text-sm text-destructive/90 mb-3">{error()}</p>
+					<Show when={config.site.repoUrl}>
+						<a
+							href={`${config.site.repoUrl}/releases`}
+							target="_blank"
+							rel="noreferrer"
+							class="inline-flex items-center gap-1.5 text-sm text-destructive font-medium underline underline-offset-2"
+						>
+							View on GitHub
+							<span class="i-mdi:open-in-new" aria-hidden="true" />
+						</a>
+					</Show>
+				</div>
+			</Show>
+
+			<Show when={tab() === "file" && fileChangelog()}>
+				<div class="border border-border rounded-lg p-5 bg-surface/30">
+					<DocMarkdown source={fileChangelog() ?? ""} />
+				</div>
+			</Show>
+
+			<Show when={tab() === "releases"}>
+				<Show when={!loading() && !error() && releases().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:history text-4xl" aria-hidden="true" />
+						<p class="m-0">No releases found for this repository.</p>
+						<Show when={config.site.repoUrl}>
+							<a
+								href={`${config.site.repoUrl}/releases/new`}
+								target="_blank"
+								rel="noreferrer"
+								class="text-sm text-primary underline underline-offset-2"
+							>
+								Create a release
+							</a>
+						</Show>
+					</div>
+				</Show>
+
+				<Show when={tags().length > 0}>
+					<div class="flex flex-wrap gap-2 mb-6">
+						<For each={tags().slice(0, 20)}>
+							{(t) => (
+								<a
+									href={`${config.site.repoUrl}/releases/tag/${t.name}`}
+									target="_blank"
+									rel="noreferrer"
+									class="text-xs px-2.5 py-1 rounded-full border border-border bg-surface text-muted hover:text-foreground hover:border-focus transition-colors no-underline"
+								>
+									{t.name}
+								</a>
+							)}
+						</For>
+					</div>
+				</Show>
+
+				<div class="space-y-6">
+					<For each={releases()}>
+						{(release) => (
+							<article class="border border-border rounded-lg p-5 bg-surface/30 hover:border-focus transition-colors">
+								<div class="flex items-center gap-2 mb-2">
+									<h2 class="text-xl font-semibold m-0">
+										<a
+											href={release.html_url}
+											target="_blank"
+											rel="noreferrer"
+											class="hover:text-primary transition-colors"
+										>
+											{release.name || release.tag_name}
+										</a>
+									</h2>
+									<span class="text-xs text-muted ml-auto">
+										{formatDate(release.published_at)}
+									</span>
+								</div>
+								<DocMarkdown source={release.body ?? "No release notes."} />
+							</article>
+						)}
+					</For>
+				</div>
+			</Show>
+		</div>
+	);
+}

package/src/runtime/pages/CollectionPage.tsx

@@ -0,0 +1,140 @@
+import { Link, useParams } from "@tanstack/solid-router";
+import { For, Show } from "solid-js";
+import { ShowcaseCard } from "../components/ShowcaseCard";
+import { SkeletonPage } from "../components/Skeleton";
+import { createDocsList, useCollections } from "../data";
+import { categoryIcon, typeIcon } from "../icons";
+
+export function CollectionPage() {
+	const params = useParams({ strict: false });
+	const collection = () => params().collection ?? "";
+	const collections = useCollections();
+	const meta = () => collections()?.find((c) => c.id === collection());
+	const [docs] = createDocsList(collection);
+
+	const isShowcase = () => collection() === "showcase";
+	const isApi = () => meta()?.type === "api";
+
+	return (
+		<div class="max-w-6xl mx-auto px-6 py-10 pb-24">
+			<Show when={docs.loading}>
+				<SkeletonPage />
+			</Show>
+
+			<Show when={!docs.loading}>
+				<Show
+					when={meta()}
+					fallback={
+						<div class="flex flex-col items-center gap-3 py-20 text-muted">
+							<span
+								class="i-mdi:help-circle-outline text-4xl"
+								aria-hidden="true"
+							/>
+							<h1 class="text-xl font-semibold text-foreground m-0">
+								Unknown collection
+							</h1>
+							<p class="m-0">Select a collection from the dropdown above.</p>
+						</div>
+					}
+				>
+					{(m) => (
+						<>
+							<div class="flex items-center gap-3 mb-2">
+								<span
+									class={`${m().icon} text-3xl text-primary`}
+									aria-hidden="true"
+								/>
+								<h1 class="text-2xl font-bold m-0">{m().label}</h1>
+							</div>
+							<p class="text-muted mt-0 mb-8">{m().description}</p>
+
+							<Show
+								when={docs() && (docs() ?? []).length > 0}
+								fallback={
+									<div class="flex flex-col items-center gap-3 py-16 rounded-lg border border-dashed border-border text-muted">
+										<span
+											class="i-mdi:package-variant-closed text-4xl"
+											aria-hidden="true"
+										/>
+										<p class="m-0">No documentation yet — coming soon.</p>
+									</div>
+								}
+							>
+								<Show when={isShowcase()}>
+									<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+										<For each={docs()}>
+											{(d) => (
+												<ShowcaseCard collection={collection()} doc={d} />
+											)}
+										</For>
+									</div>
+								</Show>
+
+								<Show when={!isShowcase()}>
+									<div
+										class={`grid gap-3 ${
+											isApi() ? "" : "sm:grid-cols-2 lg:grid-cols-3"
+										}`}
+									>
+										<For each={docs()}>
+											{(d) => (
+												<Link
+													to="/$collection/$docId"
+													params={{
+														collection: collection(),
+														docId: d.id,
+													}}
+													class="flex items-start gap-3 p-4 rounded-xl border border-border bg-surface/30 no-underline hover:border-focus transition-colors"
+												>
+													<span
+														class={`${typeIcon(d.type ?? "")} text-2xl text-primary shrink-0`}
+														aria-hidden="true"
+													/>
+													<div class="min-w-0 flex-1">
+														<div class="flex items-center gap-2 mb-1">
+															<span class="block text-sm font-medium text-foreground truncate">
+																{d.label}
+															</span>
+															<Show when={d.badge}>
+																<span class="text-[10px] px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+																	{d.badge}
+																</span>
+															</Show>
+														</div>
+														<Show when={d.description}>
+															<p class="text-xs text-muted m-0 leading-relaxed line-clamp-2">
+																{d.description}
+															</p>
+														</Show>
+														<div class="flex items-center gap-1 text-[11px] text-muted mt-2">
+															<span
+																class={categoryIcon(d.category ?? "")}
+																aria-hidden="true"
+															/>
+															{d.category}
+															<Show when={d.tags?.length}>
+																<span class="ml-auto flex gap-1">
+																	<For each={d.tags!.slice(0, 3)}>
+																		{(tag) => (
+																			<span class="px-1.5 py-0.5 rounded bg-background border border-border text-muted">
+																				{tag}
+																			</span>
+																		)}
+																	</For>
+																</span>
+															</Show>
+														</div>
+													</div>
+												</Link>
+											)}
+										</For>
+									</div>
+								</Show>
+							</Show>
+						</>
+					)}
+				</Show>
+			</Show>
+		</div>
+	);
+}