@wrikka/create-docs 0.1.0

package/src/runtime/seo.ts

@@ -0,0 +1,192 @@
+import type { CollectionMeta, DocEntry } from "./types";
+
+export interface SeoInput {
+	site: { title: string; description?: string; url?: string };
+	collections: CollectionMeta[];
+	docs: Map<string, DocEntry[]>;
+}
+
+function escapeXml(text?: string | null) {
+	if (text == null) return "";
+	return text
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&apos;");
+}
+
+export function generateSitemap(input: SeoInput): string {
+	const baseUrl = (input.site.url ?? "").replace(/\/$/, "");
+	const urls: string[] = [];
+	if (baseUrl) {
+		urls.push(`${baseUrl}/`);
+		for (const collection of input.collections) {
+			urls.push(`${baseUrl}/${collection.id}`);
+			const docs = input.docs.get(collection.id) ?? [];
+			for (const doc of docs) {
+				urls.push(`${baseUrl}/${collection.id}/${doc.id}`);
+			}
+		}
+	}
+	const entries = urls
+		.map(
+			(url) => `	<url>
+		<loc>${escapeXml(url)}</loc>
+		<changefreq>weekly</changefreq>
+		<priority>0.7</priority>
+	</url>`,
+		)
+		.join("\n");
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${entries}
+</urlset>`;
+}
+
+export function generateRobots(siteUrl?: string): string {
+	const sitemap = siteUrl
+		? `\nSitemap: ${siteUrl.replace(/\/$/, "")}/sitemap.xml`
+		: "";
+	return `User-agent: *\nAllow: /${sitemap}`;
+}
+
+export function generateRss(input: SeoInput): string {
+	const baseUrl = (input.site.url ?? "").replace(/\/$/, "");
+	const items: string[] = [];
+	for (const collection of input.collections) {
+		const docs = input.docs.get(collection.id) ?? [];
+		for (const doc of docs) {
+			if (!baseUrl) continue;
+			const link = `${baseUrl}/${collection.id}/${doc.id}`;
+			items.push(`		<item>
+			<title>${escapeXml(doc.label)}</title>
+			<link>${escapeXml(link)}</link>
+			<description>${escapeXml(doc.description || doc.label)}</description>
+			<guid>${escapeXml(link)}</guid>
+		</item>`);
+		}
+	}
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+	<channel>
+		<title>${escapeXml(input.site.title)}</title>
+		<link>${escapeXml(baseUrl || "/")}</link>
+		<description>${escapeXml(input.site.description || input.site.title)}</description>
+		<language>en</language>
+		${items.join("\n")}
+	</channel>
+</rss>`;
+}
+
+export function generateAtom(input: SeoInput): string {
+	const baseUrl = (input.site.url ?? "").replace(/\/$/, "");
+	const updated = new Date().toISOString();
+	const items: string[] = [];
+	for (const collection of input.collections) {
+		const docs = input.docs.get(collection.id) ?? [];
+		for (const doc of docs) {
+			if (!baseUrl) continue;
+			const link = `${baseUrl}/${collection.id}/${doc.id}`;
+			const date = doc.lastUpdated ?? updated;
+			items.push(`		<entry>
+			<title>${escapeXml(doc.label)}</title>
+			<link href="${escapeXml(link)}" />
+			<id>${escapeXml(link)}</id>
+			<updated>${escapeXml(date)}</updated>
+			<summary>${escapeXml(doc.description || doc.label)}</summary>
+		</entry>`);
+		}
+	}
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+	<title>${escapeXml(input.site.title)}</title>
+	<link href="${escapeXml(baseUrl || "/")}" />
+	<updated>${escapeXml(updated)}</updated>
+	<id>${escapeXml(baseUrl || "/")}</id>
+	${items.join("\n")}
+</feed>`;
+}
+
+export function generateJsonFeed(input: SeoInput): string {
+	const baseUrl = (input.site.url ?? "").replace(/\/$/, "");
+	const items = [];
+	for (const collection of input.collections) {
+		const docs = input.docs.get(collection.id) ?? [];
+		for (const doc of docs) {
+			if (!baseUrl) continue;
+			const link = `${baseUrl}/${collection.id}/${doc.id}`;
+			items.push({
+				id: link,
+				title: doc.label,
+				content_text: doc.description || doc.label,
+				url: link,
+				date_published: doc.publishedAt ?? doc.lastUpdated,
+			});
+		}
+	}
+	return JSON.stringify(
+		{
+			version: "https://jsonfeed.org/version/1.1",
+			title: input.site.title,
+			home_page_url: baseUrl || "/",
+			feed_url: `${baseUrl}/feed.json`,
+			items,
+		},
+		null,
+		2,
+	);
+}
+
+export interface PluginInfo {
+	name: string;
+	description?: string;
+	install?: string;
+	url?: string;
+}
+
+export function generatePluginsLlmsTxt(
+	plugins: PluginInfo[],
+	siteTitle?: string,
+): string {
+	const lines: string[] = [
+		`# ${siteTitle ? `${siteTitle} — ` : ""}Plugins`,
+		"",
+		"Available plugins and integrations.",
+		"",
+		"## Plugins",
+	];
+	for (const p of plugins) {
+		lines.push(`- **${p.name}**`);
+		if (p.description) lines.push(`  - ${p.description}`);
+		if (p.url) lines.push(`  - URL: ${p.url}`);
+		if (p.install) lines.push(`  - Install: \`${p.install}\``);
+	}
+	if (plugins.length === 0) lines.push("- No plugins configured.");
+	return lines.join("\n");
+}
+
+export function generateLlmsTxt(input: SeoInput): string {
+	const baseUrl = (input.site.url ?? "").replace(/\/$/, "");
+	const lines: string[] = [
+		`# ${input.site.title}`,
+		"",
+		input.site.description || "",
+		"",
+		"## Documentation",
+	];
+	for (const collection of input.collections) {
+		const label = collection.label || collection.id;
+		lines.push(`- ${label}`);
+		const docs = input.docs.get(collection.id) ?? [];
+		for (const doc of docs) {
+			const link = baseUrl
+				? `${baseUrl}/${collection.id}/${doc.id}`
+				: `/${collection.id}/${doc.id}`;
+			lines.push(
+				`  - [${doc.label}](${link}): ${doc.description || doc.label}`,
+			);
+		}
+	}
+	return lines.join("\n");
+}

package/src/runtime/theme.css

@@ -0,0 +1,175 @@
+:root {
+	/* Design tokens — light mode (HSL) */
+	--color-primary: 142 60% 45%;
+	--color-primary-hover: 142 60% 38%;
+	--color-primary-active: 142 60% 32%;
+	--color-primary-foreground: 0 0% 100%;
+	--color-secondary: 217 91% 60%;
+	--color-success: 142 76% 36%;
+	--color-warning: 38 92% 45%;
+	--color-destructive: 0 84% 55%;
+	--color-background: 0 0% 100%;
+	--color-foreground: 222 20% 12%;
+	--color-surface: 220 14% 96%;
+	--color-muted: 220 9% 46%;
+	--color-accent: 217 91% 55%;
+	--color-border: 220 13% 88%;
+	--color-focus: 142 60% 45%;
+	--color-overlay: 222 20% 12% / 0.4;
+	--color-skeleton: 220 13% 91%;
+
+	/* Legacy content vars — light */
+	--rt-bg: #f6f8fa;
+	--rt-bg-alt: #eef1f5;
+	--rt-panel: #ffffff;
+	--rt-border: #d9dee6;
+	--rt-border-focus: #2ea043;
+	--rt-fg: #1c2330;
+	--rt-fg-dim: #5b6577;
+	--rt-accent: #2ea043;
+	--rt-accent-2: #1f6feb;
+	--rt-warn: #9a6700;
+	--rt-danger: #cf222e;
+	--rt-shadow: 0 4px 24px rgba(28, 35, 48, 0.12);
+	--rt-radius: 8px;
+	--rt-font-mono:
+		"Cascadia Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
+		Consolas, monospace;
+	color-scheme: light;
+}
+
+.dark {
+	/* Design tokens — dark mode (HSL) */
+	--color-primary: 140 60% 66%;
+	--color-primary-hover: 140 60% 58%;
+	--color-primary-active: 140 60% 50%;
+	--color-primary-foreground: 222 47% 6%;
+	--color-secondary: 207 100% 67%;
+	--color-success: 142 76% 45%;
+	--color-warning: 43 90% 59%;
+	--color-destructive: 0 100% 71%;
+	--color-background: 222 33% 5%;
+	--color-foreground: 214 22% 92%;
+	--color-surface: 220 26% 10%;
+	--color-muted: 220 12% 60%;
+	--color-accent: 207 100% 67%;
+	--color-border: 220 18% 19%;
+	--color-focus: 140 60% 66%;
+	--color-overlay: 0 0% 0% / 0.55;
+	--color-skeleton: 220 15% 18%;
+
+	/* Legacy content vars — dark */
+	--rt-bg: #080a0f;
+	--rt-bg-alt: #0d1016;
+	--rt-panel: #0f1319;
+	--rt-border: #232a36;
+	--rt-border-focus: #7ee787;
+	--rt-fg: #e3e8ef;
+	--rt-fg-dim: #8b95a7;
+	--rt-accent: #7ee787;
+	--rt-accent-2: #56b6ff;
+	--rt-warn: #f2c14e;
+	--rt-danger: #ff6b6b;
+	--rt-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
+	color-scheme: dark;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	background: hsl(var(--color-background));
+	color: hsl(var(--color-foreground));
+	font-family:
+		-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
+		Arial, sans-serif;
+	line-height: 1.6;
+	transition:
+		background 0.15s ease,
+		color 0.15s ease;
+}
+
+#root {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+@keyframes docs-page-enter {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.docs-page-enter {
+	animation: docs-page-enter 0.18s ease-out;
+}
+
+a {
+	color: hsl(var(--color-accent));
+}
+
+button {
+	font-family: inherit;
+}
+
+:focus-visible {
+	outline: 2px solid hsl(var(--color-focus));
+	outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+@media print {
+	aside,
+	footer,
+	header,
+	nav,
+	.rt-toc,
+	.rt-code-copy,
+	.scroll-progress,
+	.back-to-top {
+		display: none !important;
+	}
+
+	body {
+		background: #fff;
+		color: #000;
+	}
+
+	a {
+		color: #000;
+		text-decoration: underline;
+	}
+
+	pre,
+	code,
+	blockquote,
+	img,
+	table,
+	figure {
+		page-break-inside: avoid;
+	}
+}

package/src/runtime/theme.ts

@@ -0,0 +1,224 @@
+import { createEffect, createSignal } from "solid-js";
+
+type Theme = "dark" | "light";
+
+const stored = globalThis.localStorage?.getItem("theme");
+const initial: Theme = stored === "light" ? "light" : "dark";
+
+const [theme, setThemeSignal] = createSignal<Theme>(initial);
+
+/** A daily accent — one per weekday (index 0 = Sunday). */
+export interface DailyAccent {
+	name: string;
+	day: string;
+	/** Primary HSL triples */
+	light: string;
+	lightHover: string;
+	lightActive: string;
+	dark: string;
+	darkHover: string;
+	darkActive: string;
+	/** Foreground on the accent */
+	lightFg: string;
+	darkFg: string;
+	/** Legacy content-accent hex values used by markdown content. */
+	rtLight: string;
+	rtDark: string;
+	/** Swatch hex shown in the accent picker. */
+	swatch: string;
+}
+
+export const DAILY_ACCENTS: DailyAccent[] = [
+	{
+		name: "Sunday Red",
+		day: "Sun",
+		light: "0 72% 45%",
+		lightHover: "0 72% 38%",
+		lightActive: "0 72% 32%",
+		dark: "0 90% 68%",
+		darkHover: "0 90% 60%",
+		darkActive: "0 90% 54%",
+		lightFg: "0 0% 100%",
+		darkFg: "0 60% 10%",
+		rtLight: "#c81e1e",
+		rtDark: "#ff7b72",
+		swatch: "#e5484d",
+	},
+	{
+		name: "Monday Amber",
+		day: "Mon",
+		light: "28 95% 42%",
+		lightHover: "28 95% 36%",
+		lightActive: "28 95% 30%",
+		dark: "38 95% 60%",
+		darkHover: "38 95% 54%",
+		darkActive: "38 95% 48%",
+		lightFg: "0 0% 100%",
+		darkFg: "30 80% 10%",
+		rtLight: "#d97706",
+		rtDark: "#fbbf24",
+		swatch: "#f59e0b",
+	},
+	{
+		name: "Tuesday Green",
+		day: "Tue",
+		light: "142 60% 40%",
+		lightHover: "142 60% 34%",
+		lightActive: "142 60% 28%",
+		dark: "140 60% 66%",
+		darkHover: "140 60% 58%",
+		darkActive: "140 60% 50%",
+		lightFg: "0 0% 100%",
+		darkFg: "140 60% 10%",
+		rtLight: "#2ea043",
+		rtDark: "#7ee787",
+		swatch: "#3fb950",
+	},
+	{
+		name: "Wednesday Teal",
+		day: "Wed",
+		light: "188 85% 38%",
+		lightHover: "188 85% 32%",
+		lightActive: "188 85% 26%",
+		dark: "187 80% 62%",
+		darkHover: "187 80% 55%",
+		darkActive: "187 80% 48%",
+		lightFg: "0 0% 100%",
+		darkFg: "190 80% 10%",
+		rtLight: "#0e8a9c",
+		rtDark: "#56d4dd",
+		swatch: "#14b8c4",
+	},
+	{
+		name: "Thursday Blue",
+		day: "Thu",
+		light: "217 91% 52%",
+		lightHover: "217 91% 45%",
+		lightActive: "217 91% 38%",
+		dark: "207 100% 67%",
+		darkHover: "207 100% 60%",
+		darkActive: "207 100% 53%",
+		lightFg: "0 0% 100%",
+		darkFg: "217 80% 10%",
+		rtLight: "#1f6feb",
+		rtDark: "#56b6ff",
+		swatch: "#3b82f6",
+	},
+	{
+		name: "Friday Violet",
+		day: "Fri",
+		light: "262 78% 50%",
+		lightHover: "262 78% 43%",
+		lightActive: "262 78% 36%",
+		dark: "263 85% 72%",
+		darkHover: "263 85% 64%",
+		darkActive: "263 85% 56%",
+		lightFg: "0 0% 100%",
+		darkFg: "262 70% 12%",
+		rtLight: "#7c3aed",
+		rtDark: "#a78bfa",
+		swatch: "#8b5cf6",
+	},
+	{
+		name: "Saturday Pink",
+		day: "Sat",
+		light: "330 78% 46%",
+		lightHover: "330 78% 40%",
+		lightActive: "330 78% 33%",
+		dark: "330 85% 70%",
+		darkHover: "330 85% 62%",
+		darkActive: "330 85% 55%",
+		lightFg: "0 0% 100%",
+		darkFg: "330 70% 12%",
+		rtLight: "#d61f8c",
+		rtDark: "#f471b5",
+		swatch: "#ec4899",
+	},
+];
+
+export type AccentSetting = "auto" | number;
+
+const ACCENT_KEY = "create-docs:accent";
+const storedAccent = globalThis.localStorage?.getItem(ACCENT_KEY);
+const initialAccent: AccentSetting =
+	storedAccent == null || storedAccent === "auto"
+		? "auto"
+		: Math.min(
+				Math.max(Number(storedAccent) || 0, 0),
+				DAILY_ACCENTS.length - 1,
+			);
+
+const [accentSetting, setAccentSignal] =
+	createSignal<AccentSetting>(initialAccent);
+
+/** Resolved accent index — "auto" maps to today's weekday. */
+export function accentIndex(setting?: AccentSetting): number {
+	const s = setting ?? accentSetting();
+	if (s === "auto") return new Date().getDay();
+	return s;
+}
+
+function applyAccent() {
+	const root = document.documentElement;
+	const isDark = root.classList.contains("dark");
+	const a = DAILY_ACCENTS[accentIndex()];
+	root.style.setProperty("--color-primary", isDark ? a.dark : a.light);
+	root.style.setProperty(
+		"--color-primary-hover",
+		isDark ? a.darkHover : a.lightHover,
+	);
+	root.style.setProperty(
+		"--color-primary-active",
+		isDark ? a.darkActive : a.lightActive,
+	);
+	root.style.setProperty(
+		"--color-primary-foreground",
+		isDark ? a.darkFg : a.lightFg,
+	);
+	root.style.setProperty("--color-focus", isDark ? a.dark : a.light);
+	root.style.setProperty("--rt-accent", isDark ? a.rtDark : a.rtLight);
+	root.style.setProperty("--rt-border-focus", isDark ? a.rtDark : a.rtLight);
+}
+
+export function setAccent(next: AccentSetting) {
+	setAccentSignal(next);
+	globalThis.localStorage?.setItem(ACCENT_KEY, String(next));
+}
+
+/** Apply the stored/default theme + daily accent before render. */
+export function initTheme(defaultMode: Theme = "dark"): void {
+	const value = stored === "light" || stored === "dark" ? stored : defaultMode;
+	document.documentElement.classList.toggle("dark", value === "dark");
+	applyAccent();
+}
+
+export function setTheme(next: Theme) {
+	setThemeSignal(next);
+}
+
+export function useTheme() {
+	createEffect(() => {
+		const value = theme();
+		document.documentElement.classList.toggle("dark", value === "dark");
+		globalThis.localStorage?.setItem("theme", value);
+		applyAccent();
+	});
+
+	const toggle = () => setThemeSignal((t) => (t === "dark" ? "light" : "dark"));
+
+	return { theme, toggle };
+}
+
+/** Accent picker state — auto follows the weekday, or pin a fixed color. */
+export function useAccent() {
+	createEffect(() => {
+		accentSetting();
+		applyAccent();
+	});
+	return {
+		accent: accentSetting,
+		accentIndex: () => accentIndex(),
+		accents: DAILY_ACCENTS,
+		setAccent,
+	};
+}