ippon-slides 0.1.0 → 0.1.1

package/dist/highlight.js

@@ -0,0 +1,105 @@
+// コードのハイライト。1 行ずつ処理する（複数行にまたがるトークンは扱わない）。
+// 行頭の "!! " はその行の強調マーカー。
+export const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+function tokenize(line, rules) {
+    let out = '';
+    let rest = line;
+    outer: while (rest.length) {
+        for (const [re, cls] of rules) {
+            const m = rest.match(re);
+            if (m && m[0].length) {
+                out += cls ? `<span class="${cls}">${esc(m[0])}</span>` : esc(m[0]);
+                rest = rest.slice(m[0].length);
+                continue outer;
+            }
+        }
+        out += esc(rest[0]);
+        rest = rest.slice(1);
+    }
+    return out;
+}
+const HCL_KEYWORDS = 'resource|data|variable|module|output|locals|terraform|provisioner|lifecycle|precondition|postcondition|backend|for|in|if|for_each|count|depends_on|when';
+const HCL = [
+    [/^(#|\/\/).*/, 'hl-c'],
+    [/^"(?:[^"\\]|\\.)*"/, 'hl-s'],
+    [/^<<-?EOT/, 'hl-s'],
+    [/^(?:var|local|module|each|self|path|data)(?=\.)/, 'hl-i'],
+    [new RegExp(`^(?:${HCL_KEYWORDS})\\b`), 'hl-k'],
+    [/^(?:true|false|null)\b/, 'hl-n'],
+    [/^\d+(\.\d+)?\b/, 'hl-n'],
+    [/^[a-z_][a-z0-9_]*(?=\()/, 'hl-f'],
+    [/^[a-z_][a-z0-9_]*(?=\s*=[^=>])/, 'hl-t'],
+    [/^[A-Za-z_][A-Za-z0-9_]*/, null],
+];
+const SH = [
+    [/^#.*/, 'hl-c'],
+    [/^"(?:[^"\\]|\\.)*"/, 'hl-s'],
+    [/^'[^']*'/, 'hl-s'],
+    [/^\$\{?[A-Za-z_][A-Za-z0-9_]*\}?/, 'hl-i'],
+    [/^(?:if|then|else|elif|fi|for|while|do|done|case|esac|set|echo|exit|export)\b/, 'hl-k'],
+    [/^--?[a-z][a-z-]*/, 'hl-t'],
+    [/^[A-Za-z_][A-Za-z0-9_]*/, null],
+];
+const JSON_ = [
+    [/^"(?:[^"\\]|\\.)*"(?=\s*:)/, 'hl-t'],
+    [/^"(?:[^"\\]|\\.)*"/, 'hl-s'],
+    [/^(?:true|false|null)\b/, 'hl-n'],
+    [/^-?\d+(\.\d+)?/, 'hl-n'],
+];
+const JS_KEYWORDS = 'const|let|var|function|return|if|else|for|while|of|in|new|class|extends|import|from|export|default|async|await|try|catch|throw|type|interface|as';
+const JS = [
+    [/^\/\/.*/, 'hl-c'],
+    [/^"(?:[^"\\]|\\.)*"/, 'hl-s'],
+    [/^'(?:[^'\\]|\\.)*'/, 'hl-s'],
+    [/^`(?:[^`\\]|\\.)*`/, 'hl-s'],
+    [new RegExp(`^(?:${JS_KEYWORDS})\\b`), 'hl-k'],
+    [/^(?:true|false|null|undefined)\b/, 'hl-n'],
+    [/^\d+(\.\d+)?\b/, 'hl-n'],
+    [/^[A-Za-z_$][\w$]*(?=\()/, 'hl-f'],
+    [/^[A-Z][\w$]*/, 'hl-t'],
+    [/^[A-Za-z_$][\w$]*/, null],
+];
+const LANGS = {
+    hcl: HCL,
+    tf: HCL,
+    terraform: HCL,
+    sh: SH,
+    bash: SH,
+    shell: SH,
+    zsh: SH,
+    json: JSON_,
+    js: JS,
+    javascript: JS,
+    ts: JS,
+    typescript: JS,
+    jsx: JS,
+    tsx: JS,
+};
+function consoleLine(line) {
+    const m = line.match(/^(\$ )(.*)$/);
+    if (m)
+        return `<span class="hl-prompt">$ </span><span class="hl-cmd">${esc(m[2])}</span>`;
+    if (/(^|\s)(Error|panic)\b|^make: \*\*\*/.test(line))
+        return `<span class="hl-err">${esc(line)}</span>`;
+    if (/^(✅|Apply complete|Destroy complete)/.test(line))
+        return `<span class="hl-ok">${esc(line)}</span>`;
+    return `<span class="hl-out">${esc(line)}</span>`;
+}
+export function highlight(code, lang = '') {
+    const rules = LANGS[lang.toLowerCase()];
+    return code
+        .split('\n')
+        .map((raw) => {
+        const marked = raw.startsWith('!! ');
+        const line = marked ? raw.slice(3) : raw;
+        let html;
+        if (lang === 'console')
+            html = consoleLine(line);
+        else if (rules)
+            html = tokenize(line, rules);
+        else
+            html = esc(line);
+        return marked ? `<span class="hl-mark">${html}</span>` : html;
+    })
+        .join('\n');
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { parse, type Meta, type Parsed } from './markdown.ts';
+export { render, type RenderOptions, type RenderResult } from './render.ts';
+export { toPdf, findBrowser, type PdfOptions } from './pdf.ts';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { parse } from './markdown.js';
+export { render } from './render.js';
+export { toPdf, findBrowser } from './pdf.js';

package/dist/markdown.d.ts

@@ -0,0 +1,15 @@
+export declare const BG: Record<string, string>;
+/** frontmatter（`key: value` だけの簡易 YAML） */
+export type Meta = Record<string, string>;
+export interface Parsed {
+    meta: Meta;
+    /** スライドごとの `<section>` */
+    sections: string[];
+}
+export declare function inline(text: string): string;
+export declare function blocks(src: string): string;
+export declare function splitSlides(md: string): string[];
+export declare function slide(src: string): string;
+export declare function frontmatter(md: string): [Meta, string];
+/** Markdown 全体 → { meta, sections } */
+export declare function parse(md: string): Parsed;

package/dist/markdown.js

@@ -0,0 +1,219 @@
+// Markdown → スライドの <section> 群
+//
+//   ---                       スライドの区切り
+//   ::center::                1 行目に置くとスライドの指示（center / title / wide / bg=xxx / size=1.5）
+//   ::right::                 ここから右カラム
+//   -# 注釈                   小さい注釈
+//   ```hcl                    コード（hcl / console / sh / json / js / ts）
+//   !! 行                     コードの行を強調（行頭の "!! " は消える）
+import { esc, highlight } from './highlight.js';
+export const BG = {
+    blue: '#0d76bc',
+    orange: '#ff6a00',
+    purple: '#5c2d91',
+    red: '#c0392b',
+    green: '#188038',
+    black: '#000000',
+    white: '#fafafa',
+};
+const DIRECTIVES = /^(center|title|wide|bg=.+|size=.+)$/;
+// ---------------------------------------------------------------
+// inline
+// ---------------------------------------------------------------
+export function inline(text) {
+    const codes = [];
+    let s = text.replace(/`([^`]+)`/g, (_, c) => {
+        codes.push(`<code>${esc(c)}</code>`);
+        return `\u0000${codes.length - 1}\u0000`;
+    });
+    s = esc(s);
+    s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+&quot;([^&]*)&quot;)?\)/g, (_, alt, src, title) => `<img src="${src}" alt="${alt}">` + (title ? `<span class="img-caption">${title}</span>` : ''));
+    s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    s = s.replace(/(^|[^*])\*([^*\s][^*]*?)\*/g, '$1<em>$2</em>');
+    s = s.replace(/→/g, '<span class="arrow">→</span>');
+    return s.replace(/\u0000(\d+)\u0000/g, (_, i) => codes[Number(i)]);
+}
+function list(items) {
+    const base = items[0].indent;
+    const tag = items[0].ordered ? 'ol' : 'ul';
+    let html = `<${tag}>`;
+    let i = 0;
+    while (i < items.length) {
+        const item = items[i++];
+        const children = [];
+        while (i < items.length && items[i].indent > base)
+            children.push(items[i++]);
+        html += `<li>${inline(item.text)}${children.length ? list(children) : ''}</li>`;
+    }
+    return html + `</${tag}>`;
+}
+function table(rows) {
+    // `\|` はセルの区切りではなく文字としての |
+    const cells = (r) => r
+        .trim()
+        .replace(/^\||\|$/g, '')
+        .split(/(?<!\\)\|/)
+        .map((c) => c.trim().replace(/\\\|/g, '|'));
+    const head = cells(rows[0]);
+    const align = cells(rows[1]).map((c) => (/:$/.test(c) ? ' class="num"' : ''));
+    let html = '<table><thead><tr>';
+    head.forEach((c, i) => (html += `<th${align[i] || ''}>${inline(c)}</th>`));
+    html += '</tr></thead><tbody>';
+    for (const r of rows.slice(2)) {
+        html += '<tr>';
+        cells(r).forEach((c, i) => (html += `<td${align[i] || ''}>${inline(c)}</td>`));
+        html += '</tr>';
+    }
+    return html + '</tbody></table>';
+}
+const LIST_ITEM = /^(\s*)([-*]|\d+\.)\s+(.*)$/;
+export function blocks(src) {
+    const lines = src.split('\n');
+    let html = '';
+    let para = [];
+    const flush = () => {
+        if (!para.length)
+            return;
+        const text = para.join('\n');
+        para = [];
+        if (text.startsWith('-# '))
+            html += `<p class="note">${inline(text.slice(3)).replace(/\n/g, '<br>')}</p>`;
+        else
+            html += `<p>${inline(text).replace(/\n/g, '<br>')}</p>`;
+    };
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const fence = line.match(/^```([\w-]*)\s*$/);
+        if (fence) {
+            flush();
+            const lang = fence[1];
+            const body = [];
+            while (++i < lines.length && !/^```\s*$/.test(lines[i]))
+                body.push(lines[i]);
+            const attr = lang && lang !== 'console' ? ` data-lang="${esc(lang)}"` : '';
+            html += `<pre${attr}><code>${highlight(body.join('\n'), lang)}</code></pre>`;
+            continue;
+        }
+        if (!line.trim()) {
+            flush();
+            continue;
+        }
+        const h = line.match(/^(#{1,3})\s+(.*)$/);
+        if (h) {
+            flush();
+            const level = h[1].length;
+            html += `<h${level}>${inline(h[2])}</h${level}>`;
+            continue;
+        }
+        if (LIST_ITEM.test(line) && !line.startsWith('-# ')) {
+            flush();
+            const items = [];
+            let m;
+            while (i < lines.length && (m = lines[i].match(LIST_ITEM))) {
+                items.push({ indent: m[1].length, ordered: /\d/.test(m[2]), text: m[3] });
+                i++;
+            }
+            i--;
+            html += list(items);
+            continue;
+        }
+        if (line.startsWith('|') && /^\|?\s*:?-+/.test(lines[i + 1] || '')) {
+            flush();
+            const rows = [];
+            while (i < lines.length && lines[i].startsWith('|'))
+                rows.push(lines[i++]);
+            i--;
+            html += table(rows);
+            continue;
+        }
+        if (line.startsWith('> ')) {
+            flush();
+            const q = [];
+            while (i < lines.length && lines[i].startsWith('> '))
+                q.push(lines[i++].slice(2));
+            i--;
+            html += `<blockquote>${blocks(q.join('\n'))}</blockquote>`;
+            continue;
+        }
+        para.push(line);
+    }
+    flush();
+    return html;
+}
+// ---------------------------------------------------------------
+// slide
+// ---------------------------------------------------------------
+export function splitSlides(md) {
+    const slides = [];
+    let cur = [];
+    let inFence = false;
+    for (const line of md.split('\n')) {
+        if (/^```/.test(line))
+            inFence = !inFence;
+        if (!inFence && /^---\s*$/.test(line)) {
+            slides.push(cur.join('\n'));
+            cur = [];
+        }
+        else
+            cur.push(line);
+    }
+    slides.push(cur.join('\n'));
+    return slides.filter((s) => s.trim());
+}
+export function slide(src) {
+    const classes = ['slide'];
+    let style = '';
+    let body = src.replace(/^\s+/, '');
+    const d = body.match(/^::([^:]+)::[ \t]*(\n|$)/);
+    const tokens = d ? d[1].trim().split(/\s+/) : [];
+    if (d && tokens.every((t) => DIRECTIVES.test(t))) {
+        for (const tok of tokens) {
+            const bg = tok.match(/^bg=(.+)$/);
+            const size = tok.match(/^size=(.+)$/);
+            if (bg) {
+                const name = bg[1];
+                style += `background:${esc(BG[name] || name)};`;
+                if (name === 'white')
+                    classes.push('light');
+            }
+            else if (size)
+                style += `--slide-size:${esc(size[1])};`;
+            else
+                classes.push(tok);
+        }
+        body = body.slice(d[0].length);
+    }
+    let html;
+    const parts = body.split(/^::right::[ \t]*$/m);
+    if (parts.length === 2) {
+        const [first, right] = parts;
+        // 先頭の見出しはカラムの外（上）に出す
+        const head = first.match(/^\s*(#{1,3} .*)\n/);
+        const left = head ? first.replace(head[0], '') : first;
+        html =
+            (head ? blocks(head[1]) : '') +
+                `<div class="cols"><div>${blocks(left)}</div><div>${blocks(right)}</div></div>`;
+    }
+    else {
+        html = blocks(body);
+    }
+    return `<section class="${classes.join(' ')}"${style ? ` style="${style}"` : ''}>${html}</section>`;
+}
+export function frontmatter(md) {
+    const m = md.replace(/^\uFEFF/, '').match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/);
+    if (!m)
+        return [{}, md];
+    const meta = {};
+    for (const line of m[1].split(/\r?\n/)) {
+        const kv = line.match(/^(\w+):\s*(.*?)\s*$/);
+        if (kv)
+            meta[kv[1]] = kv[2].replace(/^(["'])(.*)\1$/, '$2');
+    }
+    return [meta, md.slice(m[0].length)];
+}
+/** Markdown 全体 → { meta, sections } */
+export function parse(md) {
+    const [meta, body] = frontmatter(md.replace(/\r\n/g, '\n'));
+    return { meta, sections: splitSlides(body).map(slide) };
+}

package/dist/pdf.d.ts

@@ -0,0 +1,11 @@
+/** --browser-path → CHROME_PATH → よくある場所 の順に探す */
+export declare function findBrowser(explicit?: string): string | null;
+export interface PdfOptions {
+    /** 使うブラウザ。省略すると CHROME_PATH → よくある場所 の順に探す */
+    browserPath?: string;
+}
+/**
+ * @param html file:// URL の画像で組み立てた HTML
+ * @param out  出力する PDF のパス
+ */
+export declare function toPdf(html: string, out: string, { browserPath }?: PdfOptions): Promise<void>;

package/dist/pdf.js

@@ -0,0 +1,83 @@
+// PDF 出力。ローカルの Chrome / Chromium / Edge をヘッドレスで起動して印刷する。
+// 依存パッケージなし（puppeteer も使わない）。
+import { spawn } from 'node:child_process';
+import { existsSync, mkdtempSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { delimiter, join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+const CANDIDATES = {
+    darwin: [
+        '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+        '/Applications/Chromium.app/Contents/MacOS/Chromium',
+        '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+        '/Applications/Brave Browser.app/Contents/MacOS/Brave Browser',
+    ],
+    linux: ['google-chrome-stable', 'google-chrome', 'chromium', 'chromium-browser', 'microsoft-edge', 'brave-browser'],
+    win32: [
+        join(process.env['PROGRAMFILES'] || 'C:\\Program Files', 'Google\\Chrome\\Application\\chrome.exe'),
+        join(process.env['PROGRAMFILES(X86)'] || 'C:\\Program Files (x86)', 'Google\\Chrome\\Application\\chrome.exe'),
+        join(process.env['LOCALAPPDATA'] || '', 'Google\\Chrome\\Application\\chrome.exe'),
+        join(process.env['PROGRAMFILES(X86)'] || 'C:\\Program Files (x86)', 'Microsoft\\Edge\\Application\\msedge.exe'),
+    ],
+};
+function which(cmd) {
+    for (const dir of (process.env.PATH || '').split(delimiter)) {
+        const p = join(dir, cmd);
+        if (existsSync(p))
+            return p;
+    }
+    return null;
+}
+/** --browser-path → CHROME_PATH → よくある場所 の順に探す */
+export function findBrowser(explicit) {
+    if (explicit)
+        return existsSync(explicit) ? explicit : null;
+    if (process.env.CHROME_PATH && existsSync(process.env.CHROME_PATH))
+        return process.env.CHROME_PATH;
+    for (const c of CANDIDATES[process.platform] || []) {
+        const p = c.includes('/') || c.includes('\\') ? (existsSync(c) ? c : null) : which(c);
+        if (p)
+            return p;
+    }
+    return null;
+}
+/**
+ * @param html file:// URL の画像で組み立てた HTML
+ * @param out  出力する PDF のパス
+ */
+export async function toPdf(html, out, { browserPath } = {}) {
+    const browser = findBrowser(browserPath);
+    if (!browser) {
+        throw new Error('PDF の出力には Chrome / Chromium / Edge が必要です。--browser-path か環境変数 CHROME_PATH で場所を指定してください。');
+    }
+    const dir = mkdtempSync(join(tmpdir(), 'ippon-'));
+    const src = join(dir, 'slide.html');
+    writeFileSync(src, html);
+    rmSync(out, { force: true });
+    try {
+        const args = [
+            '--headless=new',
+            '--disable-gpu',
+            '--no-first-run',
+            '--no-default-browser-check',
+            `--user-data-dir=${join(dir, 'profile')}`,
+            '--no-pdf-header-footer',
+            '--virtual-time-budget=3000', // Web フォントの読み込みを待つ
+            `--print-to-pdf=${out}`,
+            pathToFileURL(src).href,
+        ];
+        const stderr = await new Promise((ok, ng) => {
+            const p = spawn(browser, args, { stdio: ['ignore', 'ignore', 'pipe'] });
+            let err = '';
+            p.stderr.on('data', (d) => (err += d));
+            p.on('error', ng);
+            p.on('close', () => ok(err));
+        });
+        if (!existsSync(out) || statSync(out).size === 0) {
+            throw new Error(`PDF の出力に失敗しました（${browser}）\n${stderr.trim()}`);
+        }
+    }
+    finally {
+        rmSync(dir, { recursive: true, force: true });
+    }
+}

package/dist/render.d.ts

@@ -0,0 +1,14 @@
+export interface RenderOptions {
+    /** 画像の相対パスの基準（= Markdown のあるディレクトリ） */
+    baseDir: string;
+    /** 出力先ディレクトリ。省略すると画像は file:// URL になる */
+    outDir?: string;
+    /** 追加の CSS（--css） */
+    css?: string;
+}
+export interface RenderResult {
+    html: string;
+    /** スライドの枚数 */
+    count: number;
+}
+export declare function render(md: string, { baseDir, outDir, css }: RenderOptions): RenderResult;

package/dist/render.js

@@ -0,0 +1,51 @@
+// スライドの HTML を 1 ファイルに組み立てる（CSS / JS も全部埋め込む）
+import { readFileSync } from 'node:fs';
+import { dirname, isAbsolute, join, relative, resolve, sep } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { esc } from './highlight.js';
+import { parse } from './markdown.js';
+const assets = join(dirname(fileURLToPath(import.meta.url)), '..', 'assets');
+const EXTERNAL = /^(?:[a-z][a-z0-9+.-]*:|\/\/|#|\/)/i;
+/**
+ * 相対パスの画像を、出力先から見たパスに書き換える。
+ *   - outDir を渡す → 出力先からの相対パス（HTML 用）
+ *   - outDir なし   → file:// の絶対 URL（PDF の一時ファイル用）
+ */
+function rewriteImages(html, baseDir, outDir) {
+    return html.replace(/(<img src=")([^"]+)(")/g, (all, pre, src, post) => {
+        if (EXTERNAL.test(src) || isAbsolute(src))
+            return all;
+        const abs = resolve(baseDir, decodeURI(src));
+        const url = outDir ? encodeURI(relative(outDir, abs).split(sep).join('/')) : pathToFileURL(abs).href;
+        return pre + url + post;
+    });
+}
+export function render(md, { baseDir, outDir, css = '' }) {
+    const { meta, sections } = parse(md);
+    const style = readFileSync(join(assets, 'style.css'), 'utf8') + (css ? `\n/* --css */\n${css}` : '');
+    const script = readFileSync(join(assets, 'deck.js'), 'utf8');
+    const body = rewriteImages(sections.join('\n'), baseDir, outDir);
+    const html = `<!doctype html>
+<html lang="${esc(meta.lang || 'ja')}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${esc(meta.title || 'slides')}</title>
+${meta.description ? `<meta name="description" content="${esc(meta.description)}">\n` : ''}${meta.author ? `<meta name="author" content="${esc(meta.author)}">\n` : ''}<meta name="generator" content="ippon-slides">
+<style>${style}</style>
+</head>
+<body>
+<div id="deck">
+${body}
+</div>
+<div id="overview"></div>
+<div id="progress"></div>
+<div id="timer"></div>
+<div id="counter"></div>
+<div id="hint">← → 移動 ・ f フルスクリーン ・ o 一覧</div>
+<script>${script}</script>
+</body>
+</html>
+`;
+    return { html, count: sections.length };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ippon-slides",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "1 枚 1 メッセージのスライドを Markdown から作る CLI。HTML 1 ファイルと PDF を出力",
   "keywords": [
     "slides",
@@ -25,17 +25,28 @@
     "ippon": "bin/ippon.js"
   },
   "exports": {
-    ".": "./src/index.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
   },
+  "types": "./dist/index.d.ts",
   "files": [
     "bin",
-    "src",
+    "dist",
     "assets"
   ],
   "engines": {
     "node": ">=18.17"
   },
   "scripts": {
-    "test": "node --test"
+    "build": "tsc -p tsconfig.build.json && tsc -p src/client",
+    "typecheck": "tsc && tsc -p src/client --noEmit",
+    "test": "npm run build && node --test test/*.test.ts",
+    "prepack": "npm run build"
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.5",
+    "typescript": "^7.0.2"
   }
 }