@ox-content/vite-plugin 0.6.0 → 0.7.0

package/dist/index.js

@@ -7006,7 +7006,7 @@ async function loadNapiBindings() {
 async function transformMarkdown(source, filePath, options, ssgOptions) {
 	const napi = await loadNapiBindings();
 	if (!napi) throw new Error("[ox-content] NAPI bindings not available. Please ensure @ox-content/napi is built.");
-	const { content: markdownContent, frontmatter } = parseFrontmatter(source);
+	const { content: markdownContent, frontmatter } = parseFrontmatter$1(source);
 	const result = napi.transform(markdownContent, {
 		gfm: options.gfm,
 		footnotes: options.footnotes,
@@ -7041,7 +7041,7 @@ async function transformMarkdown(source, filePath, options, ssgOptions) {
 * Parses YAML frontmatter from Markdown content.
 * Uses proper YAML parser for full nested object support.
 */
-function parseFrontmatter(source) {
+function parseFrontmatter$1(source) {
 	if (!source.startsWith("---")) return {
 		content: source,
 		frontmatter: {}
@@ -7981,6 +7981,9 @@ function resolveDocsOptions(options) {
 //#endregion
 //#region src/og-image/renderer.ts
 /**
+* HTML → PNG renderer using Chromium screenshots via Playwright.
+*/
+/**
 * Wraps template HTML in a minimal document with viewport locked to given dimensions.
 */
 function wrapHtml(bodyHtml, width, height) {
@@ -8003,13 +8006,47 @@ html, body { width: ${width}px; height: ${height}px; overflow: hidden; }
 * @param html - HTML string from template function
 * @param width - Image width
 * @param height - Image height
+* @param publicDir - Optional public directory for serving local assets (images, fonts, etc.)
 * @returns PNG buffer
 */
-async function renderHtmlToPng(page, html, width, height) {
+async function renderHtmlToPng(page, html, width, height, publicDir) {
 	await page.setViewportSize({
 		width,
 		height
 	});
+	if (publicDir) {
+		const fs = await import("fs/promises");
+		await page.route("**/*", async (route) => {
+			const url = new URL(route.request().url());
+			if (url.protocol !== "http:" && url.protocol !== "https:") {
+				await route.continue();
+				return;
+			}
+			const filePath = path.join(publicDir, url.pathname);
+			try {
+				const body = await fs.readFile(filePath);
+				const ext = path.extname(filePath).toLowerCase();
+				await route.fulfill({
+					body,
+					contentType: {
+						".svg": "image/svg+xml",
+						".png": "image/png",
+						".jpg": "image/jpeg",
+						".jpeg": "image/jpeg",
+						".gif": "image/gif",
+						".webp": "image/webp",
+						".woff": "font/woff",
+						".woff2": "font/woff2",
+						".ttf": "font/ttf",
+						".css": "text/css",
+						".js": "application/javascript"
+					}[ext] || "application/octet-stream"
+				});
+			} catch {
+				await route.continue();
+			}
+		});
+	}
 	const fullHtml = wrapHtml(html, width, height);
 	await page.setContent(fullHtml, { waitUntil: "networkidle" });
 	const screenshot = await page.screenshot({
@@ -8050,10 +8087,10 @@ async function openBrowser() {
 			]
 		});
 		return {
-			async renderPage(html, width, height) {
+			async renderPage(html, width, height, publicDir) {
 				const page = await browser.newPage();
 				try {
-					return await renderHtmlToPng(page, html, width, height);
+					return await renderHtmlToPng(page, html, width, height, publicDir);
 				} finally {
 					await page.close();
 				}
@@ -8292,10 +8329,35 @@ async function resolveVueTemplate(templatePath, options, root) {
 	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}`);
+	let extractedCss = "";
+	try {
+		let compilerSfc;
+		try {
+			compilerSfc = await import("@vue/compiler-sfc");
+		} catch {
+			compilerSfc = null;
+		}
+		if (compilerSfc) {
+			const sfcSource = await fs.readFile(templatePath, "utf-8");
+			const { descriptor } = compilerSfc.parse(sfcSource, { filename: templatePath });
+			const scopeId = Component.__scopeId;
+			for (const style of descriptor.styles) if (style.scoped && scopeId) {
+				const result = compilerSfc.compileStyle({
+					id: scopeId,
+					source: style.content,
+					scoped: true,
+					filename: templatePath
+				});
+				if (!result.errors.length) extractedCss += result.code;
+			} else extractedCss += style.content;
+		}
+	} catch {}
 	const { createSSRApp } = await import("vue");
 	const { renderToString } = await import("vue/server-renderer");
 	return async (props) => {
-		return renderToString(createSSRApp(Component, props));
+		const html = await renderToString(createSSRApp(Component, props));
+		if (extractedCss) return `<style>${extractedCss}</style>${html}`;
+		return html;
 	};
 }
 /**
@@ -8497,10 +8559,11 @@ async function generateOgImages(pages, options, root) {
 			error: "Chromium not available"
 		}));
 		const results = [];
+		const publicDir = path.join(root, "public");
 		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)));
+			const batchResults = await Promise.all(batch.map((entry) => renderSinglePage(entry, templateFn, templateSource, options, cacheDir, session, publicDir)));
 			results.push(...batchResults);
 		}
 		return results;
@@ -8532,7 +8595,7 @@ async function tryServeAllFromCache(pages, templateSource, options, cacheDir) {
 /**
 * Renders a single page to PNG, with cache support.
 */
-async function renderSinglePage(entry, templateFn, templateSource, options, cacheDir, session) {
+async function renderSinglePage(entry, templateFn, templateSource, options, cacheDir, session, publicDir) {
 	const fs = await import("fs/promises");
 	try {
 		if (options.cache) {
@@ -8547,7 +8610,7 @@ async function renderSinglePage(entry, templateFn, templateSource, options, cach
 			}
 		}
 		const html = await templateFn(entry.props);
-		const png = await session.renderPage(html, options.width, options.height);
+		const png = await session.renderPage(html, options.width, options.height, publicDir);
 		await fs.mkdir(path.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);
@@ -9766,7 +9829,7 @@ function renderTemplate(template, data) {
 /**
 * Extracts title from content or frontmatter.
 */
-function extractTitle(content, frontmatter) {
+function extractTitle$1(content, frontmatter) {
 	if (frontmatter.title && typeof frontmatter.title === "string") return frontmatter.title;
 	const h1Match = content.match(/<h1[^>]*>([^<]+)<\/h1>/i);
 	if (h1Match) return h1Match[1].trim();
@@ -9851,7 +9914,7 @@ function getOutputPath(inputPath, srcDir, outDir, extension) {
 /**
 * Converts a markdown file path to a relative URL path.
 */
-function getUrlPath(inputPath, srcDir) {
+function getUrlPath$1(inputPath, srcDir) {
 	const baseName = path.relative(srcDir, inputPath).replace(/\.(?:md|markdown)$/i, "");
 	if (baseName === "index" || baseName.endsWith("/index")) return baseName.replace(/\/?index$/, "") || "/";
 	return baseName;
@@ -9860,7 +9923,7 @@ function getUrlPath(inputPath, srcDir) {
 * Converts a markdown file path to an href.
 */
 function getHref(inputPath, srcDir, base, extension) {
-	const urlPath = getUrlPath(inputPath, srcDir);
+	const urlPath = getUrlPath$1(inputPath, srcDir);
 	if (urlPath === "/" || urlPath === "") return `${base}index${extension}`;
 	return `${base}${urlPath}/index${extension}`;
 }
@@ -9880,7 +9943,7 @@ function getOgImagePath(inputPath, srcDir, outDir) {
 * If siteUrl is provided, returns an absolute URL (required for SNS sharing).
 */
 function getOgImageUrl(inputPath, srcDir, base, siteUrl) {
-	const urlPath = getUrlPath(inputPath, srcDir);
+	const urlPath = getUrlPath$1(inputPath, srcDir);
 	let relativePath;
 	if (urlPath === "/" || urlPath === "") relativePath = `${base}og-image.png`;
 	else relativePath = `${base}${urlPath}/og-image.png`;
@@ -9934,7 +9997,7 @@ function buildNavItems(markdownFiles, srcDir, base, extension) {
 		let groupKey = "";
 		if (parts.length > 1) groupKey = parts[0];
 		if (!groups.has(groupKey)) groups.set(groupKey, []);
-		const urlPath = getUrlPath(file, srcDir);
+		const urlPath = getUrlPath$1(file, srcDir);
 		let title;
 		if (urlPath === "/" || urlPath === "") title = "Overview";
 		else title = getDisplayTitle(file);
@@ -10023,7 +10086,7 @@ async function buildSsg(options, root) {
 		transformedHtml = await transformAllPlugins(transformedHtml, pluginOptions);
 		if (hasIslands(transformedHtml)) transformedHtml = (await transformIslands(transformedHtml)).html;
 		transformedHtml = restoreMermaidSvgs(transformedHtml, mermaidSvgs);
-		const title = extractTitle(transformedHtml, result.frontmatter);
+		const title = extractTitle$1(transformedHtml, result.frontmatter);
 		const description = result.frontmatter.description;
 		pageResults.push({
 			inputPath,
@@ -10091,7 +10154,7 @@ async function buildSsg(options, root) {
 			content: transformedHtml,
 			toc,
 			frontmatter,
-			path: getUrlPath(inputPath, srcDir),
+			path: getUrlPath$1(inputPath, srcDir),
 			href: getHref(inputPath, srcDir, base, ssgOptions.extension),
 			entryPage
 		}, navItems, siteName, base, pageOgImage, ssgOptions.theme);
@@ -10390,6 +10453,353 @@ export default { search, searchOptions, loadIndex };
 `;
 }
 
+//#endregion
+//#region src/og-viewer.ts
+/**
+* OG Viewer - Dev tool for previewing Open Graph metadata
+*
+* Accessible at /__og-viewer during development.
+* Shows all pages with their OG metadata, validation warnings,
+* and social card previews.
+*/
+function parseFrontmatter(content) {
+	const match = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+	if (!match) return {};
+	const yaml = match[1];
+	const result = {};
+	for (const line of yaml.split("\n")) {
+		const kv = line.match(/^(\w[\w-]*):\s*(.*)$/);
+		if (!kv) continue;
+		const [, key, rawValue] = kv;
+		let value = rawValue.trim();
+		if (typeof value === "string" && value.startsWith("[") && value.endsWith("]")) value = value.slice(1, -1).split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
+		else if (typeof value === "string" && /^['"].*['"]$/.test(value)) value = value.slice(1, -1);
+		else if (value === "true") value = true;
+		else if (value === "false") value = false;
+		result[key] = value;
+	}
+	return result;
+}
+function extractTitle(content, frontmatter) {
+	if (typeof frontmatter.title === "string" && frontmatter.title) return frontmatter.title;
+	const match = content.match(/^#\s+(.+)$/m);
+	return match ? match[1].trim() : "";
+}
+function getUrlPath(filePath, srcDir) {
+	let rel = path.relative(srcDir, filePath).replace(/\\/g, "/");
+	rel = rel.replace(/\.md$/, "");
+	if (rel === "index") return "/";
+	if (rel.endsWith("/index")) rel = rel.slice(0, -6);
+	return "/" + rel;
+}
+function computeOgImageUrl(urlPath, base, siteUrl, generateOgImage, staticOgImage) {
+	if (!generateOgImage) return staticOgImage || "";
+	const cleanBase = base.endsWith("/") ? base : base + "/";
+	let relativePath;
+	if (urlPath === "/") relativePath = `${cleanBase}og-image.png`;
+	else relativePath = `${cleanBase}${urlPath.replace(/^\//, "")}/og-image.png`;
+	if (siteUrl) return `${siteUrl.replace(/\/$/, "")}${relativePath}`;
+	return relativePath;
+}
+function validatePage(page, options) {
+	const warnings = [];
+	if (!page.title) warnings.push({
+		level: "error",
+		message: "title is missing"
+	});
+	else if (page.title.length > 70) warnings.push({
+		level: "warning",
+		message: `title is too long (${page.title.length}/70)`
+	});
+	if (!page.description) warnings.push({
+		level: "warning",
+		message: "description is missing"
+	});
+	else if (page.description.length > 200) warnings.push({
+		level: "warning",
+		message: `description is too long (${page.description.length}/200)`
+	});
+	if ((options.ogImage || options.ssg.generateOgImage) && !options.ssg.siteUrl) warnings.push({
+		level: "warning",
+		message: "ogImage enabled but siteUrl is not set"
+	});
+	return warnings;
+}
+async function collectPages(options, root) {
+	const srcDir = path.resolve(root, options.srcDir);
+	const files = await glob("**/*.md", {
+		cwd: srcDir,
+		absolute: true
+	});
+	const pages = [];
+	const generateOgImage = options.ogImage || options.ssg.generateOgImage;
+	for (const file of files.sort()) {
+		const content = fs$1.readFileSync(file, "utf-8");
+		const frontmatter = parseFrontmatter(content);
+		if (frontmatter.layout === "entry") continue;
+		const title = extractTitle(content, frontmatter);
+		const description = typeof frontmatter.description === "string" ? frontmatter.description : "";
+		const author = typeof frontmatter.author === "string" ? frontmatter.author : "";
+		const tags = Array.isArray(frontmatter.tags) ? frontmatter.tags : typeof frontmatter.tags === "string" ? [frontmatter.tags] : [];
+		const urlPath = getUrlPath(file, srcDir);
+		const ogImageUrl = computeOgImageUrl(urlPath, options.base, options.ssg.siteUrl, generateOgImage, options.ssg.ogImage);
+		const page = {
+			path: path.relative(srcDir, file),
+			urlPath,
+			title,
+			description,
+			author,
+			tags,
+			ogImageUrl,
+			warnings: []
+		};
+		page.warnings = validatePage(page, options);
+		pages.push(page);
+	}
+	return pages;
+}
+function renderViewerHtml(pages, options) {
+	const generateOgImage = options.ogImage || options.ssg.generateOgImage;
+	const totalWarnings = pages.reduce((sum, p) => sum + p.warnings.filter((w) => w.level === "warning").length, 0);
+	const totalErrors = pages.reduce((sum, p) => sum + p.warnings.filter((w) => w.level === "error").length, 0);
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OG Viewer - ox-content</title>
+  <style>
+    :root {
+      --bg: #ffffff;
+      --bg-card: #f8f9fa;
+      --bg-preview: #ffffff;
+      --text: #1a1a2e;
+      --text-muted: #6b7280;
+      --border: #e5e7eb;
+      --accent: #e8590c;
+      --accent-light: #fff4e6;
+      --error: #dc2626;
+      --error-bg: #fef2f2;
+      --warning: #d97706;
+      --warning-bg: #fffbeb;
+      --success: #16a34a;
+      --tag-bg: #f0f0f0;
+      --shadow: 0 1px 3px rgba(0,0,0,0.08);
+      --radius: 8px;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #0f172a;
+        --bg-card: #1e293b;
+        --bg-preview: #334155;
+        --text: #e2e8f0;
+        --text-muted: #94a3b8;
+        --border: #334155;
+        --accent: #fb923c;
+        --accent-light: #431407;
+        --error: #f87171;
+        --error-bg: #450a0a;
+        --warning: #fbbf24;
+        --warning-bg: #451a03;
+        --success: #4ade80;
+        --tag-bg: #334155;
+        --shadow: 0 1px 3px rgba(0,0,0,0.3);
+      }
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); }
+    .header { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
+    .header svg { width: 28px; height: 28px; color: var(--accent); }
+    .header h1 { font-size: 18px; font-weight: 600; }
+    .header h1 span { color: var(--text-muted); font-weight: 400; }
+    .header-actions { margin-left: auto; }
+    .btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 13px; transition: all 0.15s; }
+    .btn:hover { border-color: var(--accent); color: var(--accent); }
+    .summary { padding: 12px 24px; display: flex; gap: 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-muted); flex-wrap: wrap; align-items: center; }
+    .summary-item { display: flex; align-items: center; gap: 4px; }
+    .summary-item strong { color: var(--text); }
+    .summary-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+    .dot-error { background: var(--error); }
+    .dot-warning { background: var(--warning); }
+    .dot-success { background: var(--success); }
+    .toolbar { padding: 12px 24px; display: flex; gap: 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; align-items: center; }
+    .filter-btn { padding: 4px 12px; border: 1px solid var(--border); border-radius: 16px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; transition: all 0.15s; }
+    .filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+    .search-input { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-size: 13px; flex: 1; min-width: 200px; }
+    .search-input::placeholder { color: var(--text-muted); }
+    .container { padding: 24px; display: flex; flex-direction: column; gap: 20px; max-width: 1200px; margin: 0 auto; }
+    .card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); overflow: hidden; }
+    .card-header { padding: 16px; border-bottom: 1px solid var(--border); }
+    .card-path { font-size: 12px; color: var(--text-muted); font-family: monospace; margin-bottom: 4px; }
+    .card-title { font-size: 16px; font-weight: 600; }
+    .card-desc { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
+    .card-meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
+    .tag { padding: 2px 8px; background: var(--tag-bg); border-radius: 4px; font-size: 11px; color: var(--text-muted); }
+    .card-warnings { padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
+    .warning-item { font-size: 12px; padding: 4px 8px; border-radius: 4px; }
+    .warning-item.error { background: var(--error-bg); color: var(--error); }
+    .warning-item.warning { background: var(--warning-bg); color: var(--warning); }
+    .card-previews { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+    @media (max-width: 768px) { .card-previews { grid-template-columns: 1fr; } }
+    .preview { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
+    .preview-label { padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.5px; }
+    .preview-card { background: var(--bg-preview); }
+    .preview-img { width: 100%; aspect-ratio: 1200/630; background: linear-gradient(135deg, var(--accent-light), var(--bg-card)); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; overflow: hidden; }
+    .preview-img img { width: 100%; height: 100%; object-fit: cover; }
+    .preview-body { padding: 10px 12px; }
+    .preview-url { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .preview-title { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .preview-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .empty { text-align: center; padding: 60px; color: var(--text-muted); }
+    .spin { animation: spin 0.6s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+    <h1>OG Viewer <span>/ ox-content</span></h1>
+    <div class="header-actions">
+      <button class="btn" id="refresh-btn" onclick="refresh()">Refresh</button>
+    </div>
+  </div>
+  <div class="summary" id="summary">
+    <div class="summary-item"><strong id="s-pages">${pages.length}</strong>&nbsp;pages</div>
+    <div class="summary-item"><span class="summary-dot dot-error"></span>&nbsp;<strong id="s-errors">${totalErrors}</strong>&nbsp;errors</div>
+    <div class="summary-item"><span class="summary-dot dot-warning"></span>&nbsp;<strong id="s-warnings">${totalWarnings}</strong>&nbsp;warnings</div>
+    <div class="summary-item"><span class="summary-dot ${generateOgImage ? "dot-success" : "dot-warning"}"></span>&nbsp;ogImage: <strong>${generateOgImage ? "enabled" : "disabled"}</strong></div>
+  </div>
+  <div class="toolbar">
+    <button class="filter-btn active" data-filter="all" onclick="setFilter('all')">All</button>
+    <button class="filter-btn" data-filter="warnings" onclick="setFilter('warnings')">Warnings</button>
+    <button class="filter-btn" data-filter="errors" onclick="setFilter('errors')">Errors</button>
+    <input class="search-input" type="text" placeholder="Search pages..." oninput="applyFilters()" id="search-input">
+  </div>
+  <div class="container" id="container"></div>
+
+  <script>
+    let pages = ${JSON.stringify(pages)};
+    let currentFilter = 'all';
+
+    function setFilter(f) {
+      currentFilter = f;
+      document.querySelectorAll('.filter-btn').forEach(b => b.classList.toggle('active', b.dataset.filter === f));
+      applyFilters();
+    }
+
+    function applyFilters() {
+      const q = document.getElementById('search-input').value.toLowerCase();
+      const filtered = pages.filter(p => {
+        if (currentFilter === 'errors' && !p.warnings.some(w => w.level === 'error')) return false;
+        if (currentFilter === 'warnings' && !p.warnings.length) return false;
+        if (q && !p.path.toLowerCase().includes(q) && !p.title.toLowerCase().includes(q) && !p.description.toLowerCase().includes(q)) return false;
+        return true;
+      });
+      renderCards(filtered);
+    }
+
+    function esc(s) {
+      const d = document.createElement('div');
+      d.textContent = s;
+      return d.innerHTML;
+    }
+
+    function renderCards(list) {
+      const c = document.getElementById('container');
+      if (!list.length) {
+        c.innerHTML = '<div class="empty">No pages match the current filter.</div>';
+        return;
+      }
+      c.innerHTML = list.map(p => {
+        const warnings = p.warnings.map(w =>
+          '<div class="warning-item ' + w.level + '">' + (w.level === 'error' ? '\\u2716' : '\\u26A0') + ' ' + esc(w.message) + '</div>'
+        ).join('');
+        const tags = p.tags.map(t => '<span class="tag">' + esc(t) + '</span>').join('');
+        const author = p.author ? '<span class="tag">by ' + esc(p.author) + '</span>' : '';
+        const imgHtml = p.ogImageUrl
+          ? '<img src="' + esc(p.ogImageUrl) + '" onerror="this.parentNode.innerHTML=\\'No OG image\\'">'
+          : 'No OG image';
+        const siteHost = ${JSON.stringify(options.ssg.siteUrl || "example.com")};
+        return '<div class="card">'
+          + '<div class="card-header">'
+          + '<div class="card-path">' + esc(p.path) + ' &rarr; ' + esc(p.urlPath) + '</div>'
+          + '<div class="card-title">' + (esc(p.title) || '<em style="color:var(--error)">No title</em>') + '</div>'
+          + (p.description ? '<div class="card-desc">' + esc(p.description) + '</div>' : '')
+          + (tags || author ? '<div class="card-meta">' + author + tags + '</div>' : '')
+          + '</div>'
+          + (warnings ? '<div class="card-warnings">' + warnings + '</div>' : '')
+          + '<div class="card-previews">'
+          + '<div class="preview"><div class="preview-label">Twitter (summary_large_image)</div><div class="preview-card"><div class="preview-img">' + imgHtml + '</div><div class="preview-body"><div class="preview-url">' + esc(siteHost) + '</div><div class="preview-title">' + esc(p.title) + '</div><div class="preview-desc">' + esc(p.description) + '</div></div></div></div>'
+          + '<div class="preview"><div class="preview-label">Facebook (Open Graph)</div><div class="preview-card"><div class="preview-img">' + imgHtml + '</div><div class="preview-body"><div class="preview-url">' + esc(siteHost) + '</div><div class="preview-title">' + esc(p.title) + '</div><div class="preview-desc">' + esc(p.description) + '</div></div></div></div>'
+          + '</div>'
+          + '</div>';
+      }).join('');
+    }
+
+    async function refresh() {
+      const btn = document.getElementById('refresh-btn');
+      btn.textContent = 'Refreshing...';
+      btn.disabled = true;
+      try {
+        const res = await fetch('/__og-viewer/api/pages');
+        pages = await res.json();
+        updateSummary();
+        applyFilters();
+      } catch(e) {
+        console.error('Refresh failed:', e);
+      } finally {
+        btn.textContent = 'Refresh';
+        btn.disabled = false;
+      }
+    }
+
+    function updateSummary() {
+      document.getElementById('s-pages').textContent = pages.length;
+      document.getElementById('s-errors').textContent = pages.reduce((s,p) => s + p.warnings.filter(w => w.level === 'error').length, 0);
+      document.getElementById('s-warnings').textContent = pages.reduce((s,p) => s + p.warnings.filter(w => w.level === 'warning').length, 0);
+    }
+
+    renderCards(pages);
+  <\/script>
+</body>
+</html>`;
+}
+function createOgViewerPlugin(options) {
+	return {
+		name: "ox-content:og-viewer",
+		apply: "serve",
+		configureServer(server) {
+			server.middlewares.use(async (req, res, next) => {
+				if (req.url === "/__og-viewer" || req.url === "/__og-viewer/") {
+					const root = server.config.root || process.cwd();
+					try {
+						const html = renderViewerHtml(await collectPages(options, root), options);
+						res.setHeader("Content-Type", "text/html; charset=utf-8");
+						res.end(html);
+					} catch (err) {
+						res.statusCode = 500;
+						res.end(`OG Viewer error: ${err}`);
+					}
+					return;
+				}
+				if (req.url === "/__og-viewer/api/pages") {
+					const root = server.config.root || process.cwd();
+					try {
+						const pages = await collectPages(options, root);
+						res.setHeader("Content-Type", "application/json; charset=utf-8");
+						res.end(JSON.stringify(pages));
+					} catch (err) {
+						res.statusCode = 500;
+						res.end(JSON.stringify({ error: String(err) }));
+					}
+					return;
+				}
+				next();
+			});
+		}
+	};
+}
+
 //#endregion
 //#region src/jsx-runtime.ts
 /**
@@ -11057,7 +11467,7 @@ function oxContent(options = {}) {
 		}
 	};
 	let searchIndexJson = "";
-	return [
+	const plugins = [
 		mainPlugin,
 		environmentPlugin,
 		docsPlugin,
@@ -11100,6 +11510,8 @@ function oxContent(options = {}) {
 			}
 		}
 	];
+	if (resolvedOptions.ogViewer) plugins.push(createOgViewerPlugin(resolvedOptions));
+	return plugins;
 }
 /**
 * Resolves plugin options with defaults.
@@ -11125,7 +11537,8 @@ function resolveOptions(options) {
 		ogImageOptions: resolveOgImageOptions(options.ogImageOptions),
 		transformers: options.transformers ?? [],
 		docs: resolveDocsOptions(options.docs),
-		search: resolveSearchOptions(options.search)
+		search: resolveSearchOptions(options.search),
+		ogViewer: options.ogViewer ?? true
 	};
 }
 /**