slidev-workspace 0.5.1 → 0.6.0

package/dist/cli.js

@@ -2,12 +2,12 @@
 import { fileURLToPath } from "node:url";
 import { dirname, join, resolve } from "node:path";
 import { existsSync, mkdirSync, readdirSync } from "node:fs";
-import { cp } from "node:fs/promises";
+import { cp, rm } from "node:fs/promises";
 import { execSync } from "node:child_process";
 import { build, createServer } from "vite";
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
-import { existsSync as existsSync$1, readFileSync, readdirSync as readdirSync$1, watch } from "fs";
+import { cpSync, existsSync as existsSync$1, readFileSync, readdirSync as readdirSync$1, watch } from "fs";
 import { basename, join as join$1, resolve as resolve$1 } from "path";
 import { parse } from "yaml";
 import { spawn } from "child_process";
@@ -219,6 +219,34 @@ function slidesPlugin() {
 	let devServers = [];
 	return {
 		name: "vite-plugin-slides",
+		async closeBundle() {
+			try {
+				const config = loadConfig();
+				const slidesDirs = resolveSlidesDirs(config);
+				for (const slidesDir of slidesDirs) {
+					if (!existsSync$1(slidesDir)) continue;
+					const slideDirs = readdirSync$1(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).filter((dirent) => !(config.exclude || []).includes(dirent.name)).map((dirent) => dirent.name);
+					for (const slideDir of slideDirs) {
+						const slideDistPath = join$1(slidesDir, slideDir, "dist");
+						const assetsPath = join$1(slideDistPath, "assets");
+						if (!existsSync$1(assetsPath)) continue;
+						const assetFiles = readdirSync$1(assetsPath);
+						const ogImageFile = assetFiles.find((file) => /^og-image-[a-zA-Z0-9]+\.png$/.test(file));
+						if (ogImageFile) {
+							const sourceFile = join$1(assetsPath, ogImageFile);
+							const destFile = join$1(slideDistPath, "og-image.png");
+							try {
+								cpSync(sourceFile, destFile, { force: true });
+							} catch (error) {
+								console.warn(`⚠ Failed to copy og-image for ${slideDir}:`, error);
+							}
+						}
+					}
+				}
+			} catch (error) {
+				console.warn("⚠ og-image post-build error:", error);
+			}
+		},
 		async configureServer(server) {
 			const watchers = [];
 			const config = loadConfig();
@@ -337,6 +365,46 @@ async function buildAllSlides() {
 		}
 	}
 }
+async function exportOgImages() {
+	const workspaceCwd = process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
+	const config = loadConfig(workspaceCwd);
+	const slidesDirs = resolveSlidesDirs(config, workspaceCwd);
+	console.log("🖼️ Exporting OG images for all slides...");
+	try {
+		execSync("pnpm -r export --format png --range 1", {
+			cwd: workspaceCwd,
+			stdio: "inherit"
+		});
+		console.log("📦 Copying exported images to og-image.png...");
+		for (const slidesDir of slidesDirs) {
+			if (!existsSync(slidesDir)) {
+				console.warn(`⚠️ Slides directory not found: ${slidesDir}`);
+				continue;
+			}
+			const slides = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
+			for (const slideName of slides) {
+				const slideDir = join(slidesDir, slideName);
+				const packageJsonPath = join(slideDir, "package.json");
+				if (!existsSync(packageJsonPath)) continue;
+				const exportedFile = join(slideDir, "slides-export", "1.png");
+				const targetFile = join(slideDir, "og-image.png");
+				const exportDir = join(slideDir, "slides-export");
+				if (existsSync(exportedFile)) {
+					await cp(exportedFile, targetFile);
+					console.log(`✅ Generated OG image for: ${slideName}`);
+					await rm(exportDir, {
+						recursive: true,
+						force: true
+					});
+				} else console.warn(`⚠️ Export file not found for ${slideName}: ${exportedFile}`);
+			}
+		}
+		console.log("✅ All OG images exported successfully!");
+	} catch (error) {
+		console.error("❌ Failed to export OG images:", error);
+		process.exit(1);
+	}
+}
 async function copyToGhPages() {
 	const workspaceCwd = process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
 	const config = loadConfig(workspaceCwd);
@@ -396,13 +464,15 @@ Usage:
   slidev-workspace <command> [options]
 
 Commands:
-  dev     Start the development server
-  build   Build the project for production
-  help    Show this help message
+  dev        Start the development server
+  build      Build the project for production
+  export-og  Export OG images for all slides
+  help       Show this help message
 
 Examples:
   slidev-workspace dev                                    # Start development server
   slidev-workspace build                                  # Build all slides and preview app
+  slidev-workspace export-og                              # Export OG images for all slides
 
 Configuration:
   Use slidev-workspace.yml to set baseUrl for all builds
@@ -421,6 +491,10 @@ async function main() {
 			process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
 			await runViteBuild();
 			break;
+		case "export-og":
+			process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
+			await exportOgImages();
+			break;
 		case "help":
 		case "--help":
 		case "-h":

package/dist/index.js

@@ -55,18 +55,21 @@ function isUrl(str) {
 * returns: "http://localhost:3001/og-image.png"
 *
 * Example (production mode with og-image.png):
-* returns: "https://my-slides.com/slidev-workspace-starter/og-image.png"
+* returns: "https://my-slides.com/slidev-workspace-starter/og-image.png?v=<hash>"
 */
 function resolveImageUrl(slide, domain) {
 	const { hasOgImage, path: slidePath, baseUrl, frontmatter } = slide;
 	const seoOgImage = frontmatter.seoMeta?.ogImage;
 	const background = frontmatter.background;
-	if (hasOgImage) try {
-		const path = IS_DEVELOPMENT ? "/og-image.png" : pathJoin(baseUrl, "og-image.png");
-		return new URL(path, domain).href;
-	} catch (error) {
-		console.error("Failed to resolve og-image.png path:", error);
-		return "https://cover.sli.dev";
+	if (hasOgImage) {
+		const imagePath = `og-image.png?v=${Date.now()}`;
+		try {
+			const path = IS_DEVELOPMENT ? pathJoin(slidePath, imagePath) : pathJoin(baseUrl, slidePath, imagePath);
+			return new URL(path, domain).href;
+		} catch (error) {
+			console.error("Failed to resolve og-image.png path:", error);
+			return "https://cover.sli.dev";
+		}
 	}
 	if (seoOgImage) {
 		if (isUrl(seoOgImage)) return seoOgImage;

package/dist/plugin-slides.js

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync, readdirSync, watch } from "fs";
+import { cpSync, existsSync, readFileSync, readdirSync, watch } from "fs";
 import { basename, join, resolve } from "path";
 import { parse } from "yaml";
 import { spawn } from "child_process";
@@ -210,6 +210,34 @@ function slidesPlugin() {
 	let devServers = [];
 	return {
 		name: "vite-plugin-slides",
+		async closeBundle() {
+			try {
+				const config = loadConfig();
+				const slidesDirs = resolveSlidesDirs(config);
+				for (const slidesDir of slidesDirs) {
+					if (!existsSync(slidesDir)) continue;
+					const slideDirs = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).filter((dirent) => !(config.exclude || []).includes(dirent.name)).map((dirent) => dirent.name);
+					for (const slideDir of slideDirs) {
+						const slideDistPath = join(slidesDir, slideDir, "dist");
+						const assetsPath = join(slideDistPath, "assets");
+						if (!existsSync(assetsPath)) continue;
+						const assetFiles = readdirSync(assetsPath);
+						const ogImageFile = assetFiles.find((file) => /^og-image-[a-zA-Z0-9]+\.png$/.test(file));
+						if (ogImageFile) {
+							const sourceFile = join(assetsPath, ogImageFile);
+							const destFile = join(slideDistPath, "og-image.png");
+							try {
+								cpSync(sourceFile, destFile, { force: true });
+							} catch (error) {
+								console.warn(`⚠ Failed to copy og-image for ${slideDir}:`, error);
+							}
+						}
+					}
+				}
+			} catch (error) {
+				console.warn("⚠ og-image post-build error:", error);
+			}
+		},
 		async configureServer(server) {
 			const watchers = [];
 			const config = loadConfig();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-workspace",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A workspace tool for managing multiple Slidev presentations with API-based content management",
   "type": "module",
   "license": "MIT",

package/src/preview/composables/useSlides.ts

@@ -28,7 +28,7 @@ function isUrl(str: string | undefined): boolean {
  * returns: "http://localhost:3001/og-image.png"
  *
  * Example (production mode with og-image.png):
- * returns: "https://my-slides.com/slidev-workspace-starter/og-image.png"
+ * returns: "https://my-slides.com/slidev-workspace-starter/og-image.png?v=<hash>"
  */
 export function resolveImageUrl(slide: SlideInfo, domain: string): string {
   const { hasOgImage, path: slidePath, baseUrl, frontmatter } = slide;
@@ -37,10 +37,12 @@ export function resolveImageUrl(slide: SlideInfo, domain: string): string {
 
   // Priority 1: og-image.png (if exists)
   if (hasOgImage) {
+    const imagePath = `og-image.png?v=${Date.now()}`;
     try {
       const path = IS_DEVELOPMENT
-        ? "/og-image.png"
-        : pathJoin(baseUrl, "og-image.png");
+        ? pathJoin(slidePath, imagePath)
+        : pathJoin(baseUrl, slidePath, imagePath);
+
       return new URL(path, domain).href;
     } catch (error) {
       console.error("Failed to resolve og-image.png path:", error);