ippon-slides 0.1.0 → 0.1.2

package/assets/style.css

@@ -424,7 +424,8 @@ body.overview #deck,
 body.overview #progress,
 body.overview #counter,
 body.overview #timer,
-body.overview #hint {
+body.overview #hint,
+body.overview #presenter {
   display: none;
 }
 .ov-item {
@@ -466,6 +467,128 @@ body.overview #hint {
   font-weight: 600;
 }
 
+/* ---------- presenter（p / 別ウィンドウ） ---------- */
+
+/* 発表者ノートは本番・一覧・PDF には出さない（発表者ビューが innerHTML を別途読む） */
+.notes {
+  display: none;
+}
+
+#presenter {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: none;
+  box-sizing: border-box;
+  padding: 24px;
+  gap: 24px;
+  background: #1c1c1f;
+  color: #fff;
+  font-family: system-ui, -apple-system, 'Hiragino Sans', sans-serif;
+}
+body.presenter #presenter {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+}
+body.presenter #deck,
+body.presenter #progress,
+body.presenter #counter,
+body.presenter #timer,
+body.presenter #hint,
+body.presenter #overview {
+  display: none;
+}
+
+.pv-left {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+}
+.pv-slot:last-child {
+  opacity: 0.85;
+}
+.pv-slot:last-child .pv-frame {
+  width: 62%;
+}
+.pv-label {
+  font-size: 0.85rem;
+  color: #9a9aa0;
+  margin-bottom: 6px;
+  font-variant-numeric: tabular-nums;
+}
+.pv-frame {
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: var(--slide-bg);
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+}
+.pv-scale {
+  position: relative;
+  transform-origin: 0 0;
+}
+#presenter .slide {
+  display: flex;
+  animation: none;
+  overflow: hidden;
+}
+
+.pv-right {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+}
+.pv-clock {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+}
+.pv-elapsed {
+  font-size: 2.8rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.pv-wall {
+  font-size: 1rem;
+  color: #9a9aa0;
+  font-variant-numeric: tabular-nums;
+}
+.pv-controls {
+  display: flex;
+  gap: 10px;
+}
+.pv-controls button {
+  flex: 1;
+  padding: 10px 0;
+  font-size: 1.1rem;
+  color: #fff;
+  background: #2e2e33;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.pv-controls button:hover {
+  background: var(--slide-accent);
+  border-color: var(--slide-accent);
+}
+.pv-notes {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 18px;
+  background: #242428;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+.pv-notes .pv-empty {
+  color: #76767c;
+}
+
 /* ---------- PDF（ブラウザの印刷 → PDF に保存） ---------- */
 
 @media print {
@@ -511,7 +634,8 @@ body.overview #hint {
   #counter,
   #timer,
   #hint,
-  #overview {
+  #overview,
+  #presenter {
     display: none !important;
   }
 }

package/bin/ippon.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { main } from '../src/cli.js'
+import { main } from '../dist/cli.js'
 
 main(process.argv.slice(2)).catch((e) => {
   console.error(`✗ ${e.message}`)

package/dist/cli.d.ts

@@ -0,0 +1,20 @@
+export interface Options {
+    /** 位置引数 */
+    _: string[];
+    html?: boolean;
+    pdf?: boolean;
+    watch?: boolean;
+    help?: boolean;
+    version?: boolean;
+    output?: string;
+    css?: string;
+    browserPath?: string;
+}
+export declare function parseArgs(argv: string[]): Options;
+/** 出力先を決める */
+export type Format = 'html' | 'pdf';
+export declare function outputs(input: string, { html, pdf, output }: Pick<Options, 'html' | 'pdf' | 'output'>): {
+    format: Format;
+    path: string;
+}[];
+export declare function main(argv: string[]): Promise<void>;

package/dist/cli.js

@@ -0,0 +1,241 @@
+import { existsSync, mkdirSync, readFileSync, statSync, watch, writeFileSync } from 'node:fs';
+import { basename, dirname, extname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { toPdf } from './pdf.js';
+import { render } from './render.js';
+const pkg = JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), '..', 'package.json'), 'utf8'));
+const HELP = `ippon v${pkg.version} — 1 枚 1 メッセージのスライドを Markdown から作る
+
+使い方:
+  ippon build <input.md> [options]   スライドをビルドする
+  ippon <input.md> [options]         build の省略形
+  ippon init [file]                  サンプルの Markdown を作る（デフォルト: slide.md）
+
+build のオプション:
+      --html                 HTML を出力する（--pdf がなければデフォルト）
+      --pdf                  PDF を出力する（Chrome / Chromium / Edge が必要）
+  -o, --output <path>        出力先。--html と --pdf を両方指定したときは拡張子だけ差し替える
+                             ディレクトリを指定するとその中に <input>.html / .pdf を作る
+  -w, --watch                Markdown と --css の変更を監視して再ビルドする
+      --css <file>           追加の CSS（色やフォントの上書きなど）
+      --browser-path <path>  PDF に使うブラウザ（環境変数 CHROME_PATH でも可）
+
+  -h, --help                 ヘルプ
+  -v, --version              バージョン
+
+例:
+  ippon build slide.md --html
+  ippon build slide.md --pdf -o dist/
+  ippon build slide.md --html --pdf -o dist/talk
+  ippon build slide.md --html -w
+`;
+const FLAGS = { '--html': 'html', '--pdf': 'pdf', '-w': 'watch', '--watch': 'watch', '-h': 'help', '--help': 'help', '-v': 'version', '--version': 'version' };
+const VALUES = { '-o': 'output', '--output': 'output', '--css': 'css', '--browser-path': 'browserPath' };
+export function parseArgs(argv) {
+    const opts = { _: [] };
+    for (let i = 0; i < argv.length; i++) {
+        let a = argv[i];
+        let v;
+        const eq = a.match(/^(--[^=]+)=(.*)$/);
+        if (eq)
+            [, a, v] = eq;
+        const flag = FLAGS[a];
+        const value = VALUES[a];
+        if (flag)
+            opts[flag] = true;
+        else if (value) {
+            if (v === undefined)
+                v = argv[++i];
+            if (v === undefined)
+                throw new Error(`${a} には値が必要です`);
+            opts[value] = v;
+        }
+        else if (a.startsWith('-') && a !== '-')
+            throw new Error(`不明なオプション: ${a}`);
+        else
+            opts._.push(a);
+    }
+    return opts;
+}
+export function outputs(input, { html, pdf, output }) {
+    const formats = [];
+    if (html || !pdf)
+        formats.push('html');
+    if (pdf)
+        formats.push('pdf');
+    const name = basename(input, extname(input));
+    let base = ''; // 拡張子なしのパス
+    let exact = null; // 1 形式だけのときに -o をそのまま使う
+    if (!output)
+        base = join(dirname(input), name);
+    else if (output.endsWith('/') || output.endsWith('\\') || (existsSync(output) && statSync(output).isDirectory()))
+        base = join(output, name);
+    else if (formats.length === 1 && extname(output))
+        exact = output;
+    else
+        base = extname(output) ? output.slice(0, -extname(output).length) : output;
+    return formats.map((f) => ({ format: f, path: resolve(exact || `${base}.${f}`) }));
+}
+// ---------------------------------------------------------------
+// build
+// ---------------------------------------------------------------
+const time = () => new Date().toLocaleTimeString();
+async function build(input, opts) {
+    const md = readFileSync(input, 'utf8');
+    const css = opts.css ? readFileSync(opts.css, 'utf8') : '';
+    const baseDir = dirname(resolve(input));
+    for (const { format, path } of outputs(input, opts)) {
+        mkdirSync(dirname(path), { recursive: true });
+        if (format === 'html') {
+            const { html, count } = render(md, { baseDir, outDir: dirname(path), css });
+            writeFileSync(path, html);
+            console.log(`${time()} ✓ ${count} slides → ${path}`);
+        }
+        else {
+            const { html, count } = render(md, { baseDir, css });
+            await toPdf(html, path, { browserPath: opts.browserPath });
+            console.log(`${time()} ✓ ${count} slides → ${path}`);
+        }
+    }
+}
+function watchBuild(input, opts) {
+    let timer;
+    let running = Promise.resolve();
+    const rebuild = () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            running = running.then(() => build(input, opts)).catch((e) => console.error(`${time()} ✗ ${e.message}`));
+        }, 80);
+    };
+    // エディタによってはファイルを置き換えて保存するので、ディレクトリごと監視する
+    const files = [input, opts.css].filter((f) => f !== undefined).map((f) => resolve(f));
+    for (const dir of new Set(files.map(dirname))) {
+        watch(dir, (_, file) => {
+            if (file && files.includes(join(dir, file.toString())))
+                rebuild();
+        });
+    }
+    console.log(`watching ${files.join(', ')} ...`);
+}
+// ---------------------------------------------------------------
+// init
+// ---------------------------------------------------------------
+const SAMPLE = `---
+title: はじめての ippon
+author: あなたの名前
+---
+
+::title::
+
+# はじめての ippon
+
+サブタイトル
+
+あなたの名前 ・ 2026-01-01
+
+---
+
+::center::
+
+1 枚に
+
+1 メッセージ
+
+---
+
+::center size=2::
+
+**大きく**
+
+---
+
+::center bg=blue::
+
+背景色も変えられる
+
+-# blue / orange / purple / red / green / black / white、または #rrggbb
+
+---
+
+::center size=1.5 bg=white::
+
+セクション
+
+---
+
+## 箇条書き
+
+- **太字** はアクセントカラーになる
+- \`inline code\` も書ける
+  - ネストもできる
+- 矢印 → は少し薄くなる
+
+---
+
+## 2 カラム
+
+- 左に説明
+- 右にコード
+
+::right::
+
+\`\`\`ts
+const app = new Hono()
+!! app.get('/', (c) => c.text('Hello!'))
+\`\`\`
+
+-# 行頭に "!! " を付けるとその行が強調される
+
+::note::
+
+p キーで発表者ビューが開きます。
+この ::note:: 以降は本番に出ず、手元のメモとして見えます。
+
+---
+
+\`\`\`console
+$ npx ippon-slides build slide.md --html --pdf
+✓ 9 slides → slide.html
+✓ 9 slides → slide.pdf
+\`\`\`
+
+---
+
+::title::
+
+# ありがとうございました
+
+あなたの名前
+`;
+function init(file = 'slide.md') {
+    if (existsSync(file))
+        throw new Error(`${file} はすでにあります`);
+    writeFileSync(file, SAMPLE);
+    console.log(`✓ ${file} を作りました → ippon build ${file} --html -w`);
+}
+// ---------------------------------------------------------------
+// main
+// ---------------------------------------------------------------
+export async function main(argv) {
+    const opts = parseArgs(argv);
+    if (opts.version)
+        return console.log(pkg.version);
+    const [cmd, ...args] = opts._;
+    if (opts.help || cmd === undefined)
+        return console.log(HELP);
+    let rest = args;
+    if (cmd === 'init')
+        return init(rest[0]);
+    if (cmd !== 'build')
+        rest = [cmd, ...rest]; // `ippon slide.md` は build の省略形
+    const input = rest[0];
+    if (!input)
+        throw new Error('入力の Markdown を指定してください（例: ippon build slide.md --html）');
+    if (rest.length > 1)
+        throw new Error(`入力は 1 つだけ指定してください: ${rest.join(' ')}`);
+    if (!existsSync(input))
+        throw new Error(`${input} が見つかりません`);
+    await build(input, opts);
+    if (opts.watch)
+        watchBuild(input, opts);
+}

package/dist/highlight.d.ts

@@ -0,0 +1,2 @@
+export declare const esc: (s: string) => string;
+export declare function highlight(code: string, lang?: string): string;

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;