@wrikka/create-docs 0.1.0 → 0.2.1

package/src/runtime/components/ContextMenu.tsx

@@ -0,0 +1,88 @@
+import { For, onCleanup, onMount, Show } from "solid-js";
+
+export interface ContextMenuItem {
+	label: string;
+	icon: string;
+	action: () => void;
+	/** Render a divider above this item. */
+	divider?: boolean;
+	danger?: boolean;
+}
+
+export function ContextMenu(props: {
+	open: boolean;
+	x: number;
+	y: number;
+	items: ContextMenuItem[];
+	onClose: () => void;
+}) {
+	let rootEl: HTMLDivElement | undefined;
+
+	const onDocClick = (e: MouseEvent) => {
+		if (rootEl && !rootEl.contains(e.target as Node)) props.onClose();
+	};
+	const onKey = (e: KeyboardEvent) => {
+		if (e.key === "Escape") props.onClose();
+	};
+	const onScroll = () => props.onClose();
+
+	onMount(() => {
+		document.addEventListener("click", onDocClick, true);
+		document.addEventListener("keydown", onKey);
+		document.addEventListener("scroll", onScroll, true);
+	});
+	onCleanup(() => {
+		document.removeEventListener("click", onDocClick, true);
+		document.removeEventListener("keydown", onKey);
+		document.removeEventListener("scroll", onScroll, true);
+	});
+
+	const pos = () => {
+		const w = 200;
+		const h = props.items.length * 36 + 12;
+		const x = Math.min(props.x, window.innerWidth - w - 8);
+		const y =
+			props.y + h > window.innerHeight
+				? Math.max(8, window.innerHeight - h - 8)
+				: props.y;
+		return { x: Math.max(8, x), y };
+	};
+
+	return (
+		<Show when={props.open}>
+			<div
+				ref={rootEl}
+				class="fixed z-50 min-w-48 rounded-lg border border-border bg-surface shadow-xl py-1"
+				style={{ left: `${pos().x}px`, top: `${pos().y}px` }}
+				role="menu"
+			>
+				<For each={props.items}>
+					{(item) => (
+						<>
+							<Show when={item.divider}>
+								<div class="my-1 border-t border-border" aria-hidden="true" />
+							</Show>
+							<button
+								type="button"
+								role="menuitem"
+								class={`w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors cursor-pointer border-none bg-transparent hover:bg-background ${
+									item.danger ? "text-destructive" : "text-foreground"
+								}`}
+								onClick={() => {
+									item.action();
+									props.onClose();
+								}}
+							>
+								<span
+									class={`${item.icon} shrink-0 ${item.danger ? "" : "text-muted"}`}
+									aria-hidden="true"
+								/>
+								{item.label}
+							</button>
+						</>
+					)}
+				</For>
+			</div>
+		</Show>
+	);
+}

package/src/runtime/components/MobileBottomNav.tsx

@@ -1,11 +1,11 @@
-import { Link, useParams } from "@tanstack/solid-router";
+import { Link, useNavigate, useParams } from "@tanstack/solid-router";
 import { For } from "solid-js";
 import { createDocsList, useCollections } from "../data";
-import { setSearchOpen } from "./SearchPalette";
 
 export function MobileBottomNav(props: { onMenuToggle: () => void }) {
 	const collections = useCollections();
 	const params = useParams({ strict: false });
+	const navigate = useNavigate();
 
 	const [docsList] = createDocsList(() => "docs");
 	const [apiList] = createDocsList(() => "api");
@@ -91,7 +91,7 @@ export function MobileBottomNav(props: { onMenuToggle: () => void }) {
 					type="button"
 					aria-label="Search"
 					class="flex flex-col items-center justify-center h-full gap-0.5 text-xs text-muted hover:text-foreground transition-colors"
-					onClick={() => setSearchOpen(true)}
+					onClick={() => navigate({ to: "/search" })}
 				>
 					<span class="i-mdi:magnify text-xl" aria-hidden="true" />
 					<span class="scale-90">Search</span>

package/src/runtime/components/SidebarNav.tsx

@@ -1,8 +1,10 @@
 import { Link, useParams } from "@tanstack/solid-router";
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
+import { useDocs } from "../context";
 import { createDocsList, useCollections } from "../data";
 import { categoryIcon, typeIcon } from "../icons";
 import type { DocEntry } from "../types";
+import { ContextMenu, type ContextMenuItem } from "./ContextMenu";
 
 function sortDocs(items: DocEntry[]): DocEntry[] {
 	return [...items].sort(
@@ -21,10 +23,79 @@ function SidebarDocItem(props: {
 	const isActive = () => props.activeId === props.doc.id;
 	const hasChildren = () => (props.doc.children?.length ?? 0) > 0;
 	const [open, setOpen] = createSignal(true);
+	const [menu, setMenu] = createSignal<{ x: number; y: number } | null>(null);
+	const config = useDocs();
+	const collections = useCollections();
+
+	const href = () => `/${props.collection}/${props.doc.id}`;
+	const absoluteUrl = () => `${location.origin}${href()}`;
+	const repoUrl = () =>
+		collections()?.find((c) => c.id === props.collection)?.repoUrl ??
+		config.site.repoUrl;
+	const editUrl = () =>
+		repoUrl()
+			? `${repoUrl()}/edit/${config.github?.branch ?? "main"}/${props.doc.path || `${props.collection}/${props.doc.id}.md`}`
+			: "";
+
+	const copy = (text: string) => {
+		navigator.clipboard.writeText(text).catch(() => {});
+	};
+
+	const menuItems = (): ContextMenuItem[] => [
+		{
+			label: "Open",
+			icon: "i-mdi:file-document-outline",
+			action: () => {
+				location.href = href();
+			},
+		},
+		{
+			label: "Open in new tab",
+			icon: "i-mdi:open-in-new",
+			action: () => window.open(href(), "_blank", "noopener"),
+		},
+		{
+			label: "Copy link",
+			icon: "i-mdi:link-variant",
+			action: () => copy(absoluteUrl()),
+			divider: true,
+		},
+		{
+			label: "Copy path",
+			icon: "i-mdi:file-path",
+			action: () =>
+				copy(props.doc.path || `${props.collection}/${props.doc.id}.md`),
+		},
+		...(props.doc.description
+			? [
+					{
+						label: "Copy description",
+						icon: "i-mdi:text",
+						action: () => copy(props.doc.description ?? ""),
+					},
+				]
+			: []),
+		...(editUrl()
+			? [
+					{
+						label: "Edit on GitHub",
+						icon: "i-mdi:pencil-outline",
+						action: () => window.open(editUrl(), "_blank", "noopener"),
+						divider: true,
+					},
+				]
+			: []),
+	];
 
 	return (
 		<li>
-			<div class="flex items-center gap-0.5">
+			<div
+				class="group/item flex items-center gap-0.5"
+				onContextMenu={(e) => {
+					e.preventDefault();
+					setMenu({ x: e.clientX, y: e.clientY });
+				}}
+			>
 				<Show when={hasChildren()}>
 					<button
 						type="button"
@@ -65,7 +136,27 @@ function SidebarDocItem(props: {
 						</span>
 					</Show>
 				</Link>
+				<button
+					type="button"
+					aria-label={`More actions for ${props.doc.label}`}
+					title={props.doc.description || props.doc.label}
+					onClick={(e) => {
+						e.stopPropagation();
+						const rect = e.currentTarget.getBoundingClientRect();
+						setMenu({ x: rect.right, y: rect.bottom + 4 });
+					}}
+					class="w-6 h-6 shrink-0 inline-flex items-center justify-center rounded text-muted opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100 hover:text-foreground hover:bg-surface transition-opacity cursor-pointer border-none bg-transparent"
+				>
+					<span class="i-mdi:dots-vertical" aria-hidden="true" />
+				</button>
 			</div>
+			<ContextMenu
+				open={menu() !== null}
+				x={menu()?.x ?? 0}
+				y={menu()?.y ?? 0}
+				items={menuItems()}
+				onClose={() => setMenu(null)}
+			/>
 			<Show when={hasChildren() && open()}>
 				<ul class="list-none m-0 p-0 ml-2.5 border-l border-border/60">
 					<For each={sortDocs(props.doc.children ?? [])}>
@@ -85,8 +176,18 @@ function SidebarDocItem(props: {
 	);
 }
 
+function formatGroupLabel(category: string): string {
+	if (!category || category === "Docs") return category || "Docs";
+	return category
+		.split(/[-_\s/]+/)
+		.filter(Boolean)
+		.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+		.join(" ");
+}
+
 export function SidebarNav(props: { open: boolean; onNavigate: () => void }) {
 	const params = useParams({ strict: false });
+	const config = useDocs();
 	const [search, setSearch] = createSignal("");
 	const [docs] = createDocsList(() => params().collection);
 	const collections = useCollections();
@@ -108,7 +209,66 @@ export function SidebarNav(props: { open: boolean; onNavigate: () => void }) {
 	});
 
 	const sectionMeta = (category: string) =>
-		colMeta()?.sections?.find((s) => s.id === category || s.label === category);
+		colMeta()?.sections?.find(
+			(s) =>
+				s.id === category ||
+				s.label === category ||
+				s.label === formatGroupLabel(category),
+		);
+
+	const groupLabel = (category: string) =>
+		sectionMeta(category)?.label ?? formatGroupLabel(category);
+
+	const resourceLinks = () => {
+		const links: { label: string; to: string; icon: string }[] = [
+			{ label: "Search", to: "/search", icon: "i-mdi:magnify" },
+		];
+		if (config.showcase?.length)
+			links.push({
+				label: "Showcase",
+				to: "/showcase",
+				icon: "i-mdi:view-dashboard",
+			});
+		if (config.plugins?.length)
+			links.push({ label: "Plugins", to: "/plugins", icon: "i-mdi:puzzle" });
+		if (config.features?.translate || config.translate)
+			links.push({
+				label: "Translate",
+				to: "/translate",
+				icon: "i-mdi:translate",
+			});
+		if (config.features?.analytics)
+			links.push({
+				label: "Analytics",
+				to: "/analytics",
+				icon: "i-mdi:chart-box-outline",
+			});
+		if (config.github?.releases)
+			links.push({
+				label: "Changelog",
+				to: "/changelog",
+				icon: "i-mdi:history",
+			});
+		if (config.github?.contributors)
+			links.push({
+				label: "Community",
+				to: "/community",
+				icon: "i-mdi:account-group",
+			});
+		if (config.github?.issues)
+			links.push({
+				label: "Issues",
+				to: "/issues",
+				icon: "i-mdi:alert-circle-outline",
+			});
+		if (config.apiDiff)
+			links.push({
+				label: "API diff",
+				to: "/api-diff",
+				icon: "i-mdi:file-compare",
+			});
+		return links;
+	};
 
 	const isCollapsed = (category: string) => {
 		const stored = collapsed()[category];
@@ -206,7 +366,7 @@ export function SidebarNav(props: { open: boolean; onNavigate: () => void }) {
 										class={meta()?.icon ?? categoryIcon(category)}
 										aria-hidden="true"
 									/>
-									{meta()?.label ?? category}
+									{meta()?.label ?? groupLabel(category)}
 									<span class="ml-auto font-normal">{items.length}</span>
 									<span
 										class={`i-mdi:chevron-down text-xs transition-transform ${collapsedNow() ? "-rotate-90" : ""}`}
@@ -231,6 +391,33 @@ export function SidebarNav(props: { open: boolean; onNavigate: () => void }) {
 						);
 					}}
 				</For>
+				<Show when={resourceLinks().length > 0}>
+					<div class="mt-6 pt-3 border-t border-border">
+						<div class="flex items-center gap-2 px-2 pb-1 text-[11px] uppercase tracking-wider font-semibold text-muted">
+							<span class="i-mdi:apps" aria-hidden="true" />
+							Resources
+						</div>
+						<ul class="list-none m-0 p-0">
+							<For each={resourceLinks()}>
+								{(link) => (
+									<li>
+										<Link
+											to={link.to}
+											onClick={props.onNavigate}
+											class="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm no-underline text-muted hover:text-foreground hover:bg-surface transition-colors"
+										>
+											<span
+												class={`${link.icon} shrink-0 opacity-70`}
+												aria-hidden="true"
+											/>
+											{link.label}
+										</Link>
+									</li>
+								)}
+							</For>
+						</ul>
+					</div>
+				</Show>
 			</nav>
 		</aside>
 	);

package/src/runtime/components/TopNav.tsx

@@ -1,10 +1,13 @@
-import { Link, useParams } from "@tanstack/solid-router";
+import { Link, useNavigate, useParams } from "@tanstack/solid-router";
 import { createSignal, For, onMount, Show } from "solid-js";
 import type { SiteLink } from "../config";
 import { useDocs } from "../context";
+import { searchDocs } from "../data";
 import { setTheme, useTheme } from "../theme";
+import type { SearchResult } from "../types";
 import { AccentPicker } from "./AccentPicker";
 import { CollectionDropdown } from "./CollectionDropdown";
+import { ContextMenu } from "./ContextMenu";
 import { CustomizeDrawer } from "./CustomizeDrawer";
 import { DocsDropdown } from "./DocsDropdown";
 import { LocaleDropdown } from "./LocaleDropdown";
@@ -56,30 +59,13 @@ function LogoContextMenu(props: {
 	];
 
 	return (
-		<Show when={props.open}>
-			<div
-				class="fixed z-50 min-w-44 rounded-md border border-border bg-surface shadow-lg py-1"
-				style={{ left: `${props.x}px`, top: `${props.y}px` }}
-				role="menu"
-			>
-				<For each={items()}>
-					{(item) => (
-						<button
-							type="button"
-							role="menuitem"
-							class="w-full flex items-center gap-2 px-3 py-2 text-sm text-left text-foreground hover:bg-background transition-colors"
-							onClick={() => {
-								item.action();
-								props.onClose();
-							}}
-						>
-							<span class={item.icon} aria-hidden="true" />
-							{item.label}
-						</button>
-					)}
-				</For>
-			</div>
-		</Show>
+		<ContextMenu
+			open={props.open}
+			x={props.x}
+			y={props.y}
+			items={items()}
+			onClose={props.onClose}
+		/>
 	);
 }
 
@@ -94,6 +80,44 @@ export function TopNav(props: {
 	);
 	const [customizeOpen, setCustomizeOpen] = createSignal(false);
 	const [customNav, setCustomNav] = createSignal<SiteLink[] | null>(null);
+	const [navSearch, setNavSearch] = createSignal(false);
+	const [navQuery, setNavQuery] = createSignal("");
+	const [navResults, setNavResults] = createSignal<SearchResult[]>([]);
+	const navigate = useNavigate();
+	let navSearchEl: HTMLInputElement | undefined;
+
+	const openNavSearch = () => {
+		setNavSearch(true);
+		setNavQuery("");
+		setNavResults([]);
+		queueMicrotask(() => navSearchEl?.focus());
+	};
+
+	const closeNavSearch = () => {
+		setNavSearch(false);
+		setNavQuery("");
+		setNavResults([]);
+	};
+
+	const onNavSearchInput = async (value: string) => {
+		setNavQuery(value);
+		const term = value.trim();
+		if (term.length < 2) {
+			setNavResults([]);
+			return;
+		}
+		try {
+			setNavResults((await searchDocs(config, term)).slice(0, 8));
+		} catch {
+			setNavResults([]);
+		}
+	};
+
+	const goSearchPage = () => {
+		const q = navQuery().trim();
+		closeNavSearch();
+		navigate({ to: "/search", search: q ? { q } : {} });
+	};
 
 	onMount(() => {
 		try {
@@ -126,6 +150,9 @@ export function TopNav(props: {
 		...(config.showcase?.length
 			? [{ label: "Showcase", to: "/showcase", icon: "i-mdi:view-dashboard" }]
 			: []),
+		...(config.features?.translate || config.translate
+			? [{ label: "Translate", to: "/translate", icon: "i-mdi:translate" }]
+			: []),
 	];
 
 	const defaultAllNav = () => [...topNav(), ...extraNav()];
@@ -169,38 +196,125 @@ export function TopNav(props: {
 				/>
 				<CollectionDropdown current={params().collection} />
 
-				<nav
-					class="hidden md:flex flex-1 items-center justify-center gap-1"
-					aria-label="Site"
-				>
-					<DocsDropdown />
-					<For each={allNav()}>
-						{(link) => (
+				<Show
+					when={navSearch()}
+					fallback={
+						<nav
+							class="hidden md:flex flex-1 items-center justify-center gap-1"
+							aria-label="Site"
+						>
+							<DocsDropdown />
+							<For each={allNav()}>
+								{(link) => (
+									<Link
+										to={link.to}
+										class="px-3 h-9 inline-flex items-center gap-1.5 rounded-md text-sm text-muted no-underline hover:text-foreground hover:bg-surface transition-colors"
+									>
+										<Show when={link.icon}>
+											<span class={link.icon} aria-hidden="true" />
+										</Show>
+										{link.label}
+									</Link>
+								)}
+							</For>
 							<Link
-								to={link.to}
-								class="px-3 h-9 inline-flex items-center gap-1.5 rounded-md text-sm text-muted no-underline hover:text-foreground hover:bg-surface transition-colors"
+								to="/create"
+								class="ml-2 px-3 h-9 inline-flex items-center gap-1.5 rounded-md text-sm font-medium bg-primary text-primary-foreground no-underline hover:bg-primary-hover transition-colors"
 							>
-								<Show when={link.icon}>
-									<span class={link.icon} aria-hidden="true" />
-								</Show>
-								{link.label}
+								<span class="i-mdi:plus" aria-hidden="true" />
+								Create docs
 							</Link>
-						)}
-					</For>
-					<Link
-						to="/create"
-						class="ml-2 px-3 h-9 inline-flex items-center gap-1.5 rounded-md text-sm font-medium bg-primary text-primary-foreground no-underline hover:bg-primary-hover transition-colors"
-					>
-						<span class="i-mdi:plus" aria-hidden="true" />
-						Create docs
-					</Link>
-				</nav>
+						</nav>
+					}
+				>
+					<div class="hidden md:flex flex-1 items-center justify-center relative">
+						<div class="w-full max-w-xl flex items-center gap-2 px-3 h-10 rounded-lg border border-focus bg-surface shadow-sm">
+							<span
+								class="i-mdi:magnify text-muted shrink-0"
+								aria-hidden="true"
+							/>
+							<input
+								ref={navSearchEl}
+								type="search"
+								value={navQuery()}
+								onInput={(e) => onNavSearchInput(e.currentTarget.value)}
+								onKeyDown={(e) => {
+									if (e.key === "Escape") closeNavSearch();
+									if (e.key === "Enter") {
+										e.preventDefault();
+										const first = navResults()[0];
+										if (first && navQuery().trim()) {
+											closeNavSearch();
+											navigate({
+												to: "/$collection/$docId",
+												params: {
+													collection: first.collection,
+													docId: first.id,
+												},
+											});
+										} else {
+											goSearchPage();
+										}
+									}
+								}}
+								placeholder="Search docs… (Enter for full search)"
+								aria-label="Search documentation"
+								class="flex-1 bg-transparent outline-none border-none text-sm text-foreground placeholder:text-muted"
+							/>
+							<button
+								type="button"
+								onClick={closeNavSearch}
+								aria-label="Close search"
+								class="w-6 h-6 inline-flex items-center justify-center rounded text-muted hover:text-foreground cursor-pointer border-none bg-transparent"
+							>
+								<span class="i-mdi:close" aria-hidden="true" />
+							</button>
+						</div>
+						<Show when={navResults().length > 0}>
+							<div class="absolute top-full mt-2 w-full max-w-xl rounded-lg border border-border bg-surface shadow-xl py-1 z-50 max-h-80 overflow-y-auto">
+								<For each={navResults()}>
+									{(r) => (
+										<button
+											type="button"
+											class="w-full text-left px-3 py-2 hover:bg-background transition-colors cursor-pointer border-none bg-transparent"
+											onClick={() => {
+												closeNavSearch();
+												navigate({
+													to: "/$collection/$docId",
+													params: { collection: r.collection, docId: r.id },
+												});
+											}}
+										>
+											<div class="text-sm font-medium text-foreground truncate">
+												{r.title}
+											</div>
+											<div class="text-xs text-muted truncate">{r.snippet}</div>
+										</button>
+									)}
+								</For>
+								<button
+									type="button"
+									onClick={goSearchPage}
+									class="w-full text-left px-3 py-2 text-xs text-primary hover:bg-background transition-colors cursor-pointer border-t border-border border-none bg-transparent"
+								>
+									View all results →
+								</button>
+							</div>
+						</Show>
+					</div>
+				</Show>
 
 				<div class="flex items-center gap-1 shrink-0">
 					<Show when={config.features?.search !== false}>
 						<button
 							type="button"
-							onClick={() => setSearchOpen(true)}
+							onClick={() => {
+								if (config.features?.searchPage !== false) {
+									openNavSearch();
+								} else {
+									setSearchOpen(true);
+								}
+							}}
 							aria-label="Search documentation"
 							class="inline-flex items-center gap-2 px-3 h-9 rounded-md border border-border bg-surface text-sm text-muted hover:text-foreground hover:border-focus transition-colors cursor-pointer"
 						>

package/src/runtime/config.ts

@@ -49,6 +49,10 @@ export interface DocsAppFeatures {
 	frontmatterToggle?: boolean;
 	/** Show an "MCP available" badge linking to the JSON-RPC endpoint. */
 	mcp?: boolean;
+	/** Enable the /search interactive search page and nav search box. */
+	searchPage?: boolean;
+	/** Enable the /translate page and per-doc translate actions (AI via CI). */
+	translate?: boolean;
 }
 
 export interface MarkdownConfig {
@@ -101,6 +105,20 @@ export interface PluginInfo {
 	version?: string;
 	/** Install command shown on the card, e.g. "bun add @wrikka/x". Omit for built-in integrations. */
 	install?: string;
+	/** Marketplace grouping, e.g. "Adapters", "AI", "Integrations". */
+	category?: string;
+	/** Availability badge: "built-in", "beta", "planned" or a version string. */
+	status?: string;
+}
+
+/** AI translation configuration shown on the /translate page. */
+export interface TranslateConfig {
+	/** Locales that AI translation targets (in addition to i18n.list). */
+	locales?: LocaleInfo[];
+	/** Translation provider hint shown to users, e.g. "openai", "devin". */
+	provider?: string;
+	/** CI workflow filename used to run translation, e.g. "translate.yml". */
+	workflow?: string;
 }
 
 export interface ShowcaseInfo {
@@ -114,8 +132,11 @@ export interface ShowcaseInfo {
 	image?: string;
 	/** Optional Iconify icon class used as fallback. */
 	icon?: string;
-	/** Optional link to the project/case. */
+	/** Optional link to the project/case. Internal paths ("/docs/x") route in-app. */
 	link?: string;
+	/** Internal doc target — renders a router link to /collection/docId. */
+	collection?: string;
+	docId?: string;
 	/** Optional tags. */
 	tags?: string[];
 	/** Optional badge. */
@@ -209,6 +230,8 @@ export interface DocsAppConfig {
 	versions?: VersionsConfig;
 	/** Multi-language docs: shows a language switcher and sets `<html lang>`. */
 	i18n?: I18nConfig;
+	/** AI translation UX — /translate page, per-doc translate menu, CI hints. */
+	translate?: TranslateConfig;
 	/** Optional analytics sink: page views are beaconed to this endpoint. */
 	analytics?: { endpoint?: string };
 	/** Plugin marketplace: entries listed on the `/plugins` page. */