@moku-labs/web 1.5.0 → 1.5.2

package/dist/index.cjs

@@ -4174,6 +4174,45 @@ function defaultCard(input) {
 	} }, input.title);
 }
 /**
+* The built-in SITE-LEVEL default card — the site name over its description on a dark
+* background, centered. Rendered once (when `ogImage.defaultCard` is true) to `og-default.png`
+* and used as the `head.defaultOgImage` fallback. Reads `siteName` + `description` from the
+* {@link RichOgInput}; the per-article `render` hook is deliberately NOT applied here.
+*
+* @param input - The rich OG input (only `siteName` + `description` are used).
+* @returns The Preact `VNode` for the site default card.
+* @example
+* ```ts
+* defaultSiteCard({ ...input, siteName: "My Blog", description: "A dev blog" });
+* ```
+*/
+function defaultSiteCard(input) {
+	const children = [(0, preact.h)("div", { style: {
+		display: "flex",
+		fontSize: 72,
+		fontWeight: 700,
+		color: "#ffffff"
+	} }, input.siteName)];
+	if (input.description) children.push((0, preact.h)("div", { style: {
+		display: "flex",
+		marginTop: 28,
+		maxWidth: 900,
+		fontSize: 32,
+		color: "#a1a1aa",
+		textAlign: "center"
+	} }, input.description));
+	return (0, preact.h)("div", { style: {
+		display: "flex",
+		flexDirection: "column",
+		width: "100%",
+		height: "100%",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: 80,
+		background: "#0b0b0c"
+	} }, ...children);
+}
+/**
 * The default PNG renderer: a Preact `VNode` (custom `render` hook or the built-in
 * card) is rendered to SVG by Satori, then rasterized to PNG by resvg. Both native
 * deps are imported LAZILY (browser-safe goal); the VNode→Satori-input cast happens
@@ -4263,6 +4302,24 @@ function resolveSiteName(ctx) {
 	}
 }
 /**
+* Resolve the site description via `ctx.require(sitePlugin)`, falling back to `""` when the
+* site API is unavailable (e.g. unit mocks that omit it). Used by the site default card.
+*
+* @param ctx - Plugin context (provides `require`).
+* @returns The site description, or `""` when the site plugin is not wired.
+* @example
+* ```ts
+* resolveSiteDescription(ctx);
+* ```
+*/
+function resolveSiteDescription(ctx) {
+	try {
+		return ctx.require(sitePlugin).description();
+	} catch {
+		return "";
+	}
+}
+/**
 * Render (or cache-skip) one article's OG image, mutating {@link RenderTally} in
 * place. A matching cached hash bumps `skipped` and returns early; otherwise the
 * PNG is rasterized to `<outDir>/og/<slug>.png`, the cache entry is updated, and
@@ -4333,6 +4390,11 @@ async function generateOgImages(ctx, options = {}) {
 		fonts,
 		...renderHook
 	});
+	const siteCardRender = typeof config.defaultCard === "function" ? config.defaultCard : defaultSiteCard;
+	const renderSitePng = options.renderPng ?? makeDefaultRenderer({
+		fonts,
+		render: siteCardRender
+	});
 	const siteName = resolveSiteName(ctx);
 	const defaultLocale = ctx.require(i18nPlugin).defaultLocale();
 	const articles = selectArticles(readCachedContent(ctx), defaultLocale);
@@ -4357,15 +4419,31 @@ async function generateOgImages(ctx, options = {}) {
 			outDir
 		}, tally);
 	})));
+	const defaultCard = config.defaultCard === true || typeof config.defaultCard === "function";
+	if (defaultCard) {
+		const png = await renderSitePng({
+			title: siteName,
+			description: resolveSiteDescription(ctx),
+			date: "",
+			tags: [],
+			locale: defaultLocale,
+			siteName,
+			size
+		});
+		await (0, node_fs_promises.mkdir)(ctx.config.outDir, { recursive: true });
+		await (0, node_fs_promises.writeFile)(node_path.default.join(ctx.config.outDir, "og-default.png"), png);
+	}
 	await persistDiskCache(ctx.config.outDir, cache);
 	ctx.log.debug("build:og-images", {
 		rendered: tally.rendered,
-		skipped: tally.skipped
+		skipped: tally.skipped,
+		defaultCard
 	});
 	return {
 		rendered: tally.rendered,
 		skipped: tally.skipped,
-		peakConcurrency: tally.peakConcurrency
+		peakConcurrency: tally.peakConcurrency,
+		defaultCard
 	};
 }
 /**

package/dist/index.d.cts

@@ -1632,6 +1632,17 @@ interface OgImageConfig {
   render?(input: RichOgInput): import("preact").VNode;
   /** Explicit named fonts loaded once per build (overrides the first-file scan). */
   fonts?: OgFont[];
+  /**
+   * Also render a single SITE-LEVEL default card to `<outDir>/og-default.png`, used (via
+   * `head.defaultOgImage: "/og-default.png"`) as the og:image fallback for non-article pages.
+   * Rendered ONCE with the same loaded fonts; the per-article `render` hook is NOT applied.
+   *
+   * - `true` → the built-in generic card (site name over its description on a dark background).
+   * - a render function → your OWN card, e.g. `defaultCard: MySiteCard` (a `(input) => VNode`,
+   *   the same shape as `render`); `input.siteName`/`input.description` carry the site identity.
+   * - `false`/omitted → no card (default).
+   */
+  defaultCard?: boolean | ((input: RichOgInput) => import("preact").VNode);
 }
 /**
  * Public configuration for the `build` plugin. Flags give opt-in granularity over

package/dist/index.d.mts

@@ -1632,6 +1632,17 @@ interface OgImageConfig {
   render?(input: RichOgInput): import("preact").VNode;
   /** Explicit named fonts loaded once per build (overrides the first-file scan). */
   fonts?: OgFont[];
+  /**
+   * Also render a single SITE-LEVEL default card to `<outDir>/og-default.png`, used (via
+   * `head.defaultOgImage: "/og-default.png"`) as the og:image fallback for non-article pages.
+   * Rendered ONCE with the same loaded fonts; the per-article `render` hook is NOT applied.
+   *
+   * - `true` → the built-in generic card (site name over its description on a dark background).
+   * - a render function → your OWN card, e.g. `defaultCard: MySiteCard` (a `(input) => VNode`,
+   *   the same shape as `render`); `input.siteName`/`input.description` carry the site identity.
+   * - `false`/omitted → no card (default).
+   */
+  defaultCard?: boolean | ((input: RichOgInput) => import("preact").VNode);
 }
 /**
  * Public configuration for the `build` plugin. Flags give opt-in granularity over

package/dist/index.mjs

@@ -4161,6 +4161,45 @@ function defaultCard(input) {
 	} }, input.title);
 }
 /**
+* The built-in SITE-LEVEL default card — the site name over its description on a dark
+* background, centered. Rendered once (when `ogImage.defaultCard` is true) to `og-default.png`
+* and used as the `head.defaultOgImage` fallback. Reads `siteName` + `description` from the
+* {@link RichOgInput}; the per-article `render` hook is deliberately NOT applied here.
+*
+* @param input - The rich OG input (only `siteName` + `description` are used).
+* @returns The Preact `VNode` for the site default card.
+* @example
+* ```ts
+* defaultSiteCard({ ...input, siteName: "My Blog", description: "A dev blog" });
+* ```
+*/
+function defaultSiteCard(input) {
+	const children = [h("div", { style: {
+		display: "flex",
+		fontSize: 72,
+		fontWeight: 700,
+		color: "#ffffff"
+	} }, input.siteName)];
+	if (input.description) children.push(h("div", { style: {
+		display: "flex",
+		marginTop: 28,
+		maxWidth: 900,
+		fontSize: 32,
+		color: "#a1a1aa",
+		textAlign: "center"
+	} }, input.description));
+	return h("div", { style: {
+		display: "flex",
+		flexDirection: "column",
+		width: "100%",
+		height: "100%",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: 80,
+		background: "#0b0b0c"
+	} }, ...children);
+}
+/**
 * The default PNG renderer: a Preact `VNode` (custom `render` hook or the built-in
 * card) is rendered to SVG by Satori, then rasterized to PNG by resvg. Both native
 * deps are imported LAZILY (browser-safe goal); the VNode→Satori-input cast happens
@@ -4250,6 +4289,24 @@ function resolveSiteName(ctx) {
 	}
 }
 /**
+* Resolve the site description via `ctx.require(sitePlugin)`, falling back to `""` when the
+* site API is unavailable (e.g. unit mocks that omit it). Used by the site default card.
+*
+* @param ctx - Plugin context (provides `require`).
+* @returns The site description, or `""` when the site plugin is not wired.
+* @example
+* ```ts
+* resolveSiteDescription(ctx);
+* ```
+*/
+function resolveSiteDescription(ctx) {
+	try {
+		return ctx.require(sitePlugin).description();
+	} catch {
+		return "";
+	}
+}
+/**
 * Render (or cache-skip) one article's OG image, mutating {@link RenderTally} in
 * place. A matching cached hash bumps `skipped` and returns early; otherwise the
 * PNG is rasterized to `<outDir>/og/<slug>.png`, the cache entry is updated, and
@@ -4320,6 +4377,11 @@ async function generateOgImages(ctx, options = {}) {
 		fonts,
 		...renderHook
 	});
+	const siteCardRender = typeof config.defaultCard === "function" ? config.defaultCard : defaultSiteCard;
+	const renderSitePng = options.renderPng ?? makeDefaultRenderer({
+		fonts,
+		render: siteCardRender
+	});
 	const siteName = resolveSiteName(ctx);
 	const defaultLocale = ctx.require(i18nPlugin).defaultLocale();
 	const articles = selectArticles(readCachedContent(ctx), defaultLocale);
@@ -4344,15 +4406,31 @@ async function generateOgImages(ctx, options = {}) {
 			outDir
 		}, tally);
 	})));
+	const defaultCard = config.defaultCard === true || typeof config.defaultCard === "function";
+	if (defaultCard) {
+		const png = await renderSitePng({
+			title: siteName,
+			description: resolveSiteDescription(ctx),
+			date: "",
+			tags: [],
+			locale: defaultLocale,
+			siteName,
+			size
+		});
+		await mkdir(ctx.config.outDir, { recursive: true });
+		await writeFile(path.join(ctx.config.outDir, "og-default.png"), png);
+	}
 	await persistDiskCache(ctx.config.outDir, cache);
 	ctx.log.debug("build:og-images", {
 		rendered: tally.rendered,
-		skipped: tally.skipped
+		skipped: tally.skipped,
+		defaultCard
 	});
 	return {
 		rendered: tally.rendered,
 		skipped: tally.skipped,
-		peakConcurrency: tally.peakConcurrency
+		peakConcurrency: tally.peakConcurrency,
+		defaultCard
 	};
 }
 /**

package/package.json

@@ -113,5 +113,5 @@
     "test:cli-e2e": "bun test src/plugins/cli/__tests__/e2e/",
     "test:coverage": "vitest run --project unit --project integration --coverage"
   },
-  "version": "1.5.0"
+  "version": "1.5.2"
 }