@liustack/pagepress 0.1.0

package/dist/main.js

@@ -0,0 +1,528 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { chromium } from "playwright";
+import * as fs from "fs";
+import * as path from "path";
+import { fileURLToPath } 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: "Apple-inspired clean 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);
+const WAIT_UNTIL_STATES$1 = /* @__PURE__ */ new Set(["load", "domcontentloaded", "networkidle"]);
+function normalizeWaitUntil$1(value) {
+  if (!value) return "networkidle";
+  if (WAIT_UNTIL_STATES$1.has(value)) {
+    return value;
+  }
+  throw new Error(`Invalid waitUntil: ${value}. Allowed: load, domcontentloaded, networkidle.`);
+}
+function normalizeTimeout$1(value) {
+  if (value === void 0) return 3e4;
+  if (!Number.isFinite(value) || value < 0) {
+    throw new Error("Invalid timeout. Use a non-negative number of milliseconds.");
+  }
+  return value;
+}
+function findTemplatesDir() {
+  const candidates = [
+    // When running from project root (dev/installed)
+    path.resolve(process.cwd(), "src/pdf/templates"),
+    // Relative to dist/main.js
+    path.resolve(__dirname$1, "..", "src", "pdf", "templates"),
+    // Relative to source file location
+    path.resolve(__dirname$1, "templates")
+  ];
+  for (const dir of candidates) {
+    if (fs.existsSync(dir)) return dir;
+  }
+  throw new Error(`Templates directory not found. Searched: ${candidates.join(", ")}`);
+}
+async function render$1(options) {
+  const template = getTemplate(options.template ?? "default");
+  const safeMode = options.safe ?? false;
+  const waitUntil = normalizeWaitUntil$1(options.waitUntil);
+  const timeout = normalizeTimeout$1(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;
+  if (options.input.startsWith("http")) {
+    if (safeMode) {
+      throw new Error("Safe mode does not allow remote URL inputs.");
+    }
+    htmlContent = "";
+  } 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}`);
+  }
+  let browser = null;
+  try {
+    browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext({ javaScriptEnabled: !safeMode });
+    if (safeMode) {
+      await context.route("**/*", (route) => {
+        const url = route.request().url();
+        if (url.startsWith("http://") || url.startsWith("https://")) {
+          return route.abort();
+        }
+        return route.continue();
+      });
+    }
+    const page = await context.newPage();
+    if (options.input.startsWith("http")) {
+      await page.goto(options.input, { waitUntil, timeout });
+    } else {
+      await page.setContent(htmlContent, { waitUntil, timeout });
+    }
+    const fontCSS = getFontCSS(template.name);
+    if (fontCSS) {
+      await page.addStyleTag({ content: fontCSS });
+    }
+    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})`);
+            }
+          }
+        });
+      });
+    }
+    await page.waitForTimeout(200);
+    const outputPath = path.resolve(options.output);
+    await page.pdf({
+      path: outputPath,
+      format: "A4",
+      margin: { top: "0", right: "0", bottom: "0", left: "0" },
+      printBackground: true
+    });
+    return {
+      pdfPath: outputPath,
+      meta: {
+        template: template.name,
+        generatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    };
+  } finally {
+    if (browser) {
+      await browser.close();
+    }
+  }
+}
+const command$1 = new Command("pdf").description("Render Markdown or HTML to PDF").requiredOption("-i, --input <path>", "Input file path or URL").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) => {
+  try {
+    const timeout = Number.parseInt(options.timeout, 10);
+    if (!Number.isFinite(timeout) || timeout < 0) {
+      throw new Error("Invalid --timeout value. Use a non-negative integer in milliseconds.");
+    }
+    const result = await render$1({
+      input: options.input,
+      output: options.output,
+      template: options.template,
+      waitUntil: options.waitUntil,
+      timeout,
+      safe: options.safe
+    });
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    console.error("Error:", error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
+const imagePresets = {
+  og: {
+    name: "og",
+    width: 1200,
+    height: 630,
+    description: "Open Graph / Social Card (1200×630)"
+  },
+  infographic: {
+    name: "infographic",
+    width: 1080,
+    height: 1350,
+    description: "Infographic (1080×1350)"
+  },
+  poster: {
+    name: "poster",
+    width: 1200,
+    height: 1500,
+    description: "Poster (1200×1500)"
+  },
+  banner: {
+    name: "banner",
+    width: 1600,
+    height: 900,
+    description: "Banner (1600×900)"
+  },
+  twitter: {
+    name: "twitter",
+    width: 1200,
+    height: 675,
+    description: "Twitter Card (1200×675)"
+  },
+  youtube: {
+    name: "youtube",
+    width: 1280,
+    height: 720,
+    description: "YouTube Thumbnail (1280×720)"
+  }
+};
+function getPreset(name) {
+  const preset = imagePresets[name];
+  if (!preset) {
+    throw new Error(`Unknown image preset: ${name}. Available: ${Object.keys(imagePresets).join(", ")}`);
+  }
+  return preset;
+}
+const WAIT_UNTIL_STATES = /* @__PURE__ */ new Set(["load", "domcontentloaded", "networkidle"]);
+const MIN_DIMENSION = 100;
+const MAX_DIMENSION = 5e3;
+const MIN_SCALE = 1;
+const MAX_SCALE = 4;
+function normalizeWaitUntil(value) {
+  if (!value) return "networkidle";
+  if (WAIT_UNTIL_STATES.has(value)) {
+    return value;
+  }
+  throw new Error(`Invalid waitUntil: ${value}. Allowed: load, domcontentloaded, networkidle.`);
+}
+function normalizeTimeout(value) {
+  if (value === void 0) return 3e4;
+  if (!Number.isFinite(value) || value < 0) {
+    throw new Error("Invalid timeout. Use a non-negative number of milliseconds.");
+  }
+  return value;
+}
+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}.`);
+  }
+}
+async function render(options) {
+  const preset = options.preset ? getPreset(options.preset) : getPreset("og");
+  const width = options.width ?? preset.width;
+  const height = options.height ?? preset.height;
+  const scale = options.scale ?? 2;
+  const safeMode = options.safe ?? false;
+  const waitUntil = normalizeWaitUntil(options.waitUntil);
+  const timeout = normalizeTimeout(options.timeout);
+  validateRange("Width", width, MIN_DIMENSION, MAX_DIMENSION);
+  validateRange("Height", height, MIN_DIMENSION, MAX_DIMENSION);
+  validateRange("Scale", scale, MIN_SCALE, MAX_SCALE);
+  let browser = null;
+  try {
+    browser = await chromium.launch({ headless: true });
+    const context = await browser.newContext({
+      viewport: { width, height },
+      deviceScaleFactor: scale,
+      javaScriptEnabled: !safeMode
+    });
+    if (safeMode) {
+      await context.route("**/*", (route) => {
+        const url = route.request().url();
+        if (url.startsWith("http://") || url.startsWith("https://")) {
+          return route.abort();
+        }
+        return route.continue();
+      });
+    }
+    const page = await context.newPage();
+    const inputPath = path.resolve(options.input);
+    if (options.input.startsWith("http://") || options.input.startsWith("https://")) {
+      if (safeMode) {
+        throw new Error("Safe mode does not allow remote URL inputs.");
+      }
+      await page.goto(options.input, { waitUntil, timeout });
+    } else if (fs.existsSync(inputPath)) {
+      const content = fs.readFileSync(inputPath, "utf-8");
+      await page.setContent(content, { waitUntil, timeout });
+    } else {
+      throw new Error(`Input not found: ${options.input}`);
+    }
+    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 #container.");
+    }
+    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.");
+    }
+    const outputPath = path.resolve(options.output);
+    await page.screenshot({
+      path: outputPath,
+      type: "png",
+      clip: { x: box.x, y: box.y, width: box.width, height: box.height }
+    });
+    return {
+      pngPath: outputPath,
+      meta: {
+        preset: preset.name,
+        width,
+        height,
+        deviceScaleFactor: scale,
+        generatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    };
+  } finally {
+    if (browser) {
+      await browser.close();
+    }
+  }
+}
+const command = new Command("shot").description("Capture HTML to PNG image").requiredOption("-i, --input <path>", "Input HTML file path or URL").requiredOption("-o, --output <path>", "Output PNG file path").option("-p, --preset <name>", "Image preset (og, infographic, poster, banner)", "og").option("--width <number>", "Custom width in pixels").option("--height <number>", "Custom height in pixels").option("--scale <number>", "Device scale factor", "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) {
+      throw new Error("Invalid --timeout value. Use a non-negative integer in milliseconds.");
+    }
+    const result = await render({
+      input: options.input,
+      output: options.output,
+      preset: options.preset,
+      width: options.width ? parseInt(options.width) : void 0,
+      height: options.height ? parseInt(options.height) : void 0,
+      scale: parseFloat(options.scale),
+      waitUntil: options.waitUntil,
+      timeout,
+      safe: options.safe
+    });
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    console.error("Error:", error instanceof Error ? error.message : error);
+    process.exit(1);
+  }
+});
+const program = new Command();
+program.name("pagepress").description("Convert web pages and Markdown to PDF and images").version("0.1.0");
+program.addCommand(command$1);
+program.addCommand(command);
+program.parse();

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@liustack/pagepress",
+  "version": "0.1.0",
+  "description": "CLI tool to convert web pages and Markdown to PDF and images",
+  "type": "module",
+  "bin": {
+    "pagepress": "./dist/main.js"
+  },
+  "files": [
+    "dist",
+    "src/pdf/templates"
+  ],
+  "keywords": [
+    "pdf",
+    "screenshot",
+    "html-to-pdf",
+    "html-to-image",
+    "markdown-to-pdf",
+    "cli",
+    "playwright",
+    "mermaid"
+  ],
+  "author": "Leon Liu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liustack/pagepress.git"
+  },
+  "bugs": {
+    "url": "https://github.com/liustack/pagepress/issues"
+  },
+  "homepage": "https://github.com/liustack/pagepress#readme",
+  "engines": {
+    "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.6",
+    "marked-highlight": "^2.2.3",
+    "mermaid": "^11.12.2",
+    "playwright": "^1.50.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vite-plugin-node": "^5.0.0"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  }
+}