slidev-prerender 0.0.1-alpha.2 → 0.0.1-beta.0

package/README.md

@@ -52,7 +52,6 @@ By default, this will:
 
 - Read from `./dist` (your Slidev build output)
 - Generate pre-rendered pages in `./dist-prerender`
-- Create one HTML file per slide (1.html, 2.html, 3.html, etc.)
 
 ## ⚙️ Configuration
 
@@ -74,7 +73,7 @@ export default defineConfig({
   // Configuration for individual pages
   pages: [
     {
-      fileName: "1",
+      slug: "1",
       meta: {
         title: "Welcome to My Presentation",
         description: "An introduction to the main topics",
@@ -87,7 +86,7 @@ export default defineConfig({
       },
     },
     {
-      fileName: "2",
+      slug: "2",
       meta: {
         title: "Understanding the Key Concepts",
         description: "Deep dive into the core ideas",
@@ -112,12 +111,13 @@ export default defineConfig({
 | `outDir`     | `string`        | `"./dist-prerender"` | Output directory for pre-rendered pages      |
 | `port`       | `number`        | `4173`               | Port for the local server during rendering   |
 | `pages`      | `PageConfig[]`  | `[]`                 | Configuration for individual slides          |
+| `plugins`    | `PluginFunction[]` | `[]`              | Array of plugins to transform HTML output    |
 
 #### `PageConfig`
 
 | Option     | Type               | Description                                                  |
 | ---------- | ------------------ | ------------------------------------------------------------ |
-| `fileName` | `string`           | Slide file name without extension (e.g., "1", "2", "3")      |
+| `slug`     | `string` (required) | Slide file name without extension (e.g., "1", "2", "3")      |
 | `meta`     | `BuildHeadOptions` | Metadata configuration for the slide (optional)              |
 
 #### `BuildHeadOptions`
@@ -148,6 +148,56 @@ export default defineConfig({
 | `twitterImage`        | `string` | Twitter image URL                                 |
 | `twitterUrl`          | `string` | Twitter URL                                       |
 
+### Plugins
+
+Plugins allow you to transform the generated HTML for each slide. You can use plugins to inject custom scripts, modify content, or add analytics tracking.
+
+```typescript
+import { defineConfig } from "slidev-prerender";
+
+export default defineConfig({
+  plugins: [
+    // Example: Add Google Analytics
+    async (html, pageConfig, pageIndex, logger) => {
+      logger.info(`Processing slide ${pageIndex + 1}: ${pageConfig.slug}`);
+
+      const analyticsScript = `
+        <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', 'GA_MEASUREMENT_ID');
+        </script>
+      `;
+
+      return html.replace('</head>', `${analyticsScript}</head>`);
+    },
+
+    // Example: Add custom meta tag
+    (html) => {
+      return html.replace(
+        '</head>',
+        '<meta name="custom-tag" content="custom-value" /></head>'
+      );
+    },
+  ],
+});
+```
+
+#### Plugin Function Signature
+
+```typescript
+type PluginFunction = (
+  html: string,           // Current HTML content
+  pageConfig: PageConfig, // Configuration for the current page
+  pageIndex: number,      // Zero-based index of the page
+  logger: ConsolaInstance // Logger instance for output
+) => string | Promise<string>;
+```
+
+For more details on plugins, see the [Plugins Guide](./docs/guide/plugins.md) and [Plugins Reference](./docs/reference/plugins.md).
+
 ## 🌐 Deployment
 
 Deploy the generated `dist-prerender` folder like any static site:

package/dist/index.d.mts

@@ -1,28 +1,31 @@
+import { ConsolaInstance } from "consola";
 import { SeoMeta } from "@slidev/types";
 import { ResolvableLink } from "unhead/types";
 
 //#region src/build/handle-head.d.ts
 type BuildHeadOptions = {
   lang?: string;
-  title: string;
-  description?: string | null;
-  canonicalUrl?: string | null;
-  ogImage?: string | null;
-  twitterCard?: string | null;
-  favicon?: string | null;
+  title?: string;
+  description?: string;
+  canonicalUrl?: string;
+  ogImage?: string;
+  twitterCard?: string;
+  favicon?: string;
   webFonts?: ResolvableLink[];
   seoMeta?: Partial<SeoMeta>;
 };
 //#endregion
 //#region src/config/loadConfig.d.ts
+type Page = {
+  slug: string;
+  meta?: BuildHeadOptions;
+};
 type UserConfig = {
   slidevDist?: string;
   outDir?: string;
-  pages?: {
-    fileName: string;
-    meta?: BuildHeadOptions;
-  }[];
+  pages?: Page[];
   port?: number;
+  plugins?: ((html: string, currentPageConfig: Page, pageIndex: number, log: ConsolaInstance) => string | Promise<string>)[];
 };
 //#endregion
 //#region src/config/defineConfig.d.ts

package/dist/run.mjs

@@ -8,6 +8,7 @@ import { createHead, transformHtmlTemplate } from "unhead/server";
 import { parseHtmlForUnheadExtraction } from "unhead/parser";
 import { pathToFileURL } from "node:url";
 import { existsSync } from "node:fs";
+import consola from "consola";
 
 //#region src/build/handle-dist.ts
 async function removeDist(outDir) {
@@ -24,12 +25,27 @@ async function serveDist(distPath, port) {
 	});
 	const server = http.createServer((req, res) => serve(req, res));
 	await new Promise((resolve$1, reject) => {
-		server.once("error", reject);
-		server.listen(port, resolve$1);
+		const onError = (err) => reject(err);
+		server.once("error", onError);
+		server.listen(port, () => {
+			server.off("error", onError);
+			resolve$1();
+		});
 	});
+	let disposed = false;
 	return {
 		origin: `http://localhost:${port}`,
-		close: () => new Promise((resolve$1) => server.close(() => resolve$1()))
+		close: async () => {
+			if (disposed) return;
+			disposed = true;
+			new Promise((resolve$1, reject) => {
+				try {
+					server.close((err) => err ? reject(err) : resolve$1());
+				} catch (e) {
+					reject(e);
+				}
+			});
+		}
 	};
 }
 async function getPageHtml(page, pageUrl) {
@@ -40,6 +56,7 @@ async function getPageHtml(page, pageUrl) {
 //#endregion
 //#region src/utils/file.ts
 async function copyDir(src, dst) {
+	await fs.access(src);
 	await fs.mkdir(dst, { recursive: true });
 	for (const e of await fs.readdir(src, { withFileTypes: true })) {
 		const s = path.join(src, e.name);
@@ -53,12 +70,12 @@ async function copyDir(src, dst) {
 function toAttrValue(unsafe) {
 	return JSON.stringify(escapeHtml(String(unsafe)));
 }
-async function applyHead(html, opt) {
+async function applyHead(html, slug, opt) {
 	const extracted = parseHtmlForUnheadExtraction(html).input;
 	const description = opt.description ? toAttrValue(opt.description) : null;
 	return await transformHtmlTemplate(createHead({ init: [extracted, {
 		htmlAttrs: opt.lang ? { lang: opt.lang } : void 0,
-		title: opt.title,
+		title: opt.title ?? slug,
 		link: [
 			opt.favicon ? {
 				rel: "icon",
@@ -139,10 +156,11 @@ async function loadConfig(cwd = process.cwd()) {
 //#endregion
 //#region src/build/getConfig.ts
 const DEFAULT_CONFIG = {
-	slidevDist: "dist",
-	outDir: "dist-prerender",
+	slidevDist: "./dist",
+	outDir: "./dist-prerender",
 	pages: [],
-	port: 4173
+	port: 4173,
+	plugins: []
 };
 async function getConfig() {
 	const config = await loadConfig();
@@ -150,46 +168,87 @@ async function getConfig() {
 		slidevDist: config.slidevDist ?? DEFAULT_CONFIG.slidevDist,
 		outDir: config.outDir ?? DEFAULT_CONFIG.outDir,
 		pages: config.pages ?? DEFAULT_CONFIG.pages,
-		port: config.port ?? DEFAULT_CONFIG.port
+		port: config.port ?? DEFAULT_CONFIG.port,
+		plugins: config.plugins ?? DEFAULT_CONFIG.plugins
 	};
 }
 
 //#endregion
 //#region src/build/index.ts
-async function run() {
-	const { slidevDist, outDir, pages, port } = await getConfig();
-	try {
-		await fs.access(slidevDist);
-	} catch {
-		throw new Error(`Slidev dist directory not found: ${slidevDist}\nPlease run 'slidev build' first.`);
+const log = consola.withTag("slidev-prerender");
+async function build() {
+	const startedAt = performance.now();
+	log.start("Generating pages...");
+	consola.log("");
+	const { slidevDist, outDir, pages, port, plugins } = await getConfig();
+	log.info(`Input (slidevDist): ${slidevDist}`);
+	log.info(`Output (outDir): ${outDir}`);
+	log.info(`Pages: ${pages.length}`);
+	log.info(`Port: ${port}`);
+	consola.log("");
+	if (!await checkExistSlidevDist(slidevDist)) {
+		log.fatal(`Slidev dist directory not found: ${slidevDist}`);
+		log.fatal(`Run: slidev build`);
+		throw new Error(`Slidev dist directory not found: ${slidevDist}`);
 	}
+	log.start("Preparing output directory...");
 	await removeDist(outDir);
-	const assetsPath = path.join(slidevDist, "assets");
-	try {
-		await fs.access(assetsPath);
-		await copyDir(assetsPath, path.join(outDir, "assets"));
-	} catch {
-		console.warn(`Assets directory not found: ${assetsPath}, skipping...`);
-	}
+	await copyDir(slidevDist, outDir);
+	log.success("Prepared output directory");
+	consola.log("");
+	log.start("Starting local server...");
 	const { origin, close: serverClose } = await serveDist(slidevDist, port);
-	const browser = await chromium.launch();
-	const page = await browser.newPage();
+	let browser;
+	log.success(`Server started: ${origin}`);
+	consola.log("");
+	let generatedPageCount = 0;
 	try {
-		for (const n of pages) {
-			console.log(`[SSG] page ${n.fileName}`);
-			const html = await applyHead(await getPageHtml(page, `${origin}/${n.fileName}`), n.meta ?? { title: `ページ${n.fileName}` });
-			await fs.writeFile(path.join(outDir, `${n.fileName}.html`), html);
+		log.start("Launching browser...");
+		browser = await chromium.launch();
+		const page = await browser.newPage();
+		log.success("Browser launched");
+		consola.log("");
+		log.start("Rendering pages...");
+		for (const [i, pageConfig] of pages.entries()) {
+			log.debug(`Render [${i + 1}/${pages.length}]: ${pageConfig.slug}`);
+			const originalHtml = await getPageHtml(page, `${origin}/${pageConfig.slug}`);
+			const head = pageConfig.meta ?? {};
+			const html = await applyHead(originalHtml, pageConfig.slug, head);
+			const processedHtml = await plugins.reduce(async (prevPromise, plugin) => {
+				const pluginLog = log.withTag(`plugin-${i}`);
+				return plugin(await prevPromise, pageConfig, i, pluginLog);
+			}, Promise.resolve(html));
+			await fs.writeFile(path.join(outDir, `${pageConfig.slug}.html`), processedHtml);
+			generatedPageCount++;
 		}
+		log.success(`Rendered ${generatedPageCount} pages`);
+		consola.log("");
+	} catch (err) {
+		log.error(`Build failed after generating ${generatedPageCount}/${pages.length} pages`);
+		log.error(err);
+		consola.log("");
 	} finally {
-		await browser.close();
-		serverClose();
+		log.start("Closing browser and stopping local server...");
+		await browser?.close();
+		await serverClose();
+		log.success("Cleanup done");
+		consola.log("");
+	}
+	const ms = performance.now() - startedAt;
+	log.success(`Done in ${(ms / 1e3).toFixed(2)}s`);
+}
+async function checkExistSlidevDist(slidevDist) {
+	try {
+		await fs.access(slidevDist);
+	} catch {
+		return false;
 	}
-	console.log("done");
+	return true;
 }
 
 //#endregion
 //#region src/run.ts
-await run();
+await build();
 
 //#endregion
 export {  };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slidev-prerender",
   "type": "module",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-beta.0",
   "description": "",
   "author": "petaxa <soccer.i_y@icloud.com>",
   "license": "MIT",
@@ -31,7 +31,8 @@
     "@playwright/test": "^1.57.0",
     "markdown-it": "^14.1.0",
     "unhead": "^2.1.1",
-    "sirv": "^3.0.2"
+    "sirv": "^3.0.2",
+    "consola": "^3.4.2"
   },
   "scripts": {
     "build": "tsdown",