kitfly 0.1.2 → 0.2.1

package/scripts/build.ts

@@ -16,15 +16,18 @@ import { copyFile, cp, mkdir, readdir, readFile, stat, writeFile } from "node:fs
 import { basename, dirname, extname, join, resolve } from "node:path";
 import { marked, Renderer } from "marked";
 import { ENGINE_ASSETS_DIR } from "../src/engine.ts";
+import { loadPluginInjections, type PluginInjections } from "../src/plugin-loader.ts";
 import {
 	buildBreadcrumbsStatic,
 	buildFooter,
 	buildNavStatic,
 	buildPageMeta,
+	buildSlideNav,
 	buildToc,
 	type ContentFile,
-	// Navigation/template building
 	collectFiles,
+	// Navigation/template building
+	collectSlides,
 	envBool,
 	// Config helpers
 	envString,
@@ -32,6 +35,7 @@ import {
 	escapeHtml,
 	// File utilities
 	exists,
+	filterUnknownSlidesVisualsTypeDiagnostics,
 	// Provenance
 	generateProvenance,
 	// YAML/Config parsing
@@ -39,12 +43,15 @@ import {
 	type Provenance,
 	// Markdown utilities
 	parseFrontmatter,
+	parseYaml,
 	resolveStylesPath,
 	resolveTemplatePath,
+	rewriteRelativeAssetUrls,
 	// Types
 	type SiteConfig,
 	slugify,
 	validatePath,
+	validateSlidesVisualsFences,
 } from "../src/shared.ts";
 import { generateThemeCSS, getPrismUrls, loadTheme, type Theme } from "../src/theme.ts";
 
@@ -161,6 +168,7 @@ async function renderFile(
 	provenance: Provenance,
 	config: SiteConfig,
 	theme: Theme,
+	plugins: PluginInjections,
 ): Promise<string> {
 	const uiVersion = provenance.version ? `v${provenance.version}` : "unversioned";
 	const content = await readFile(filePath, "utf-8");
@@ -198,12 +206,15 @@ async function renderFile(
 	const themeCSS = generateThemeCSS(theme);
 	const prismUrls = getPrismUrls(theme);
 	const logoClass = config.brand.logoType === "wordmark" ? "logo-wordmark" : "logo-icon";
+	const brandInitial = escapeHtml(config.brand.name.trim().charAt(0).toUpperCase() || "K");
 
 	return template
+		.replace("{{BODY_CLASS}}", "mode-docs")
 		.replace(/\{\{PATH_PREFIX\}\}/g, pathPrefix)
 		.replace(/\{\{BRAND_URL\}\}/g, config.brand.url)
 		.replace(/\{\{BRAND_TARGET\}\}/g, brandTarget)
 		.replace(/\{\{BRAND_NAME\}\}/g, config.brand.name)
+		.replace(/\{\{BRAND_INITIAL\}\}/g, brandInitial)
 		.replace(/\{\{BRAND_LOGO\}\}/g, config.brand.logo || "assets/brand/logo.png")
 		.replace(/\{\{BRAND_FAVICON\}\}/g, config.brand.favicon || "assets/brand/favicon.png")
 		.replace(/\{\{BRAND_LOGO_CLASS\}\}/g, logoClass)
@@ -218,6 +229,8 @@ async function renderFile(
 		.replace("{{TOC}}", toc)
 		.replace("{{FOOTER}}", footer)
 		.replace("{{THEME_CSS}}", themeCSS)
+		.replace("{{PLUGIN_HEAD}}", plugins.head)
+		.replace("{{PLUGIN_BODY_END}}", plugins.bodyEnd)
 		.replace("{{PRISM_LIGHT_URL}}", prismUrls.light)
 		.replace("{{PRISM_DARK_URL}}", prismUrls.dark)
 		.replace("{{HOT_RELOAD_SCRIPT}}", "");
@@ -229,6 +242,7 @@ function renderGettingStarted(
 	provenance: Provenance,
 	config: SiteConfig,
 	theme: Theme,
+	plugins: PluginInjections,
 ): string {
 	const uiVersion = provenance.version ? `v${provenance.version}` : "unversioned";
 	const htmlContent = `
@@ -259,12 +273,15 @@ sections:
 	const prismUrls = getPrismUrls(theme);
 	const pathPrefix = "./";
 	const logoClass = config.brand.logoType === "wordmark" ? "logo-wordmark" : "logo-icon";
+	const brandInitial = escapeHtml(config.brand.name.trim().charAt(0).toUpperCase() || "K");
 
 	return template
+		.replace("{{BODY_CLASS}}", "mode-docs")
 		.replace(/\{\{PATH_PREFIX\}\}/g, pathPrefix)
 		.replace(/\{\{BRAND_URL\}\}/g, config.brand.url)
 		.replace(/\{\{BRAND_TARGET\}\}/g, brandTarget)
 		.replace(/\{\{BRAND_NAME\}\}/g, config.brand.name)
+		.replace(/\{\{BRAND_INITIAL\}\}/g, brandInitial)
 		.replace(/\{\{BRAND_LOGO\}\}/g, config.brand.logo || "assets/brand/logo.png")
 		.replace(/\{\{BRAND_FAVICON\}\}/g, config.brand.favicon || "assets/brand/favicon.png")
 		.replace(/\{\{BRAND_LOGO_CLASS\}\}/g, logoClass)
@@ -279,6 +296,116 @@ sections:
 		.replace("{{TOC}}", "")
 		.replace("{{FOOTER}}", buildFooter(provenance, config))
 		.replace("{{THEME_CSS}}", themeCSS)
+		.replace("{{PLUGIN_HEAD}}", plugins.head)
+		.replace("{{PLUGIN_BODY_END}}", plugins.bodyEnd)
+		.replace("{{PRISM_LIGHT_URL}}", prismUrls.light)
+		.replace("{{PRISM_DARK_URL}}", prismUrls.dark)
+		.replace("{{HOT_RELOAD_SCRIPT}}", "");
+}
+
+async function renderSlidesIndex(
+	template: string,
+	files: ContentFile[],
+	provenance: Provenance,
+	config: SiteConfig,
+	theme: Theme,
+	plugins: PluginInjections,
+): Promise<string> {
+	const uiVersion = provenance.version ? `v${provenance.version}` : "unversioned";
+	const pathPrefix = "./";
+	const slides = await collectSlides(files);
+	let validateFences = false;
+	try {
+		const raw = await readFile(join(ROOT, "kitfly.plugins.yaml"), "utf-8");
+		const parsed = parseYaml(raw) as unknown as Record<string, unknown>;
+		const enabled = Array.isArray(parsed?.plugins) ? (parsed.plugins as unknown[]) : [];
+		validateFences = enabled.some((p) => typeof p === "string" && p.startsWith("slides-visuals@"));
+	} catch {
+		// no config, skip
+	}
+	const renderedSlides = await Promise.all(
+		slides.map(async (slide, i) => {
+			let inner = "";
+			if (slide.kind === "markdown") {
+				if (validateFences) {
+					const diagnostics = filterUnknownSlidesVisualsTypeDiagnostics(
+						validateSlidesVisualsFences(slide.body),
+					);
+					if (diagnostics.length) {
+						const msg = diagnostics
+							.slice(0, 12)
+							.map((d) => `  - ${slide.sourcePath}:${d.line} ${d.message}`)
+							.join("\n");
+						throw new Error(`slides-visuals fence contract violations:\n${msg}`);
+					}
+				}
+				inner = marked.parse(slide.body) as string;
+			} else if (slide.kind === "yaml") {
+				inner = `<pre><code class="language-yaml">${escapeHtml(slide.body)}</code></pre>`;
+			} else {
+				let prettyJson = slide.body;
+				try {
+					prettyJson = JSON.stringify(JSON.parse(slide.body), null, 2);
+				} catch {
+					// Use original if not valid JSON
+				}
+				inner = `<pre><code class="language-json">${escapeHtml(prettyJson)}</code></pre>`;
+			}
+			inner = rewriteRelativeAssetUrls(inner, slide.sourceUrlPath, pathPrefix);
+
+			const activeClass = i === 0 ? " active" : "";
+			const classToken = slide.className ? ` ${slide.className}` : "";
+			return `<section id="${slide.id}" class="slide${classToken}${activeClass}" data-slide-index="${i}">${inner}</section>`;
+		}),
+	);
+
+	const htmlContent = `
+        <div class="slides-shell" style="--slide-aspect: ${config.aspect || "16/9"}">
+          <div class="slide-viewport">
+            <div class="slide-frame">
+              ${renderedSlides.join("\n")}
+            </div>
+          </div>
+          <div class="slide-nav" aria-label="Slide navigation">
+            <button class="slide-prev" type="button" aria-label="Previous slide">Prev</button>
+            <span class="slide-counter">1 / ${slides.length}</span>
+            <button class="slide-next" type="button" aria-label="Next slide">Next</button>
+            <div class="slide-progress" role="presentation">
+              <span class="slide-progress-bar" style="width: ${(1 / slides.length) * 100}%"></span>
+            </div>
+          </div>
+        </div>`;
+
+	const nav = buildSlideNav(slides, config, "slide-1");
+	const brandTarget = config.brand.external ? ' target="_blank" rel="noopener"' : "";
+	const logoClass = config.brand.logoType === "wordmark" ? "logo-wordmark" : "logo-icon";
+	const themeCSS = generateThemeCSS(theme);
+	const prismUrls = getPrismUrls(theme);
+	const brandInitial = escapeHtml(config.brand.name.trim().charAt(0).toUpperCase() || "K");
+
+	return template
+		.replace("{{BODY_CLASS}}", "mode-slides")
+		.replace(/\{\{PATH_PREFIX\}\}/g, pathPrefix)
+		.replace(/\{\{BRAND_URL\}\}/g, config.brand.url)
+		.replace(/\{\{BRAND_TARGET\}\}/g, brandTarget)
+		.replace(/\{\{BRAND_NAME\}\}/g, config.brand.name)
+		.replace(/\{\{BRAND_INITIAL\}\}/g, brandInitial)
+		.replace(/\{\{BRAND_LOGO\}\}/g, config.brand.logo || "assets/brand/logo.png")
+		.replace(/\{\{BRAND_FAVICON\}\}/g, config.brand.favicon || "assets/brand/favicon.png")
+		.replace(/\{\{BRAND_LOGO_CLASS\}\}/g, logoClass)
+		.replace(/\{\{SITE_TITLE\}\}/g, config.title)
+		.replace("{{TITLE}}", config.title)
+		.replace("{{VERSION}}", uiVersion)
+		.replace("{{BRANCH}}", provenance.gitBranch)
+		.replace("{{BREADCRUMBS}}", "")
+		.replace("{{PAGE_META}}", "")
+		.replace("{{NAV}}", nav)
+		.replace("{{CONTENT}}", htmlContent)
+		.replace("{{TOC}}", "")
+		.replace("{{FOOTER}}", buildFooter(provenance, config))
+		.replace("{{THEME_CSS}}", themeCSS)
+		.replace("{{PLUGIN_HEAD}}", plugins.head)
+		.replace("{{PLUGIN_BODY_END}}", plugins.bodyEnd)
 		.replace("{{PRISM_LIGHT_URL}}", prismUrls.light)
 		.replace("{{PRISM_DARK_URL}}", prismUrls.dark)
 		.replace("{{HOT_RELOAD_SCRIPT}}", "");
@@ -333,6 +460,12 @@ async function buildSite() {
 	// Read template
 	const template = await readFile(await resolveTemplatePath(ROOT), "utf-8");
 
+	// Load plugin injections (optional; no-op when kitfly.plugins.yaml is absent)
+	const plugins = await loadPluginInjections({
+		root: ROOT,
+		mode: config.mode === "slides" ? "slides" : "docs",
+	});
+
 	// Copy CSS
 	const css = await readFile(await resolveStylesPath(ROOT), "utf-8");
 	await writeFile(join(DIST, "styles.css"), css);
@@ -370,13 +503,23 @@ async function buildSite() {
 
 	if (files.length === 0) {
 		// No content - render Getting Started page
-		const html = renderGettingStarted(template, provenance, config, theme);
+		const html = renderGettingStarted(template, provenance, config, theme, plugins);
 		await writeFile(join(DIST, "index.html"), html);
 		console.log("  ✓ index.html (Getting Started)");
 		console.log(`\n\x1b[33mNo content found. Create site.yaml or content/ directory.\x1b[0m`);
 		return;
 	}
 
+	if (config.mode === "slides") {
+		const html = await renderSlidesIndex(template, files, provenance, config, theme, plugins);
+		await writeFile(join(DIST, "index.html"), html);
+		console.log(`  ✓ index.html (slides mode, ${files.length} source files)`);
+		await generateAIAccessibility(DIST, files, config, provenance);
+		console.log(`\n\x1b[32mBuild complete! Output in ${OUT_DIR}/\x1b[0m`);
+		console.log(`\nTo view locally: open ${OUT_DIR}/index.html`);
+		return;
+	}
+
 	for (const file of files) {
 		const html = await renderFile(
 			file.path,
@@ -386,6 +529,7 @@ async function buildSite() {
 			provenance,
 			config,
 			theme,
+			plugins,
 		);
 
 		// Create output path
@@ -403,7 +547,16 @@ async function buildSite() {
 		if (homePath) {
 			try {
 				await stat(homePath);
-				const homeHtml = await renderFile(homePath, "", template, files, provenance, config, theme);
+				const homeHtml = await renderFile(
+					homePath,
+					"",
+					template,
+					files,
+					provenance,
+					config,
+					theme,
+					plugins,
+				);
 				await writeFile(join(DIST, "index.html"), homeHtml);
 				console.log(`  ✓ index.html (from ${config.home})`);
 			} catch {
@@ -417,6 +570,7 @@ async function buildSite() {
 					provenance,
 					config,
 					theme,
+					plugins,
 				);
 				await writeFile(join(DIST, "index.html"), indexHtml);
 				console.log("  ✓ index.html");
@@ -433,6 +587,7 @@ async function buildSite() {
 			provenance,
 			config,
 			theme,
+			plugins,
 		);
 		await writeFile(join(DIST, "index.html"), indexHtml);
 		console.log("  ✓ index.html");