@ox-content/vite-plugin 0.11.0 → 0.13.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { n as transformMermaidStatic, t as mermaidClientScript } from "./mermaid2.js";
-import { n as transformTabs, t as generateTabsCSS } from "./tabs2.js";
+import { n as resetTabGroupCounter, r as transformTabs, t as generateTabsCSS } from "./tabs2.js";
 import { n as transformYouTube, t as extractVideoId } from "./youtube2.js";
 import { i as transformGitHub, n as fetchRepoData, r as prefetchGitHubRepos, t as collectGitHubRepos } from "./github2.js";
 import { i as transformOgp, n as fetchOgpData, r as prefetchOgpData, t as collectOgpUrls } from "./ogp2.js";
@@ -6764,39 +6764,40 @@ var import_dist = /* @__PURE__ */ __toESM(require_dist(), 1);
 /**
 * Syntax highlighting with Shiki via rehype.
 */
+const BUILTIN_LANGS = [
+	"javascript",
+	"typescript",
+	"jsx",
+	"tsx",
+	"vue",
+	"svelte",
+	"html",
+	"css",
+	"scss",
+	"json",
+	"yaml",
+	"markdown",
+	"bash",
+	"shell",
+	"rust",
+	"python",
+	"go",
+	"java",
+	"c",
+	"cpp",
+	"sql",
+	"graphql",
+	"diff",
+	"toml"
+];
 let highlighterPromise = null;
 /**
 * Get or create the Shiki highlighter.
 */
-async function getHighlighter(theme) {
+async function getHighlighter(theme, customLangs = []) {
 	if (!highlighterPromise) highlighterPromise = createHighlighter({
 		themes: [theme],
-		langs: [
-			"javascript",
-			"typescript",
-			"jsx",
-			"tsx",
-			"vue",
-			"svelte",
-			"html",
-			"css",
-			"scss",
-			"json",
-			"yaml",
-			"markdown",
-			"bash",
-			"shell",
-			"rust",
-			"python",
-			"go",
-			"java",
-			"c",
-			"cpp",
-			"sql",
-			"graphql",
-			"diff",
-			"toml"
-		]
+		langs: [...BUILTIN_LANGS, ...customLangs]
 	});
 	return highlighterPromise;
 }
@@ -6804,9 +6805,9 @@ async function getHighlighter(theme) {
 * Rehype plugin for syntax highlighting with Shiki.
 */
 function rehypeShikiHighlight(options) {
-	const { theme } = options;
+	const { theme, langs } = options;
 	return async (tree) => {
-		const highlighter = await getHighlighter(theme);
+		const highlighter = await getHighlighter(theme, langs);
 		const visit = async (node) => {
 			if ("children" in node) for (let i = 0; i < node.children.length; i++) {
 				const child = node.children[i];
@@ -6849,8 +6850,11 @@ function getTextContent(node) {
 /**
 * Apply syntax highlighting to HTML using Shiki.
 */
-async function highlightCode(html, theme = "github-dark") {
-	const result = await unified().use(rehypeParse, { fragment: true }).use(rehypeShikiHighlight, { theme }).use(rehypeStringify).process(html);
+async function highlightCode(html, theme = "github-dark", langs = []) {
+	const result = await unified().use(rehypeParse, { fragment: true }).use(rehypeShikiHighlight, {
+		theme,
+		langs
+	}).use(rehypeStringify).process(html);
 	return String(result);
 }
 
@@ -7028,7 +7032,7 @@ async function transformMarkdown(source, filePath, options, ssgOptions) {
 	if (options.mermaid) html = await transformMermaidStatic(html);
 	const { html: protectedHtml, svgs } = protectMermaidSvgs(html);
 	html = protectedHtml;
-	if (options.highlight) html = await highlightCode(html, options.highlightTheme);
+	if (options.highlight) html = await highlightCode(html, options.highlightTheme, options.highlightLangs);
 	html = restoreMermaidSvgs(html, svgs);
 	return {
 		code: generateModuleCode(html, frontmatter, toc, filePath, options),
@@ -8379,7 +8383,7 @@ function createVueCompilerPlugin() {
 					filename: id,
 					id
 				});
-				if (templateResult.errors.length > 0) throw new Error(`[ox-content:og-image] Vue template compilation errors in ${id}: ${templateResult.errors.join(", ")}`);
+				if (templateResult.errors.length > 0) throw new Error(`[ox-content:og-image] Vue template compilation errors in ${id}: ${templateResult.errors.map(String).join(", ")}`);
 				scriptCode = `${templateResult.code}\nexport default { render }`;
 			}
 			const isTs = !!(descriptor.scriptSetup?.lang === "ts" || descriptor.script?.lang === "ts");
@@ -8717,6 +8721,12 @@ function getComponentName(el) {
 }
 let islandCounter = 0;
 /**
+* Reset island counter (for testing).
+*/
+function resetIslandCounter() {
+	islandCounter = 0;
+}
+/**
 * Rehype plugin to transform Island components.
 */
 function rehypeIslands(collectedIslands) {
@@ -8810,7 +8820,7 @@ function generateHydrationScript(components) {
 	if (components.length === 0) return "";
 	return `
 import { initIslands } from '@ox-content/islands';
-${components.map((name, i) => `import ${name} from './${name}';`).join("\n")}
+${components.map((name) => `import ${name} from './${name}';`).join("\n")}
 
 const components = {
   ${components.join(",\n  ")}
@@ -10445,6 +10455,207 @@ export default { search, searchOptions, loadIndex };
 `;
 }
 
+//#endregion
+//#region src/dev-server.ts
+/**
+* Dev server middleware for ox-content SSG.
+*
+* Serves fully-rendered HTML pages (with navigation, theme, etc.)
+* during `vite dev`, matching the SSG build output.
+*/
+/** File extensions to skip in the middleware. */
+const SKIP_EXTENSIONS = new Set([
+	".js",
+	".ts",
+	".css",
+	".scss",
+	".less",
+	".svg",
+	".png",
+	".jpg",
+	".jpeg",
+	".gif",
+	".webp",
+	".ico",
+	".woff",
+	".woff2",
+	".ttf",
+	".eot",
+	".json",
+	".map",
+	".mp4",
+	".webm",
+	".mp3",
+	".pdf"
+]);
+/** Vite internal URL prefixes to skip. */
+const VITE_INTERNAL_PREFIXES = [
+	"/@vite/",
+	"/@fs/",
+	"/@id/",
+	"/__"
+];
+/**
+* Check if a request URL should be skipped by the dev server middleware.
+*/
+function shouldSkip(url) {
+	for (const prefix of VITE_INTERNAL_PREFIXES) if (url.startsWith(prefix)) return true;
+	if (url.includes("/node_modules/")) return true;
+	const extMatch = url.match(/\.([a-zA-Z0-9]+)(?:\?|$)/);
+	if (extMatch) {
+		const ext = "." + extMatch[1].toLowerCase();
+		if (SKIP_EXTENSIONS.has(ext)) return true;
+	}
+	return false;
+}
+/**
+* Resolve a request URL to a markdown file path.
+* Returns null if no matching file exists.
+*/
+async function resolveMarkdownFile(url, srcDir) {
+	let pathname = url.split("?")[0].split("#")[0];
+	if (pathname.endsWith("/index.html")) pathname = pathname.slice(0, -11) || "/";
+	if (pathname !== "/" && pathname.endsWith("/")) pathname = pathname.slice(0, -1);
+	let relativePath;
+	if (pathname === "/") relativePath = "index.md";
+	else relativePath = pathname.slice(1) + ".md";
+	const filePath = path.join(srcDir, relativePath);
+	try {
+		await fs.access(filePath);
+		return filePath;
+	} catch {
+		const indexPath = path.join(srcDir, pathname === "/" ? "" : pathname.slice(1), "index.md");
+		try {
+			await fs.access(indexPath);
+			return indexPath;
+		} catch {
+			return null;
+		}
+	}
+}
+/**
+* Inject Vite HMR client script into the HTML.
+*/
+function injectViteHmrClient(html) {
+	return html.replace("</head>", "<script type=\"module\" src=\"/@vite/client\"><\/script>\n<script type=\"module\">\nif (import.meta.hot) {\n  import.meta.hot.on('ox-content:update', () => {\n    location.reload();\n  });\n}\n<\/script>\n</head>");
+}
+/**
+* Create a dev server cache instance.
+*/
+function createDevServerCache() {
+	return {
+		navGroups: null,
+		pages: /* @__PURE__ */ new Map(),
+		siteName: null
+	};
+}
+/**
+* Invalidate navigation cache (called on file add/unlink).
+*/
+function invalidateNavCache(cache) {
+	cache.navGroups = null;
+	cache.pages.clear();
+}
+/**
+* Invalidate page cache for a specific file (called on file change).
+*/
+function invalidatePageCache(cache, filePath) {
+	cache.pages.delete(filePath);
+}
+/**
+* Resolve site name from options or package.json.
+*/
+async function resolveSiteName(options, root) {
+	if (options.ssg.siteName) return options.ssg.siteName;
+	try {
+		const pkgPath = path.join(root, "package.json");
+		const pkg = JSON.parse(await fs.readFile(pkgPath, "utf-8"));
+		if (pkg.name) return formatTitle(pkg.name);
+	} catch {}
+	return "Documentation";
+}
+/**
+* Render a single markdown page to full HTML.
+*/
+async function renderPage$1(filePath, options, navGroups, siteName, base, root) {
+	const srcDir = path.resolve(root, options.srcDir);
+	resetTabGroupCounter();
+	resetIslandCounter();
+	const result = await transformMarkdown(await fs.readFile(filePath, "utf-8"), filePath, options, {
+		convertMdLinks: true,
+		baseUrl: base,
+		sourcePath: filePath
+	});
+	let transformedHtml = result.html;
+	const { html: protectedHtml, svgs: mermaidSvgs } = protectMermaidSvgs(transformedHtml);
+	transformedHtml = protectedHtml;
+	transformedHtml = await transformAllPlugins(transformedHtml, {
+		tabs: true,
+		youtube: true,
+		github: true,
+		ogp: true,
+		mermaid: true,
+		githubToken: process.env.GITHUB_TOKEN
+	});
+	if (hasIslands(transformedHtml)) transformedHtml = (await transformIslands(transformedHtml)).html;
+	transformedHtml = restoreMermaidSvgs(transformedHtml, mermaidSvgs);
+	const title = extractTitle$1(transformedHtml, result.frontmatter);
+	const description = result.frontmatter.description;
+	let entryPage;
+	if (result.frontmatter.layout === "entry") entryPage = {
+		hero: result.frontmatter.hero,
+		features: result.frontmatter.features
+	};
+	let html = await generateHtmlPage({
+		title,
+		description,
+		content: transformedHtml,
+		toc: result.toc,
+		frontmatter: result.frontmatter,
+		path: getUrlPath$1(filePath, srcDir),
+		href: getUrlPath$1(filePath, srcDir) || "/",
+		entryPage
+	}, navGroups, siteName, base, options.ssg.ogImage, options.ssg.theme);
+	html = injectViteHmrClient(html);
+	return html;
+}
+/**
+* Create the dev server middleware for SSG page serving.
+*/
+function createDevServerMiddleware(options, root, cache) {
+	const srcDir = path.resolve(root, options.srcDir);
+	const base = options.base.endsWith("/") ? options.base : options.base + "/";
+	return async (req, res, next) => {
+		const url = req.url;
+		if (!url) return next();
+		let routeUrl = url;
+		if (base !== "/" && routeUrl.startsWith(base)) routeUrl = "/" + routeUrl.slice(base.length);
+		if (shouldSkip(routeUrl)) return next();
+		const filePath = await resolveMarkdownFile(routeUrl, srcDir);
+		if (!filePath) return next();
+		try {
+			const cached = cache.pages.get(filePath);
+			if (cached) {
+				res.setHeader("Content-Type", "text/html");
+				res.setHeader("Cache-Control", "no-cache");
+				res.end(cached);
+				return;
+			}
+			if (!cache.siteName) cache.siteName = await resolveSiteName(options, root);
+			if (!cache.navGroups) cache.navGroups = buildNavItems(await collectMarkdownFiles$1(srcDir), srcDir, base, ".html");
+			const html = await renderPage$1(filePath, options, cache.navGroups, cache.siteName, base, root);
+			cache.pages.set(filePath, html);
+			res.setHeader("Content-Type", "text/html");
+			res.setHeader("Cache-Control", "no-cache");
+			res.end(html);
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			console.error(`[ox-content:dev] Failed to render ${filePath}:`, message);
+			next();
+		}
+	};
+}
+
 //#endregion
 //#region src/og-viewer.ts
 /**
@@ -10770,7 +10981,7 @@ function createOgViewerPlugin(options) {
 						res.end(html);
 					} catch (err) {
 						res.statusCode = 500;
-						res.end(`OG Viewer error: ${err}`);
+						res.end(`OG Viewer error: ${err instanceof Error ? err.message : String(err)}`);
 					}
 					return;
 				}
@@ -11444,8 +11655,24 @@ function oxContent(options = {}) {
 			});
 		}
 	};
+	const ssgDevCache = createDevServerCache();
 	const ssgPlugin = {
 		name: "ox-content:ssg",
+		configureServer(devServer) {
+			if (!resolvedOptions.ssg.enabled) return;
+			const root = config?.root || process.cwd();
+			const srcDir = path.resolve(root, resolvedOptions.srcDir);
+			devServer.middlewares.use(createDevServerMiddleware(resolvedOptions, root, ssgDevCache));
+			devServer.watcher.on("add", (file) => {
+				if (file.startsWith(srcDir) && file.endsWith(".md")) invalidateNavCache(ssgDevCache);
+			});
+			devServer.watcher.on("unlink", (file) => {
+				if (file.startsWith(srcDir) && file.endsWith(".md")) invalidateNavCache(ssgDevCache);
+			});
+			devServer.watcher.on("change", (file) => {
+				if (file.startsWith(srcDir) && file.endsWith(".md")) invalidatePageCache(ssgDevCache, file);
+			});
+		},
 		async closeBundle() {
 			if (!resolvedOptions.ssg.enabled) return;
 			const root = config?.root || process.cwd();
@@ -11521,6 +11748,7 @@ function resolveOptions(options) {
 		strikethrough: options.strikethrough ?? true,
 		highlight: options.highlight ?? false,
 		highlightTheme: options.highlightTheme ?? "github-dark",
+		highlightLangs: options.highlightLangs ?? [],
 		mermaid: options.mermaid ?? false,
 		frontmatter: options.frontmatter ?? true,
 		toc: options.toc ?? true,