@wrikka/create-docs 0.1.0

package/src/runtime/components/DocToc.tsx

@@ -0,0 +1,147 @@
+import {
+	createEffect,
+	createResource,
+	createSignal,
+	For,
+	onCleanup,
+	Show,
+} from "solid-js";
+
+interface TocLink {
+	id: string;
+	text: string;
+	depth: number;
+	children?: TocLink[];
+}
+
+async function parseToc(source: string): Promise<TocLink[]> {
+	const [{ parseMarkdown }, { default: toc }] = await Promise.all([
+		import("comark"),
+		import("@comark/html/plugins/toc"),
+	]);
+	const result = await parseMarkdown(source, {
+		plugins: [toc({ depth: 3, searchDepth: 3 })],
+	});
+	return result.meta?.toc?.links ?? [];
+}
+
+function collectIds(links: TocLink[]): string[] {
+	const out: string[] = [];
+	for (const l of links) {
+		out.push(l.id);
+		if (l.children) out.push(...collectIds(l.children));
+	}
+	return out;
+}
+
+function TocLinkItem(props: {
+	link: TocLink;
+	activeId?: string;
+	onClick: (id: string) => void;
+}) {
+	const isActive = () => props.activeId === props.link.id;
+	return (
+		<li class={`rt-toc__item rt-toc__item--depth-${props.link.depth}`}>
+			<button
+				type="button"
+				class={`rt-toc__link ${isActive() ? "rt-toc__link--active" : ""}`}
+				onClick={() => props.onClick(props.link.id)}
+				aria-label={`Jump to ${props.link.text}`}
+				aria-current={isActive() ? "location" : undefined}
+			>
+				{props.link.text}
+			</button>
+			<Show when={props.link.children?.length}>
+				<ul class="rt-toc__list">
+					<For each={props.link.children}>
+						{(child) => (
+							<TocLinkItem
+								link={child}
+								activeId={props.activeId}
+								onClick={props.onClick}
+							/>
+						)}
+					</For>
+				</ul>
+			</Show>
+		</li>
+	);
+}
+
+export function DocToc(props: { source: string }) {
+	const [toc] = createResource(() => props.source, parseToc);
+	const [activeId, setActiveId] = createSignal<string | undefined>();
+	let listRef: HTMLUListElement | undefined;
+
+	const scrollTo = (id: string) => {
+		const el = document.getElementById(id);
+		if (!el) return;
+		el.scrollIntoView({ behavior: "smooth", block: "start" });
+		setActiveId(id);
+	};
+
+	createEffect(() => {
+		const ids = collectIds(toc() ?? []);
+		if (ids.length === 0) return;
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				const visible = entries
+					.filter((e) => e.isIntersecting)
+					.map((e) => e.target.id);
+				if (visible.length) {
+					setActiveId(visible[0]);
+				}
+			},
+			{ rootMargin: "-15% 0px -60% 0px", threshold: 0 },
+		);
+
+		for (const id of ids) {
+			const el = document.getElementById(id);
+			if (el) observer.observe(el);
+		}
+
+		onCleanup(() => observer.disconnect());
+	});
+
+	createEffect(() => {
+		const id = activeId();
+		if (!id || !listRef) return;
+		const activeBtn = listRef.querySelector(
+			`button[aria-current="location"]`,
+		) as HTMLElement | null;
+		if (activeBtn) {
+			activeBtn.scrollIntoView({ behavior: "smooth", block: "nearest" });
+		}
+	});
+
+	return (
+		<nav aria-label="On this page" class="rt-toc">
+			<div class="sticky top-0 bg-background z-10 pb-2 border-b border-border mb-2">
+				<div class="rt-toc__title flex items-center gap-1.5">
+					<span class="i-mdi:format-list-bulleted" aria-hidden="true" />
+					<span>On this page</span>
+				</div>
+			</div>
+			<Show
+				when={!toc.loading && (toc() ?? []).length > 0}
+				fallback={<div class="rt-toc__empty">No headings</div>}
+			>
+				<ul
+					class="rt-toc__list max-h-[calc(100vh-12rem)] overflow-y-auto"
+					ref={listRef}
+				>
+					<For each={toc()}>
+						{(link) => (
+							<TocLinkItem
+								link={link}
+								activeId={activeId()}
+								onClick={scrollTo}
+							/>
+						)}
+					</For>
+				</ul>
+			</Show>
+		</nav>
+	);
+}

package/src/runtime/components/DocsDropdown.tsx

@@ -0,0 +1,184 @@
+import { Link, useParams } from "@tanstack/solid-router";
+import {
+	createMemo,
+	createSignal,
+	For,
+	onCleanup,
+	onMount,
+	Show,
+} from "solid-js";
+import { createDocsList, useCollections } from "../data";
+import { categoryIcon } from "../icons";
+import type { DocEntry } from "../types";
+
+function sortDocs(items: DocEntry[]): DocEntry[] {
+	return [...items].sort(
+		(a, b) => (a.order ?? 0) - (b.order ?? 0) || a.label.localeCompare(b.label),
+	);
+}
+
+export function DocsDropdown() {
+	const params = useParams({ strict: false });
+	const [open, setOpen] = createSignal(false);
+	const collections = useCollections();
+	const [docs] = createDocsList(() => params().collection ?? "");
+	let rootEl: HTMLDivElement | undefined;
+
+	const current = () => params().collection;
+	const currentMeta = () => collections()?.find((c) => c.id === current());
+
+	const grouped = createMemo((): [string, DocEntry[]][] => {
+		const groups = new Map<string, DocEntry[]>();
+		for (const d of docs() ?? []) {
+			const g = groups.get(d.category) ?? [];
+			g.push(d);
+			groups.set(d.category, g);
+		}
+		const entries = [...groups.entries()].map(
+			([cat, items]) => [cat, sortDocs(items)] as [string, DocEntry[]],
+		);
+		const sections = currentMeta()?.sections;
+		if (sections?.length) {
+			const order = new Map<string, number>();
+			sections.forEach((s, i) => {
+				order.set(s.id, i);
+				order.set(s.label, i);
+			});
+			return entries.sort(([a], [b]) => {
+				const ia = order.get(a) ?? Number.MAX_SAFE_INTEGER;
+				const ib = order.get(b) ?? Number.MAX_SAFE_INTEGER;
+				return ia - ib || a.localeCompare(b);
+			});
+		}
+		return entries.sort(([a], [b]) => a.localeCompare(b));
+	});
+
+	const onDocClick = (e: MouseEvent) => {
+		if (rootEl && !rootEl.contains(e.target as Node)) setOpen(false);
+	};
+	const onKey = (e: KeyboardEvent) => {
+		if (e.key === "Escape") setOpen(false);
+	};
+
+	onMount(() => {
+		document.addEventListener("click", onDocClick);
+		document.addEventListener("keydown", onKey);
+	});
+	onCleanup(() => {
+		document.removeEventListener("click", onDocClick);
+		document.removeEventListener("keydown", onKey);
+	});
+
+	return (
+		<div ref={rootEl} class="relative">
+			<button
+				type="button"
+				onClick={() => setOpen(!open())}
+				aria-expanded={open()}
+				aria-haspopup="menu"
+				class={`px-3 h-9 inline-flex items-center gap-1.5 rounded-md text-sm no-underline transition-colors cursor-pointer border-none ${
+					open() || current()
+						? "bg-surface text-foreground"
+						: "bg-transparent text-muted hover:text-foreground hover:bg-surface"
+				}`}
+			>
+				<span class="i-mdi:book-open-page-variant" aria-hidden="true" />
+				Docs
+				<span
+					class={`i-mdi:chevron-down text-xs text-muted transition-transform ${open() ? "rotate-180" : ""}`}
+					aria-hidden="true"
+				/>
+			</button>
+			<Show when={open()}>
+				<div
+					role="menu"
+					aria-label="Documentation pages"
+					class="absolute left-0 top-full mt-2 w-[min(36rem,calc(100vw-2rem))] rounded-lg border border-border bg-surface shadow-xl z-50 overflow-hidden"
+				>
+					<div class="grid sm:grid-cols-[11rem_minmax(0,1fr)]">
+						<div class="border-b sm:border-b-0 sm:border-r border-border bg-background/50 p-2">
+							<div class="px-2 pb-1 text-[10px] uppercase tracking-wider font-semibold text-muted">
+								Collections
+							</div>
+							<ul class="list-none m-0 p-0">
+								<For each={collections()}>
+									{(c) => (
+										<li>
+											<Link
+												to="/$collection"
+												params={{ collection: c.id }}
+												onClick={() => setOpen(false)}
+												class={`flex items-center gap-2 px-2 py-1.5 rounded-md text-sm no-underline transition-colors ${
+													c.id === current()
+														? "bg-primary/10 text-primary font-medium"
+														: "text-muted hover:text-foreground hover:bg-surface"
+												}`}
+											>
+												<Show when={c.icon}>
+													<span
+														class={`${c.icon} shrink-0`}
+														aria-hidden="true"
+													/>
+												</Show>
+												<span class="truncate">{c.label}</span>
+											</Link>
+										</li>
+									)}
+								</For>
+							</ul>
+						</div>
+						<div class="max-h-80 overflow-y-auto p-2">
+							<Show
+								when={grouped().length > 0}
+								fallback={
+									<div class="px-3 py-6 text-sm text-muted text-center">
+										{docs.loading
+											? "Loading pages…"
+											: "Select a collection to browse its pages."}
+									</div>
+								}
+							>
+								<For each={grouped()}>
+									{([category, items]) => (
+										<div class="mb-3 last:mb-0">
+											<div class="flex items-center gap-1.5 px-2 pb-1 text-[10px] uppercase tracking-wider font-semibold text-muted">
+												<span
+													class={categoryIcon(category)}
+													aria-hidden="true"
+												/>
+												{category}
+											</div>
+											<ul class="list-none m-0 p-0">
+												<For each={items}>
+													{(d) => (
+														<li>
+															<Link
+																to="/$collection/$docId"
+																params={{
+																	collection: params().collection ?? "",
+																	docId: d.id,
+																}}
+																onClick={() => setOpen(false)}
+																class={`block px-2 py-1.5 rounded-md text-sm no-underline transition-colors truncate ${
+																	params().docId === d.id
+																		? "bg-primary/10 text-primary font-medium"
+																		: "text-muted hover:text-foreground hover:bg-background"
+																}`}
+															>
+																{d.label}
+															</Link>
+														</li>
+													)}
+												</For>
+											</ul>
+										</div>
+									)}
+								</For>
+							</Show>
+						</div>
+					</div>
+				</div>
+			</Show>
+		</div>
+	);
+}

package/src/runtime/components/Footer.tsx

@@ -0,0 +1,52 @@
+import { For, Show } from "solid-js";
+import { useDocs } from "../context";
+
+export function Footer() {
+	const config = useDocs();
+	const year = new Date().getFullYear();
+	const links = () => config.footer?.links ?? [];
+
+	return (
+		<footer class="border-t border-border bg-surface py-10 px-6 text-sm text-muted">
+			<div class="max-w-6xl mx-auto flex flex-col md:flex-row gap-6 md:items-center justify-between">
+				<div class="space-y-1">
+					<div class="font-medium text-foreground">{config.site.title}</div>
+					<Show when={config.site.description}>
+						{(d) => <p class="text-xs max-w-md">{d()}</p>}
+					</Show>
+					<div class="text-xs">
+						© {year} {config.footer?.copyright ?? config.site.title}
+					</div>
+					<Show when={config.features?.mcp}>
+						<a
+							href="/mcp"
+							target="_blank"
+							rel="noreferrer"
+							class="inline-flex items-center gap-1 mt-1 px-2 py-0.5 w-fit rounded-full border border-border bg-background text-[11px] font-semibold text-muted hover:text-foreground hover:border-focus transition-colors no-underline"
+						>
+							<span
+								class="i-mdi:robot-outline text-primary"
+								aria-hidden="true"
+							/>
+							MCP available · /mcp
+						</a>
+					</Show>
+				</div>
+				<Show when={links().length}>
+					<nav class="flex flex-wrap gap-4" aria-label="Footer">
+						<For each={links()}>
+							{(link) => (
+								<a
+									href={link.to}
+									class="text-muted hover:text-foreground transition-colors no-underline"
+								>
+									{link.label}
+								</a>
+							)}
+						</For>
+					</nav>
+				</Show>
+			</div>
+		</footer>
+	);
+}

package/src/runtime/components/GitHubAuth.tsx

@@ -0,0 +1,82 @@
+import { createSignal, onMount, Show } from "solid-js";
+import { useDocs } from "../context";
+
+const STORAGE_KEY = "create-docs:github-token";
+
+export function getGitHubToken(): string | null {
+	if (typeof window === "undefined") return null;
+	return localStorage.getItem(STORAGE_KEY);
+}
+
+export function setGitHubToken(token: string) {
+	if (typeof window === "undefined") return;
+	localStorage.setItem(STORAGE_KEY, token);
+}
+
+export function clearGitHubToken() {
+	if (typeof window === "undefined") return;
+	localStorage.removeItem(STORAGE_KEY);
+}
+
+export function GitHubAuthButton(props: {
+	onToken?: (token: string) => void;
+	label?: string;
+	scope?: string;
+}) {
+	const config = useDocs();
+	const [loading, setLoading] = createSignal(false);
+	const [error, setError] = createSignal("");
+
+	onMount(() => {
+		const existing = getGitHubToken();
+		if (existing) props.onToken?.(existing);
+	});
+
+	const oauth = () => config.github?.oauth;
+	const disabled = () => oauth()?.enabled === false || loading();
+
+	const startOAuth = async () => {
+		const cfg = oauth();
+		if (!cfg || cfg.enabled === false) {
+			setError("GitHub OAuth is not configured.");
+			return;
+		}
+		setLoading(true);
+		setError("");
+		try {
+			const redirectUri =
+				cfg.redirectUri ?? `${location.origin}/auth/github/callback`;
+			const state = crypto.randomUUID();
+			sessionStorage.setItem("create-docs:oauth-state", state);
+			const res = await fetch(
+				`/api/github/auth?redirect_uri=${encodeURIComponent(redirectUri)}&state=${state}&scope=${encodeURIComponent(props.scope ?? cfg.scope ?? "repo")}`,
+			);
+			const data = (await res.json()) as { url?: string; error?: string };
+			if (!res.ok || data.error) {
+				throw new Error(data.error ?? "Failed to start OAuth.");
+			}
+			if (data.url) location.href = data.url;
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "OAuth start failed.");
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<div class="space-y-2">
+			<button
+				type="button"
+				onClick={startOAuth}
+				disabled={disabled()}
+				class="inline-flex items-center gap-2 px-4 h-10 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+			>
+				<span class="i-mdi:github" aria-hidden="true" />
+				{loading() ? "Redirecting…" : (props.label ?? "Authorize with GitHub")}
+			</button>
+			<Show when={error()}>
+				<p class="text-sm text-destructive m-0">{error()}</p>
+			</Show>
+		</div>
+	);
+}

package/src/runtime/components/GitHubStats.tsx

@@ -0,0 +1,73 @@
+import { createResource, Show } from "solid-js";
+import { useDocs } from "../context";
+import { fetchRepoStats, shieldsBadge } from "../github";
+
+export function GitHubStats() {
+	const config = useDocs();
+	const github = () => config.github;
+	const enabled = () => github()?.stats;
+
+	const [stats] = createResource(
+		() => (enabled() ? github() : undefined),
+		async (cfg) => {
+			if (!cfg) return null;
+			return fetchRepoStats(cfg);
+		},
+	);
+
+	return (
+		<Show when={enabled() && github()}>
+			{(cfg) => (
+				<section
+					class="flex items-center gap-2 flex-wrap"
+					aria-label="GitHub stats"
+				>
+					<a
+						href={`https://github.com/${cfg().owner}/${cfg().repo}/stargazers`}
+						target="_blank"
+						rel="noreferrer"
+						class="inline-block"
+					>
+						<img
+							src={shieldsBadge(cfg().owner, cfg().repo, "stars")}
+							alt="GitHub stars"
+							loading="lazy"
+							class="h-5"
+						/>
+					</a>
+					<a
+						href={`https://github.com/${cfg().owner}/${cfg().repo}/forks`}
+						target="_blank"
+						rel="noreferrer"
+						class="inline-block"
+					>
+						<img
+							src={shieldsBadge(cfg().owner, cfg().repo, "forks")}
+							alt="GitHub forks"
+							loading="lazy"
+							class="h-5"
+						/>
+					</a>
+					<a
+						href={`https://github.com/${cfg().owner}/${cfg().repo}/issues`}
+						target="_blank"
+						rel="noreferrer"
+						class="inline-block"
+					>
+						<img
+							src={shieldsBadge(cfg().owner, cfg().repo, "issues")}
+							alt="GitHub issues"
+							loading="lazy"
+							class="h-5"
+						/>
+					</a>
+					<Show when={stats()}>
+						{(s) => (
+							<span class="text-xs text-muted">{s().openPRs} open PRs</span>
+						)}
+					</Show>
+				</section>
+			)}
+		</Show>
+	);
+}