@d-zero/print 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 D-ZERO Co., Ltd.
+
+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,97 @@
+# `@d-zero/print`
+
+ウェブサイトのスクリーンショットを撮影するツールです。
+
+- Puppeteerを実行してページのスクリーンショットを撮影します
+- `png`、`pdf`、`note`の3つの形式で出力できます
+- スクリーンショットはデスクトップとモバイルの2つのサイズでそれぞれ撮影します
+
+## CLI
+
+```sh
+npx @d-zero/print -f <listfile> [--type <png|pdf|note>] [--limit <number>] [--debug]
+
+npx @d-zero/print <url>... [--type <png|pdf|note>] [--limit <number>] [--debug]
+```
+
+リストをファイルから読み込むか、URLを直接指定して実行します。
+
+実行した結果は`.print`ディレクトリに保存されます。
+
+### オプション
+
+- `-f, --file <filepath>`: URLリストを持つファイルのパス
+- `<url>`: 対象のURL（複数指定可能）
+- `-t, --type <png|pdf|note>`: 出力形式（デフォルト: png）
+  - `png`: PNG画像（モバイルとデスクトップの2つが生成されます）
+  - `pdf`: PDFファイル（ブラウザの印刷機能を使用、Print CSSが適用されます）
+  - `note`: PNG画像のスクリーンショットに対してメモ欄付きのPDFファイルが生成されます
+- `--limit <number>`: 並列実行数の上限（デフォルト: 10）
+- `--debug`: デバッグモード（デフォルト: false）
+
+#### URLリストのファイルフォーマット
+
+```txt
+https://example.com
+https://example.com/a
+https://example.com/b
+ID:ABC https://example.com/c
+ID:XYZ https://example.com/xyz/001
+# コメント
+# https://example.com/d
+```
+
+URLの手前に任意のIDを付与することで、出力ファイル名にIDが含まれます。ホワイトスペースで区切ることでIDとURLを分けることができます。
+IDが指定されていない場合は、連番がIDとして使用されます。連番は1から始まり、3桁のゼロパディングされた数字として出力されます。空行を除いた行数が連番として使用されます。
+
+`#`で始まる行はコメントとして無視されます。
+
+## ページフック
+
+[Frontmatter](https://jekyllrb.com/docs/front-matter/)の`hooks`に配列としてスクリプトファイルのパスを渡すと、ページを開いた後（厳密にはPuppetterの`waitUntil: 'networkidle0'`のタイミング直後）にそれらのスクリプトを実行します。スクリプトは配列の順番通りに逐次実行されます。
+
+```txt
+---
+hooks:
+  - ./hook1.cjs
+  - ./hook2.mjs
+---
+
+https://example.com
+https://example.com/a
+︙
+```
+
+フックスクリプトは、以下のようにエクスポートされた関数を持つモジュールとして定義します。
+
+```js
+/**
+ * @type {import('@d-zero/print').PageHook}
+ */
+export default async function (page, { name, width, resolution, log }) {
+	// 非同期処理可能
+	// page: PuppeteerのPageオブジェクト
+	// name: サイズ名（'desktop' | 'mobile'）
+	// width: ウィンドウ幅
+	// resolution: 解像度
+	// log: ロガー
+
+	// ログイン処理の例
+	log('login');
+	await page.type('#username', 'user');
+	await page.type('#password', 'pass');
+	await page.click('button[type="submit"]');
+	await page.waitForNavigation();
+	log('login done');
+}
+```
+
+例のように、ページにログインする処理をフックスクリプトに記述することで、ユーザー認証が必要なページのスクリーンショットを撮影することができます。
+
+## 認証
+
+### Basic認証
+
+Basic認証が必要なページの場合はURLにユーザー名とパスワードを含めます。
+
+例: `https://user:pass@example.com`

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+import minimist from 'minimist';
+import { print } from './print.js';
+import { readConfig } from './read-config.js';
+const cli = minimist(process.argv.slice(2), {
+    alias: {
+        f: 'listfile',
+        t: 'type',
+    },
+});
+const limit = cli.limit ? Number.parseInt(cli.limit) : undefined;
+const debug = !!cli.debug;
+const type = cli.type === 'note' ? 'note' : cli.type === 'pdf' ? 'pdf' : 'png';
+if (cli.listfile?.length) {
+    const { urlList, hooks } = await readConfig(cli.listfile);
+    await print(urlList, { type, limit, debug, hooks });
+    process.exit(0);
+}
+if (cli._.length > 0) {
+    await print(cli._, { type, limit, debug });
+    process.exit(0);
+}
+process.stderr.write([
+    'Usage:',
+    '\tprint -f <listfile> [--type <png|pdf|note>] [--limit <number>] [--debug]',
+    '\tprint <url>... [--type <png|pdf|note>] [--limit <number>] [--debug]',
+].join('\n') + '\n');
+process.exit(1);

package/dist/label.d.ts

@@ -0,0 +1,2 @@
+import c from 'ansi-colors';
+export declare function label(str: string, color?: c.StyleFunction): string;

package/dist/label.js

@@ -0,0 +1,4 @@
+import c from 'ansi-colors';
+export function label(str, color = c.bgMagenta) {
+    return color(` ${str} `);
+}

package/dist/pdf.d.ts

@@ -0,0 +1,6 @@
+import type { Screenshot } from '@d-zero/puppeteer-screenshot';
+import type { Browser } from 'puppeteer';
+export declare function pngToPdf(browser: Browser, screenshots: Record<string, Screenshot>, options?: {
+    note?: boolean;
+    update?: (log: string) => void;
+}): Promise<void>;

package/dist/pdf.js

@@ -0,0 +1,74 @@
+import { rm } from 'node:fs/promises';
+import path from 'node:path';
+import dayjs from 'dayjs';
+import { label } from './label.js';
+export async function pngToPdf(browser, screenshots, options) {
+    const page = await browser.newPage();
+    page.setDefaultNavigationTimeout(0);
+    const note = options?.note ?? true;
+    const datetime = dayjs().format('YYYY-MM-DD HH:mm');
+    for (const [sizeName, { id, filePath, url, title }] of Object.entries(screenshots)) {
+        if (!filePath) {
+            continue;
+        }
+        const update = (log) => options?.update?.(`${label(sizeName)}: ${log}`);
+        update(`🖼  Open an image file`);
+        await page.goto(`file://${filePath}`, {
+            waitUntil: 'networkidle0',
+            timeout: 5 * 60 * 1000,
+        });
+        let noteSettings = {};
+        if (note) {
+            await page.evaluate(() => {
+                const style = document.createElement('style');
+                style.textContent = `
+						html, body { height: auto !important; }
+						html, body { margin: 0; padding: 0; }
+						img { width: 100% !important; height: auto !important; }
+					`;
+                document.body.setAttribute('style', 'margin: 0; padding: 0;');
+                document.head.append(style);
+            });
+            noteSettings = {
+                displayHeaderFooter: true,
+                margin: { top: '1.3cm', bottom: '1cm', left: '1cm', right: '5cm' },
+                headerTemplate: `
+						<div style="font-size: 2mm; width: 100%; display: flex; justify-content: space-between; margin: 0 1cm; font-family: sans-serif;">
+							<div>
+								<div>Title: ${title}</div>
+								<div style="font-size: 0.6em">Printed: ${datetime}</div>
+							</div>
+							<div>
+								<div style="font-size: 3mm; margin-bottom: 1mm; text-align: right;">[ID: ${id}]</div>
+								<div style="text-align: right; background-color: #000; color: #fff;">Note:</div>
+							</div>
+						</div>
+					`,
+                footerTemplate: `
+						<div style="font-size: 2mm; width: 100%; display: flex; justify-content: space-between; margin: 0 1cm; font-family: monospace;">
+							<div>
+								<span>[ID: ${id}] ${url}</span>
+							</div>
+							<div>
+								<span class="pageNumber"></span>/<span class="totalPages"></span>
+							</div>
+						</div>
+					`,
+            };
+        }
+        const dir = path.dirname(filePath);
+        const fileName = path.basename(filePath, path.extname(filePath));
+        const pdfPath = path.resolve(dir, `${fileName}.pdf`);
+        update('📝 Print as a PDF%dots%');
+        await page.pdf({
+            path: pdfPath,
+            timeout: 30_000 * 10, // Default * 10
+            format: 'A4',
+            printBackground: true,
+            margin: { top: '1cm', bottom: '1cm', left: '1cm', right: '1cm' },
+            ...noteSettings,
+        });
+        update('🚮 Remove the screenshot image');
+        await rm(filePath);
+    }
+}

package/dist/png-to-pdf.d.ts

@@ -0,0 +1,3 @@
+import type { Screenshot } from '@d-zero/puppeteer-screenshot';
+import type { Browser } from 'puppeteer';
+export declare function pngToPdf(browser: Browser, screenshots: Record<string, Screenshot>, update: (log: string) => void): Promise<void>;

package/dist/png-to-pdf.js

@@ -0,0 +1,32 @@
+import { rm } from 'node:fs/promises';
+import path from 'node:path';
+import c from 'ansi-colors';
+import { printPdfWithNote } from './print-pdf-with-note.js';
+export async function pngToPdf(browser, screenshots, update) {
+    const page = await browser.newPage();
+    page.setDefaultNavigationTimeout(0);
+    for (const [sizeName, screenshot] of Object.entries(screenshots)) {
+        if (!screenshot.filePath) {
+            continue;
+        }
+        const sizeLabel = c.bgMagenta(` ${sizeName} `);
+        update(`🖼  Open an image file`);
+        await page.goto(`file://${screenshot.filePath}`, {
+            waitUntil: 'networkidle0',
+            timeout: 5 * 60 * 1000,
+        });
+        const dir = path.dirname(screenshot.filePath);
+        const fileName = path.basename(screenshot.filePath, path.extname(screenshot.filePath));
+        const pdfPath = path.resolve(dir, `${fileName}.pdf`);
+        update(`${sizeLabel} 📝 Print as a PDF%dots%`);
+        await printPdfWithNote(page, { ...screenshot, filePath: pdfPath });
+        update(`${sizeLabel} 🚮 Remove the screenshot image`);
+        await rm(screenshot.filePath).catch((error) => {
+            if (error instanceof Error && 'code' in error && error.code === 'ENOENT') {
+                // Ignore the error if the file does not exist
+                return;
+            }
+            throw error;
+        });
+    }
+}

package/dist/print-pdf-with-note.d.ts

@@ -0,0 +1,3 @@
+import type { Screenshot } from '@d-zero/puppeteer-screenshot';
+import type { Page } from 'puppeteer';
+export declare function printPdfWithNote(page: Page, { id, filePath, url, title }: Screenshot): Promise<void>;

package/dist/print-pdf-with-note.js

@@ -0,0 +1,47 @@
+import dayjs from 'dayjs';
+export async function printPdfWithNote(page, { id, filePath, url, title }) {
+    if (!filePath) {
+        throw new Error(`No file path (ID: ${id}): ${url}`);
+    }
+    const datetime = dayjs().format('YYYY-MM-DD HH:mm');
+    await page.evaluate(() => {
+        const style = document.createElement('style');
+        style.textContent = `
+				html, body { height: auto !important; }
+				html, body { margin: 0; padding: 0; }
+				img { width: 100% !important; height: auto !important; }
+			`;
+        document.body.setAttribute('style', 'margin: 0; padding: 0;');
+        document.head.append(style);
+    });
+    await page.pdf({
+        path: filePath,
+        timeout: 30_000 * 10, // Default * 10
+        format: 'A4',
+        printBackground: true,
+        displayHeaderFooter: true,
+        margin: { top: '1.3cm', bottom: '1cm', left: '1cm', right: '5cm' },
+        headerTemplate: `
+				<div style="font-size: 2mm; width: 100%; display: flex; justify-content: space-between; margin: 0 1cm; font-family: sans-serif;">
+					<div>
+						<div>Title: ${title}</div>
+						<div style="font-size: 0.6em">Printed: ${datetime}</div>
+					</div>
+					<div>
+						<div style="font-size: 3mm; margin-bottom: 1mm; text-align: right;">[ID: ${id}]</div>
+						<div style="text-align: right; background-color: #000; color: #fff;">Note:</div>
+					</div>
+				</div>
+			`,
+        footerTemplate: `
+				<div style="font-size: 2mm; width: 100%; display: flex; justify-content: space-between; margin: 0 1cm; font-family: monospace;">
+					<div>
+						<span>[ID: ${id}] ${url}</span>
+					</div>
+					<div>
+						<span class="pageNumber"></span>/<span class="totalPages"></span>
+					</div>
+				</div>
+			`,
+    });
+}

package/dist/print-pdf.d.ts

@@ -0,0 +1,3 @@
+import type { PageHook } from '@d-zero/puppeteer-page-scan';
+import type { Page } from 'puppeteer';
+export declare function printPdf(page: Page, url: string, filePath: string, update: (log: string) => void, hooks?: readonly PageHook[]): Promise<void>;

package/dist/print-pdf.js

@@ -0,0 +1,18 @@
+import { beforePageScan } from '@d-zero/puppeteer-page-scan';
+import { screenshotListener } from '@d-zero/puppeteer-screenshot';
+export async function printPdf(page, url, filePath, update, hooks) {
+    await beforePageScan(page, url, {
+        name: 'pdf',
+        width: 1400,
+        listener: screenshotListener(update),
+        hooks,
+    });
+    update('📄 Save as PDF');
+    await page.pdf({
+        path: filePath,
+        timeout: 30_000 * 10,
+        format: 'A4',
+        printBackground: true,
+        displayHeaderFooter: false,
+    });
+}

package/dist/print-png.d.ts

@@ -0,0 +1,3 @@
+import type { PageHook } from '@d-zero/puppeteer-screenshot';
+import type { Page } from 'puppeteer';
+export declare function printPng(page: Page, url: string, fileId: string, filePath: string, update: (log: string) => void, hooks?: readonly PageHook[]): Promise<Record<string, import("@d-zero/puppeteer-screenshot").Screenshot>>;

package/dist/print-png.js

@@ -0,0 +1,18 @@
+import { screenshot, screenshotListener } from '@d-zero/puppeteer-screenshot';
+export function printPng(page, url, fileId, filePath, update, hooks) {
+    return screenshot(page, url, {
+        id: fileId,
+        path: filePath,
+        sizes: {
+            desktop: {
+                width: 1280,
+            },
+            mobile: {
+                width: 375,
+                resolution: 2,
+            },
+        },
+        listener: screenshotListener(update),
+        hooks,
+    });
+}

package/dist/print.d.ts

@@ -0,0 +1,12 @@
+import type { PrintType } from './types.js';
+import type { PageHook } from '@d-zero/puppeteer-page-scan';
+export interface PrintOptions {
+    readonly type?: PrintType;
+    readonly limit?: number;
+    readonly debug?: boolean;
+    readonly hooks?: readonly PageHook[];
+}
+export declare function print(urlList: readonly (string | {
+    id: string | null;
+    url: string;
+})[], options?: PrintOptions): Promise<void>;

package/dist/print.js

@@ -0,0 +1,65 @@
+import { mkdir } from 'node:fs/promises';
+import path from 'node:path';
+import { deal } from '@d-zero/dealer';
+import c from 'ansi-colors';
+import puppeteer from 'puppeteer';
+import { pngToPdf } from './png-to-pdf.js';
+import { printPdf } from './print-pdf.js';
+import { printPng } from './print-png.js';
+export async function print(urlList, options) {
+    const browser = await puppeteer.launch({
+        headless: true,
+        args: [
+            //
+            '--lang=ja',
+            '--no-zygote',
+            '--ignore-certificate-errors',
+        ],
+    });
+    const dir = path.resolve(process.cwd(), '.print');
+    await mkdir(dir, { recursive: true }).catch(() => { });
+    const type = options?.type ?? 'png';
+    const hooks = options?.hooks;
+    await deal(urlList.map((url) => {
+        if (typeof url === 'string') {
+            return { id: null, url };
+        }
+        return url;
+    }), ({ id, url }, update, index) => {
+        return async () => {
+            const page = await browser.newPage();
+            page.setDefaultNavigationTimeout(0);
+            await page.setExtraHTTPHeaders({
+                'Accept-Language': 'ja-JP',
+            });
+            const fileId = id || index.toString().padStart(3, '0');
+            const ext = type === 'pdf' ? 'pdf' : 'png';
+            const fileName = `${fileId}.${ext}`;
+            const filePath = path.resolve(dir, fileName);
+            const lineHeader = `%braille% ${c.bgWhite(` ${fileId} `)} ${c.gray(url)}: `;
+            update(`${lineHeader}🔗 Open%dots%`);
+            if (type === 'pdf') {
+                await printPdf(page, url, filePath, (log) => update(lineHeader + log), hooks);
+                update(`${lineHeader}🔚 Closing`);
+                await page.close();
+                return;
+            }
+            const result = await printPng(page, url, fileId, filePath, (log) => update(lineHeader + log), hooks);
+            if (type === 'png') {
+                update(`${lineHeader}🔚 Closing`);
+                await page.close();
+                return;
+            }
+            await pngToPdf(browser, result, (log) => update(lineHeader + log));
+            update(`${lineHeader}🔚 Closing`);
+            await page.close();
+        };
+    }, {
+        limit: options?.limit,
+        debug: options?.debug,
+        header(_, done, total) {
+            return `${c.bold.magenta('🎨 Print pages')} ${c.bgBlueBright(` ${type} `)} ${done}/${total}`;
+        },
+    });
+    await browser.close();
+}

package/dist/read-config.d.ts

@@ -0,0 +1,7 @@
+export declare function readConfig(filePath: string): Promise<{
+    urlList: {
+        id: string | null;
+        url: string;
+    }[];
+    hooks: import("@d-zero/puppeteer-page-scan").PageHook[];
+}>;

package/dist/read-config.js

@@ -0,0 +1,21 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { readPageHooks } from '@d-zero/puppeteer-page-scan';
+import { toKvList } from '@d-zero/readtext/list';
+import fm from 'front-matter';
+export async function readConfig(filePath) {
+    const fileContent = await fs.readFile(filePath, 'utf8');
+    const content = 
+    // @ts-ignore
+    fm(fileContent);
+    const urlList = toKvList(content.body).map((kv) => ({
+        id: kv.value ? kv.key : null,
+        url: kv.value || kv.key,
+    }));
+    const baseDir = path.dirname(filePath);
+    const hooks = await readPageHooks(content.attributes?.hooks ?? [], baseDir);
+    return {
+        urlList,
+        hooks,
+    };
+}

package/dist/scan-listener.d.ts

@@ -0,0 +1,2 @@
+import type { Listener } from '@d-zero/puppeteer-screenshot';
+export declare function scanListener(update: (log: string) => void): Listener;

package/dist/scan-listener.js

@@ -0,0 +1,43 @@
+import path from 'node:path';
+import { label } from './label.js';
+export function scanListener(update) {
+    return (phase, data) => {
+        const sizeLabel = label(data.name);
+        switch (phase) {
+            case 'setViewport': {
+                const { width } = data;
+                update(`${sizeLabel} ↔️ Change viewport size to ${width}px`);
+                break;
+            }
+            case 'load': {
+                const { type } = data;
+                update(`${sizeLabel} %earth% ${type === 'open' ? 'Open' : 'Reload'} page`);
+                break;
+            }
+            case 'hook': {
+                const { message } = data;
+                update(`${sizeLabel} ${message}`);
+                break;
+            }
+            case 'scroll': {
+                update(`${sizeLabel} %propeller% Scroll the page`);
+                break;
+            }
+            case 'screenshotStart': {
+                update(`${sizeLabel} 📸 Take a screenshot`);
+                break;
+            }
+            case 'screenshotSaving': {
+                const { path: filePath } = data;
+                const name = path.basename(filePath);
+                update(`${sizeLabel} 🖼  Save a file ${name}`);
+                break;
+            }
+            case 'screenshotError': {
+                const { error } = data;
+                update(`${sizeLabel} ❌️ ${error.message}`);
+                break;
+            }
+        }
+    };
+}

package/dist/screenshot-listener.d.ts

@@ -0,0 +1,2 @@
+import type { ScreenshotListener } from '@d-zero/puppeteer-screenshot';
+export declare function screenshotListener(update: (log: string) => void): ScreenshotListener;

package/dist/screenshot-listener.js

@@ -0,0 +1,43 @@
+import path from 'node:path';
+import { label } from './label.js';
+export function screenshotListener(update) {
+    return (phase, data) => {
+        const sizeLabel = label(data.name);
+        switch (phase) {
+            case 'setViewport': {
+                const { width } = data;
+                update(`${sizeLabel} ↔️ Change viewport size to ${width}px`);
+                break;
+            }
+            case 'load': {
+                const { type } = data;
+                update(`${sizeLabel} %earth% ${type === 'open' ? 'Open' : 'Reload'} page`);
+                break;
+            }
+            case 'hook': {
+                const { message } = data;
+                update(`${sizeLabel} ${message}`);
+                break;
+            }
+            case 'scroll': {
+                update(`${sizeLabel} %propeller% Scroll the page`);
+                break;
+            }
+            case 'screenshotStart': {
+                update(`${sizeLabel} 📸 Take a screenshot`);
+                break;
+            }
+            case 'screenshotSaving': {
+                const { path: filePath } = data;
+                const name = path.basename(filePath);
+                update(`${sizeLabel} 🖼  Save a file ${name}`);
+                break;
+            }
+            case 'screenshotError': {
+                const { error } = data;
+                update(`${sizeLabel} ❌️ ${error.message}`);
+                break;
+            }
+        }
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+export type { PageHook } from '@d-zero/puppeteer-page-scan';
+export type PrintType = 'png' | 'pdf' | 'note';

package/dist/types.js

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

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "@d-zero/print",
+	"version": "1.0.0",
+	"description": "Print web pages to PDF or image files.",
+	"author": "D-ZERO",
+	"license": "MIT",
+	"private": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./dist/print.js",
+			"types": "./dist/print.d.ts"
+		}
+	},
+	"bin": {
+		"print": "./dist/cli.js"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsc",
+		"clean": "tsc --build --clean"
+	},
+	"dependencies": {
+		"@d-zero/dealer": "1.1.0",
+		"@d-zero/html-distiller": "1.0.0",
+		"@d-zero/puppeteer-page-scan": "1.0.0",
+		"@d-zero/puppeteer-screenshot": "1.2.0",
+		"@d-zero/readtext": "1.1.0",
+		"ansi-colors": "4.1.3",
+		"dayjs": "1.11.13",
+		"front-matter": "4.0.2",
+		"minimist": "1.2.8",
+		"puppeteer": "23.5.0"
+	},
+	"gitHead": "e8f65086bf7c316dda6667f1173da8585a5ef19c"
+}