npm - @ox-content/vite-plugin - Versions diffs - 0.6.0 → 0.8.0 - Mend

@ox-content/vite-plugin 0.6.0 → 0.8.0

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

@@ -6967,7 +6967,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,
@@ -7002,7 +7002,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: {}
@@ -7942,13 +7942,16 @@ 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) {
+function wrapHtml(bodyHtml, width, height, useBaseUrl) {
 	return `<!DOCTYPE html>
 <html>
 <head>
-<meta charset="UTF-8">
+<meta charset="UTF-8">${useBaseUrl ? `\n<base href="http://localhost/">` : ""}
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html, body { width: ${width}px; height: ${height}px; overflow: hidden; }
@@ -7964,14 +7967,48 @@ 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
 	});
-	const fullHtml = wrapHtml(html, 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$1.join(publicDir, url.pathname);
+			try {
+				const body = await fs.readFile(filePath);
+				const ext = path$1.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, !!publicDir);
 	await page.setContent(fullHtml, { waitUntil: "networkidle" });
 	const screenshot = await page.screenshot({
 		type: "png",
@@ -8011,10 +8048,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();
 				}
@@ -8253,10 +8290,26 @@ 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 });
+			for (const style of descriptor.styles) 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;
 	};
 }
 /**
@@ -8458,10 +8511,11 @@ async function generateOgImages(pages, options, root) {
 			error: "Chromium not available"
 		}));
 		const results = [];
+		const publicDir = path$1.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;
@@ -8493,7 +8547,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) {
@@ -8508,7 +8562,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$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);
@@ -9727,7 +9781,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();
@@ -9812,7 +9866,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$1.relative(srcDir, inputPath).replace(/\.(?:md|markdown)$/i, "");
 	if (baseName === "index" || baseName.endsWith("/index")) return baseName.replace(/\/?index$/, "") || "/";
 	return baseName;
@@ -9821,7 +9875,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}`;
 }
@@ -9841,7 +9895,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`;
@@ -9895,7 +9949,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);
@@ -9984,7 +10038,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,
@@ -10052,7 +10106,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);
@@ -10351,6 +10405,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$1.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$1.resolve(root, options.srcDir);
+	const files = await (0, glob.glob)("**/*.md", {
+		cwd: srcDir,
+		absolute: true
+	});
+	const pages = [];
+	const generateOgImage = options.ogImage || options.ssg.generateOgImage;
+	for (const file of files.sort()) {
+		const content = fs.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$1.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
 /**
@@ -11018,7 +11419,7 @@ function oxContent(options = {}) {
 		}
 	};
 	let searchIndexJson = "";
-	return [
+	const plugins = [
 		mainPlugin,
 		environmentPlugin,
 		docsPlugin,
@@ -11061,6 +11462,8 @@ function oxContent(options = {}) {
 			}
 		}
 	];
+	if (resolvedOptions.ogViewer) plugins.push(createOgViewerPlugin(resolvedOptions));
+	return plugins;
 }
 /**
 * Resolves plugin options with defaults.
@@ -11086,7 +11489,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
 	};
 }
 /**