@wrikka/create-docs 0.1.0

package/src/runtime/components/Head.tsx

@@ -0,0 +1,225 @@
+import { useParams } from "@tanstack/solid-router";
+import { createEffect } from "solid-js";
+import { useDocs } from "../context";
+import { createDocsList, useCollections } from "../data";
+
+const HEAD_MARKER = "data-docs-head";
+
+function cleanupHead() {
+	for (const el of Array.from(document.querySelectorAll(`[${HEAD_MARKER}]`))) {
+		el.remove();
+	}
+}
+
+function setMeta(name: string, content: string, property = false) {
+	const el = document.createElement("meta");
+	el.setAttribute(HEAD_MARKER, "meta");
+	if (property) {
+		el.setAttribute("property", name);
+	} else {
+		el.setAttribute("name", name);
+	}
+	el.content = content;
+	document.head.appendChild(el);
+}
+
+function setLink(rel: string, href: string, attrs?: Record<string, string>) {
+	if (!href) return;
+	const el = document.createElement("link");
+	el.setAttribute(HEAD_MARKER, "link");
+	el.setAttribute("rel", rel);
+	el.href = href;
+	for (const [k, v] of Object.entries(attrs ?? {})) {
+		el.setAttribute(k, v);
+	}
+	document.head.appendChild(el);
+}
+
+function setJsonLd(payload: unknown) {
+	const id = "docs-json-ld";
+	let script = document.getElementById(id) as HTMLScriptElement | null;
+	if (!script) {
+		script = document.createElement("script");
+		script.id = id;
+		script.type = "application/ld+json";
+		document.head.appendChild(script);
+	}
+	script.textContent = JSON.stringify(payload);
+}
+
+export function Head() {
+	const config = useDocs();
+	const params = useParams({ strict: false });
+	const collections = useCollections();
+	const collection = () => params().collection ?? "";
+	const docId = () => params().docId ?? "";
+	const [docs] = createDocsList(collection);
+
+	createEffect(() => {
+		cleanupHead();
+
+		const site = config.site;
+		const siteUrl = (site.url ?? "").replace(/\/$/, "");
+		const colMeta = collections()?.find((c) => c.id === collection());
+		const docMeta = (docs() ?? []).find((d) => d.id === docId());
+		const docSeo = docMeta?.seo;
+
+		const parts: string[] = [];
+		if (docMeta) parts.push(docSeo?.title ?? docMeta.label);
+		if (colMeta) parts.push(colMeta.label);
+		parts.push(site.title);
+		const title = parts.join(" — ");
+
+		const description =
+			docSeo?.description ||
+			docMeta?.description ||
+			colMeta?.description ||
+			site.description ||
+			"";
+
+		const path = collection()
+			? docId()
+				? `${collection()}/${docId()}`
+				: collection()
+			: "";
+		const canonical = siteUrl ? `${siteUrl}/${path}`.replace(/\/$/, "") : "";
+		const ogImage = docSeo?.image || site.ogImage || `${siteUrl}/og-image.png`;
+
+		const ogType: "article" | "website" =
+			docSeo?.ogType ?? (docMeta ? "article" : "website");
+
+		document.title = title;
+		if (config.i18n?.current) {
+			document.documentElement.lang = config.i18n.current;
+		}
+
+		if (docSeo?.noIndex) {
+			setMeta("robots", "noindex, nofollow");
+		}
+
+		setMeta("description", description);
+		setMeta("og:title", title, true);
+		setMeta("og:description", description, true);
+		setMeta("og:url", canonical, true);
+		setMeta("og:image", ogImage, true);
+		setMeta("og:type", ogType, true);
+		if (docMeta?.publishedAt) {
+			setMeta("article:published_time", docMeta.publishedAt, true);
+		}
+		if (docMeta?.lastUpdated) {
+			setMeta("article:modified_time", docMeta.lastUpdated, true);
+		}
+		if (config.i18n?.current) {
+			setMeta("og:locale", config.i18n.current.replace("-", "_"), true);
+		}
+
+		setMeta("twitter:card", "summary_large_image");
+		setMeta("twitter:title", title);
+		setMeta("twitter:description", description);
+		if (ogImage) setMeta("twitter:image", ogImage);
+		setLink("canonical", canonical);
+
+		if (config.i18n?.list && siteUrl) {
+			for (const locale of config.i18n.list) {
+				const href = locale.url
+					? `${locale.url.replace(/\/$/, "")}/${path}`.replace(/\/$/, "")
+					: `${siteUrl}/${locale.id}/${path}`.replace(/\/$/, "");
+				setLink("alternate", href, { hreflang: locale.id });
+			}
+			setLink("alternate", canonical, { hreflang: "x-default" });
+		}
+
+		if (config.features?.rss !== false) {
+			setLink("alternate", `${siteUrl}/rss.xml`, {
+				type: "application/rss+xml",
+				title: `${site.title} RSS`,
+			});
+		}
+		setLink("alternate", `${siteUrl}/feed.atom`, {
+			type: "application/atom+xml",
+			title: `${site.title} Atom Feed`,
+		});
+		setLink("alternate", `${siteUrl}/feed.json`, {
+			type: "application/feed+json",
+			title: `${site.title} JSON Feed`,
+		});
+		setLink("alternate", `${siteUrl}/llm.txt`, {
+			type: "text/plain",
+			title: `${site.title} LLMs.txt`,
+		});
+		setLink("alternate", `${siteUrl}/llms-plugins.txt`, {
+			type: "text/plain",
+			title: `${site.title} Plugins LLMs.txt`,
+		});
+
+		const schemas: unknown[] = [];
+		schemas.push({
+			"@context": "https://schema.org",
+			"@type": "WebSite",
+			name: site.title,
+			description: site.description || "",
+			url: siteUrl || "/",
+			potentialAction: {
+				"@type": "SearchAction",
+				target: {
+					"@type": "EntryPoint",
+					urlTemplate: `${siteUrl || ""}/?q={search_term_string}`,
+				},
+				"query-input": "required name=search_term_string",
+			},
+		});
+
+		if (docMeta && siteUrl) {
+			const breadcrumb = {
+				"@context": "https://schema.org",
+				"@type": "BreadcrumbList",
+				itemListElement: [
+					{
+						"@type": "ListItem",
+						position: 1,
+						name: site.title,
+						item: siteUrl,
+					},
+					{
+						"@type": "ListItem",
+						position: 2,
+						name: colMeta?.label ?? collection(),
+						item: `${siteUrl}/${collection()}`,
+					},
+					{
+						"@type": "ListItem",
+						position: 3,
+						name: docMeta.label,
+						item: `${siteUrl}/${collection()}/${docMeta.id}`,
+					},
+				],
+			};
+			schemas.push(breadcrumb);
+
+			const article: Record<string, unknown> = {
+				"@context": "https://schema.org",
+				"@type": "TechArticle",
+				headline: docMeta.label,
+				description: docMeta.description,
+				url: `${siteUrl}/${collection()}/${docMeta.id}`,
+				author: {
+					"@type": "Organization",
+					name: site.title,
+				},
+				publisher: {
+					"@type": "Organization",
+					name: site.title,
+					logo: ogImage,
+				},
+			};
+			if (docMeta.publishedAt) article.datePublished = docMeta.publishedAt;
+			if (docMeta.lastUpdated) article.dateModified = docMeta.lastUpdated;
+			if (ogImage) article.image = ogImage;
+			schemas.push(article);
+		}
+
+		setJsonLd(schemas);
+	});
+
+	return null;
+}

package/src/runtime/components/LocaleDropdown.tsx

@@ -0,0 +1,75 @@
+import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { useDocs } from "../context";
+
+export function LocaleDropdown() {
+	const [open, setOpen] = createSignal(false);
+	const config = useDocs();
+	let rootEl: HTMLDivElement | undefined;
+
+	const i18n = () => config.i18n;
+	const current = () => i18n()?.list.find((l) => l.id === i18n()?.current);
+
+	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 (
+		<Show when={(i18n()?.list.length ?? 0) > 1}>
+			<div ref={rootEl} class="relative">
+				<button
+					type="button"
+					onClick={() => setOpen(!open())}
+					aria-expanded={open()}
+					aria-haspopup="listbox"
+					aria-label="Select language"
+					class="inline-flex items-center gap-1.5 px-2.5 h-9 rounded-md border border-border bg-surface text-xs font-medium text-foreground hover:border-focus transition-colors cursor-pointer"
+				>
+					<span class="i-mdi:translate text-muted" aria-hidden="true" />
+					{current()?.label ?? i18n()?.current}
+					<span
+						class={`i-mdi:chevron-down text-muted transition-transform ${open() ? "rotate-180" : ""}`}
+						aria-hidden="true"
+					/>
+				</button>
+				<Show when={open()}>
+					<ul
+						role="listbox"
+						aria-label="Languages"
+						class="absolute right-0 top-full mt-2 min-w-36 rounded-lg border border-border bg-surface shadow-lg py-1 z-50 list-none m-0"
+					>
+						<For each={i18n()?.list ?? []}>
+							{(l) => (
+								<li role="option" aria-selected={l.id === i18n()?.current}>
+									<a
+										href={l.url ?? "/"}
+										hreflang={l.id}
+										onClick={() => setOpen(false)}
+										class={`block px-3 py-2 text-sm no-underline transition-colors hover:bg-background ${
+											l.id === i18n()?.current
+												? "text-primary font-medium"
+												: "text-foreground"
+										}`}
+									>
+										{l.label}
+									</a>
+								</li>
+							)}
+						</For>
+					</ul>
+				</Show>
+			</div>
+		</Show>
+	);
+}

package/src/runtime/components/MobileBottomNav.tsx

@@ -0,0 +1,111 @@
+import { Link, 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 [docsList] = createDocsList(() => "docs");
+	const [apiList] = createDocsList(() => "api");
+	const [showcaseList] = createDocsList(() => "showcase");
+
+	const firstDoc = (list: import("../types").DocEntry[]) => {
+		const idx = list.find((d) => d.id === "index");
+		return idx ? idx.id : list[0]?.id;
+	};
+
+	const items = () => {
+		const c = collections() ?? [];
+		const docsMeta = c.find((x) => x.id === "docs");
+		const apiMeta = c.find((x) => x.id === "api");
+		const showcaseMeta = c.find((x) => x.id === "showcase");
+		const out = [] as {
+			to: string;
+			icon: string;
+			label: string;
+			active?: boolean;
+		}[];
+		out.push({ to: "/", icon: "i-mdi:home", label: "Home" });
+		if (docsMeta) {
+			const docId = firstDoc(docsList() ?? []);
+			out.push({
+				to: docId ? `/${docsMeta.id}/${docId}` : `/${docsMeta.id}`,
+				icon: "i-mdi:book-open-page-variant",
+				label: "Docs",
+			});
+		}
+		if (apiMeta) {
+			const docId = firstDoc(apiList() ?? []);
+			out.push({
+				to: docId ? `/${apiMeta.id}/${docId}` : `/${apiMeta.id}`,
+				icon: "i-mdi:code-json",
+				label: "API",
+			});
+		}
+		if (showcaseMeta) {
+			const docId = firstDoc(showcaseList() ?? []);
+			out.push({
+				to: docId ? `/${showcaseMeta.id}/${docId}` : `/${showcaseMeta.id}`,
+				icon: "i-mdi:view-dashboard",
+				label: "Showcase",
+			});
+		}
+		return out;
+	};
+
+	const active = (to: string) => {
+		const p = params();
+		if (to === "/") return p.collection == null;
+		return p.collection === to.split("/")[1];
+	};
+
+	return (
+		<nav
+			aria-label="Mobile bottom navigation"
+			class="fixed bottom-0 left-0 right-0 z-50 bg-background/95 backdrop-blur border-t border-border lg:hidden pb-[env(safe-area-inset-bottom)]"
+		>
+			<div
+				class="h-16 min-h-16 grid items-center"
+				style={{
+					"grid-template-columns": `repeat(${items().length + 2}, minmax(0, 1fr))`,
+				}}
+			>
+				<For each={items()}>
+					{(item) => (
+						<Link
+							to={item.to}
+							class={`flex flex-col items-center justify-center h-full gap-0.5 text-xs no-underline transition-colors ${
+								active(item.to)
+									? "text-primary"
+									: "text-muted hover:text-foreground"
+							}`}
+						>
+							<span class={`${item.icon} text-xl`} aria-hidden="true" />
+							<span class="scale-90">{item.label}</span>
+						</Link>
+					)}
+				</For>
+				<button
+					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)}
+				>
+					<span class="i-mdi:magnify text-xl" aria-hidden="true" />
+					<span class="scale-90">Search</span>
+				</button>
+				<button
+					type="button"
+					aria-label="Menu"
+					class="flex flex-col items-center justify-center h-full gap-0.5 text-xs text-muted hover:text-foreground transition-colors"
+					onClick={props.onMenuToggle}
+				>
+					<span class="i-mdi:menu text-xl" aria-hidden="true" />
+					<span class="scale-90">Menu</span>
+				</button>
+			</div>
+		</nav>
+	);
+}

package/src/runtime/components/NotFound.tsx

@@ -0,0 +1,139 @@
+import { Link } from "@tanstack/solid-router";
+import { createSignal, For, Show } from "solid-js";
+import { useDocs } from "../context";
+import { useCollections } from "../data";
+import { setSearchOpen } from "./SearchPalette";
+
+export function NotFound() {
+	const config = useDocs();
+	const [search, setSearch] = createSignal("");
+	const collections = useCollections();
+
+	const features = () =>
+		(config.home?.features ?? []).map((f) => ({
+			label: f.title,
+			to: f.link,
+			icon: f.icon ?? "i-mdi:arrow-right",
+		}));
+
+	const extra = () => [
+		...(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 quick = () => {
+		const first = collections()?.[0]?.id;
+		const docsLink = first ? `/${first}` : "/";
+		return [
+			{ label: "Home", to: "/", icon: "i-mdi:home" },
+			{
+				label: "Documentation",
+				to: docsLink,
+				icon: "i-mdi:book-open-page-variant",
+			},
+			...(config.apiCollections?.[0]
+				? [
+						{
+							label: "API reference",
+							to: `/${config.apiCollections[0].id}`,
+							icon: "i-mdi:api",
+						},
+					]
+				: []),
+			...features(),
+			...extra(),
+		];
+	};
+
+	const onSearch = (e: Event) => {
+		e.preventDefault();
+		if (search().trim()) {
+			setSearchOpen(true);
+			// Populate search input if possible through global signal would need wiring;
+			// the palette will show with the current query typed by the user in separate state.
+		} else {
+			setSearchOpen(true);
+		}
+	};
+
+	return (
+		<div class="min-h-[70vh] flex flex-col items-center justify-center text-center px-6 py-20">
+			<span
+				class="i-mdi:robot-confused text-7xl text-primary/80 mb-6"
+				aria-hidden="true"
+			/>
+			<h1 class="text-5xl font-bold text-foreground mb-3">404</h1>
+			<p class="text-lg text-muted mb-2">This page is lost in hyperspace.</p>
+			<p class="text-sm text-muted mb-8 max-w-md">
+				The page you are looking for does not exist or has been moved.
+			</p>
+
+			<form
+				onSubmit={onSearch}
+				class="w-full max-w-sm flex items-center gap-2 px-3 h-11 rounded-lg border border-border bg-surface mb-8 focus-within:border-focus"
+			>
+				<span class="i-mdi:magnify text-muted" aria-hidden="true" />
+				<input
+					type="search"
+					value={search()}
+					onInput={(e) => setSearch(e.currentTarget.value)}
+					placeholder="Search docs…"
+					class="bg-transparent outline-none border-none flex-1 text-sm text-foreground placeholder:text-muted"
+				/>
+				<button
+					type="submit"
+					class="text-sm text-primary font-medium hover:underline"
+				>
+					Search
+				</button>
+			</form>
+
+			<div class="flex flex-wrap gap-3 justify-center mb-8">
+				<For each={quick()}>
+					{(item) => (
+						<Link
+							to={item.to}
+							class="px-4 h-10 inline-flex items-center gap-2 rounded-lg border border-border text-foreground no-underline hover:bg-surface transition-colors"
+						>
+							<span class={item.icon} aria-hidden="true" />
+							{item.label}
+						</Link>
+					)}
+				</For>
+			</div>
+
+			<div class="flex flex-wrap gap-3 justify-center">
+				<Link
+					to="/"
+					class="px-5 h-11 inline-flex items-center rounded-lg bg-primary text-primary-foreground no-underline font-medium hover:bg-primary-hover transition-colors"
+				>
+					Back home
+				</Link>
+				<Show when={config.site.repoUrl}>
+					<a
+						href={`${config.site.repoUrl}/issues`}
+						target="_blank"
+						rel="noreferrer"
+						class="px-5 h-11 inline-flex items-center gap-2 rounded-lg border border-border text-foreground no-underline hover:bg-surface transition-colors"
+					>
+						<span class="i-mdi:github" aria-hidden="true" />
+						Report an issue
+					</a>
+				</Show>
+			</div>
+		</div>
+	);
+}

package/src/runtime/components/PageActions.tsx

@@ -0,0 +1,144 @@
+import { Link } from "@tanstack/solid-router";
+import { createSignal, Show } from "solid-js";
+import { useDocs } from "../context";
+import { useCollections } from "../data";
+import type { DocEntry } from "../types";
+
+export function PageActions(props: {
+	collection: string;
+	doc: DocEntry;
+	source: string;
+}) {
+	const [copied, setCopied] = createSignal(false);
+	const collections = useCollections();
+	const config = useDocs();
+	const branch = () => config.github?.branch ?? "main";
+	const repoUrl = () => config.site.repoUrl;
+	const collectionRepo = () =>
+		collections()?.find((c) => c.id === props.collection)?.repoUrl;
+
+	const effectiveRepo = () => collectionRepo() ?? repoUrl() ?? "";
+	const gitPath = () =>
+		props.doc.path || `${props.collection}/${props.doc.id}.md`;
+
+	const copyMarkdown = async () => {
+		try {
+			await navigator.clipboard.writeText(props.source);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1500);
+		} catch {
+			// ignore
+		}
+	};
+
+	const editUrl = () => `${effectiveRepo()}/edit/${branch()}/${gitPath()}`;
+	const viewUrl = () => `${effectiveRepo()}/blob/${branch()}/${gitPath()}`;
+	const reportUrl = () =>
+		`${effectiveRepo()}/issues/new?title=docs(${props.doc.id}): &body=Issue on page ${props.collection}/${props.doc.id}`;
+	const prUrl = () =>
+		`${effectiveRepo()}/compare/${branch()}?quick_pull=1&title=docs(${props.doc.id}): `;
+
+	const aiPrompt = () => {
+		const title = props.doc.label || `${props.collection}/${props.doc.id}`;
+		return `Please review the following documentation page titled "${title}" and summarize the key points, suggest improvements, and answer any questions the user may have:\n\n${props.source}`;
+	};
+	const chatGptUrl = () =>
+		`https://chat.openai.com/?q=${encodeURIComponent(aiPrompt())}`;
+	const claudeUrl = () =>
+		`https://claude.ai/chat?q=${encodeURIComponent(aiPrompt())}`;
+
+	return (
+		<div class="flex items-center gap-2 flex-wrap">
+			<button
+				type="button"
+				onClick={copyMarkdown}
+				class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors cursor-pointer bg-transparent"
+			>
+				<span
+					class={copied() ? "i-mdi:check text-success" : "i-mdi:content-copy"}
+					aria-hidden="true"
+				/>
+				{copied() ? "Copied" : "Copy"}
+			</button>
+			<a
+				href={`/docs/${props.collection}/${props.doc.id}.md`}
+				target="_blank"
+				rel="noreferrer"
+				class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+			>
+				<span class="i-mdi:language-markdown-outline" aria-hidden="true" />
+				View .md
+			</a>
+			<a
+				href={chatGptUrl()}
+				target="_blank"
+				rel="noreferrer"
+				title="Open in ChatGPT"
+				class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+			>
+				<span class="i-mdi:robot-outline" aria-hidden="true" />
+				ChatGPT
+			</a>
+			<a
+				href={claudeUrl()}
+				target="_blank"
+				rel="noreferrer"
+				title="Open in Claude"
+				class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+			>
+				<span class="i-mdi:sparkles" aria-hidden="true" />
+				Claude
+			</a>
+			<Link
+				to="/edit/$collection/$docId"
+				params={{ collection: props.collection, docId: props.doc.id }}
+				class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+			>
+				<span class="i-mdi:pencil-box" aria-hidden="true" />
+				Edit local
+			</Link>
+			<Show when={effectiveRepo()}>
+				<a
+					href={editUrl()}
+					target="_blank"
+					rel="noreferrer"
+					class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+				>
+					<span class="i-mdi:pencil-outline" aria-hidden="true" />
+					Edit
+				</a>
+				<a
+					href={viewUrl()}
+					target="_blank"
+					rel="noreferrer"
+					class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+				>
+					<span class="i-mdi:github" aria-hidden="true" />
+					Source
+				</a>
+				<Show when={config.features?.reportIssue !== false}>
+					<a
+						href={reportUrl()}
+						target="_blank"
+						rel="noreferrer"
+						class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+					>
+						<span class="i-mdi:alert-circle-outline" aria-hidden="true" />
+						Report
+					</a>
+				</Show>
+				<Show when={config.features?.openPR}>
+					<a
+						href={prUrl()}
+						target="_blank"
+						rel="noreferrer"
+						class="inline-flex items-center gap-1.5 px-2.5 h-8 rounded-md border border-border text-xs text-muted hover:text-foreground hover:bg-surface transition-colors no-underline"
+					>
+						<span class="i-mdi:source-pull" aria-hidden="true" />
+						PR
+					</a>
+				</Show>
+			</Show>
+		</div>
+	);
+}