@tenphi/starlight 0.6.0 → 0.7.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import { n as starlight, t as createStarlightCollection } from "./content-Cwk8rm6i.js";
-import { a as resolveNavigationLayout } from "./navigation-CC0dlAL8.js";
+import { a as resolveNavigationLayout } from "./navigation-CkQXI2Zb.js";
 import { createRequire } from "node:module";
 import { existsSync } from "node:fs";
-import { cp, mkdir, readFile } from "node:fs/promises";
+import { cp, mkdir, readFile, readdir, unlink, writeFile } from "node:fs/promises";
 import { dirname, extname, join } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { COOKBOOK_COMPONENT_NAMES, assertValidDocs, createDocsGraph } from "@tenphi/docs";
@@ -109,80 +109,39 @@ function resolveDocsTheme(theme = {}) {
 		...theme.contrastLevel !== void 0 ? { contrastLevel: theme.contrastLevel } : {}
 	};
 	const surfaceFrom = theme.palette?.surface ?? "#ffffff";
-	const surface = glaze.color({
+	const resolvedSurfaceSeed = glaze.color({
 		from: surfaceFrom,
 		mode: "auto",
 		darkSaturation: .35
-	});
-	const surface2 = glaze.color({
-		from: surfaceFrom,
-		base: surface,
-		tone: "-2",
-		mode: "auto",
-		saturationFactor: .9,
-		darkSaturation: .325
-	}, glazeOptions);
-	const surface3 = glaze.color({
-		from: surfaceFrom,
-		base: surface2,
-		tone: "-2",
-		mode: "auto",
-		saturationFactor: .8,
-		darkSaturation: .3
-	}, glazeOptions);
-	const text = glaze.color({
-		from: theme.palette?.text ?? "#20232a",
-		base: surface,
-		role: "text",
-		contrast: { apca: [75, 90] },
-		mode: "auto"
-	}, glazeOptions);
-	const textSoft = glaze.color({
-		from: theme.palette?.textSoft ?? "#626875",
-		base: surface,
-		role: "text",
-		contrast: { apca: [60, 75] },
-		mode: "auto"
-	}, glazeOptions);
-	const accentText = glaze.color({
-		from: brand.from,
-		base: surface,
-		role: "text",
-		contrast: { apca: authoredTarget },
-		mode: "auto"
-	}, glazeOptions);
-	const focus = glaze.color({
-		from: brand.from,
-		base: surface,
-		role: "border",
-		contrast: { apca: authoredTarget },
-		mode: "auto"
-	}, glazeOptions);
-	const accentSurface = glaze.color({
-		from: brand.from,
-		mode: "fixed"
-	});
-	const accentSurfaceText = glaze.color({
-		from: "#ffffff",
-		base: accentSurface,
-		role: "text",
-		contrast: { apca: 60 },
-		mode: "auto"
-	});
-	const resolvedSurface = surface.resolve();
-	const resolvedAccent = accentText.resolve();
-	const shadowTheme = glaze({
-		hue: variantToOkhsl(resolvedSurface.light).h,
-		saturation: variantToOkhsl(resolvedSurface.light).s * 100,
-		darkHue: variantToOkhsl(resolvedSurface.dark).h,
-		darkSaturation: variantToOkhsl(resolvedSurface.dark).s * 100
+	}).resolve();
+	const lightSurface = variantToOkhsl(resolvedSurfaceSeed.light);
+	const darkSurface = variantToOkhsl(resolvedSurfaceSeed.dark);
+	const colorTheme = glaze({
+		hue: lightSurface.h,
+		saturation: lightSurface.s * 100,
+		darkHue: darkSurface.h,
+		darkSaturation: Math.min(100, darkSurface.s * 100 / .35)
 	}, void 0, glazeOptions);
-	shadowTheme.colors({
+	colorTheme.colors({
 		surface: {
 			from: surfaceFrom,
 			mode: "auto",
 			darkSaturation: .35
 		},
+		"surface-2": {
+			base: "surface",
+			tone: "-2",
+			mode: "auto",
+			saturation: .75,
+			darkSaturation: .275
+		},
+		"surface-3": {
+			base: "surface-2",
+			tone: "-2",
+			mode: "auto",
+			saturation: .65,
+			darkSaturation: .25
+		},
 		text: {
 			from: theme.palette?.text ?? "#20232a",
 			base: "surface",
@@ -190,14 +149,176 @@ function resolveDocsTheme(theme = {}) {
 			contrast: { apca: [75, 90] },
 			mode: "auto"
 		},
+		"text-soft": {
+			from: theme.palette?.textSoft ?? "#626875",
+			base: "surface",
+			role: "text",
+			contrast: { apca: [60, 75] },
+			mode: "auto"
+		},
+		"text-muted": mix("surface", "text", 66),
+		"surface-2-hover": mix("surface-2", "text", [3, 6]),
+		"surface-2-pressed": mix("surface-2", "text", [9, 14]),
+		"surface-3-hover": mix("surface-3", "text", [3, 6]),
+		"surface-3-pressed": mix("surface-3", "text", [9, 14]),
+		"accent-text": {
+			from: brand.from,
+			base: "surface",
+			role: "text",
+			contrast: { apca: [normalTarget, highTarget] },
+			mode: "auto"
+		},
+		focus: {
+			from: brand.from,
+			base: "surface",
+			role: "border",
+			contrast: { apca: [normalTarget, highTarget] },
+			mode: "auto"
+		},
+		"accent-surface": {
+			from: brand.from,
+			mode: "fixed"
+		},
+		"accent-surface-text": {
+			from: "#ffffff",
+			base: "accent-surface",
+			role: "text",
+			contrast: { apca: [60, 75] },
+			mode: "auto"
+		},
+		"accent-surface-subtle": mix("surface", "accent-surface", [12, 18]),
+		"accent-surface-2-subtle": mix("surface-2", "accent-surface", [12, 18]),
 		shadow: {
 			type: "shadow",
 			bg: "surface",
 			fg: "text",
 			intensity: [12, 20],
 			tuning: { alphaMax: .28 }
+		},
+		overlay: {
+			type: "mix",
+			base: "surface",
+			target: "text",
+			value: [58, 68],
+			blend: "transparent"
+		},
+		clear: {
+			from: "#ffffff",
+			mode: "fixed",
+			opacity: 0
+		},
+		...statusColors("orange", "#d97706"),
+		...statusColors("green", "#16a34a"),
+		...statusColors("blue", "#2563eb"),
+		...statusColors("purple", "#9333ea"),
+		...statusColors("red", "#dc2626")
+	});
+	const resolvedBrandSeed = glaze.color({
+		from: brand.from,
+		mode: "fixed"
+	}).resolve();
+	const lightBrand = variantToOkhsl(resolvedBrandSeed.light);
+	const darkBrand = variantToOkhsl(resolvedBrandSeed.dark);
+	const borderTheme = glaze({
+		hue: lightBrand.h,
+		saturation: lightBrand.s * 100,
+		darkHue: darkBrand.h,
+		darkSaturation: darkBrand.s * 100
+	}, void 0, glazeOptions);
+	borderTheme.colors({
+		surface: {
+			from: surfaceFrom,
+			mode: "auto",
+			darkSaturation: .35
+		},
+		border: {
+			base: "surface",
+			tone: ["-9", "-22"],
+			saturation: .205,
+			mode: "auto"
+		},
+		"border-strong": {
+			base: "surface",
+			tone: ["-20", "-38"],
+			saturation: .205,
+			mode: "auto"
 		}
 	});
+	const syntaxTheme = glaze(210, 90, glazeOptions);
+	syntaxTheme.colors({
+		bg: {
+			tone: 100,
+			saturation: .1
+		},
+		text: {
+			base: "bg",
+			tone: 0,
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 0
+		},
+		comment: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: .01,
+			hue: 210
+		},
+		punctuation: {
+			base: "bg",
+			contrast: { wcag: [6, "AAA"] },
+			saturation: .01,
+			hue: 210
+		},
+		keyword: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80
+		},
+		string: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 15
+		},
+		token: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 125
+		},
+		property: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 155
+		},
+		number: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 70
+		},
+		function: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 210
+		},
+		value: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 210
+		},
+		operator: {
+			base: "bg",
+			contrast: { wcag: ["AA", "AAA"] },
+			saturation: 80,
+			hue: 340
+		}
+	});
+	const resolvedColors = colorTheme.resolve();
+	const resolvedSurface = requiredResolvedColor(resolvedColors, "surface");
+	const resolvedAccent = requiredResolvedColor(resolvedColors, "accent-text");
 	const scores = {
 		light: score(resolvedAccent.light, resolvedSurface.light),
 		dark: score(resolvedAccent.dark, resolvedSurface.dark),
@@ -215,20 +336,39 @@ function resolveDocsTheme(theme = {}) {
 		});
 	}
 	const outputOptions = { modes: { highContrast: true } };
-	const shadow = shadowTheme.json(outputOptions).shadow;
-	if (!shadow) throw new Error("The Glaze shadow token failed to resolve.");
+	const tastyOptions = {
+		...outputOptions,
+		states: {
+			dark: "theme=dark | (@media(prefers-color-scheme: dark) & :not([data-theme]))",
+			highContrast: "contrast=more | (@media(prefers-contrast: more) & :not([data-contrast]))"
+		}
+	};
+	const resolvedPalette = colorTheme.json(outputOptions);
+	const colorTokens = colorTheme.tasty(tastyOptions);
+	const borderTokens = borderTheme.tasty(tastyOptions);
+	const syntaxTokens = glaze.palette({ syntax: syntaxTheme }).tasty({
+		...tastyOptions,
+		prefix: true,
+		primary: false
+	});
 	return {
 		colors: {
-			surface: surface.json(outputOptions),
-			surface2: surface2.json(outputOptions),
-			surface3: surface3.json(outputOptions),
-			text: text.json(outputOptions),
-			textSoft: textSoft.json(outputOptions),
-			accentText: accentText.json(outputOptions),
-			accentSurface: accentSurface.json(outputOptions),
-			accentSurfaceText: accentSurfaceText.json(outputOptions),
-			focus: focus.json(outputOptions),
-			shadow
+			surface: requiredJsonColor(resolvedPalette, "surface"),
+			surface2: requiredJsonColor(resolvedPalette, "surface-2"),
+			surface3: requiredJsonColor(resolvedPalette, "surface-3"),
+			text: requiredJsonColor(resolvedPalette, "text"),
+			textSoft: requiredJsonColor(resolvedPalette, "text-soft"),
+			accentText: requiredJsonColor(resolvedPalette, "accent-text"),
+			accentSurface: requiredJsonColor(resolvedPalette, "accent-surface"),
+			accentSurfaceText: requiredJsonColor(resolvedPalette, "accent-surface-text"),
+			focus: requiredJsonColor(resolvedPalette, "focus"),
+			shadow: requiredJsonColor(resolvedPalette, "shadow")
+		},
+		colorTokens: {
+			...colorTokens,
+			"#border": requiredJsonColor(borderTokens, "#border"),
+			"#border-strong": requiredJsonColor(borderTokens, "#border-strong"),
+			...syntaxTokens
 		},
 		tokens: resolveThemeTokens(theme.tokens),
 		presets: resolveTypographyPresets(theme.presets),
@@ -236,6 +376,44 @@ function resolveDocsTheme(theme = {}) {
 		diagnostics
 	};
 }
+function mix(base, target, value, space = "okhsl") {
+	return {
+		type: "mix",
+		base,
+		target,
+		value,
+		space
+	};
+}
+function statusColors(name, from) {
+	return {
+		[name]: {
+			from,
+			base: "surface",
+			role: "border",
+			contrast: { apca: [30, 45] },
+			mode: "auto"
+		},
+		[`${name}-text`]: {
+			from,
+			base: "surface",
+			role: "text",
+			contrast: { apca: [60, 75] },
+			mode: "auto"
+		},
+		[`${name}-surface`]: mix("surface", name, [12, 18], "srgb")
+	};
+}
+function requiredResolvedColor(colors, name) {
+	const color = colors.get(name);
+	if (!color) throw new Error(`The Glaze ${name} color failed to resolve.`);
+	return color;
+}
+function requiredJsonColor(colors, name) {
+	const color = colors[name];
+	if (!color) throw new Error(`The Glaze ${name} token failed to export.`);
+	return color;
+}
 function normalizeBrand(brand) {
 	if (typeof brand === "object" && brand !== null && "from" in brand) return brand;
 	return { from: brand ?? "#315efb" };
@@ -248,6 +426,183 @@ function luminance(variant) {
 	return relativeLuminanceFromLinearRgb(okhslToLinearSrgb(h, s, l, variant.pastel));
 }
 //#endregion
+//#region src/theme/shiki-theme.ts
+const comment = "var(--syntax-comment-color)";
+const punctuation = "var(--syntax-punctuation-color)";
+const keyword = "var(--syntax-keyword-color)";
+const string = "var(--syntax-string-color)";
+const token = "var(--syntax-token-color)";
+const property = "var(--syntax-property-color)";
+const number = "var(--syntax-number-color)";
+const func = "var(--syntax-function-color)";
+const value = "var(--syntax-value-color)";
+const operator = "var(--syntax-operator-color)";
+const foreground = "var(--syntax-text-color)";
+const background = "var(--syntax-bg-color)";
+/**
+* Shiki performs the grammatical classification, while every emitted color
+* remains a reference to a Glaze-generated token owned by Tasty.
+*/
+const tastyCodeTheme = {
+	name: "tasty-code",
+	type: "light",
+	fg: foreground,
+	bg: background,
+	colors: {
+		"editor.background": background,
+		"editor.foreground": foreground
+	},
+	settings: [
+		{
+			scope: [
+				"comment",
+				"comment.line",
+				"comment.block",
+				"punctuation.definition.comment"
+			],
+			settings: {
+				foreground: comment,
+				fontStyle: "italic"
+			}
+		},
+		{
+			scope: [
+				"keyword",
+				"keyword.control",
+				"keyword.other",
+				"storage.type",
+				"storage.modifier",
+				"keyword.control.at-rule.tasty",
+				"keyword.control.at-rule.media.tasty",
+				"keyword.control.at-rule.media-type.tasty",
+				"keyword.control.at-rule.starting.tasty",
+				"keyword.control.state-alias.tasty"
+			],
+			settings: { foreground: keyword }
+		},
+		{
+			scope: [
+				"string",
+				"string.quoted",
+				"string.template",
+				"string.quoted.attribute-value.tasty",
+				"string.unquoted.attribute-value.tasty"
+			],
+			settings: { foreground: string }
+		},
+		{
+			scope: [
+				"support.constant.color.tasty-token",
+				"support.constant.color.tasty-token.builtin",
+				"constant.other.color.tasty-token",
+				"constant.other.color.tasty",
+				"constant.other.color.hex",
+				"constant.other.color.rgb-value"
+			],
+			settings: { foreground: token }
+		},
+		{
+			scope: [
+				"constant.numeric",
+				"constant.numeric.tasty",
+				"constant.numeric.custom-unit.tasty",
+				"constant.numeric.css-with-unit",
+				"constant.numeric.bare.tasty",
+				"constant.numeric.css",
+				"constant.numeric.keyframe-step.tasty",
+				"constant.language.boolean.tasty"
+			],
+			settings: { foreground: number }
+		},
+		{
+			scope: ["support.type.property-name.tasty", "variable.other.constant.tasty"],
+			settings: { foreground: property }
+		},
+		{
+			scope: ["variable", "variable.other"],
+			settings: { foreground }
+		},
+		{
+			scope: [
+				"entity.name.function",
+				"support.function",
+				"support.function.misc.css",
+				"entity.name.tag",
+				"entity.name.tag.tsx",
+				"entity.name.type.tasty",
+				"entity.name.tag.tasty"
+			],
+			settings: { foreground: func }
+		},
+		{
+			scope: [
+				"support.constant.property-value.tasty",
+				"support.constant.property-value.tasty-display",
+				"support.constant.property-value.tasty-directional",
+				"support.constant.property-value.tasty-preset",
+				"support.constant.property-value.tasty-shape",
+				"support.constant.property-value.tasty-scrollbar",
+				"support.constant.property-value.tasty-state",
+				"support.constant.property-value.tasty-cursor",
+				"support.constant.property-value.tasty-overflow",
+				"support.constant.property-value.tasty-position",
+				"support.constant.property-value.tasty-flex",
+				"support.constant.property-value.tasty-font",
+				"support.constant.property-value.tasty-text",
+				"support.constant.property-value.tasty-alignment",
+				"support.constant.property-value.tasty-border-style",
+				"support.constant.property-value.tasty-whitespace",
+				"support.constant.property-value.tasty-global",
+				"support.constant.property-value.tasty-transition",
+				"support.constant.property-value.css-syntax",
+				"entity.other.attribute-name",
+				"entity.other.attribute-name.tasty",
+				"entity.other.attribute-name.pseudo-class.tasty",
+				"entity.other.attribute-name.pseudo-class.css",
+				"entity.other.attribute-name.class.tasty",
+				"entity.other.attribute-name.pseudo-element.css",
+				"punctuation.definition.entity.css"
+			],
+			settings: { foreground: value }
+		},
+		{
+			scope: [
+				"keyword.operator",
+				"keyword.operator.logical.tasty",
+				"keyword.operator.arithmetic.css",
+				"keyword.operator.assignment",
+				"keyword.operator.selector-affix.tasty",
+				"keyword.operator.attribute-selector.tasty",
+				"keyword.operator.comparison.tasty"
+			],
+			settings: { foreground: operator }
+		},
+		{
+			scope: [
+				"punctuation.definition.string",
+				"punctuation.separator",
+				"punctuation.definition.block",
+				"punctuation.definition.array",
+				"punctuation.section",
+				"punctuation.definition.auto-calc",
+				"punctuation.definition.attribute-selector",
+				"punctuation.definition.pseudo-class",
+				"punctuation.definition.fallback",
+				"meta.brace"
+			],
+			settings: { foreground: punctuation }
+		},
+		{
+			scope: ["keyword.control.at-rule", "entity.name.tag.class.css"],
+			settings: { foreground: keyword }
+		},
+		{
+			scope: ["support.type.property-name.css", "meta.property-name.css"],
+			settings: { foreground: property }
+		}
+	]
+};
+//#endregion
 //#region src/theme/tasty-config.ts
 const TASTY_UNITS = {
 	x: "var(--gap)",
@@ -255,42 +610,11 @@ const TASTY_UNITS = {
 	cr: "var(--card-radius)",
 	bw: "var(--border-width)"
 };
-const LIGHT = "theme=light | (@media(prefers-color-scheme: light) & :not([data-theme]))";
-const HIGH_CONTRAST = "contrast=more | (@media(prefers-contrast: more) & :not([data-contrast]))";
 function tastyTokens(theme) {
 	const tokens = Object.fromEntries(Object.entries(theme.tokens).filter(([name]) => name.startsWith("$")));
-	Object.assign(tokens, {
-		"#surface": colorStates(theme.colors.surface),
-		"#surface-2": colorStates(theme.colors.surface2),
-		"#surface-3": colorStates(theme.colors.surface3),
-		"#surface-2-hover": mix("#text", 3, "#surface-2"),
-		"#surface-2-pressed": mix("#text", 9, "#surface-2"),
-		"#surface-3-hover": mix("#text", 3, "#surface-3"),
-		"#surface-3-pressed": mix("#text", 9, "#surface-3"),
-		"#text": colorStates(theme.colors.text),
-		"#text-soft": colorStates(theme.colors.textSoft),
-		"#border": mix("#text", 18, "#surface"),
-		"#border-strong": mix("#text", 34, "#surface"),
-		"#accent-text": colorStates(theme.colors.accentText),
-		"#accent-surface": colorStates(theme.colors.accentSurface),
-		"#accent-surface-text": colorStates(theme.colors.accentSurfaceText),
-		"#focus": colorStates(theme.colors.focus),
-		"#shadow": colorStates(theme.colors.shadow),
-		"#overlay": mix("#text", 58, "transparent")
-	});
+	Object.assign(tokens, theme.colorTokens);
 	return tokens;
 }
-function colorStates(colors) {
-	return {
-		"": colors.dark,
-		[LIGHT]: colors.light,
-		[HIGH_CONTRAST]: colors.darkContrast,
-		[`(${LIGHT}) & (${HIGH_CONTRAST})`]: colors.lightContrast
-	};
-}
-function mix(foreground, percentage, background) {
-	return `color-mix(in oklab, ${foreground} ${percentage}%, ${background})`;
-}
 //#endregion
 //#region src/components/component-styles.ts
 const sharedConfiguration = globalThis;
@@ -334,8 +658,6 @@ function cookbook(options = {}) {
 	if (docsTheme.diagnostics.some((diagnostic) => diagnostic.severity === "error")) throw new Error(docsTheme.diagnostics.map((diagnostic) => diagnostic.message).join("\n"));
 	configureTastyTheme(options.config?.theme, docsTheme);
 	configureComponentStyles(options.config?.theme?.styles);
-	const searchClientPath = fileURLToPath(new URL("./client/search.js", import.meta.url));
-	const appearanceClientPath = fileURLToPath(new URL("./client/appearance.js", import.meta.url));
 	const components = {
 		Header: fileURLToPath(new URL("./overrides/Header.astro", import.meta.url)),
 		Sidebar: fileURLToPath(new URL("./overrides/Sidebar.astro", import.meta.url)),
@@ -348,18 +670,11 @@ function cookbook(options = {}) {
 		islands: false,
 		css: { mode: "extract" }
 	});
-	const starlightIntegration = starlight({
-		title: options.config?.site?.title ?? "Documentation",
-		...options.config?.site?.description ? { description: options.config.site.description } : {},
-		...options.config?.search?.enabled === false ? { pagefind: false } : {},
-		components,
-		sidebar: starlightSidebar(navigation)
-	});
-	let inner = [tasty, starlightIntegration];
+	let inner = [tasty];
 	let projectRoot = options.root;
 	let graphConfig = options.config;
 	let graph;
-	let usingStarlight = false;
+	let usingContentCollection = false;
 	async function loadGraph(refresh = false) {
 		if (!graph || refresh) {
 			graph = await createDocsGraph({
@@ -374,11 +689,7 @@ function cookbook(options = {}) {
 		name: "cookbook",
 		hooks: {
 			"astro:config:setup": async (context) => {
-				inner = [
-					(await importNative(pathToFileURL(astroReactIntegration).href)).default(),
-					tasty,
-					starlightIntegration
-				];
+				const react = (await importNative(pathToFileURL(astroReactIntegration).href)).default();
 				if (context.config.integrations.some((integration) => integration.name === "@astrojs/starlight")) throw new Error("Cookbook already includes Starlight. Remove the direct @astrojs/starlight integration before continuing.");
 				projectRoot ??= fileURLToPath(context.config.root);
 				const base = options.config?.build?.base ?? context.config.base;
@@ -389,10 +700,41 @@ function cookbook(options = {}) {
 						base
 					}
 				};
-				usingStarlight = hasContentConfig(context.config.srcDir);
+				usingContentCollection = hasContentConfig(context.config.srcDir);
+				const starlightIntegration = starlight({
+					title: options.config?.site?.title ?? "Documentation",
+					expressiveCode: false,
+					...options.config?.site?.description ? { description: options.config.site.description } : {},
+					...options.config?.search?.enabled === false ? { pagefind: false } : {},
+					...!usingContentCollection ? { disable404Route: true } : {},
+					components,
+					sidebar: usingContentCollection ? starlightSidebar(navigation) : []
+				});
+				inner = [
+					react,
+					tasty,
+					starlightIntegration
+				];
+				let markdownRuntime = {
+					image: context.config.image,
+					markdown: {
+						...context.config.markdown,
+						syntaxHighlight: "shiki",
+						shikiConfig: {
+							...context.config.markdown.shikiConfig,
+							theme: tastyCodeTheme
+						}
+					},
+					srcDir: context.config.srcDir
+				};
+				let markdownRenderer;
 				context.updateConfig({
 					base,
 					output: "static",
+					markdown: {
+						syntaxHighlight: "shiki",
+						shikiConfig: { theme: tastyCodeTheme }
+					},
 					vite: {
 						ssr: { external: [
 							"@tenphi/docs",
@@ -400,10 +742,30 @@ function cookbook(options = {}) {
 							"react-dom",
 							"react-dom/server"
 						] },
-						plugins: [virtualDocsPlugin(async () => {
+						plugins: [stripStarlightStylesPlugin(starlightRoot), virtualDocsPlugin(async () => {
 							const loaded = await loadGraph();
 							return {
-								entries: loaded.entries,
+								entries: usingContentCollection ? loaded.entries : await Promise.all(loaded.entries.map(async (entry) => {
+									const { image, markdown, srcDir } = markdownRuntime;
+									markdownRenderer ??= markdown.processor.createRenderer({
+										image,
+										syntaxHighlight: markdown.syntaxHighlight,
+										shikiConfig: markdown.shikiConfig,
+										gfm: markdown.gfm,
+										smartypants: markdown.smartypants
+									});
+									const rendered = await (await markdownRenderer).render(entry.transformedBody, {
+										frontmatter: entry.frontmatter,
+										fileURL: starlightContentUrl(entry.route, srcDir)
+									});
+									return {
+										...entry,
+										rendered: {
+											html: rendered.code,
+											headings: rendered.metadata.headings
+										}
+									};
+								})),
 								routes: loaded.routes,
 								site: documentedSite(loaded),
 								base: loaded.config.build.base,
@@ -435,35 +797,49 @@ function cookbook(options = {}) {
 					}
 				});
 				await callInner(inner.slice(0, 2), "astro:config:setup", context);
-				if (!usingStarlight) {
+				if (!usingContentCollection) {
 					graph = await createDocsGraph({
 						root: projectRoot,
 						config: graphConfig
 					});
 					assertValidDocs(graph);
-					if (graph.config.search.enabled) context.injectScript("page", `import ${JSON.stringify(searchClientPath)};`);
-					context.injectScript("page", `import ${JSON.stringify(appearanceClientPath)};`);
 					context.injectRoute({
 						pattern: "[...route]",
 						entrypoint: new URL("./routes/DocsPage.astro", import.meta.url),
 						prerender: true
 					});
-					return;
 				}
 				const starlightWithPlugins = inner[2];
 				if (starlightWithPlugins) {
 					const selfIndex = context.config.integrations.findIndex((integration) => integration.name === "cookbook");
 					context.config.integrations.splice(selfIndex + 1, 0, starlightWithPlugins);
 					try {
-						await callInner([starlightWithPlugins], "astro:config:setup", context);
+						await callInner([starlightWithPlugins], "astro:config:setup", usingContentCollection ? context : withoutStarlightDocsRoute(context));
 					} finally {
 						const placeholderIndex = context.config.integrations.indexOf(starlightWithPlugins);
 						if (placeholderIndex >= 0) context.config.integrations.splice(placeholderIndex, 1);
 					}
 				}
+				context.config.integrations.push({
+					name: "cookbook-markdown-renderer",
+					hooks: { "astro:config:setup": ({ config }) => {
+						markdownRuntime = {
+							image: config.image,
+							markdown: {
+								...config.markdown,
+								syntaxHighlight: "shiki",
+								shikiConfig: {
+									...config.markdown.shikiConfig,
+									theme: tastyCodeTheme
+								}
+							},
+							srcDir: config.srcDir
+						};
+					} }
+				});
 			},
 			"astro:config:done": async (context) => {
-				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:config:done", context);
+				await callInner(inner, "astro:config:done", context);
 			},
 			"astro:server:setup": async ({ server }) => {
 				let assets = docsAssetMap(await loadGraph());
@@ -505,32 +881,63 @@ function cookbook(options = {}) {
 			},
 			"astro:build:start": async (context) => {
 				await loadGraph();
-				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:build:start", context);
+				await callInner(inner, "astro:build:start", context);
 			},
 			"astro:build:done": async (context) => {
-				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:build:done", context);
-				if (!graph) return;
+				await callInner(inner, "astro:build:done", context);
 				const output = fileURLToPath(context.dir);
+				for (const relativePath of await readdir(output, { recursive: true })) {
+					if (extname(relativePath) !== ".html") continue;
+					const path = join(output, relativePath);
+					const html = await readFile(path, "utf8");
+					const sanitized = html.replace(/\s*<link\b(?=[^>]*rel="stylesheet")(?=[^>]*href="data:text\/css,")[^>]*>/g, "").replace(/\s*<style>\s*<\/style>/g, "").replace(/\sstyle="--sl-icon-size:\s*([^;\"]+);?"/g, " width=\"$1\" height=\"$1\"").replace(/\sstyle="--depth:\s*([^;\"]+);?"/g, " data-depth=\"$1\"").replace(/(<kbd\b[^>]*)\sstyle="display:\s*none;?"([^>]*>)/g, "$1$2").replace(/(<dialog\b[^>]*)\sstyle="padding:\s*0;?"([^>]*>)/g, "$1$2");
+					if (sanitized !== html) await writeFile(path, sanitized);
+				}
+				const pagefindOutput = join(output, "pagefind");
+				if (existsSync(pagefindOutput)) {
+					for (const name of await readdir(pagefindOutput)) if (extname(name) === ".css") await unlink(join(pagefindOutput, name));
+				}
+				if (!graph) return;
 				for (const asset of graph.assets) {
 					if (!asset.sourcePath || !asset.publicPath) continue;
 					const target = join(output, asset.publicPath.replace(/^\//, ""));
 					await mkdir(dirname(target), { recursive: true });
 					await cp(asset.sourcePath, target);
 				}
-				if (!usingStarlight && graph.config.search.enabled) {
-					const { close, createIndex } = await import("pagefind");
-					const created = await createIndex({ rootSelector: "[data-pagefind-body]" });
-					if (!created.index || created.errors.length > 0) throw new Error(`Pagefind failed to start: ${created.errors.join("; ")}`);
-					const indexed = await created.index.addDirectory({ path: output });
-					if (indexed.errors.length > 0) throw new Error(`Pagefind failed to index the site: ${indexed.errors.join("; ")}`);
-					const written = await created.index.writeFiles({ outputPath: join(output, "pagefind") });
-					await close();
-					if (written.errors.length > 0) throw new Error(`Pagefind failed to write the index: ${written.errors.join("; ")}`);
-				}
 			}
 		}
 	};
 }
+function stripStarlightStylesPlugin(root) {
+	const normalizedRoot = root.replaceAll("\\", "/");
+	const emptyPrintId = "\0cookbook:empty-starlight-print";
+	return {
+		name: "cookbook-strip-starlight-css",
+		enforce: "pre",
+		resolveId(source, importer) {
+			if (importer?.replaceAll("\\", "/").startsWith(`${normalizedRoot}/`) && source.endsWith("/style/print.css?url&no-inline")) return emptyPrintId;
+		},
+		load(id) {
+			if (id === emptyPrintId) return "export default \"data:text/css,\";";
+		},
+		transform(code, id) {
+			const normalizedId = id.replaceAll("\\", "/");
+			if (!normalizedId.startsWith(`${normalizedRoot}/`)) return void 0;
+			const [pathname, query = ""] = normalizedId.split("?", 2);
+			const isStylesheet = pathname?.endsWith(".css");
+			const isAstroStyle = pathname?.endsWith(".astro") && query.includes("type=style");
+			if (!isStylesheet && !isAstroStyle) return void 0;
+			return {
+				code: "",
+				map: null
+			};
+		}
+	};
+}
+function starlightContentUrl(route, srcDir) {
+	const slug = route === "/" ? "index" : route.replace(/^\/+|\/+$/g, "");
+	return new URL(`content/docs/${slug}.md`, srcDir);
+}
 function docsAssetMap(graph) {
 	return new Map(graph.assets.flatMap((asset) => asset.publicPath && asset.sourcePath ? [[asset.publicPath, asset]] : []));
 }
@@ -618,6 +1025,14 @@ async function callInner(integrations, hook, context) {
 		if (typeof handler === "function") await handler(context);
 	}
 }
+function withoutStarlightDocsRoute(context) {
+	return new Proxy(context, { get(target, property, receiver) {
+		if (property !== "injectRoute") return Reflect.get(target, property, receiver);
+		return (route) => {
+			if (route.pattern !== "[...slug]") context.injectRoute(route);
+		};
+	} });
+}
 function virtualDocsPlugin(getContent, layout) {
 	const configId = "\0virtual:cookbook/config";
 	const layoutId = "\0virtual:cookbook/layout";