npm - @liustack/pagepress - Versions diffs - 0.9.0 → 2.0.0 - Mend

@liustack/pagepress 0.9.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +28 -17
package/README.zh-CN.md +28 -17
package/dist/main.js +57 -262
package/package.json +20 -28
package/src/templates/default.html +0 -253
package/src/templates/github.html +0 -316
package/src/templates/magazine.html +0 -452

package/README.md CHANGED Viewed

@@ -1,16 +1,16 @@
 # PagePress
-A CLI toolkit for AI agents to render local Markdown and HTML files into high-quality PDF documents.
+Generate one-page visual reports, dashboards, and infographics from HTML — powered by Playwright + Chromium.
 中文说明请见：[README.zh-CN.md](README.zh-CN.md)
 ## Features
-- PDF-only command surface (`pagepress`)
-- Local file input only (`.md` / `.html`)
-- Built-in Markdown templates: `default`, `github`, `magazine`
-- Built-in Mermaid rendering for Markdown code blocks
-- Deterministic output via Playwright + Chromium print engine
+- HTML → PNG screenshot pipeline
+- Custom viewport dimensions (`--width`, `--height`)
+- High-DPI output via `--scale` (up to 4x)
+- Local HTML file input only (`.html`)
+- Deterministic output via Playwright + Chromium
 ## Installation
@@ -28,24 +28,35 @@ npx @liustack/pagepress [options]
 ## Usage
 ```bash
-# Markdown to PDF
-pagepress -i document.md -o output.pdf --template default
+# Generate infographic (default 1200×630 @2x)
+pagepress -i report.html -o report.png
-# Local HTML to PDF
-pagepress -i page.html -o output.pdf
+# Custom dimensions for a tall infographic
+pagepress -i report.html -o report.png -w 1080 -h 1920
+# High-DPI poster
+pagepress -i poster.html -o poster.png -w 1200 -h 1500 --scale 3
 ```
-## Templates
+## HTML Requirements
+Your HTML must include a `<div id="container">` — PagePress clips the screenshot to this element's bounding box.
-- `default` - Clean minimalist style
-- `github` - GitHub style
-- `magazine` - magazine layout
+```html
+<body>
+  <div id="container">
+    <!-- your content here -->
+  </div>
+</body>
+```
 ## Options
-- `-i, --input <path>` input Markdown or HTML file path
-- `-o, --output <path>` output PDF file path
-- `-t, --template <name>` template for Markdown input (default: `default`)
+- `-i, --input <path>` input HTML file path
+- `-o, --output <path>` output PNG file path
+- `-w, --width <pixels>` viewport width (default: 1200)
+- `-h, --height <pixels>` viewport height (default: 630)
+- `--scale <number>` device scale factor, 1-4 (default: 2)
 - `--wait-until <state>` `load | domcontentloaded | networkidle`
 - `--timeout <ms>` timeout in milliseconds
 - `--safe` disable external network requests and JavaScript execution

package/README.zh-CN.md CHANGED Viewed

@@ -1,14 +1,14 @@
 # PagePress
-面向 AI Agent 的 PDF 渲染 CLI，可将本地 Markdown 和 HTML 文件输出为高质量 PDF。
+从 HTML 生成单页可视化报告、仪表盘和信息图 — 基于 Playwright + Chromium。
 ## 特性
-- 专注 PDF 输出（仅 `pagepress`）
-- 仅支持本地文件输入（`.md` / `.html`）
-- 内置 Markdown 模板：`default`、`github`、`magazine`
-- 支持 Mermaid 代码块渲染
-- 基于 Playwright + Chromium 的稳定打印引擎
+- HTML → PNG 截图管线
+- 自定义视口尺寸（`--width`、`--height`）
+- 高 DPI 输出，支持最高 4 倍缩放（`--scale`）
+- 仅支持本地 HTML 文件输入（`.html`）
+- 基于 Playwright + Chromium 的稳定渲染引擎
 ## 安装
@@ -26,24 +26,35 @@ npx @liustack/pagepress [options]
 ## 用法
 ```bash
-# Markdown 转 PDF
-pagepress -i document.md -o output.pdf --template default
+# 生成信息图（默认 1200×630 @2x）
+pagepress -i report.html -o report.png
-# 本地 HTML 转 PDF
-pagepress -i page.html -o output.pdf
+# 自定义尺寸的长信息图
+pagepress -i report.html -o report.png -w 1080 -h 1920
+# 高 DPI 海报
+pagepress -i poster.html -o poster.png -w 1200 -h 1500 --scale 3
 ```
-## 模板
+## HTML 要求
+HTML 中必须包含 `<div id="container">` — PagePress 会根据该元素的边界框裁剪截图。
-- `default` - 简洁风格
-- `github` - GitHub 风格
-- `magazine` - 杂志排版
+```html
+<body>
+  <div id="container">
+    <!-- 你的内容 -->
+  </div>
+</body>
+```
 ## 参数
-- `-i, --input <path>` 输入 Markdown 或 HTML 路径
-- `-o, --output <path>` 输出 PDF 路径
-- `-t, --template <name>` Markdown 模板（默认 `default`）
+- `-i, --input <path>` 输入 HTML 路径
+- `-o, --output <path>` 输出 PNG 路径
+- `-w, --width <pixels>` 视口宽度（默认: 1200）
+- `-h, --height <pixels>` 视口高度（默认: 630）
+- `--scale <number>` 设备缩放因子，1-4（默认: 2）
 - `--wait-until <state>` `load | domcontentloaded | networkidle`
 - `--timeout <ms>` 超时时间（毫秒）
 - `--safe` 禁用外部网络请求和 JavaScript 执行

package/dist/main.js CHANGED Viewed

@@ -3,77 +3,12 @@ import { Command } from "commander";
 import { chromium } from "playwright";
 import * as fs from "fs";
 import * as path from "path";
-import { fileURLToPath, pathToFileURL } from "url";
-import { createRequire } from "module";
-import { Renderer, marked } from "marked";
-import matter from "gray-matter";
-import hljs from "highlight.js";
-const pdfTemplates = {
-  default: {
-    name: "default",
-    description: "Clean minimalist design",
-    file: "default.html"
-  },
-  github: {
-    name: "github",
-    description: "GitHub-flavored markdown style",
-    file: "github.html"
-  },
-  magazine: {
-    name: "magazine",
-    description: "VOGUE/WIRED premium magazine style",
-    file: "magazine.html"
-  }
-};
-function getTemplate(name) {
-  const template = pdfTemplates[name];
-  if (!template) {
-    throw new Error(`Unknown PDF template: ${name}. Available: ${Object.keys(pdfTemplates).join(", ")}`);
-  }
-  return template;
-}
-const require$2 = createRequire(import.meta.url);
-const MAGAZINE_FONTS = [
-  "@fontsource/bebas-neue/400.css",
-  "@fontsource/cormorant-garamond/400.css",
-  "@fontsource/cormorant-garamond/400-italic.css",
-  "@fontsource/cormorant-garamond/600.css",
-  "@fontsource/inter/300.css",
-  "@fontsource/inter/400.css",
-  "@fontsource/inter/500.css"
-];
-function getFontCSS(template) {
-  if (template !== "magazine") {
-    return "";
-  }
-  const cssChunks = [];
-  for (const fontPath of MAGAZINE_FONTS) {
-    try {
-      const cssFilePath = require$2.resolve(fontPath);
-      let css = fs.readFileSync(cssFilePath, "utf-8");
-      const cssDir = path.dirname(cssFilePath);
-      css = css.replace(/url\(\.\/files\/([^)]+)\)/g, (match, filename) => {
-        const fontFilePath = path.join(cssDir, "files", filename);
-        if (fs.existsSync(fontFilePath)) {
-          const fontData = fs.readFileSync(fontFilePath);
-          const base64 = fontData.toString("base64");
-          const ext = path.extname(filename).slice(1);
-          const mimeType = ext === "woff2" ? "font/woff2" : `font/${ext}`;
-          return `url(data:${mimeType};base64,${base64})`;
-        }
-        return match;
-      });
-      cssChunks.push(css);
-    } catch (e) {
-      console.warn(`Warning: Could not load font ${fontPath}:`, e);
-    }
-  }
-  return cssChunks.join("\n");
-}
-const __filename$1 = fileURLToPath(import.meta.url);
-const __dirname$1 = path.dirname(__filename$1);
-const require$1 = createRequire(import.meta.url);
+import { pathToFileURL } from "url";
 const WAIT_UNTIL_STATES = /* @__PURE__ */ new Set(["load", "domcontentloaded", "networkidle"]);
+const MIN_SCALE = 1;
+const MAX_SCALE = 4;
+const DEFAULT_WIDTH = 1200;
+const DEFAULT_HEIGHT = 630;
 function normalizeWaitUntil(value) {
   if (!value) return "networkidle";
   if (WAIT_UNTIL_STATES.has(value)) {
@@ -88,96 +23,40 @@ function normalizeTimeout(value) {
   }
   return value;
 }
-function findTemplatesDir() {
-  const candidates = [
-    // When running from project root (dev/installed)
-    path.resolve(process.cwd(), "src/templates"),
-    // Relative to dist/main.js
-    path.resolve(__dirname$1, "..", "src", "templates"),
-    // Relative to source file location
-    path.resolve(__dirname$1, "templates")
-  ];
-  for (const dir of candidates) {
-    if (fs.existsSync(dir)) return dir;
+function validateRange(name, value, min, max) {
+  if (!Number.isFinite(value)) {
+    throw new Error(`${name} must be a finite number.`);
+  }
+  if (value < min || value > max) {
+    throw new Error(`${name} must be between ${min} and ${max}. Received: ${value}.`);
   }
-  throw new Error(`Templates directory not found. Searched: ${candidates.join(", ")}`);
 }
 async function render(options) {
-  const template = getTemplate(options.template ?? "default");
+  const width = options.width ?? DEFAULT_WIDTH;
+  const height = options.height ?? DEFAULT_HEIGHT;
+  const scale = options.scale ?? 2;
   const safeMode = options.safe ?? false;
   const waitUntil = normalizeWaitUntil(options.waitUntil);
   const timeout = normalizeTimeout(options.timeout);
-  const templatesDir = findTemplatesDir();
-  const templatePath = path.join(templatesDir, template.file);
-  if (!fs.existsSync(templatePath)) {
-    throw new Error(`Template not found: ${templatePath}`);
-  }
-  const inputPath = path.resolve(options.input);
-  let htmlContent;
-  let hasMermaid = false;
+  validateRange("Width", width, 1, 1e4);
+  validateRange("Height", height, 1, 1e4);
+  validateRange("Scale", scale, MIN_SCALE, MAX_SCALE);
   if (options.input.startsWith("http://") || options.input.startsWith("https://")) {
-    throw new Error("Remote URL inputs are not supported. Please provide a local Markdown or HTML file path.");
-  } else if (options.input.endsWith(".md")) {
-    const raw = fs.readFileSync(inputPath, "utf-8");
-    const { data: frontmatter, content } = matter(raw);
-    hasMermaid = /```mermaid/i.test(content);
-    const renderer = new Renderer();
-    renderer.code = function({ text, lang }) {
-      if (lang === "mermaid") {
-        return `<pre class="mermaid">${text}</pre>`;
-      }
-      const highlighted = lang && hljs.getLanguage(lang) ? hljs.highlight(text, { language: lang }).value : hljs.highlightAuto(text).value;
-      const langClass = lang ? `hljs language-${lang}` : "hljs";
-      return `<pre><code class="${langClass}">${highlighted}</code></pre>`;
-    };
-    marked.use({ renderer });
-    const bodyHtml = await marked.parse(content);
-    const title = frontmatter.title || "Document";
-    const isDarkTheme = template.name === "magazine";
-    const hljsLightStyles = `
-<style>
-/* highlight.js GitHub Light Theme */
-.hljs { color: #24292e; }
-.hljs-comment, .hljs-quote { color: #6a737d; font-style: italic; }
-.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: #d73a49; font-weight: 600; }
-.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #032f62; }
-.hljs-number { color: #005cc5; }
-.hljs-title, .hljs-section, .hljs-function .hljs-title { color: #6f42c1; }
-.hljs-built_in, .hljs-name { color: #005cc5; }
-.hljs-class .hljs-title { color: #e36209; }
-.hljs-meta { color: #6f42c1; }
-.hljs-variable, .hljs-template-variable { color: #e36209; }
-.hljs-params { color: #24292e; }
-</style>
-`;
-    const hljsDarkStyles = `
-<style>
-/* highlight.js Dark Theme for Magazine */
-.hljs { color: #e8e8e8; }
-.hljs-comment, .hljs-quote { color: #6b7280; font-style: italic; }
-.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: #f0abfc; }
-.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #86efac; }
-.hljs-number { color: #fcd34d; }
-.hljs-title, .hljs-section, .hljs-function .hljs-title { color: #93c5fd; }
-.hljs-built_in, .hljs-name { color: #93c5fd; }
-.hljs-class .hljs-title { color: #67e8f9; }
-.hljs-meta { color: #f0abfc; }
-.hljs-variable, .hljs-template-variable { color: #fcd34d; }
-.hljs-params { color: #e8e8e8; }
-</style>
-`;
-    const hljsStyles = isDarkTheme ? hljsDarkStyles : hljsLightStyles;
-    let templateHtml = fs.readFileSync(templatePath, "utf-8");
-    htmlContent = templateHtml.replace(/\{\{title\}\}/g, title).replace(/\{\{body\}\}/g, bodyHtml).replace(/\{\{styles\}\}/g, hljsStyles);
-  } else if (options.input.endsWith(".html")) {
-    htmlContent = fs.readFileSync(inputPath, "utf-8");
-  } else {
-    throw new Error(`Unsupported input format: ${options.input}`);
+    throw new Error("Remote URL inputs are not supported. Please provide a local HTML file path.");
+  }
+  if (!options.input.endsWith(".html")) {
+    throw new Error(`Unsupported input format: ${options.input}. Only HTML (.html) files are supported.`);
   }
+  const inputPath = path.resolve(options.input);
+  const htmlContent = fs.readFileSync(inputPath, "utf-8");
   let browser = null;
   try {
     browser = await chromium.launch({ headless: true });
-    const context = await browser.newContext({ javaScriptEnabled: !safeMode });
+    const context = await browser.newContext({
+      viewport: { width, height },
+      deviceScaleFactor: scale,
+      javaScriptEnabled: !safeMode
+    });
     if (safeMode) {
       await context.route("**/*", (route) => {
         const url = route.request().url();
@@ -190,124 +69,38 @@ async function render(options) {
     const page = await context.newPage();
     await page.goto(pathToFileURL(inputPath).href, { waitUntil: "domcontentloaded", timeout });
     await page.setContent(htmlContent, { waitUntil, timeout });
-    const fontCSS = getFontCSS(template.name);
-    if (fontCSS) {
-      await page.addStyleTag({ content: fontCSS });
+    await page.addStyleTag({
+      content: `
+                html, body {
+                    width: ${width}px;
+                    height: ${height}px;
+                    margin: 0;
+                    padding: 0;
+                    overflow: hidden;
+                }
+            `
+    });
+    await page.waitForTimeout(500);
+    const cardContainer = await page.$("#container");
+    if (!cardContainer) {
+      throw new Error('Missing #container element. PNG output requires a <div id="container"> wrapper.');
     }
-    if (hasMermaid && !safeMode) {
-      const mermaidPath = require$1.resolve("mermaid/dist/mermaid.min.js");
-      await page.addScriptTag({ path: mermaidPath });
-      const templateName = template.name;
-      await page.evaluate((tpl) => {
-        const defaultTheme = {
-          primaryColor: "#f5f5f7",
-          primaryTextColor: "#1d1d1f",
-          primaryBorderColor: "#d2d2d7",
-          lineColor: "#86868b",
-          secondaryColor: "#f5f5f7",
-          tertiaryColor: "#ffffff",
-          background: "#ffffff",
-          mainBkg: "#f5f5f7",
-          nodeBorder: "#d2d2d7",
-          nodeTextColor: "#1d1d1f",
-          clusterBkg: "rgba(0, 0, 0, 0.02)",
-          clusterBorder: "rgba(0, 0, 0, 0.1)",
-          titleColor: "#1d1d1f"
-        };
-        const githubTheme = {
-          primaryColor: "#f6f8fa",
-          primaryTextColor: "#1f2328",
-          primaryBorderColor: "#d0d7de",
-          lineColor: "#656d76",
-          secondaryColor: "#f6f8fa",
-          tertiaryColor: "#ffffff",
-          background: "#ffffff",
-          mainBkg: "#f6f8fa",
-          nodeBorder: "#d0d7de",
-          nodeTextColor: "#1f2328",
-          clusterBkg: "rgba(208, 215, 222, 0.2)",
-          clusterBorder: "#d0d7de",
-          titleColor: "#1f2328"
-        };
-        const magazineTheme = {
-          primaryColor: "#2a2a2a",
-          primaryTextColor: "#ffffff",
-          primaryBorderColor: "#c41e3a",
-          lineColor: "#666666",
-          secondaryColor: "#1a1a1a",
-          tertiaryColor: "#0f0f0f",
-          background: "#0f0f0f",
-          mainBkg: "#2a2a2a",
-          nodeBorder: "#c41e3a",
-          nodeTextColor: "#ffffff",
-          clusterBkg: "rgba(196, 30, 58, 0.1)",
-          clusterBorder: "rgba(196, 30, 58, 0.4)",
-          titleColor: "#ffffff"
-        };
-        const themes = {
-          default: defaultTheme,
-          github: githubTheme,
-          magazine: magazineTheme
-        };
-        const activeTheme = themes[tpl] || defaultTheme;
-        window.mermaid.initialize({
-          startOnLoad: false,
-          theme: "base",
-          themeVariables: {
-            ...activeTheme,
-            fontFamily: '"SF Mono", "Fira Code", Menlo, monospace',
-            fontSize: "13px"
-          },
-          flowchart: {
-            curve: "basis",
-            nodeSpacing: 40,
-            rankSpacing: 50,
-            htmlLabels: true,
-            useMaxWidth: true,
-            subGraphTitleMargin: { top: 15, bottom: 15 },
-            padding: 20
-          }
-        });
-      }, templateName);
-      await page.evaluate(() => {
-        return window.mermaid.run();
-      });
-      await page.waitForSelector(".mermaid svg", { timeout: 5e3 });
-      await page.waitForTimeout(300);
-      await page.evaluate(() => {
-        document.querySelectorAll(".node rect").forEach((rect) => {
-          rect.setAttribute("rx", "12");
-          rect.setAttribute("ry", "12");
-        });
-        document.querySelectorAll(".cluster rect").forEach((rect) => {
-          rect.setAttribute("rx", "16");
-          rect.setAttribute("ry", "16");
-        });
-        document.querySelectorAll(".cluster-label").forEach((label) => {
-          const transform = label.getAttribute("transform");
-          if (transform) {
-            const match = transform.match(/translate\(([\d.]+),\s*([\d.]+)\)/);
-            if (match) {
-              const x = parseFloat(match[1]);
-              const y = parseFloat(match[2]) + 8;
-              label.setAttribute("transform", `translate(${x}, ${y})`);
-            }
-          }
-        });
-      });
+    const box = await cardContainer.boundingBox();
+    if (!box || box.width <= 0 || box.height <= 0) {
+      throw new Error("Invalid #container size. Ensure it has a positive width and height.");
     }
-    await page.waitForTimeout(200);
     const outputPath = path.resolve(options.output);
-    await page.pdf({
+    await page.screenshot({
       path: outputPath,
-      format: "A4",
-      margin: { top: "0", right: "0", bottom: "0", left: "0" },
-      printBackground: true
+      type: "png",
+      clip: { x: box.x, y: box.y, width: box.width, height: box.height }
     });
     return {
-      pdfPath: outputPath,
+      pngPath: outputPath,
       meta: {
-        template: template.name,
+        width,
+        height,
+        deviceScaleFactor: scale,
         generatedAt: (/* @__PURE__ */ new Date()).toISOString()
       }
     };
@@ -318,7 +111,7 @@ async function render(options) {
   }
 }
 const program = new Command();
-program.name("pagepress").description("Render local Markdown and HTML files to PDF").version("0.9.0").requiredOption("-i, --input <path>", "Input Markdown or HTML file path").requiredOption("-o, --output <path>", "Output PDF file path").option("-t, --template <name>", "PDF template (default, github, magazine)", "default").option("--wait-until <state>", "Navigation waitUntil (load, domcontentloaded, networkidle)", "networkidle").option("--timeout <ms>", "Navigation timeout in milliseconds", "30000").option("--safe", "Disable external network requests and JavaScript execution").action(async (options) => {
+program.name("pagepress").description("Generate one-page visual reports, dashboards, and infographics from HTML").version("2.0.0").requiredOption("-i, --input <path>", "Input HTML file path").requiredOption("-o, --output <path>", "Output PNG file path").option("-w, --width <pixels>", "Viewport width in pixels", "1200").option("-h, --height <pixels>", "Viewport height in pixels", "630").option("--scale <number>", "Device scale factor (1-4)", "2").option("--wait-until <state>", "Navigation waitUntil (load, domcontentloaded, networkidle)", "networkidle").option("--timeout <ms>", "Navigation timeout in milliseconds", "30000").option("--safe", "Disable external network requests and JavaScript execution").action(async (options) => {
   try {
     const timeout = Number.parseInt(options.timeout, 10);
     if (!Number.isFinite(timeout) || timeout < 0) {
@@ -327,7 +120,9 @@ program.name("pagepress").description("Render local Markdown and HTML files to P
     const result = await render({
       input: options.input,
       output: options.output,
-      template: options.template,
+      width: Number.parseInt(options.width, 10),
+      height: Number.parseInt(options.height, 10),
+      scale: Number.parseFloat(options.scale),
       waitUntil: options.waitUntil,
       timeout,
       safe: options.safe

package/package.json CHANGED Viewed

@@ -1,23 +1,32 @@
 {
   "name": "@liustack/pagepress",
-  "version": "0.9.0",
-  "description": "CLI tool to render local Markdown and HTML files into PDF",
+  "version": "2.0.0",
+  "description": "CLI tool to generate one-page visual reports, dashboards, and infographics from HTML",
   "type": "module",
   "bin": {
     "pagepress": "./dist/main.js"
   },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "pnpm build",
+    "docs:list": "node scripts/docs-list.js"
+  },
   "files": [
-    "dist",
-    "src/templates"
+    "dist"
   ],
   "keywords": [
-    "pdf",
-    "markdown-to-pdf",
-    "html-to-pdf",
-    "pdf-report",
+    "infographic",
+    "html-to-png",
+    "visual-report",
+    "dashboard",
+    "screenshot",
     "cli",
-    "playwright",
-    "mermaid"
+    "playwright"
   ],
   "author": "Leon Liu",
   "license": "MIT",
@@ -33,15 +42,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@fontsource/bebas-neue": "^5.2.7",
-    "@fontsource/cormorant-garamond": "^5.2.11",
-    "@fontsource/inter": "^5.2.8",
     "commander": "^13.1.0",
-    "gray-matter": "^4.0.3",
-    "highlight.js": "^11.11.1",
-    "marked": "^15.0.12",
-    "marked-highlight": "^2.2.3",
-    "mermaid": "^11.12.2",
     "playwright": "^1.58.1"
   },
   "devDependencies": {
@@ -51,14 +52,5 @@
     "vite": "^6.4.1",
     "vite-plugin-node": "^5.0.1",
     "vitest": "^4.0.18"
-  },
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "docs:list": "node scripts/docs-list.js"
   }
-}
+}