npm - @ox-content/vite-plugin - Versions diffs - 0.3.0-alpha.13 → 0.3.0-alpha.14 - Mend

@ox-content/vite-plugin 0.3.0-alpha.13 → 0.3.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.cjs CHANGED Viewed

@@ -18,6 +18,8 @@ fs = require_chunk.__toESM(fs);
 let fs_promises = require("fs/promises");
 fs_promises = require_chunk.__toESM(fs_promises);
 let glob = require("glob");
+let crypto = require("crypto");
+crypto = require_chunk.__toESM(crypto);
 let node_fs_promises = require("node:fs/promises");
 //#region src/environment.ts
@@ -7083,33 +7085,6 @@ if (import.meta.hot) {
 }
 `;
 }
-/**
-* Generates an OG image SVG using the Rust-based generator.
-*
-* This function uses the Rust NAPI bindings to generate SVG-based
-* OG images for social media previews. The SVG can be served directly
-* or converted to PNG/JPEG for broader compatibility.
-*
-* In the future, custom JS templates can be provided to override
-* the default Rust-based template.
-*
-* @param data - OG image data (title, description, etc.)
-* @param config - Optional OG image configuration
-* @returns SVG string or null if NAPI bindings are unavailable
-*/
-async function generateOgImageSvg(data, config) {
-	const napi = await loadNapiBindings();
-	if (!napi) return null;
-	const napiConfig = config ? {
-		width: config.width,
-		height: config.height,
-		backgroundColor: config.backgroundColor,
-		textColor: config.textColor,
-		titleFontSize: config.titleFontSize,
-		descriptionFontSize: config.descriptionFontSize
-	} : void 0;
-	return napi.generateOgImageSvg(data, napiConfig);
-}
 //#endregion
 //#region src/nav-generator.ts
@@ -7964,6 +7939,528 @@ function resolveDocsOptions(options) {
 	};
 }
+//#endregion
+//#region src/og-image/renderer.ts
+/**
+* Wraps template HTML in a minimal document with viewport locked to given dimensions.
+*/
+function wrapHtml(bodyHtml, width, height) {
+	return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { width: ${width}px; height: ${height}px; overflow: hidden; }
+</style>
+</head>
+<body>${bodyHtml}</body>
+</html>`;
+}
+/**
+* Renders an HTML string to a PNG buffer using Chromium.
+*
+* @param page - Playwright page instance
+* @param html - HTML string from template function
+* @param width - Image width
+* @param height - Image height
+* @returns PNG buffer
+*/
+async function renderHtmlToPng(page, html, width, height) {
+	await page.setViewportSize({
+		width,
+		height
+	});
+	const fullHtml = wrapHtml(html, width, height);
+	await page.setContent(fullHtml, { waitUntil: "networkidle" });
+	const screenshot = await page.screenshot({
+		type: "png",
+		clip: {
+			x: 0,
+			y: 0,
+			width,
+			height
+		}
+	});
+	return Buffer.from(screenshot);
+}
+//#endregion
+//#region src/og-image/browser.ts
+/**
+* Opens a Chromium browser and returns a session for rendering OG images.
+* Returns null if Playwright/Chromium is not available.
+*
+* The session implements AsyncDisposable — use `await using` for automatic cleanup:
+* ```ts
+* await using session = await openBrowser();
+* if (!session) return;
+* const png = await session.renderPage(html, 1200, 630);
+* ```
+*/
+async function openBrowser() {
+	try {
+		const { chromium } = await import("playwright");
+		const browser = await chromium.launch({
+			headless: true,
+			args: [
+				"--no-sandbox",
+				"--disable-setuid-sandbox",
+				"--disable-dev-shm-usage",
+				"--disable-gpu"
+			]
+		});
+		return {
+			async renderPage(html, width, height) {
+				const page = await browser.newPage();
+				try {
+					return await renderHtmlToPng(page, html, width, height);
+				} finally {
+					await page.close();
+				}
+			},
+			async [Symbol.asyncDispose]() {
+				try {
+					await browser.close();
+				} catch {}
+			}
+		};
+	} catch (err) {
+		console.warn("[ox-content:og-image] Chromium not available, skipping OG image generation.", err instanceof Error ? err.message : err);
+		return null;
+	}
+}
+//#endregion
+//#region src/og-image/template.ts
+/**
+* Escapes HTML special characters.
+*/
+function escapeHtml$2(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+/**
+* Returns the built-in default template function.
+*/
+function getDefaultTemplate() {
+	return function defaultTemplate(props) {
+		const { title, description, siteName, tags } = props;
+		const tagsHtml = tags?.length ? `<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;">
+          ${tags.map((tag) => `<span style="background:rgba(255,255,255,0.15);color:#e2e8f0;padding:4px 12px;border-radius:16px;font-size:14px;">${escapeHtml$2(tag)}</span>`).join("")}
+        </div>` : "";
+		return `<div style="width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:60px 80px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
+  <div style="display:flex;flex-direction:column;gap:16px;flex:1;justify-content:center;">
+    <h1 style="font-size:56px;font-weight:700;color:#ffffff;line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;">${escapeHtml$2(title)}</h1>
+    ${description ? `<p style="font-size:24px;color:#94a3b8;line-height:1.5;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml$2(description)}</p>` : ""}
+  </div>
+  <div style="display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;">
+    ${siteName ? `<span style="font-size:20px;color:#64748b;font-weight:500;">${escapeHtml$2(siteName)}</span>` : ""}
+    ${tagsHtml}
+  </div>
+</div>`;
+	};
+}
+//#endregion
+//#region src/og-image/cache.ts
+/**
+* Content-hash based caching for OG images.
+*
+* Uses SHA256 of (template source + props + options) to determine
+* if a re-render is needed. Cache dir: .cache/og-images
+*/
+/**
+* Computes a cache key from template + props + options.
+*/
+function computeCacheKey(templateSource, props, width, height) {
+	const data = JSON.stringify({
+		templateSource,
+		props,
+		width,
+		height
+	});
+	return crypto.createHash("sha256").update(data).digest("hex");
+}
+/**
+* Checks if a cached PNG exists for the given key.
+* Returns the cached file path if found, null otherwise.
+*/
+async function getCached(cacheDir, key) {
+	const filePath = path$1.join(cacheDir, `${key}.png`);
+	try {
+		return await fs_promises.readFile(filePath);
+	} catch {
+		return null;
+	}
+}
+/**
+* Writes a PNG buffer to the cache.
+*/
+async function writeCache(cacheDir, key, png) {
+	await fs_promises.mkdir(cacheDir, { recursive: true });
+	const filePath = path$1.join(cacheDir, `${key}.png`);
+	await fs_promises.writeFile(filePath, png);
+}
+//#endregion
+//#region src/og-image/index.ts
+/**
+* Public API for Chromium-based OG image generation.
+*
+* Orchestrates browser lifecycle, template resolution, caching,
+* and batch rendering with concurrency control.
+*/
+/**
+* Resolves user-provided OG image options with defaults.
+*/
+function resolveOgImageOptions(options) {
+	return {
+		template: options?.template,
+		vuePlugin: options?.vuePlugin ?? "vitejs",
+		width: options?.width ?? 1200,
+		height: options?.height ?? 630,
+		cache: options?.cache ?? true,
+		concurrency: options?.concurrency ?? 1
+	};
+}
+/**
+* Resolves the template function from options.
+*
+* Dispatches by file extension:
+* - `.vue`  → Vue SFC (SSR via vue/server-renderer)
+* - `.svelte` → Svelte SFC (SSR via svelte/server)
+* - `.tsx`/`.jsx` → React Server Component (SSR via react-dom/server)
+* - others → TypeScript template (direct function export)
+*/
+async function resolveTemplate(options, root) {
+	if (!options.template) return getDefaultTemplate();
+	const templatePath = path$1.resolve(root, options.template);
+	const fs = await import("fs/promises");
+	try {
+		await fs.access(templatePath);
+	} catch {
+		throw new Error(`[ox-content:og-image] Template file not found: ${templatePath}`);
+	}
+	switch (path$1.extname(templatePath).toLowerCase()) {
+		case ".vue": return resolveVueTemplate(templatePath, options, root);
+		case ".svelte": return resolveSvelteTemplate(templatePath, root);
+		case ".tsx":
+		case ".jsx": return resolveReactTemplate(templatePath, root);
+		default: return resolveTsTemplate(templatePath, options, root);
+	}
+}
+/**
+* Resolves a plain TypeScript template (existing behavior).
+*/
+async function resolveTsTemplate(templatePath, options, root) {
+	const fs = await import("fs/promises");
+	const { rolldown } = await import("rolldown");
+	const cacheDir = path$1.join(root, ".cache", "og-images");
+	await fs.mkdir(cacheDir, { recursive: true });
+	const outfile = path$1.join(cacheDir, "_template.mjs");
+	const bundle = await rolldown({
+		input: templatePath,
+		platform: "node"
+	});
+	await bundle.write({
+		file: outfile,
+		format: "esm"
+	});
+	await bundle.close();
+	const templateFn = (await import(`${outfile}?t=${Date.now()}`)).default;
+	if (typeof templateFn !== "function") throw new Error(`[ox-content:og-image] Template must default-export a function: ${options.template}`);
+	return templateFn;
+}
+/**
+* Resolves a Vue SFC template via SSR.
+*
+* Compiles the SFC with @vue/compiler-sfc (or @vizejs/vite-plugin),
+* bundles with rolldown, then wraps with createSSRApp + renderToString.
+*/
+async function resolveVueTemplate(templatePath, options, root) {
+	const fs = await import("fs/promises");
+	const { rolldown } = await import("rolldown");
+	const cacheDir = path$1.join(root, ".cache", "og-images");
+	await fs.mkdir(cacheDir, { recursive: true });
+	const outfile = path$1.join(cacheDir, "_template_vue.mjs");
+	const bundle = await rolldown({
+		input: templatePath,
+		platform: "node",
+		external: ["vue", "vue/server-renderer"],
+		plugins: options.vuePlugin === "vizejs" ? await getVizejsPlugin() : [createVueCompilerPlugin()]
+	});
+	await bundle.write({
+		file: outfile,
+		format: "esm"
+	});
+	await bundle.close();
+	const Component = (await import(`${outfile}?t=${Date.now()}`)).default;
+	if (!Component) throw new Error(`[ox-content:og-image] Vue template must have a default export: ${templatePath}`);
+	const { createSSRApp } = await import("vue");
+	const { renderToString } = await import("vue/server-renderer");
+	return async (props) => {
+		return renderToString(createSSRApp(Component, props));
+	};
+}
+/**
+* Creates a rolldown plugin that compiles Vue SFCs using @vue/compiler-sfc.
+*/
+function createVueCompilerPlugin() {
+	return {
+		name: "ox-content-vue-sfc",
+		async transform(code, id) {
+			if (!id.endsWith(".vue")) return null;
+			let compilerSfc;
+			try {
+				compilerSfc = await import("@vue/compiler-sfc");
+			} catch {
+				throw new Error("[ox-content:og-image] @vue/compiler-sfc is required for .vue templates. Install it with: pnpm add -D @vue/compiler-sfc");
+			}
+			const { descriptor } = compilerSfc.parse(code, { filename: id });
+			let scriptCode;
+			if (descriptor.scriptSetup || descriptor.script) scriptCode = compilerSfc.compileScript(descriptor, {
+				id,
+				inlineTemplate: true
+			}).content;
+			else {
+				if (!descriptor.template) throw new Error(`[ox-content:og-image] Vue SFC must have a <template> or <script>: ${id}`);
+				const templateResult = compilerSfc.compileTemplate({
+					source: descriptor.template.content,
+					filename: id,
+					id
+				});
+				if (templateResult.errors.length > 0) throw new Error(`[ox-content:og-image] Vue template compilation errors in ${id}: ${templateResult.errors.join(", ")}`);
+				scriptCode = `${templateResult.code}\nexport default { render }`;
+			}
+			const isTs = !!(descriptor.scriptSetup?.lang === "ts" || descriptor.script?.lang === "ts");
+			return {
+				code: scriptCode,
+				moduleType: isTs ? "ts" : "js"
+			};
+		}
+	};
+}
+/**
+* Loads @vizejs/vite-plugin as a rolldown plugin for Vue SFC compilation.
+*/
+async function getVizejsPlugin() {
+	try {
+		const vizejs = await import("@vizejs/vite-plugin");
+		const plugin = vizejs.default?.() ?? vizejs;
+		return Array.isArray(plugin) ? plugin : [plugin];
+	} catch {
+		throw new Error("[ox-content:og-image] @vizejs/vite-plugin is required when vuePlugin is 'vizejs'. Install it with: pnpm add -D @vizejs/vite-plugin");
+	}
+}
+/**
+* Resolves a Svelte SFC template via SSR.
+*
+* Compiles the SFC with svelte/compiler (server mode + runes),
+* bundles with rolldown, then wraps with svelte/server render().
+*/
+async function resolveSvelteTemplate(templatePath, root) {
+	const fs = await import("fs/promises");
+	const { rolldown } = await import("rolldown");
+	const cacheDir = path$1.join(root, ".cache", "og-images");
+	await fs.mkdir(cacheDir, { recursive: true });
+	const outfile = path$1.join(cacheDir, "_template_svelte.mjs");
+	const bundle = await rolldown({
+		input: templatePath,
+		platform: "node",
+		external: [
+			"svelte",
+			"svelte/server",
+			"svelte/internal",
+			"svelte/internal/server"
+		],
+		plugins: [createSvelteCompilerPlugin()]
+	});
+	await bundle.write({
+		file: outfile,
+		format: "esm"
+	});
+	await bundle.close();
+	const Component = (await import(`${outfile}?t=${Date.now()}`)).default;
+	if (!Component) throw new Error(`[ox-content:og-image] Svelte template must have a default export: ${templatePath}`);
+	const { render } = await import("svelte/server");
+	return async (props) => {
+		const { body } = render(Component, { props });
+		return body;
+	};
+}
+/**
+* Creates a rolldown plugin that compiles Svelte SFCs using svelte/compiler.
+*/
+function createSvelteCompilerPlugin() {
+	return {
+		name: "ox-content-svelte-sfc",
+		async transform(code, id) {
+			if (!id.endsWith(".svelte")) return null;
+			let svelteCompiler;
+			try {
+				svelteCompiler = await import("svelte/compiler");
+			} catch {
+				throw new Error("[ox-content:og-image] svelte is required for .svelte templates. Install it with: pnpm add -D svelte");
+			}
+			return { code: svelteCompiler.compile(code, {
+				generate: "server",
+				runes: true,
+				filename: id
+			}).js.code };
+		}
+	};
+}
+/**
+* Resolves a React (.tsx/.jsx) template via SSR.
+*
+* Bundles with rolldown (JSX transform), then wraps with
+* react-dom/server renderToReadableStream for async Server Component support.
+*/
+async function resolveReactTemplate(templatePath, root) {
+	const fs = await import("fs/promises");
+	const { rolldown } = await import("rolldown");
+	const cacheDir = path$1.join(root, ".cache", "og-images");
+	await fs.mkdir(cacheDir, { recursive: true });
+	const outfile = path$1.join(cacheDir, "_template_react.mjs");
+	const bundle = await rolldown({
+		input: templatePath,
+		platform: "node",
+		external: [
+			"react",
+			"react/jsx-runtime",
+			"react/jsx-dev-runtime",
+			"react-dom",
+			"react-dom/server"
+		],
+		transform: { jsx: "react-jsx" }
+	});
+	await bundle.write({
+		file: outfile,
+		format: "esm"
+	});
+	await bundle.close();
+	const Component = (await import(`${outfile}?t=${Date.now()}`)).default;
+	if (!Component) throw new Error(`[ox-content:og-image] React template must have a default export: ${templatePath}`);
+	let React;
+	let ReactDOMServer;
+	try {
+		React = await import("react");
+		ReactDOMServer = await import("react-dom/server");
+	} catch {
+		throw new Error("[ox-content:og-image] react and react-dom are required for .tsx/.jsx templates. Install them with: pnpm add -D react react-dom");
+	}
+	return async (props) => {
+		const element = React.createElement(Component, props);
+		const reader = (await ReactDOMServer.renderToReadableStream(element)).getReader();
+		const chunks = [];
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) break;
+			chunks.push(value);
+		}
+		const decoder = new TextDecoder();
+		return chunks.map((chunk) => decoder.decode(chunk, { stream: true })).join("") + decoder.decode();
+	};
+}
+/**
+* Computes a stable template source identifier for cache keys.
+*
+* For custom templates, hashes the file content so cache invalidates
+* when the template changes. For the default template, returns a fixed string.
+*/
+async function computeTemplateSource(options, root) {
+	if (!options.template) return "__default__";
+	const fs = await import("fs/promises");
+	const templatePath = path$1.resolve(root, options.template);
+	const content = await fs.readFile(templatePath, "utf-8");
+	return crypto.createHash("sha256").update(content).digest("hex");
+}
+/**
+* Generates OG images for a batch of pages.
+*
+* Manages the full lifecycle: resolve template → launch browser (with `using`) →
+* render each page (with caching and concurrency).
+*
+* All errors are non-fatal: failures are reported in results but never throw.
+*/
+async function generateOgImages(pages, options, root) {
+	if (pages.length === 0) return [];
+	const templateFn = await resolveTemplate(options, root);
+	const templateSource = await computeTemplateSource(options, root);
+	const cacheDir = path$1.join(root, ".cache", "og-images");
+	if (options.cache) {
+		const allCached = await tryServeAllFromCache(pages, templateSource, options, cacheDir);
+		if (allCached) return allCached;
+	}
+	await using session = await openBrowser();
+	if (!session) return pages.map((p) => ({
+		outputPath: p.outputPath,
+		cached: false,
+		error: "Chromium not available"
+	}));
+	const results = [];
+	const concurrency = Math.max(1, options.concurrency);
+	for (let i = 0; i < pages.length; i += concurrency) {
+		const batch = pages.slice(i, i + concurrency);
+		const batchResults = await Promise.all(batch.map((entry) => renderSinglePage(entry, templateFn, templateSource, options, cacheDir, session)));
+		results.push(...batchResults);
+	}
+	return results;
+}
+/**
+* Tries to serve all pages from cache.
+* Returns results if ALL pages are cached, null otherwise.
+*/
+async function tryServeAllFromCache(pages, templateSource, options, cacheDir) {
+	const fs = await import("fs/promises");
+	const results = [];
+	for (const entry of pages) {
+		const cached = await getCached(cacheDir, computeCacheKey(templateSource, entry.props, options.width, options.height));
+		if (!cached) return null;
+		await fs.mkdir(path$1.dirname(entry.outputPath), { recursive: true });
+		await fs.writeFile(entry.outputPath, cached);
+		results.push({
+			outputPath: entry.outputPath,
+			cached: true
+		});
+	}
+	return results;
+}
+/**
+* Renders a single page to PNG, with cache support.
+*/
+async function renderSinglePage(entry, templateFn, templateSource, options, cacheDir, session) {
+	const fs = await import("fs/promises");
+	try {
+		if (options.cache) {
+			const cached = await getCached(cacheDir, computeCacheKey(templateSource, entry.props, options.width, options.height));
+			if (cached) {
+				await fs.mkdir(path$1.dirname(entry.outputPath), { recursive: true });
+				await fs.writeFile(entry.outputPath, cached);
+				return {
+					outputPath: entry.outputPath,
+					cached: true
+				};
+			}
+		}
+		const html = await templateFn(entry.props);
+		const png = await session.renderPage(html, options.width, options.height);
+		await fs.mkdir(path$1.dirname(entry.outputPath), { recursive: true });
+		await fs.writeFile(entry.outputPath, png);
+		if (options.cache) await writeCache(cacheDir, computeCacheKey(templateSource, entry.props, options.width, options.height), png);
+		return {
+			outputPath: entry.outputPath,
+			cached: false
+		};
+	} catch (err) {
+		return {
+			outputPath: entry.outputPath,
+			cached: false,
+			error: err instanceof Error ? err.message : String(err)
+		};
+	}
+}
 //#endregion
 //#region src/plugins/index.ts
 /**
@@ -9267,9 +9764,9 @@ function getOgImagePath(inputPath, srcDir, outDir) {
 	const baseName = path$1.relative(srcDir, inputPath).replace(/\.(?:md|markdown)$/i, "");
 	if (baseName === "index" || baseName.endsWith("/index")) {
 		const dirPath = baseName.replace(/\/?index$/, "") || "";
-		return path$1.join(outDir, dirPath, "og-image.svg");
+		return path$1.join(outDir, dirPath, "og-image.png");
 	}
-	return path$1.join(outDir, baseName, "og-image.svg");
+	return path$1.join(outDir, baseName, "og-image.png");
 }
 /**
 * Gets the OG image URL for use in meta tags.
@@ -9278,8 +9775,8 @@ function getOgImagePath(inputPath, srcDir, outDir) {
 function getOgImageUrl(inputPath, srcDir, base, siteUrl) {
 	const urlPath = getUrlPath(inputPath, srcDir);
 	let relativePath;
-	if (urlPath === "/" || urlPath === "") relativePath = `${base}og-image.svg`;
-	else relativePath = `${base}${urlPath}/og-image.svg`;
+	if (urlPath === "/" || urlPath === "") relativePath = `${base}og-image.png`;
+	else relativePath = `${base}${urlPath}/og-image.png`;
 	if (siteUrl) return `${siteUrl.replace(/\/$/, "")}${relativePath}`;
 	return relativePath;
 }
@@ -9394,6 +9891,10 @@ async function buildSsg(options, root) {
 		const pkg = JSON.parse(await fs_promises.readFile(pkgPath, "utf-8"));
 		if (pkg.name) siteName = formatTitle(pkg.name);
 	} catch {}
+	const ogImageEntries = [];
+	const ogImageUrlMap = /* @__PURE__ */ new Map();
+	const shouldGenerateOgImages = (options.ogImage || ssgOptions.generateOgImage) && !ssgOptions.bare;
+	const pageResults = [];
 	for (const inputPath of markdownFiles) try {
 		const result = await transformMarkdown(await fs_promises.readFile(inputPath, "utf-8"), inputPath, options, {
 			convertMdLinks: true,
@@ -9416,31 +9917,56 @@ async function buildSsg(options, root) {
 		transformedHtml = restoreMermaidSvgs(transformedHtml, mermaidSvgs);
 		const title = extractTitle(transformedHtml, result.frontmatter);
 		const description = result.frontmatter.description;
-		let pageOgImage = ssgOptions.ogImage;
-		if (ssgOptions.generateOgImage && !ssgOptions.bare) {
-			const svg = await generateOgImageSvg({
-				title,
-				description,
-				siteName,
-				author: result.frontmatter.author
-			}, options.ogImageOptions ? {
-				width: options.ogImageOptions.width,
-				height: options.ogImageOptions.height,
-				backgroundColor: options.ogImageOptions.background,
-				textColor: options.ogImageOptions.textColor
-			} : void 0);
-			if (svg) {
-				const ogImageOutputPath = getOgImagePath(inputPath, srcDir, outDir);
-				await fs_promises.mkdir(path$1.dirname(ogImageOutputPath), { recursive: true });
-				await fs_promises.writeFile(ogImageOutputPath, svg, "utf-8");
-				generatedFiles.push(ogImageOutputPath);
-				pageOgImage = getOgImageUrl(inputPath, srcDir, base, ssgOptions.siteUrl);
-			}
+		pageResults.push({
+			inputPath,
+			transformedHtml,
+			title,
+			description,
+			frontmatter: result.frontmatter,
+			toc: result.toc
+		});
+		if (shouldGenerateOgImages) {
+			const ogImageOutputPath = getOgImagePath(inputPath, srcDir, outDir);
+			const { layout: _layout, ...frontmatterRest } = result.frontmatter;
+			ogImageEntries.push({
+				props: {
+					...frontmatterRest,
+					title,
+					description,
+					siteName
+				},
+				outputPath: ogImageOutputPath
+			});
+			ogImageUrlMap.set(inputPath, getOgImageUrl(inputPath, srcDir, base, ssgOptions.siteUrl));
 		}
+	} catch (err) {
+		const errorMessage = err instanceof Error ? err.message : String(err);
+		errors.push(`Failed to process ${inputPath}: ${errorMessage}`);
+	}
+	if (shouldGenerateOgImages && ogImageEntries.length > 0) try {
+		const ogResults = await generateOgImages(ogImageEntries, options.ogImageOptions, root);
+		let ogSuccessCount = 0;
+		for (const result of ogResults) if (result.error) errors.push(`OG image failed for ${result.outputPath}: ${result.error}`);
+		else {
+			generatedFiles.push(result.outputPath);
+			ogSuccessCount++;
+		}
+		if (ogSuccessCount > 0) {
+			const cachedCount = ogResults.filter((r) => r.cached && !r.error).length;
+			console.log(`[ox-content:og-image] Generated ${ogSuccessCount} OG images` + (cachedCount > 0 ? ` (${cachedCount} from cache)` : ""));
+		}
+	} catch (err) {
+		const errorMessage = err instanceof Error ? err.message : String(err);
+		console.warn(`[ox-content:og-image] Batch generation failed: ${errorMessage}`);
+	}
+	for (const pageResult of pageResults) try {
+		const { inputPath, transformedHtml, title, description, frontmatter, toc } = pageResult;
+		let pageOgImage = ssgOptions.ogImage;
+		if (shouldGenerateOgImages && ogImageUrlMap.has(inputPath)) pageOgImage = ogImageUrlMap.get(inputPath);
 		let entryPage;
-		if (result.frontmatter.layout === "entry") entryPage = {
-			hero: result.frontmatter.hero,
-			features: result.frontmatter.features
+		if (frontmatter.layout === "entry") entryPage = {
+			hero: frontmatter.hero,
+			features: frontmatter.features
 		};
 		let html;
 		if (ssgOptions.bare) html = generateBareHtmlPage(transformedHtml, title);
@@ -9448,8 +9974,8 @@ async function buildSsg(options, root) {
 			title,
 			description,
 			content: transformedHtml,
-			toc: result.toc,
-			frontmatter: result.frontmatter,
+			toc,
+			frontmatter,
 			path: getUrlPath(inputPath, srcDir),
 			href: getHref(inputPath, srcDir, base, ssgOptions.extension),
 			entryPage
@@ -9460,7 +9986,7 @@ async function buildSsg(options, root) {
 		generatedFiles.push(outputPath);
 	} catch (err) {
 		const errorMessage = err instanceof Error ? err.message : String(err);
-		errors.push(`Failed to process ${inputPath}: ${errorMessage}`);
+		errors.push(`Failed to generate HTML for ${pageResult.inputPath}: ${errorMessage}`);
 	}
 	return {
 		files: generatedFiles,
@@ -10481,7 +11007,7 @@ function resolveOptions(options) {
 		toc: options.toc ?? true,
 		tocMaxDepth: options.tocMaxDepth ?? 3,
 		ogImage: options.ogImage ?? false,
-		ogImageOptions: options.ogImageOptions ?? {},
+		ogImageOptions: resolveOgImageOptions(options.ogImageOptions),
 		transformers: options.transformers ?? [],
 		docs: resolveDocsOptions(options.docs),
 		search: resolveSearchOptions(options.search)
@@ -10527,6 +11053,7 @@ exports.fetchRepoData = require_github.fetchRepoData;
 exports.generateFrontmatterTypes = generateFrontmatterTypes;
 exports.generateHydrationScript = generateHydrationScript;
 exports.generateMarkdown = generateMarkdown;
+exports.generateOgImages = generateOgImages;
 exports.generateTabsCSS = require_tabs.generateTabsCSS;
 exports.generateTypes = generateTypes;
 exports.hasIslands = hasIslands;
@@ -10543,6 +11070,7 @@ exports.renderAllPages = renderAllPages;
 exports.renderPage = renderPage;
 exports.renderToString = renderToString;
 exports.resolveDocsOptions = resolveDocsOptions;
+exports.resolveOgImageOptions = resolveOgImageOptions;
 exports.resolveSearchOptions = resolveSearchOptions;
 exports.resolveSsgOptions = resolveSsgOptions;
 exports.resolveTheme = resolveTheme;