@soonit/rspress-plugin-og 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 - Estéban Soubiran <esteban@soubiran.dev> (https://soubiran.dev)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+# rspress-plugin-og
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![pkg.pr.new](https://pkg.pr.new/badge/Barbapapazes/vitepress-plugin-og)](https://pkg.pr.new/~/Barbapapazes/vitepress-plugin-og)
+
+Automatically generate Open Graph images for your Rspress pages.
+
+- 🖼️ Generates OG images from an SVG template
+- 🚀 Integrates with Rspress
+- 🧩 Bring your own SVG template
+
+## Installation
+
+```bash
+pnpm add -D rspress-plugin-og
+```
+
+## Usage
+
+Add the plugin to your Rspress configuration file (`rspress.config.ts`):
+
+For Rspress v2:
+
+```ts
+import { defineConfig } from '@rspress/core'
+import pluginOg from 'rspress-plugin-og'
+
+export default defineConfig({
+  plugins: [
+    pluginOg({
+      domain: 'https://example.com',
+      // ...other options
+    }),
+  ],
+})
+```
+
+For Rspress v1:
+
+This is a plugin that is compatible with both V2 and V1, but when used in V1, there may be type errors.
+
+```ts
+import pluginOg from 'rspress-plugin-og'
+import { defineConfig } from 'rspress/config'
+
+export default defineConfig({
+  plugins: [
+    pluginOg({
+      domain: 'https://example.com',
+      // ...other options
+    }) as any,
+  ],
+})
+```
+
+## Configuration
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `domain` | `string` | **Required** | The domain to use for the generated OG image URLs. |
+| `outDir` | `string` | `'og'` | Output directory for the generated OG images (inside `public`). |
+| `ogTemplate` | `string` | `'og-template.svg'` | The path to the OG image template file. |
+| `maxTitleSizePerLine` | `number` | `30` | Maximum number of characters per line in the title. |
+
+## Template
+
+Create an SVG template at `og-template.svg` (or your configured path). Use `{{line1}}`, `{{line2}}`, and `{{line3}}` placeholders for the title lines.
+
+Example:
+
+```xml
+<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="1200" height="630" fill="#1e1e1e" />
+
+  <!-- Title -->
+  <text x="60" y="200" font-family="Arial" font-size="80" fill="#ffffff">
+    <tspan x="60" dy="0">{{line1}}</tspan>
+    <tspan x="60" dy="100">{{line2}}</tspan>
+    <tspan x="60" dy="100">{{line3}}</tspan>
+  </text>
+</svg>
+```
+
+## Sponsors
+
+<p align="center">
+  <a href="https://github.com/sponsors/barbapapazes">
+    <img src='https://cdn.jsdelivr.net/gh/barbapapazes/static/sponsors.svg'/>
+  </a>
+</p>
+
+## License
+
+[MIT](../../LICENSE) License © 2025-PRESENT [Estéban Soubiran](https://github.com/barbapapazes)
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/rspress-plugin-og/latest.svg?style=flat&colorA=000&colorB=171717
+[npm-version-href]: https://npmjs.com/package/rspress-plugin-og
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/rspress-plugin-og.svg?style=flat&colorA=000&colorB=171717
+[npm-downloads-href]: https://npmjs.com/package/rspress-plugin-og
+
+[license-src]: https://img.shields.io/npm/l/rspress-plugin-og.svg?style=flat&colorA=000&colorB=171717
+[license-href]: https://npmjs.com/package/rspress-plugin-og

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import { t as Options } from "./types-d5VtTQ1o.mjs";
+import * as _rspress_core0 from "@rspress/core";
+import { PageIndexInfo } from "@rspress/core";
+
+//#region src/index.d.ts
+declare function export_default(userOptions: Options): {
+  name: string;
+  config(config: _rspress_core0.UserConfig): _rspress_core0.UserConfig;
+  extendPageData: (pageData: PageIndexInfo) => void;
+  afterBuild(config: _rspress_core0.UserConfig): Promise<void>;
+};
+//#endregion
+export { export_default as default };

package/dist/index.mjs

@@ -0,0 +1,382 @@
+import { dirname, join, relative } from "node:path";
+import node_process, { cwd } from "node:process";
+import { Buffer } from "node:buffer";
+import { existsSync, mkdirSync, readFileSync } from "node:fs";
+import sharp from "sharp";
+import node_os from "node:os";
+import node_tty from "node:tty";
+import { joinURL } from "ufo";
+
+//#region ../core/src/head.ts
+function createTwitterImageHead(imageUrl) {
+	return ["meta", {
+		name: "twitter:image",
+		content: imageUrl
+	}];
+}
+function createTwitterCardHead() {
+	return ["meta", {
+		name: "twitter:card",
+		content: "summary_large_image"
+	}];
+}
+function createOgImageHead(imageUrl) {
+	return ["meta", {
+		property: "og:image",
+		content: imageUrl
+	}];
+}
+function createOgImageWidthHead() {
+	return ["meta", {
+		property: "og:image:width",
+		content: "1200"
+	}];
+}
+function createOgImageHeightHead() {
+	return ["meta", {
+		property: "og:image:height",
+		content: "630"
+	}];
+}
+function createOgImageTypeHead() {
+	return ["meta", {
+		property: "og:image:type",
+		content: "image/png"
+	}];
+}
+
+//#endregion
+//#region ../core/src/og.ts
+const templates = /* @__PURE__ */ new Map();
+function escapeHtml(unsafe) {
+	return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+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 = title.trim().split(new RegExp(`(.{0,${options.maxTitleSizePerLine}})(?:\\s|$)`, "g")).filter(Boolean);
+	const data = {
+		line1: lines[0] ? escapeHtml(lines[0]) : "",
+		line2: lines[1] ? escapeHtml(lines[1]) : "",
+		line3: lines[2] ? escapeHtml(lines[2]) : ""
+	};
+	const svg = ogTemplate.replace(/\{\{([^}]+)\}\}/g, (_, name) => data[name] || "");
+	await sharp(Buffer.from(svg)).resize(1200, 630).png().toFile(output);
+}
+
+//#endregion
+//#region ../core/src/utils.ts
+function slugifyPath(path) {
+	return `${path.replace(/\//g, "-").replace(/\.mdx?$/, "")}.png`;
+}
+
+//#endregion
+//#region ../../node_modules/.pnpm/rslog@1.3.2/node_modules/rslog/dist/index.js
+function hasFlag(flag, argv = globalThis.Deno ? globalThis.Deno.args : node_process.argv) {
+	const prefix = flag.startsWith("-") ? "" : 1 === flag.length ? "-" : "--";
+	const position = argv.indexOf(prefix + flag);
+	const terminatorPosition = argv.indexOf("--");
+	return -1 !== position && (-1 === terminatorPosition || position < terminatorPosition);
+}
+const { env } = node_process;
+let flagForceColor;
+if (hasFlag("no-color") || hasFlag("no-colors") || hasFlag("color=false") || hasFlag("color=never")) flagForceColor = 0;
+else if (hasFlag("color") || hasFlag("colors") || hasFlag("color=true") || hasFlag("color=always")) flagForceColor = 1;
+function envForceColor() {
+	if (!("FORCE_COLOR" in env)) return;
+	if ("true" === env.FORCE_COLOR) return 1;
+	if ("false" === env.FORCE_COLOR) return 0;
+	if (0 === env.FORCE_COLOR.length) return 1;
+	const level = Math.min(Number.parseInt(env.FORCE_COLOR, 10), 3);
+	if (![
+		0,
+		1,
+		2,
+		3
+	].includes(level)) return;
+	return level;
+}
+function translateLevel(level) {
+	if (0 === level) return false;
+	return {
+		level,
+		hasBasic: true,
+		has256: level >= 2,
+		has16m: level >= 3
+	};
+}
+function _supportsColor(haveStream, { streamIsTTY, sniffFlags = true } = {}) {
+	const noFlagForceColor = envForceColor();
+	if (void 0 !== noFlagForceColor) flagForceColor = noFlagForceColor;
+	const forceColor = sniffFlags ? flagForceColor : noFlagForceColor;
+	if (0 === forceColor) return 0;
+	if (sniffFlags) {
+		if (hasFlag("color=16m") || hasFlag("color=full") || hasFlag("color=truecolor")) return 3;
+		if (hasFlag("color=256")) return 2;
+	}
+	if ("TF_BUILD" in env && "AGENT_NAME" in env) return 1;
+	if (haveStream && !streamIsTTY && void 0 === forceColor) return 0;
+	const min = forceColor || 0;
+	if ("dumb" === env.TERM) return min;
+	if ("win32" === node_process.platform) {
+		const osRelease = node_os.release().split(".");
+		if (Number(osRelease[0]) >= 10 && Number(osRelease[2]) >= 10586) return Number(osRelease[2]) >= 14931 ? 3 : 2;
+		return 1;
+	}
+	if ("CI" in env) {
+		if ([
+			"GITHUB_ACTIONS",
+			"GITEA_ACTIONS",
+			"CIRCLECI"
+		].some((key) => key in env)) return 3;
+		if ([
+			"TRAVIS",
+			"APPVEYOR",
+			"GITLAB_CI",
+			"BUILDKITE",
+			"DRONE"
+		].some((sign) => sign in env) || "codeship" === env.CI_NAME) return 1;
+		return min;
+	}
+	if ("TEAMCITY_VERSION" in env) return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
+	if ("truecolor" === env.COLORTERM) return 3;
+	if ("xterm-kitty" === env.TERM) return 3;
+	if ("xterm-ghostty" === env.TERM) return 3;
+	if ("wezterm" === env.TERM) return 3;
+	if ("TERM_PROGRAM" in env) {
+		const version = Number.parseInt((env.TERM_PROGRAM_VERSION || "").split(".")[0], 10);
+		switch (env.TERM_PROGRAM) {
+			case "iTerm.app": return version >= 3 ? 3 : 2;
+			case "Apple_Terminal": return 2;
+		}
+	}
+	if (/-256(color)?$/i.test(env.TERM)) return 2;
+	if (/^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) return 1;
+	if ("COLORTERM" in env) return 1;
+	return min;
+}
+function createSupportsColor(stream, options = {}) {
+	return translateLevel(_supportsColor(stream, {
+		streamIsTTY: stream && stream.isTTY,
+		...options
+	}));
+}
+const supports_color = {
+	stdout: createSupportsColor({ isTTY: node_tty.isatty(1) }),
+	stderr: createSupportsColor({ isTTY: node_tty.isatty(2) })
+};
+const colorLevel = supports_color.stdout ? supports_color.stdout.level : 0;
+let errorStackRegExp = /at [^\r\n]{0,200}:\d+:\d+[\s\)]*$/;
+let anonymousErrorStackRegExp = /at [^\r\n]{0,200}\(<anonymous>\)$/;
+let indexErrorStackRegExp = /at [^\r\n]{0,200}\(index\s\d+\)$/;
+let isErrorStackMessage = (message) => errorStackRegExp.test(message) || anonymousErrorStackRegExp.test(message) || indexErrorStackRegExp.test(message);
+let formatter = (open, close, replace = open) => colorLevel >= 2 ? (input) => {
+	let string = "" + input;
+	let index = string.indexOf(close, open.length);
+	return ~index ? open + replaceClose(string, close, replace, index) + close : open + string + close;
+} : String;
+let replaceClose = (string, close, replace, index) => {
+	let start = string.substring(0, index) + replace;
+	let end = string.substring(index + close.length);
+	let nextIndex = end.indexOf(close);
+	return ~nextIndex ? start + replaceClose(end, close, replace, nextIndex) : start + end;
+};
+const bold = formatter("\x1B[1m", "\x1B[22m", "\x1B[22m\x1B[1m");
+const red = formatter("\x1B[31m", "\x1B[39m");
+const green = formatter("\x1B[32m", "\x1B[39m");
+const yellow = formatter("\x1B[33m", "\x1B[39m");
+const magenta = formatter("\x1B[35m", "\x1B[39m");
+const cyan = formatter("\x1B[36m", "\x1B[39m");
+const gray = formatter("\x1B[90m", "\x1B[39m");
+let startColor = [
+	189,
+	255,
+	243
+];
+let endColor = [
+	74,
+	194,
+	154
+];
+let isWord = (char) => !/[\s\n]/.test(char);
+let gradient = (message) => {
+	if (colorLevel < 3) return 2 === colorLevel ? bold(cyan(message)) : message;
+	let chars = [...message];
+	let steps = chars.filter(isWord).length;
+	let r = startColor[0];
+	let g = startColor[1];
+	let b = startColor[2];
+	let rStep = (endColor[0] - r) / steps;
+	let gStep = (endColor[1] - g) / steps;
+	let bStep = (endColor[2] - b) / steps;
+	let output = "";
+	for (let char of chars) {
+		if (isWord(char)) {
+			r += rStep;
+			g += gStep;
+			b += bStep;
+		}
+		output += `\x1b[38;2;${Math.round(r)};${Math.round(g)};${Math.round(b)}m${char}\x1b[39m`;
+	}
+	return bold(output);
+};
+let LOG_LEVEL = {
+	silent: -1,
+	error: 0,
+	warn: 1,
+	info: 2,
+	log: 2,
+	verbose: 3
+};
+let LOG_TYPES = {
+	error: {
+		label: "error",
+		level: "error",
+		color: red
+	},
+	warn: {
+		label: "warn",
+		level: "warn",
+		color: yellow
+	},
+	info: {
+		label: "info",
+		level: "info",
+		color: cyan
+	},
+	start: {
+		label: "start",
+		level: "info",
+		color: cyan
+	},
+	ready: {
+		label: "ready",
+		level: "info",
+		color: green
+	},
+	success: {
+		label: "success",
+		level: "info",
+		color: green
+	},
+	log: { level: "info" },
+	debug: {
+		label: "debug",
+		level: "verbose",
+		color: magenta
+	}
+};
+const normalizeErrorMessage = (err) => {
+	if (err.stack) {
+		let [name, ...rest] = err.stack.split("\n");
+		if (name.startsWith("Error: ")) name = name.slice(7);
+		return `${name}\n${gray(rest.join("\n"))}`;
+	}
+	return err.message;
+};
+let createLogger = (options = {}) => {
+	let maxLevel = options.level || "info";
+	let log = (type, message, ...args) => {
+		let logType = LOG_TYPES[type];
+		const { level } = logType;
+		if (LOG_LEVEL[level] > LOG_LEVEL[maxLevel]) return;
+		if (null == message) return console.log();
+		let label = "";
+		let text = "";
+		if ("label" in logType) {
+			label = (logType.label || "").padEnd(7);
+			label = bold(logType.color ? logType.color(label) : label);
+		}
+		if (message instanceof Error) {
+			text += normalizeErrorMessage(message);
+			const { cause } = message;
+			if (cause) {
+				text += yellow("\n  [cause]: ");
+				text += cause instanceof Error ? normalizeErrorMessage(cause) : String(cause);
+			}
+		} else if ("error" === level && "string" == typeof message) text = message.split("\n").map((line) => isErrorStackMessage(line) ? gray(line) : line).join("\n");
+		else text = `${message}`;
+		const method = "error" === level || "warn" === level ? level : "log";
+		console[method](label.length ? `${label} ${text}` : text, ...args);
+	};
+	let logger = { greet: (message) => log("log", gradient(message)) };
+	Object.keys(LOG_TYPES).forEach((key) => {
+		logger[key] = (...args) => log(key, ...args);
+	});
+	Object.defineProperty(logger, "level", {
+		get: () => maxLevel,
+		set(val) {
+			maxLevel = val;
+		}
+	});
+	logger.override = (customLogger) => {
+		Object.assign(logger, customLogger);
+	};
+	return logger;
+};
+let src_logger = createLogger();
+
+//#endregion
+//#region src/options.ts
+function resolveOptions(userOptions) {
+	return {
+		domain: "",
+		outDir: "og",
+		ogTemplate: "og-template.svg",
+		maxTitleSizePerLine: 30,
+		...userOptions
+	};
+}
+
+//#endregion
+//#region src/index.ts
+const NAME = "rspress-plugin-og";
+const LOG_PREFIX = `[${NAME}]`;
+function src_default(userOptions) {
+	const options = resolveOptions(userOptions);
+	const images = /* @__PURE__ */ new Map();
+	const headCreators = [
+		(url) => createTwitterImageHead(url),
+		() => createTwitterCardHead(),
+		(url) => createOgImageHead(url),
+		() => createOgImageWidthHead(),
+		() => createOgImageHeightHead(),
+		() => createOgImageTypeHead()
+	];
+	return {
+		name: NAME,
+		config(config) {
+			config.head = [...config.head || [], ...headCreators.map((creator) => (route) => {
+				const imageInfo = images.get(route.routePath);
+				if (!imageInfo) return;
+				return creator(imageInfo.imageUrl);
+			})];
+			return config;
+		},
+		extendPageData: (pageData) => {
+			if (!(pageData.frontmatter.title || pageData.title)) {
+				src_logger.warn(`${LOG_PREFIX} Cannot generate OG image for page without title: ${pageData._relativePath}`);
+				return;
+			}
+			const imageName = slugifyPath(pageData._relativePath);
+			images.set(pageData.routePath, {
+				title: pageData.frontmatter.title || pageData.title,
+				imageName,
+				imageUrl: joinURL(options.domain, options.outDir, imageName)
+			});
+		},
+		async afterBuild(config) {
+			const outputFolder = join(cwd(), config.outDir ?? "doc_build", options.outDir);
+			src_logger.info(`${LOG_PREFIX} Generating OG images to ${relative(cwd(), outputFolder)} ...`);
+			await Promise.all(Array.from(images.entries()).map(([_, { title, imageName }]) => {
+				return generateOgImage({ title }, join(outputFolder, imageName), options);
+			}));
+			src_logger.success(`${LOG_PREFIX} ${images.size} OG images generated.`);
+		}
+	};
+}
+
+//#endregion
+export { src_default as default };

package/dist/types-d5VtTQ1o.d.mts

@@ -0,0 +1,33 @@
+//#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;
+}
+interface ResolvedOptions extends Required<Options> {}
+//#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

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

package/dist/types.mjs

@@ -0,0 +1 @@
+export {  };

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@soonit/rspress-plugin-og",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Automatically generate Open Graph images for your Rspress pages.",
+  "author": "Estéban Soubiran <esteban@soubiran.dev>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/Barbapapazes",
+  "homepage": "https://github.com/Barbapapazes/vitepress-plugin-og",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Barbapapazes/vitepress-plugin-og"
+  },
+  "bugs": "https://github.com/Barbapapazes/vitepress-plugin-og/issues",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./types": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/types.mjs"
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "@rspress/core": "^2.0.0-rc.1 || ^2.0.0"
+  },
+  "dependencies": {
+    "sharp": "^0.34.5",
+    "ufo": "^1.6.1"
+  },
+  "devDependencies": {
+    "rslog": "^1.3.2",
+    "tsdown": "^0.16.6",
+    "vitest": "^4.0.12"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest"
+  }
+}