@wrikka/create-docs 0.1.0

package/src/runtime/components/RelatedDocs.tsx

@@ -0,0 +1,50 @@
+import { Link, useParams } from "@tanstack/solid-router";
+import { For, Show } from "solid-js";
+import { relatedDocs } from "../content";
+import { createDocsList } from "../data";
+
+export function RelatedDocs(props: {
+	currentId: string;
+	currentTags?: string[];
+}) {
+	const params = useParams({ strict: false });
+	const collection = () => params().collection ?? "";
+	const [docs] = createDocsList(collection);
+
+	const related = () => {
+		const list = docs() ?? [];
+		const current = list.find((d) => d.id === props.currentId);
+		if (!current) return [];
+		return relatedDocs(list, current, 4);
+	};
+
+	return (
+		<Show when={related().length > 0}>
+			<div class="border-t border-border pt-6 mt-10">
+				<h3 class="text-sm font-semibold uppercase tracking-wider text-muted mb-3">
+					Related docs
+				</h3>
+				<ul class="grid gap-2 sm:grid-cols-2">
+					<For each={related()}>
+						{(doc) => (
+							<li>
+								<Link
+									to="/$collection/$docId"
+									params={{ collection: collection(), docId: doc.id }}
+									class="block p-3 rounded-md border border-border bg-surface hover:border-focus transition-colors no-underline text-sm text-foreground"
+								>
+									<div class="font-medium">{doc.label}</div>
+									<Show when={doc.description}>
+										<div class="text-xs text-muted truncate">
+											{doc.description}
+										</div>
+									</Show>
+								</Link>
+							</li>
+						)}
+					</For>
+				</ul>
+			</div>
+		</Show>
+	);
+}

package/src/runtime/components/ScrollProgress.tsx

@@ -0,0 +1,32 @@
+import { createEffect, createSignal, onCleanup } from "solid-js";
+
+export function ScrollProgress() {
+	const [progress, setProgress] = createSignal(0);
+
+	createEffect(() => {
+		const onScroll = () => {
+			const h = document.documentElement;
+			const scrollTop = h.scrollTop || document.body.scrollTop;
+			const scrollHeight = h.scrollHeight - h.clientHeight;
+			setProgress(
+				scrollHeight > 0 ? Math.min(100, (scrollTop / scrollHeight) * 100) : 0,
+			);
+		};
+
+		onScroll();
+		window.addEventListener("scroll", onScroll, { passive: true });
+		onCleanup(() => window.removeEventListener("scroll", onScroll));
+	});
+
+	return (
+		<div
+			class="fixed top-0 left-0 right-0 h-0.5 z-[60] bg-transparent"
+			aria-hidden="true"
+		>
+			<div
+				class="h-full bg-primary transition-[width] duration-150"
+				style={{ width: `${progress()}%` }}
+			/>
+		</div>
+	);
+}

package/src/runtime/components/SearchPalette.tsx

@@ -0,0 +1,333 @@
+import { useNavigate, useParams } from "@tanstack/solid-router";
+import {
+	createEffect,
+	createResource,
+	createSignal,
+	For,
+	Show,
+} from "solid-js";
+import { useDocs } from "../context";
+import { searchDocs, useCollections } from "../data";
+import { setTheme, useTheme } from "../theme";
+
+export const [searchOpen, setSearchOpen] = createSignal(false);
+
+type SearchItem =
+	| {
+			type: "doc";
+			collection: string;
+			id: string;
+			title: string;
+			snippet?: string;
+	  }
+	| { type: "cmd"; id: string; title: string; icon: string; run: () => void };
+
+export function SearchPalette() {
+	const navigate = useNavigate();
+	const params = useParams({ strict: false });
+	const collections = useCollections();
+	const config = useDocs();
+	const [query, setQuery] = createSignal("");
+	const [selected, setSelected] = createSignal(0);
+	const { theme } = useTheme();
+	let inputEl: HTMLInputElement | undefined;
+
+	const commands = (): SearchItem[] => [
+		{
+			type: "cmd",
+			id: "home",
+			title: "Go to home",
+			icon: "i-mdi:home",
+			run: () => navigate({ to: "/" }),
+		},
+		{
+			type: "cmd",
+			id: "theme",
+			title: `Switch to ${theme() === "dark" ? "light" : "dark"} theme`,
+			icon: "i-mdi:theme-light-dark",
+			run: () => setTheme(theme() === "dark" ? "light" : "dark"),
+		},
+		{
+			type: "cmd",
+			id: "copy-url",
+			title: "Copy page URL",
+			icon: "i-mdi:link",
+			run: () => navigator.clipboard.writeText(location.href),
+		},
+		{
+			type: "cmd",
+			id: "edit",
+			title: "Edit this page",
+			icon: "i-mdi:pencil-box",
+			run: () =>
+				navigate({
+					to: "/edit/$collection/$docId",
+					params: {
+						collection: params().collection ?? "docs",
+						docId: params().docId ?? "index",
+					},
+				}),
+		},
+		{
+			type: "cmd",
+			id: "github",
+			title: "Open GitHub repository",
+			icon: "i-mdi:github",
+			run: () => window.open(config.site.repoUrl, "_blank"),
+		},
+	];
+
+	const [results] = createResource(query, async (q) => {
+		const term = q.trim();
+		if (!term || term.length < 2) return [];
+		return searchDocs(config, term);
+	});
+
+	const filteredCommands = (): SearchItem[] => {
+		const q = query().trim().toLowerCase();
+		if (!q) return commands();
+		if (q.startsWith(">"))
+			return commands().filter(
+				(c) => c.type === "cmd" && c.title.toLowerCase().includes(q.slice(1)),
+			);
+		return commands().filter(
+			(c) => c.type === "cmd" && c.title.toLowerCase().includes(q),
+		);
+	};
+
+	const docItems = (): SearchItem[] =>
+		(results() ?? []).map((r) => ({
+			type: "doc",
+			collection: r.collection,
+			id: r.id,
+			title: r.title,
+			snippet: r.snippet,
+		}));
+
+	const items = (): SearchItem[] => {
+		if (query().trim().length < 2) return filteredCommands();
+		return [...filteredCommands(), ...docItems()];
+	};
+
+	createEffect(() => {
+		if (searchOpen()) {
+			setQuery("");
+			setSelected(0);
+			queueMicrotask(() => inputEl?.focus());
+		}
+	});
+
+	const run = (index: number) => {
+		const item = items()[index];
+		if (!item) return;
+		if (item.type === "cmd") {
+			setSearchOpen(false);
+			item.run();
+		} else {
+			setSearchOpen(false);
+			navigate({
+				to: "/$collection/$docId",
+				params: { collection: item.collection, docId: item.id },
+			});
+		}
+	};
+
+	const onKey = (e: KeyboardEvent) => {
+		if (e.key === "Escape") setSearchOpen(false);
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			setSelected((i) => Math.min(i + 1, items().length - 1));
+		}
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			setSelected((i) => Math.max(i - 1, 0));
+		}
+		if (e.key === "Enter") run(selected());
+	};
+
+	const collectionLabel = (id: string) =>
+		collections()?.find((c) => c.id === id)?.label ?? id;
+
+	const cmdDescriptions: Record<string, string> = {
+		home: "Navigate back to the documentation home page.",
+		theme: "Toggle between the light and dark color schemes.",
+		"copy-url": "Copy the current page URL to your clipboard.",
+		edit: "Open the markdown editor for the current page.",
+		github: "Open this site's GitHub repository in a new tab.",
+	};
+
+	const selectedItem = (): SearchItem | undefined => items()[selected()];
+
+	const stripMarkdown = (md: string) =>
+		md
+			.replace(/```[\s\S]*?```/g, " [code block] ")
+			.replace(/!\[[^\]]*\]\([^)]*\)/g, "")
+			.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+			.replace(/^#{1,6}\s+/gm, "")
+			.replace(/^>\s?/gm, "")
+			.replace(/[*_`~]/g, "")
+			.replace(/\n{3,}/g, "\n\n")
+			.trim();
+
+	const [preview] = createResource(
+		() => {
+			if (!searchOpen()) return null;
+			const it = selectedItem();
+			return it?.type === "doc"
+				? { collection: it.collection, id: it.id }
+				: null;
+		},
+		async (sel) => {
+			try {
+				const c = await config.dataSource.get(sel.collection, sel.id);
+				return stripMarkdown(c.content ?? "").slice(0, 1200);
+			} catch {
+				return "";
+			}
+		},
+	);
+
+	return (
+		<Show when={searchOpen()}>
+			<div
+				class="fixed inset-0 z-50 bg-overlay flex items-start justify-center pt-24 px-4"
+				onClick={(e) => {
+					if (e.target === e.currentTarget) setSearchOpen(false);
+				}}
+				onKeyDown={onKey}
+				role="presentation"
+			>
+				<div class="w-full max-w-3xl rounded-lg border border-border bg-surface shadow-2xl overflow-hidden">
+					<div class="flex items-center gap-2 px-4 border-b border-border">
+						<span class="i-mdi:magnify text-muted" aria-hidden="true" />
+						<input
+							ref={inputEl}
+							type="text"
+							value={query()}
+							onInput={(e) => {
+								setQuery(e.currentTarget.value);
+								setSelected(0);
+							}}
+							placeholder="Search docs or type '>' for commands..."
+							aria-label="Search documentation and commands"
+							class="flex-1 h-12 bg-transparent border-none outline-none text-sm text-foreground placeholder:text-muted"
+						/>
+						<kbd class="text-[10px] px-1.5 py-0.5 rounded border border-border text-muted">
+							ESC
+						</kbd>
+					</div>
+					<div class="grid grid-cols-1 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+						<div class="max-h-80 overflow-y-auto">
+							<Show when={results.loading}>
+								<div class="px-4 py-6 text-sm text-muted text-center">
+									Searching…
+								</div>
+							</Show>
+							<Show
+								when={
+									!results.loading &&
+									query().trim().length >= 2 &&
+									docItems().length === 0
+								}
+							>
+								<div class="px-4 py-6 text-sm text-muted text-center">
+									No document results for "{query()}"
+								</div>
+							</Show>
+							<ul class="list-none m-0 p-1">
+								<For each={items()}>
+									{(item, i) => (
+										<li>
+											<button
+												type="button"
+												onClick={() => run(i())}
+												onMouseEnter={() => setSelected(i())}
+												class={`w-full text-left px-3 py-2 rounded-md cursor-pointer border-none transition-colors ${
+													selected() === i()
+														? "bg-primary/10"
+														: "bg-transparent"
+												}`}
+											>
+												<div class="flex items-center gap-2">
+													<span
+														class={`${item.type === "cmd" ? item.icon : "i-mdi:file-document-outline"} text-muted shrink-0`}
+														aria-hidden="true"
+													/>
+													<span class="text-sm font-medium text-foreground truncate">
+														{item.title}
+													</span>
+													<Show when={item.type === "doc"}>
+														<span class="ml-auto text-[10px] uppercase tracking-wide text-muted shrink-0">
+															{item.type === "doc" &&
+																collectionLabel(item.collection)}
+														</span>
+													</Show>
+												</div>
+												<Show when={item.type === "doc" && item.snippet}>
+													<p class="text-xs text-muted m-0 mt-0.5 pl-6 truncate">
+														{item.type === "doc" && item.snippet}
+													</p>
+												</Show>
+											</button>
+										</li>
+									)}
+								</For>
+							</ul>
+						</div>
+						<div class="hidden md:block border-l border-border max-h-80 overflow-y-auto bg-background/40">
+							{(() => {
+								const it = selectedItem();
+								if (it?.type === "doc") {
+									return (
+										<div class="p-4">
+											<div class="flex items-center gap-2 mb-1">
+												<span class="text-[10px] uppercase tracking-wide text-muted">
+													{collectionLabel(it.collection)}
+												</span>
+											</div>
+											<h3 class="text-sm font-semibold text-foreground m-0 mb-2">
+												{it.title}
+											</h3>
+											<p class="text-xs text-muted leading-relaxed whitespace-pre-wrap m-0">
+												{preview.loading
+													? "Loading preview…"
+													: preview() || it.snippet || "No preview available."}
+											</p>
+										</div>
+									);
+								}
+								return (
+									<div class="p-4">
+										<div class="flex items-center gap-2 mb-2 text-foreground">
+											<span
+												class={`${it?.type === "cmd" ? it.icon : "i-mdi:information-outline"} text-primary`}
+												aria-hidden="true"
+											/>
+											<span class="text-sm font-semibold">
+												{it?.title ?? "Preview"}
+											</span>
+										</div>
+										<p class="text-xs text-muted leading-relaxed m-0">
+											{it?.type === "cmd"
+												? (cmdDescriptions[it.id] ?? "Run this command.")
+												: "Select a result to preview it here."}
+										</p>
+									</div>
+								);
+							})()}
+						</div>
+					</div>
+					<div class="flex items-center gap-3 px-4 py-2 border-t border-border text-[10px] text-muted">
+						<span>
+							<kbd class="px-1 rounded border border-border">↑↓</kbd> navigate
+						</span>
+						<span>
+							<kbd class="px-1 rounded border border-border">↵</kbd> open
+						</span>
+						<span class="ml-auto">{items().length} results</span>
+					</div>
+				</div>
+			</div>
+		</Show>
+	);
+}

package/src/runtime/components/ShowcaseCard.tsx

@@ -0,0 +1,87 @@
+import { Link } from "@tanstack/solid-router";
+import { createResource, For, Show } from "solid-js";
+import { useDocs } from "../context";
+import type { DocEntry } from "../types";
+
+function makePreview(content: string, length = 140) {
+	const text = content
+		.replace(/<[^>]+>/g, " ")
+		.replace(/[#*_`[\]()]/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+	return text.length > length ? `${text.slice(0, length)}…` : text;
+}
+
+export function ShowcaseCard(props: { collection: string; doc: DocEntry }) {
+	const config = useDocs();
+	const [detail] = createResource(
+		() => ({ collection: props.collection, id: props.doc.id }),
+		async ({ collection, id }) => config.dataSource.get(collection, id),
+	);
+
+	const preview = () => {
+		if (props.doc.description) return props.doc.description;
+		const d = detail();
+		return d ? makePreview(d.content ?? "") : "";
+	};
+
+	const image = () => detail()?.frontmatter?.seo?.image;
+	const tags = () =>
+		(props.doc.tags?.length ? props.doc.tags : detail()?.frontmatter?.tags) ??
+		[];
+
+	return (
+		<Link
+			to="/$collection/$docId"
+			params={{ collection: props.collection, docId: props.doc.id }}
+			class="group flex flex-col border border-border rounded-xl bg-surface/30 overflow-hidden no-underline hover:border-focus transition-colors"
+		>
+			<div class="h-40 bg-surface border-b border-border flex items-center justify-center overflow-hidden relative">
+				<Show
+					when={image()}
+					fallback={
+						<span
+							class={`${props.doc.icon ?? "i-mdi:view-dashboard"} text-5xl text-primary/60 group-hover:text-primary transition-colors`}
+							aria-hidden="true"
+						/>
+					}
+				>
+					{(src) => (
+						<img
+							src={src() as string}
+							alt={props.doc.label}
+							class="w-full h-full object-cover group-hover:scale-105 transition-transform"
+							loading="lazy"
+						/>
+					)}
+				</Show>
+			</div>
+			<div class="p-5 flex flex-col flex-1">
+				<div class="flex items-center gap-2 mb-2">
+					<h2 class="font-semibold text-foreground m-0 flex-1 min-w-0 truncate">
+						{props.doc.label}
+					</h2>
+					<Show when={props.doc.badge}>
+						<span class="text-[10px] px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+							{props.doc.badge}
+						</span>
+					</Show>
+				</div>
+				<p class="text-sm text-muted m-0 mb-3 flex-1 leading-relaxed">
+					{preview()}
+				</p>
+				<Show when={tags().length > 0}>
+					<div class="flex flex-wrap gap-1 mt-auto">
+						<For each={tags().slice(0, 4)}>
+							{(tag) => (
+								<span class="text-[10px] px-1.5 py-0.5 rounded bg-background border border-border text-muted">
+									{tag}
+								</span>
+							)}
+						</For>
+					</div>
+				</Show>
+			</div>
+		</Link>
+	);
+}