@wrikka/create-docs 0.1.0

package/src/runtime/components/SidebarNav.tsx

@@ -0,0 +1,237 @@
+import { Link, useParams } from "@tanstack/solid-router";
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
+import { createDocsList, useCollections } from "../data";
+import { categoryIcon, typeIcon } 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),
+	);
+}
+
+function SidebarDocItem(props: {
+	doc: DocEntry;
+	collection: string;
+	activeId?: string;
+	depth?: number;
+	onNavigate: () => void;
+}) {
+	const depth = () => props.depth ?? 0;
+	const isActive = () => props.activeId === props.doc.id;
+	const hasChildren = () => (props.doc.children?.length ?? 0) > 0;
+	const [open, setOpen] = createSignal(true);
+
+	return (
+		<li>
+			<div class="flex items-center gap-0.5">
+				<Show when={hasChildren()}>
+					<button
+						type="button"
+						onClick={() => setOpen(!open())}
+						aria-label={open() ? "Collapse section" : "Expand section"}
+						aria-expanded={open()}
+						class="w-5 h-5 shrink-0 inline-flex items-center justify-center rounded text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer border-none bg-transparent"
+					>
+						<span
+							class={`i-mdi:chevron-down text-xs transition-transform ${open() ? "" : "-rotate-90"}`}
+							aria-hidden="true"
+						/>
+					</button>
+				</Show>
+				<Link
+					to="/$collection/$docId"
+					params={{
+						collection: props.collection,
+						docId: props.doc.id,
+					}}
+					onClick={props.onNavigate}
+					aria-current={isActive() ? "page" : undefined}
+					style={{ "padding-left": `${0.5 + depth() * 0.75}rem` }}
+					class={`flex-1 min-w-0 flex items-center gap-2 px-2 py-1.5 rounded-md text-sm no-underline transition-colors ${
+						isActive()
+							? "bg-primary/10 text-primary font-medium"
+							: "text-muted hover:text-foreground hover:bg-surface"
+					}`}
+				>
+					<span
+						class={`${props.doc.icon ?? typeIcon(props.doc.type ?? "")} shrink-0 opacity-70`}
+						aria-hidden="true"
+					/>
+					<span class="truncate">{props.doc.label}</span>
+					<Show when={props.doc.badge}>
+						<span class="ml-auto shrink-0 text-[10px] px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+							{props.doc.badge}
+						</span>
+					</Show>
+				</Link>
+			</div>
+			<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 ?? [])}>
+						{(child) => (
+							<SidebarDocItem
+								doc={child}
+								collection={props.collection}
+								activeId={props.activeId}
+								depth={depth() + 1}
+								onNavigate={props.onNavigate}
+							/>
+						)}
+					</For>
+				</ul>
+			</Show>
+		</li>
+	);
+}
+
+export function SidebarNav(props: { open: boolean; onNavigate: () => void }) {
+	const params = useParams({ strict: false });
+	const [search, setSearch] = createSignal("");
+	const [docs] = createDocsList(() => params().collection);
+	const collections = useCollections();
+	const colMeta = () =>
+		collections()?.find((c) => c.id === params().collection);
+
+	const [collapsed, setCollapsed] = createSignal<Record<string, boolean>>({});
+	const storageKey = () =>
+		`create-docs:sidebar:${params().collection ?? "default"}`;
+
+	createEffect(() => {
+		storageKey();
+		try {
+			const raw = localStorage.getItem(storageKey());
+			setCollapsed(raw ? (JSON.parse(raw) as Record<string, boolean>) : {});
+		} catch {
+			setCollapsed({});
+		}
+	});
+
+	const sectionMeta = (category: string) =>
+		colMeta()?.sections?.find((s) => s.id === category || s.label === category);
+
+	const isCollapsed = (category: string) => {
+		const stored = collapsed()[category];
+		if (stored !== undefined) return stored;
+		return sectionMeta(category)?.collapsed ?? false;
+	};
+
+	const toggleGroup = (category: string) => {
+		const next = {
+			...collapsed(),
+			[category]: !isCollapsed(category),
+		};
+		setCollapsed(next);
+		try {
+			localStorage.setItem(storageKey(), JSON.stringify(next));
+		} catch {
+			// storage unavailable — state not persisted
+		}
+	};
+
+	const grouped = createMemo((): [string, DocEntry[]][] => {
+		const q = search().toLowerCase();
+		const list = (docs() ?? []).filter(
+			(d) =>
+				!q ||
+				d.label.toLowerCase().includes(q) ||
+				(d.category ?? "").toLowerCase().includes(q) ||
+				(d.description ?? "").toLowerCase().includes(q),
+		);
+		const groups = new Map<string, DocEntry[]>();
+		for (const d of list) {
+			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 = colMeta()?.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));
+	});
+
+	return (
+		<aside
+			class={`fixed top-[var(--docs-banner-height,0px)] bottom-0 right-0 z-30 w-72 h-[calc(100vh-var(--docs-banner-height,0px))] shrink-0 border-l border-border bg-background overflow-y-auto transition-transform ${props.open ? "translate-x-0" : "translate-x-full"} lg:left-0 lg:right-auto lg:border-l-0 lg:border-r lg:border-r-border lg:translate-x-0 lg:top-[calc(3.5rem+var(--docs-banner-height,0px))] lg:h-[calc(100vh-3.5rem-var(--docs-banner-height,0px))]`}
+		>
+			<div class="p-3 sticky top-0 bg-background z-10 border-b border-border">
+				<label class="flex items-center gap-2 px-3 h-9 rounded-md border border-border bg-surface text-muted text-sm">
+					<span class="i-mdi:magnify" aria-hidden="true" />
+					<input
+						type="search"
+						value={search()}
+						onInput={(e) => setSearch(e.currentTarget.value)}
+						placeholder="Filter docs..."
+						aria-label="Filter docs"
+						class="bg-transparent outline-none border-none w-full text-foreground placeholder:text-muted"
+					/>
+				</label>
+			</div>
+			<nav class="p-3 pt-2" aria-label="Documentation">
+				<Show when={!docs.loading && grouped().length === 0}>
+					<div class="flex flex-col items-center gap-2 py-10 text-muted text-sm">
+						<span
+							class="i-mdi:file-document-outline text-3xl"
+							aria-hidden="true"
+						/>
+						No docs found
+					</div>
+				</Show>
+				<For each={grouped()}>
+					{([category, items]) => {
+						const meta = () => sectionMeta(category);
+						const collapsedNow = () => isCollapsed(category);
+						return (
+							<div class="mb-4">
+								<button
+									type="button"
+									onClick={() => toggleGroup(category)}
+									aria-expanded={!collapsedNow()}
+									class="w-full flex items-center gap-2 px-2 pb-1 text-[11px] uppercase tracking-wider font-semibold text-muted hover:text-foreground transition-colors cursor-pointer border-none bg-transparent"
+								>
+									<span
+										class={meta()?.icon ?? categoryIcon(category)}
+										aria-hidden="true"
+									/>
+									{meta()?.label ?? category}
+									<span class="ml-auto font-normal">{items.length}</span>
+									<span
+										class={`i-mdi:chevron-down text-xs transition-transform ${collapsedNow() ? "-rotate-90" : ""}`}
+										aria-hidden="true"
+									/>
+								</button>
+								<Show when={!collapsedNow()}>
+									<ul class="list-none m-0 p-0">
+										<For each={items}>
+											{(d) => (
+												<SidebarDocItem
+													doc={d}
+													collection={params().collection ?? ""}
+													activeId={params().docId}
+													onNavigate={props.onNavigate}
+												/>
+											)}
+										</For>
+									</ul>
+								</Show>
+							</div>
+						);
+					}}
+				</For>
+			</nav>
+		</aside>
+	);
+}

package/src/runtime/components/Skeleton.tsx

@@ -0,0 +1,39 @@
+import { For } from "solid-js";
+
+export function SkeletonText(props: { lines?: number; class?: string }) {
+	const lines = () => props.lines ?? 1;
+	return (
+		<div class={`flex flex-col gap-2 ${props.class ?? ""}`}>
+			<For each={Array.from({ length: lines() })}>
+				{(_, i) => (
+					<div
+						class="h-4 rounded bg-skeleton animate-pulse"
+						style={{
+							width: i() === lines() - 1 ? "80%" : "100%",
+						}}
+					/>
+				)}
+			</For>
+		</div>
+	);
+}
+
+export function SkeletonBlock(props: { class?: string }) {
+	return (
+		<div
+			class={`rounded bg-skeleton animate-pulse ${props.class ?? ""}`}
+			aria-busy="true"
+		/>
+	);
+}
+
+export function SkeletonPage() {
+	return (
+		<div class="space-y-6 p-1" aria-busy="true">
+			<SkeletonBlock class="h-8 w-2/3" />
+			<SkeletonText lines={4} />
+			<SkeletonBlock class="h-40 w-full" />
+			<SkeletonText lines={6} />
+		</div>
+	);
+}

package/src/runtime/components/ThemeToggle.tsx

@@ -0,0 +1,26 @@
+import { useTheme } from "../theme";
+
+export function ThemeToggle() {
+	const { theme, toggle } = useTheme();
+
+	return (
+		<button
+			type="button"
+			onClick={toggle}
+			aria-label={
+				theme() === "dark" ? "Switch to light mode" : "Switch to dark mode"
+			}
+			title={
+				theme() === "dark" ? "Switch to light mode" : "Switch to dark mode"
+			}
+			class="w-9 h-9 inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer"
+		>
+			<span
+				class={
+					theme() === "dark" ? "i-mdi:weather-sunny" : "i-mdi:weather-night"
+				}
+				aria-hidden="true"
+			/>
+		</button>
+	);
+}

package/src/runtime/components/TopNav.tsx

@@ -0,0 +1,270 @@
+import { Link, useParams } from "@tanstack/solid-router";
+import { createSignal, For, onMount, Show } from "solid-js";
+import type { SiteLink } from "../config";
+import { useDocs } from "../context";
+import { setTheme, useTheme } from "../theme";
+import { AccentPicker } from "./AccentPicker";
+import { CollectionDropdown } from "./CollectionDropdown";
+import { CustomizeDrawer } from "./CustomizeDrawer";
+import { DocsDropdown } from "./DocsDropdown";
+import { LocaleDropdown } from "./LocaleDropdown";
+import { setSearchOpen } from "./SearchPalette";
+import { ThemeToggle } from "./ThemeToggle";
+import { VersionDropdown } from "./VersionDropdown";
+
+const socialIcons: Record<
+	keyof NonNullable<import("../config").SiteConfig["social"]>,
+	string
+> = {
+	npm: "i-mdi:npm",
+	twitter: "i-mdi:twitter",
+	discord: "i-mdi:discord",
+	youtube: "i-mdi:youtube",
+	mastodon: "i-mdi:mastodon",
+};
+
+function LogoContextMenu(props: {
+	open: boolean;
+	x: number;
+	y: number;
+	onClose: () => void;
+}) {
+	const { theme } = useTheme();
+
+	const items = () => [
+		{
+			label: "Copy page URL",
+			icon: "i-mdi:link",
+			action: () => navigator.clipboard.writeText(location.href),
+		},
+		{
+			label: "Open home",
+			icon: "i-mdi:home",
+			action: () => (location.href = "/"),
+		},
+		{
+			label: `Theme: ${theme()}`,
+			icon: "i-mdi:theme-light-dark",
+			action: () => setTheme(theme() === "dark" ? "light" : "dark"),
+		},
+		{
+			label: "Back to top",
+			icon: "i-mdi:arrow-up",
+			action: () => window.scrollTo({ top: 0, behavior: "smooth" }),
+		},
+		{ label: "Reload", icon: "i-mdi:refresh", action: () => location.reload() },
+	];
+
+	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>
+	);
+}
+
+export function TopNav(props: {
+	onMenuToggle: () => void;
+	onCreateClick?: () => void;
+}) {
+	const params = useParams({ strict: false });
+	const config = useDocs();
+	const [menu, setMenu] = createSignal<{ open: boolean; x: number; y: number }>(
+		{ open: false, x: 0, y: 0 },
+	);
+	const [customizeOpen, setCustomizeOpen] = createSignal(false);
+	const [customNav, setCustomNav] = createSignal<SiteLink[] | null>(null);
+
+	onMount(() => {
+		try {
+			const raw = localStorage.getItem("create-docs:nav");
+			if (raw) setCustomNav(JSON.parse(raw) as SiteLink[]);
+		} catch {
+			// ignore
+		}
+	});
+
+	const socials = () =>
+		Object.entries(config.site.social ?? {}).filter(([, v]) => v) as [
+			keyof typeof socialIcons,
+			string,
+		][];
+	const topNav = () => config.topNav ?? [];
+	const extraNav = () => [
+		...(config.github?.issues
+			? [{ label: "Issues", to: "/issues", icon: "i-mdi:alert-circle-outline" }]
+			: []),
+		...(config.github?.releases
+			? [{ label: "Release", to: "/changelog", icon: "i-mdi:tag" }]
+			: []),
+		...(config.github?.contributors
+			? [{ label: "Community", to: "/community", icon: "i-mdi:account-group" }]
+			: []),
+		...(config.plugins?.length
+			? [{ label: "Plugins", to: "/plugins", icon: "i-mdi:puzzle" }]
+			: []),
+		...(config.showcase?.length
+			? [{ label: "Showcase", to: "/showcase", icon: "i-mdi:view-dashboard" }]
+			: []),
+	];
+
+	const defaultAllNav = () => [...topNav(), ...extraNav()];
+	const allNav = () => customNav() ?? defaultAllNav();
+
+	const handleCustomizeSave = (items: SiteLink[] | null) => {
+		setCustomNav(items);
+		setCustomizeOpen(false);
+	};
+
+	const logoIcon = () => config.site.logo ?? "i-mdi:book-open-page-variant";
+
+	return (
+		<>
+			<header class="sticky top-[var(--docs-banner-height,0px)] z-40 h-14 hidden lg:flex items-center gap-3 px-4 border-b border-border bg-background/95 backdrop-blur">
+				<button
+					type="button"
+					onClick={props.onMenuToggle}
+					aria-label="Toggle sidebar"
+					class="lg:hidden w-9 h-9 inline-flex items-center justify-center rounded-md text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer"
+				>
+					<span class="i-mdi:menu" aria-hidden="true" />
+				</button>
+				<Link
+					to="/"
+					class="inline-flex items-center gap-2 no-underline text-foreground font-semibold text-sm shrink-0"
+					onContextMenu={(e) => {
+						e.preventDefault();
+						setMenu({ open: true, x: e.clientX, y: e.clientY });
+					}}
+				>
+					<span
+						class={`${logoIcon()} text-primary text-lg`}
+						aria-hidden="true"
+					/>
+					{config.site.title}
+				</Link>
+				<div
+					class="w-px h-6 bg-border hidden sm:block shrink-0"
+					aria-hidden="true"
+				/>
+				<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) => (
+							<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="/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>
+
+				<div class="flex items-center gap-1 shrink-0">
+					<Show when={config.features?.search !== false}>
+						<button
+							type="button"
+							onClick={() => 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"
+						>
+							<span class="i-mdi:magnify" aria-hidden="true" />
+							<span class="hidden sm:inline">Search…</span>
+							<kbd class="hidden sm:inline text-[10px] px-1.5 py-0.5 rounded border border-border">
+								Ctrl K
+							</kbd>
+						</button>
+					</Show>
+					<For each={socials()}>
+						{([key, href]) => (
+							<a
+								href={href}
+								target="_blank"
+								rel="noreferrer"
+								aria-label={key}
+								title={key}
+								class="w-9 h-9 hidden sm:inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-surface transition-colors"
+							>
+								<span class={socialIcons[key]} aria-hidden="true" />
+							</a>
+						)}
+					</For>
+					<Show when={config.site.repoUrl}>
+						<a
+							href={config.site.repoUrl}
+							target="_blank"
+							rel="noreferrer"
+							aria-label="GitHub repository"
+							title="GitHub repository"
+							class="w-9 h-9 inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-surface transition-colors"
+						>
+							<span class="i-mdi:github" aria-hidden="true" />
+						</a>
+					</Show>
+					<button
+						type="button"
+						onClick={() => setCustomizeOpen(true)}
+						aria-label="Customize navigation"
+						title="Customize navigation"
+						class="w-9 h-9 inline-flex items-center justify-center rounded-md border border-border text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer"
+					>
+						<span class="i-mdi:tune" aria-hidden="true" />
+					</button>
+					<LocaleDropdown />
+					<VersionDropdown />
+					<AccentPicker />
+					<ThemeToggle />
+				</div>
+				<LogoContextMenu
+					open={menu().open}
+					x={menu().x}
+					y={menu().y}
+					onClose={() => setMenu({ open: false, x: 0, y: 0 })}
+				/>
+			</header>
+			<CustomizeDrawer
+				open={customizeOpen()}
+				available={defaultAllNav()}
+				current={allNav()}
+				onSave={handleCustomizeSave}
+				onClose={() => setCustomizeOpen(false)}
+			/>
+		</>
+	);
+}