@ox-content/vite-plugin 2.86.0 → 2.88.0

package/dist/index.cjs

@@ -2,6 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_vitepress = require("./vitepress.cjs");
 const require_interop = require("./interop.cjs");
 const require_tabs = require("./tabs.cjs");
+const require_jsx_html = require("./jsx-html.cjs");
 let path = require("path");
 path = require_vitepress.__toESM(path, 1);
 let unified = require("unified");
@@ -108,6 +109,56 @@ function createMarkdownEnvironment(options) {
 	};
 }
 //#endregion
+//#region src/shiki-theme.ts
+/**
+* Name callers pass as `highlightTheme` to render syntax colors as CSS custom
+* properties instead of baked-in hex values.
+*/
+const CSS_VARIABLES_THEME = "css-variables";
+/** Prefix for the emitted properties, matching the rest of the design tokens. */
+const VARIABLE_PREFIX = "--octc-shiki-";
+/**
+* Fallbacks baked into each `var()` so a site with no color scheme installed
+* still renders GitHub Dark colors — the previous default — rather than
+* unstyled text. A `@ox-content/theme-color-*` package overrides them by
+* defining the same properties per mode.
+*/
+const VARIABLE_DEFAULTS = {
+	foreground: "#e6edf3",
+	background: "#0d1117",
+	"token-constant": "#79c0ff",
+	"token-string": "#a5d6ff",
+	"token-comment": "#8b949e",
+	"token-keyword": "#ff7b72",
+	"token-parameter": "#ffa657",
+	"token-function": "#d2a8ff",
+	"token-string-expression": "#a5d6ff",
+	"token-punctuation": "#c9d1d9",
+	"token-link": "#a5d6ff"
+};
+let cached;
+/**
+* Shiki theme whose every color is a `--octc-shiki-*` custom property.
+*
+* This is what lets syntax highlighting track the active color scheme in both
+* light and dark from a single build: the HTML is generated once, and the
+* properties resolve per mode. A fixed theme like `github-dark` cannot do that,
+* and lands dark token colors on a light code block.
+*/
+function cssVariablesTheme() {
+	cached ??= (0, shiki.createCssVariablesTheme)({
+		name: CSS_VARIABLES_THEME,
+		variablePrefix: VARIABLE_PREFIX,
+		variableDefaults: VARIABLE_DEFAULTS,
+		fontStyle: true
+	});
+	return cached;
+}
+/** Resolves the `css-variables` alias; any other value passes through. */
+function resolveHighlightTheme(theme) {
+	return theme === "css-variables" ? cssVariablesTheme() : theme;
+}
+//#endregion
 //#region src/highlight.ts
 /**
 * Syntax highlighting with Shiki via rehype.
@@ -160,7 +211,8 @@ async function getHighlighter(theme, customLangs = []) {
 	}
 	return highlighterPromise;
 }
-function normalizeThemeInput(theme) {
+function normalizeThemeInput(input) {
+	const theme = resolveHighlightTheme(input);
 	if (typeof theme === "string") return {
 		themeInput: theme,
 		themeName: theme
@@ -269,7 +321,7 @@ function normalizeClassName(className) {
 /**
 * Apply syntax highlighting to HTML using Shiki.
 */
-async function highlightCode(html, theme = "github-dark", langs = []) {
+async function highlightCode(html, theme = CSS_VARIABLES_THEME, langs = []) {
 	const result = await (0, unified.unified)().use(rehypeParse$3, { fragment: true }).use(rehypeShikiHighlight, {
 		theme,
 		langs
@@ -584,8 +636,8 @@ function assetRecord(src, media) {
 //#region src/plugins/twitter/render.ts
 function renderFetchedTweet(permalink, data, assets, options) {
 	const profile = `https://x.com/${encodeURIComponent(data.user.screen_name)}`;
-	const author = escapeHtml$3(data.user.name);
-	const handle = escapeHtml$3(data.user.screen_name);
+	const author = escapeHtml$2(data.user.name);
+	const handle = escapeHtml$2(data.user.screen_name);
 	const avatar = assets.avatar ? `<img class="ox-tweet__avatar" src="${escapeAttribute(assets.avatar)}" alt="" width="48" height="48" loading="lazy" decoding="async">` : "";
 	const media = renderMedia(assets);
 	const footer = renderFooter(permalink, data.created_at, options.lang);
@@ -615,7 +667,7 @@ function renderTweetText(data) {
 		if (entity.kind === "url") {
 			const href = entity.expanded_url ?? entity.url;
 			const label = entity.display_url ?? href;
-			output += `<a href="${escapeAttribute(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml$3(label)}</a>`;
+			output += `<a href="${escapeAttribute(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml$2(label)}</a>`;
 		}
 		cursor = entityEnd;
 	}
@@ -659,15 +711,15 @@ function renderFooter(permalink, createdAt, lang) {
 			timeZone: "UTC"
 		}).format(date);
 	}
-	return `<footer class="ox-tweet__footer"><a class="ox-tweet__permalink" href="${escapeAttribute(permalink)}" target="_blank" rel="noopener noreferrer"><time datetime="${iso}">${escapeHtml$3(label)}</time></a></footer>`;
+	return `<footer class="ox-tweet__footer"><a class="ox-tweet__permalink" href="${escapeAttribute(permalink)}" target="_blank" rel="noopener noreferrer"><time datetime="${iso}">${escapeHtml$2(label)}</time></a></footer>`;
 }
 function escapeText(value) {
-	return escapeHtml$3(value).replaceAll("\n", "<br>");
+	return escapeHtml$2(value).replaceAll("\n", "<br>");
 }
 function escapeAttribute(value) {
-	return escapeHtml$3(value).replaceAll("`", "&#96;");
+	return escapeHtml$2(value).replaceAll("`", "&#96;");
 }
-function escapeHtml$3(value) {
+function escapeHtml$2(value) {
 	return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;");
 }
 //#endregion
@@ -2496,7 +2548,7 @@ function formatChromiumUnavailableDetail(err) {
 /**
 * Escapes HTML special characters.
 */
-function escapeHtml$2(str) {
+function escapeHtml$1(str) {
 	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 function normalizeBrandValue(str) {
@@ -2559,12 +2611,12 @@ function getDefaultTemplate() {
 		const isBrandCard = normalizeBrandValue(title) === normalizeBrandValue(rawBrand);
 		const heroTitle = isBrandCard ? "High-performance Markdown toolkit" : title;
 		const heroDescription = isBrandCard ? "Rust-powered docs and high-performance Markdown tooling." : description && description.trim().length > 0 ? description : "Rust-powered docs and Markdown tooling.";
-		const descriptionHtml = heroDescription.trim().length > 0 ? `<p style="max-width:760px;font-size:28px;color:#93a4c3;line-height:1.45;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml$2(heroDescription)}</p>` : "";
+		const descriptionHtml = heroDescription.trim().length > 0 ? `<p style="max-width:760px;font-size:28px;color:#93a4c3;line-height:1.45;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml$1(heroDescription)}</p>` : "";
 		return `<div style="width:100%;height:100%;position:relative;overflow:hidden;box-sizing:border-box;padding:56px 64px 52px;background:#0b1220;font-family:'IBM Plex Sans','Avenir Next','Segoe UI',system-ui,sans-serif;color:#eff6ff;border:1px solid #223252;border-top:4px solid #4f6fae;">
   <div style="position:relative;z-index:1;display:flex;flex-direction:column;height:100%;">
     <div style="display:flex;align-items:flex-start;">${renderWordmarkSvg()}</div>
     <div style="display:flex;flex-direction:column;justify-content:center;gap:24px;max-width:860px;flex:1;padding:22px 0 0;">
-      <h1 style="font-size:78px;font-weight:700;color:#eff6ff;line-height:1.02;letter-spacing:-0.055em;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml$2(heroTitle)}</h1>
+      <h1 style="font-size:78px;font-weight:700;color:#eff6ff;line-height:1.02;letter-spacing:-0.055em;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${escapeHtml$1(heroTitle)}</h1>
       ${descriptionHtml}
     </div>
   </div>
@@ -3531,10 +3583,22 @@ async function createBuildSsgContext(options, root, srcDir, outDir, markdownFile
 		base,
 		navItems: resolveNavigationGroups(ssgOptions.navigation, base, ssgOptions.extension) ?? (ssgOptions.theme?.sidebar.length ? buildThemeNavItems(ssgOptions.theme.sidebar, base, ssgOptions.extension) : buildNavItems(markdownFiles, srcDir, base, ssgOptions.extension)),
 		siteName: await resolveSiteName$1(root, ssgOptions),
-		shouldGenerateOgImages: (options.ogImage || ssgOptions.generateOgImage) && !ssgOptions.bare,
+		shouldGenerateOgImages: shouldGenerateOgImages(options),
 		napi: ssgOptions.lastUpdated ? await require_vitepress.importNapiModule() : void 0
 	};
 }
+/**
+* Whether this build emits one Open Graph image per page.
+*
+* `ssg.bare` deliberately does not turn this off. Bare mode only drops the
+* generated page shell, and bringing your own shell is exactly the case where
+* per-page OG images are still wanted — the images are written to the output
+* tree and the consumer injects the `<meta>` tags itself. Nothing in the bare
+* HTML references them, because bare output has no `<head>` to put them in.
+*/
+function shouldGenerateOgImages(options) {
+	return options.ogImage || options.ssg.generateOgImage;
+}
 async function resolveSiteName$1(root, ssgOptions) {
 	if (ssgOptions.siteName) return ssgOptions.siteName;
 	try {
@@ -4877,7 +4941,7 @@ function createFrameworkMarkdownOptions(options) {
 		strikethrough: true,
 		autolinks: options.gfm,
 		highlight: false,
-		highlightTheme: "github-dark",
+		highlightTheme: CSS_VARIABLES_THEME,
 		highlightLangs: [],
 		mermaid: false,
 		ogImage: false,
@@ -5689,195 +5753,6 @@ function createEmptyLintResult() {
 	};
 }
 //#endregion
-//#region src/jsx-runtime.ts
-/**
-* Custom JSX Runtime for Static HTML Generation
-*
-* This module provides a JSX runtime that outputs static HTML strings.
-* No React, no hydration, no client-side JavaScript - just pure HTML.
-*
-* @example
-* ```tsx
-* // tsconfig.json or vite.config.ts
-* {
-*   "compilerOptions": {
-*     "jsx": "react-jsx",
-*     "jsxImportSource": "@ox-content/vite-plugin"
-*   }
-* }
-*
-* // MyComponent.tsx
-* export function Hero({ title }: { title: string }) {
-*   return (
-*     <section class="hero">
-*       <h1>{title}</h1>
-*     </section>
-*   );
-* }
-* ```
-*/
-const VOID_ELEMENTS = /* @__PURE__ */ new Set([
-	"area",
-	"base",
-	"br",
-	"col",
-	"embed",
-	"hr",
-	"img",
-	"input",
-	"link",
-	"meta",
-	"param",
-	"source",
-	"track",
-	"wbr"
-]);
-const BOOLEAN_ATTRS = /* @__PURE__ */ new Set([
-	"allowfullscreen",
-	"async",
-	"autofocus",
-	"autoplay",
-	"checked",
-	"controls",
-	"default",
-	"defer",
-	"disabled",
-	"formnovalidate",
-	"hidden",
-	"inert",
-	"ismap",
-	"itemscope",
-	"loop",
-	"multiple",
-	"muted",
-	"nomodule",
-	"novalidate",
-	"open",
-	"playsinline",
-	"readonly",
-	"required",
-	"reversed",
-	"selected"
-]);
-/**
-* Escapes HTML special characters to prevent XSS.
-*/
-function escapeHtml$1(str) {
-	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
-}
-/**
-* Converts a camelCase attribute name to kebab-case for HTML.
-* Special handling for data-* and aria-* attributes.
-*/
-function toHtmlAttr(name) {
-	if (name === "className") return "class";
-	if (name === "htmlFor") return "for";
-	if (name.startsWith("data") || name.startsWith("aria")) return name.replace(/([A-Z])/g, "-$1").toLowerCase();
-	return name;
-}
-/**
-* Renders an attribute value to a string.
-*/
-function renderAttr(name, value) {
-	const htmlName = toHtmlAttr(name);
-	if (value === void 0 || value === null || value === false) return "";
-	if (BOOLEAN_ATTRS.has(htmlName)) return value ? ` ${htmlName}` : "";
-	if (name === "style" && typeof value === "object") return ` style="${escapeHtml$1(Object.entries(value).map(([k, v]) => {
-		return `${k.replace(/([A-Z])/g, "-$1").toLowerCase()}:${v}`;
-	}).join(";"))}"`;
-	return ` ${htmlName}="${escapeHtml$1(String(value))}"`;
-}
-/**
-* Renders children to HTML string.
-*/
-function renderChildren(children) {
-	if (children === null || children === void 0 || children === false) return "";
-	if (children === true) return "";
-	if (typeof children === "string") return escapeHtml$1(children);
-	if (typeof children === "number") return String(children);
-	if (Array.isArray(children)) return children.map(renderChildren).join("");
-	if (typeof children === "object" && "__html" in children) return children.__html;
-	return "";
-}
-/**
-* Creates a JSX element.
-* This is the core function called by the JSX transform.
-*/
-function jsx(type, props, _key) {
-	const { children, ...restProps } = props;
-	if (typeof type === "function") return type({
-		...restProps,
-		children
-	});
-	const tag = type;
-	let html = `<${tag}`;
-	for (const [name, value] of Object.entries(restProps)) {
-		if (name === "key" || name === "ref") continue;
-		html += renderAttr(name, value);
-	}
-	if (VOID_ELEMENTS.has(tag)) {
-		html += " />";
-		return { __html: html };
-	}
-	html += ">";
-	if (children !== void 0) html += renderChildren(children);
-	html += `</${tag}>`;
-	return { __html: html };
-}
-/**
-* Creates a JSX element with static children.
-* Called by the JSX transform for elements with multiple children.
-*/
-function jsxs(type, props, key) {
-	return jsx(type, props, key);
-}
-/**
-* Fragment component - renders children without a wrapper element.
-*/
-function Fragment({ children }) {
-	return { __html: renderChildren(children) };
-}
-/**
-* Renders a JSX node to an HTML string.
-*/
-function renderToString(node) {
-	return node.__html;
-}
-/**
-* Creates raw HTML without escaping.
-* Use with caution - only for trusted content.
-*
-* @example
-* ```tsx
-* <div>{raw('<strong>Bold</strong>')}</div>
-* ```
-*/
-function raw(html) {
-	return { __html: html };
-}
-/**
-* Conditionally renders content.
-*
-* @example
-* ```tsx
-* {when(isLoggedIn, <UserMenu />)}
-* ```
-*/
-function when(condition, content) {
-	return condition ? content : { __html: "" };
-}
-/**
-* Maps over an array and renders each item.
-*
-* @example
-* ```tsx
-* {each(items, (item) => <li>{item.name}</li>)}
-* ```
-*/
-function each(items, render) {
-	return { __html: items.map((item, i) => render(item, i).__html).join("") };
-}
-//#endregion
 //#region src/page-context.ts
 var page_context_exports = /* @__PURE__ */ require_vitepress.__exportAll({
 	clearRenderContext: () => clearRenderContext,
@@ -6115,7 +5990,8 @@ function renderPage(page, options) {
 		}
 	});
 	try {
-		const html = renderToString(theme({ children: raw(page.html) }));
+		const result = theme({ children: require_jsx_html.raw(page.html) });
+		const html = require_jsx_html.renderToString(result);
 		if (!html.trimStart().toLowerCase().startsWith("<!doctype")) return `<!DOCTYPE html>\n${html}`;
 		return html;
 	} finally {
@@ -6512,7 +6388,7 @@ function resolveOptions(options) {
 		strikethrough: options.strikethrough ?? true,
 		autolinks: options.autolinks ?? options.gfm ?? true,
 		highlight: options.highlight ?? false,
-		highlightTheme: options.highlightTheme ?? "github-dark",
+		highlightTheme: options.highlightTheme ?? "css-variables",
 		highlightLangs: options.highlightLangs ?? [],
 		codeAnnotations: resolveCodeAnnotationsOptions(options.codeAnnotations),
 		wikiLinks: resolveWikiLinkOptions(options.wikiLinks, options.base ?? "/"),
@@ -6799,7 +6675,7 @@ exports.DEFAULT_HTML_TEMPLATE = DEFAULT_HTML_TEMPLATE;
 exports.DEFAULT_MARKDOWN_EXTENSIONS = DEFAULT_MARKDOWN_EXTENSIONS;
 exports.DefaultTheme = DefaultTheme;
 exports.DocsTestRunError = DocsTestRunError;
-exports.Fragment = Fragment;
+exports.Fragment = require_jsx_html.Fragment;
 exports.IncrementalMarkdownParser = IncrementalMarkdownParser;
 exports.IncrementalMarkdownRenderer = IncrementalMarkdownRenderer;
 exports.buildCollectionManifest = buildCollectionManifest;
@@ -6822,7 +6698,7 @@ exports.defaultTheme = require_vitepress.defaultTheme;
 exports.defineCollection = defineCollection;
 exports.defineCollections = defineCollections;
 exports.defineTheme = require_vitepress.defineTheme;
-exports.each = each;
+exports.each = require_jsx_html.each;
 exports.escapeSvelteMarkup = escapeSvelteMarkup;
 exports.extractCodeBlocks = extractCodeBlocks;
 exports.extractDocs = extractDocs;
@@ -6845,8 +6721,8 @@ exports.generateVitePressMigrationConfig = require_vitepress.generateVitePressMi
 exports.hasIslands = hasIslands;
 exports.inferType = inferType;
 exports.isMarkdownFilePath = isMarkdownFilePath;
-exports.jsx = jsx;
-exports.jsxs = jsxs;
+exports.jsx = require_jsx_html.jsx;
+exports.jsxs = require_jsx_html.jsxs;
 exports.lintCodeBlocks = lintCodeBlocks;
 exports.lintMarkdown = lintMarkdown;
 exports.lintMarkdownAsync = lintMarkdownAsync;
@@ -6862,7 +6738,7 @@ exports.parseGitHubPermalink = parseGitHubPermalink;
 exports.prefetchGitHubRepos = prefetchGitHubRepos;
 exports.prefetchGitHubSources = prefetchGitHubSources;
 exports.prefetchOgpData = prefetchOgpData;
-exports.raw = raw;
+exports.raw = require_jsx_html.raw;
 exports.renderAllPages = renderAllPages;
 exports.renderHtmlToFrameworkCode = renderHtmlToFrameworkCode;
 exports.renderHtmlToReactComponent = renderHtmlToReactComponent;
@@ -6872,7 +6748,7 @@ exports.renderHtmlToVueComponent = renderHtmlToVueComponent;
 exports.renderHtmlToVueH = renderHtmlToVueH;
 exports.renderMarkdownStream = renderMarkdownStream;
 exports.renderPage = renderPage;
-exports.renderToString = renderToString;
+exports.renderToString = require_jsx_html.renderToString;
 exports.resolveBuiltinEmbedOptions = resolveBuiltinEmbedOptions;
 exports.resolveCollectionsOptions = resolveCollectionsOptions;
 exports.resolveDocsOptions = resolveDocsOptions;
@@ -6899,7 +6775,7 @@ exports.useNav = useNav;
 exports.usePageProps = usePageProps;
 exports.useRenderContext = useRenderContext;
 exports.useSiteConfig = useSiteConfig;
-exports.when = when;
+exports.when = require_jsx_html.when;
 exports.writeDocs = writeDocs;
 exports.writeDocsTestFiles = writeDocsTestFiles;
 exports.writeSearchIndex = writeSearchIndex;