@soonit/rspress-plugin-og 0.0.5 → 0.1.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { t as Options } from "./types-R_GC9oNb.mjs";
+import { t as Options } from "./types-7FdncbbI.mjs";
 import { RspressPlugin } from "@rspress/core";
 
 //#region src/index.d.ts

package/dist/index.mjs

@@ -1,9 +1,10 @@
 import { dirname, join, relative } from "node:path";
 import { performance } from "node:perf_hooks";
 import node_process, { cwd } from "node:process";
+import { Buffer } from "node:buffer";
 import { existsSync, mkdirSync, readFileSync } from "node:fs";
-import { writeFile } from "node:fs/promises";
 import { Resvg } from "@resvg/resvg-js";
+import sharp from "sharp";
 import node_os from "node:os";
 import node_tty from "node:tty";
 import { joinURL } from "ufo";
@@ -49,84 +50,45 @@ function createOgImageTypeHead() {
 //#endregion
 //#region ../core/src/og.ts
 const templates = /* @__PURE__ */ new Map();
+const baseImages = /* @__PURE__ */ new Map();
 function escapeHtml(unsafe) {
 	return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
-/**
-* Wrap a title string into at most three lines with a best-effort “do not break words” strategy.
-*
-* The input is first split by explicit newlines into paragraphs (empty lines are ignored). Then each
-* paragraph is wrapped into lines whose length does not exceed {@link maxSizePerLine} when possible:
-*
-* - If the paragraph contains whitespace, it is tokenized by whitespace and tokens are joined with a
-*   single space.
-* - If the paragraph contains no whitespace (e.g. CJK text), it is tokenized by individual characters.
-* - If a single token is longer than the line limit, it is hard-split into fixed-size chunks.
-*
-* Wrapping stops once three lines have been produced in total.
-*
-* @param input - The title text to wrap. `null`/`undefined`/empty (after trimming) results in `[]`.
-* @param maxSizePerLine - Maximum allowed character count per line. Values `<= 0` are treated as `1`.
-* @returns An array of wrapped lines, with a maximum length of 3.
-*/
-function wrapTitleToLines(input, maxSizePerLine) {
-	const text = (input ?? "").trim();
-	if (!text) return [];
-	const max = Math.max(1, maxSizePerLine || 1);
-	const paragraphs = text.split(/\r?\n+/).map((s) => s.trim()).filter(Boolean);
-	const out = [];
-	for (const para of paragraphs) {
-		if (out.length >= 3) break;
-		const tokens = /\s/.test(para) ? para.split(/\s+/).filter(Boolean) : [...para];
-		let line = "";
-		for (const token of tokens) {
-			if (out.length >= 3) break;
-			const next = line ? /\s/.test(para) ? `${line} ${token}` : `${line}${token}` : token;
-			if (next.length <= max) {
-				line = next;
-				continue;
-			}
-			if (line) {
-				out.push(line);
-				line = "";
-				if (out.length >= 3) break;
-			}
-			if (token.length > max) {
-				const chunks = token.match(new RegExp(`.{1,${max}}`, "g")) ?? [];
-				for (const chunk of chunks) {
-					if (out.length >= 3) break;
-					if (chunk.length === max) out.push(chunk);
-					else line = chunk;
-				}
-			} else line = token;
-		}
-		if (out.length >= 3) break;
-		if (line) out.push(line);
-	}
-	return out.slice(0, 3);
-}
 async function generateOgImage({ title }, output, options) {
 	if (existsSync(output)) return;
 	if (!templates.has(options.ogTemplate)) templates.set(options.ogTemplate, readFileSync(options.ogTemplate, "utf-8"));
 	const ogTemplate = templates.get(options.ogTemplate);
-	mkdirSync(dirname(output), { recursive: true });
-	const lines = wrapTitleToLines(title, options.maxTitleSizePerLine);
-	if (lines.length === 0) {
-		console.warn("[vitepress-plugin-og] Missing page title, skip og image generation.");
-		return;
+	if (!baseImages.has(options.ogTemplate)) {
+		const baseSvg = ogTemplate.replace(/\{\{[^}]+\}\}/g, "").replace(/<text[^>]*>[\s\S]*?<\/text>/g, "");
+		const baseImageBuffer = await sharp(Buffer.from(baseSvg)).resize(1200, 630).png().toBuffer();
+		baseImages.set(options.ogTemplate, baseImageBuffer);
 	}
-	const data = {
+	mkdirSync(dirname(output), { recursive: true });
+	const lines = title.trim().split(new RegExp(`(.{0,${options.maxTitleSizePerLine}})(?:\\s|$)`, "g")).filter(Boolean);
+	const textLayerBuffer = new Resvg(createTextLayerSvg(ogTemplate, {
 		line1: lines[0] ? escapeHtml(lines[0]) : "",
 		line2: lines[1] ? escapeHtml(lines[1]) : "",
 		line3: lines[2] ? escapeHtml(lines[2]) : ""
-	};
-	await writeFile(output, new Resvg(ogTemplate.replace(/\{\{([^}]+)\}\}/g, (_, name) => data[name] || ""), {
+	}), {
 		fitTo: {
 			mode: "width",
 			value: 1200
 		},
+		font: { loadSystemFonts: false },
+		shapeRendering: 0,
+		textRendering: 2,
+		imageRendering: 1,
+		dpi: 96,
 		...options.resvgOptions
-	}).render().asPng());
+	}).render().asPng();
+	await sharp(baseImages.get(options.ogTemplate)).composite([{
+		input: textLayerBuffer,
+		blend: "over"
+	}]).png().toFile(output);
+}
+function createTextLayerSvg(template, data) {
+	const processedText = (template.match(/<text[^>]*>[\s\S]*?<\/text>/g) || []).map((element) => element.replace(/\{\{([^}]+)\}\}/g, (_, name) => data[name] || ""));
+	return `${template.match(/<svg[^>]*>/)?.[0] || "<svg>"}${processedText.join("")}</svg>`;
 }
 
 //#endregion
@@ -389,7 +351,6 @@ async function resolveOptions(userOptions) {
 		outDir: "og",
 		ogTemplate: "og-template.svg",
 		maxTitleSizePerLine: 30,
-		resvgOptions: void 0,
 		...userOptions
 	};
 	if (typeof options.resvgOptions === "function") options.resvgOptions = await options.resvgOptions();

package/dist/types-7FdncbbI.d.mts

@@ -0,0 +1,94 @@
+import { Buffer } from "node:buffer";
+
+//#region ../core/src/types.d.ts
+
+/**
+ * resvg render options
+ * @see https://github.com/yisibl/resvg-js
+ */
+interface ResvgRenderOptions {
+  /**
+   * Custom font data
+   */
+  font?: {
+    fontBuffers?: Buffer[];
+    loadSystemFonts?: boolean;
+    defaultFontFamily?: string;
+    defaultFontSize?: number;
+    serifFamily?: string;
+    sansSerifFamily?: string;
+    cursiveFamily?: string;
+    fantasyFamily?: string;
+    monospaceFamily?: string;
+  };
+  /**
+   * DPI for rendering
+   * @default 96
+   */
+  dpi?: number;
+  /**
+   * Shape rendering mode
+   */
+  shapeRendering?: 0 | 1 | 2;
+  /**
+   * Text rendering mode
+   */
+  textRendering?: 0 | 1 | 2;
+  /**
+   * Image rendering mode
+   */
+  imageRendering?: 0 | 1;
+  /**
+   * Fit to dimensions
+   */
+  fitTo?: {
+    mode: 'original' | 'width' | 'height' | 'zoom';
+    value?: number;
+  };
+  /**
+   * Background color
+   */
+  background?: string;
+  /**
+   * Log level for resvg
+   */
+  logLevel?: 'off' | 'error' | 'warn' | 'info' | 'debug' | 'trace';
+}
+interface Options {
+  /**
+   * The domain to use for the generated OG image URLs.
+   */
+  domain: string;
+  /**
+   * Output directory for the generated OG images.
+   *
+   * @default 'og'
+   */
+  outDir?: string;
+  /**
+   * Maximum number of characters per line in the title.
+   *
+   * @default 30
+   */
+  maxTitleSizePerLine?: number;
+  /**
+   * The path to the OG image template file.
+   *
+   * @default '.vitepress/og-template.svg' for VitePress
+   * @default 'og-template.svg' for Rspress
+   */
+  ogTemplate?: string;
+  /**
+   * Options for resvg rendering
+   */
+  resvgOptions?: ResvgRenderOptions | (() => Promise<ResvgRenderOptions> | ResvgRenderOptions);
+}
+interface ResolvedOptions extends Required<Omit<Options, 'resvgOptions'>> {
+  resvgOptions?: ResvgRenderOptions;
+}
+//#endregion
+//#region src/types.d.ts
+interface Options$1 extends Options {}
+interface ResolvedOptions$1 extends ResolvedOptions {}
+//#endregion
+export { ResolvedOptions$1 as n, Options$1 as t };

package/dist/types.d.mts

@@ -1,2 +1,2 @@
-import { n as ResolvedOptions, t as Options } from "./types-R_GC9oNb.mjs";
+import { n as ResolvedOptions, t as Options } from "./types-7FdncbbI.mjs";
 export { Options, ResolvedOptions };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@soonit/rspress-plugin-og",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "Automatically generate Open Graph images for your Rspress pages.",
   "author": "Estéban Soubiran <esteban@soubiran.dev>",
   "license": "MIT",
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@resvg/resvg-js": "^2.6.2",
+    "sharp": "^0.34.5",
     "ufo": "^1.6.1"
   },
   "devDependencies": {

package/dist/types-R_GC9oNb.d.mts

@@ -1,41 +0,0 @@
-import { ResvgRenderOptions } from "@resvg/resvg-js";
-
-//#region ../core/src/types.d.ts
-interface Options {
-  /**
-   * The domain to use for the generated OG image URLs.
-   */
-  domain: string;
-  /**
-   * Output directory for the generated OG images.
-   *
-   * @default 'og'
-   */
-  outDir?: string;
-  /**
-   * Maximum number of characters per line in the title.
-   *
-   * @default 30
-   */
-  maxTitleSizePerLine?: number;
-  /**
-   * The path to the OG image template file.
-   *
-   * @default '.vitepress/og-template.svg' for VitePress
-   * @default 'og-template.svg' for Rspress
-   */
-  ogTemplate?: string;
-  /**
-   * Options for resvg rendering
-   */
-  resvgOptions?: ResvgRenderOptions | (() => Promise<ResvgRenderOptions>);
-}
-interface ResolvedOptions extends Required<Omit<Options, 'resvgOptions'>> {
-  resvgOptions?: ResvgRenderOptions;
-}
-//#endregion
-//#region src/types.d.ts
-interface Options$1 extends Options {}
-interface ResolvedOptions$1 extends ResolvedOptions {}
-//#endregion
-export { ResolvedOptions$1 as n, Options$1 as t };