ippon-slides 0.1.0 → 0.1.1

package/README.md

@@ -131,6 +131,19 @@ import { render, toPdf } from 'ippon-slides'
 const { html } = render(markdown, { baseDir: '.', outDir: 'dist' })
 ```
 
+型定義（`.d.ts`）も同梱しています。
+
+## 開発
+
+TypeScript で書いています。`src/` が Node 側、`src/client/deck.ts` がブラウザで動くナビゲーションです。
+
+```sh
+npm install
+npm run build      # dist/ と assets/deck.js を作る
+npm run typecheck
+npm test           # ビルドしてからテスト（テストの実行には Node 22.18+ が必要）
+```
+
 ## License
 
 MIT

package/assets/deck.js

@@ -1,211 +1,197 @@
+"use strict";
 // スライドのナビゲーション。ippon が HTML に埋め込む。
 //   → / Space / PageDown / クリック右側     次へ
 //   ← / PageUp / クリック左側              前へ
 //   Home / End                              最初 / 最後
 //   f                                       フルスクリーン
 //   o / Esc                                 一覧
-;(function () {
-  var slides = Array.prototype.slice.call(document.querySelectorAll('#deck .slide'))
-  if (!slides.length) return
-
-  var idx = 0
-  var progress = document.getElementById('progress')
-  var counter = document.getElementById('counter')
-  var timerEl = document.getElementById('timer')
-
-  function clamp(n) {
-    return Math.max(0, Math.min(slides.length - 1, n))
-  }
-
-  // ---------- タイマー（表紙から進んだら開始、表紙に戻ったらリセット） ----------
-
-  var startedAt = null
-  var ticking = null
-  function fmt(ms) {
-    var s = Math.floor(ms / 1000)
-    var m = Math.floor(s / 60)
-    s = s % 60
-    return m + ':' + (s < 10 ? '0' : '') + s
-  }
-  function syncTimer() {
-    if (idx === 0) {
-      startedAt = null
-      clearInterval(ticking)
-      ticking = null
-      timerEl.textContent = ''
-      return
+(() => {
+    const slides = Array.from(document.querySelectorAll('#deck .slide'));
+    if (!slides.length)
+        return;
+    const $ = (id) => document.getElementById(id);
+    let idx = 0;
+    const progress = $('progress');
+    const counter = $('counter');
+    const timerEl = $('timer');
+    const clamp = (n) => Math.max(0, Math.min(slides.length - 1, n));
+    // ---------- タイマー（表紙から進んだら開始、表紙に戻ったらリセット） ----------
+    let startedAt = null;
+    let ticking;
+    function fmt(ms) {
+        const total = Math.floor(ms / 1000);
+        const m = Math.floor(total / 60);
+        const s = total % 60;
+        return m + ':' + (s < 10 ? '0' : '') + s;
     }
-    if (startedAt === null) startedAt = Date.now()
-    if (!ticking) {
-      ticking = setInterval(function () {
-        timerEl.textContent = fmt(Date.now() - startedAt)
-      }, 500)
+    function syncTimer() {
+        if (idx === 0) {
+            startedAt = null;
+            clearInterval(ticking);
+            ticking = undefined;
+            timerEl.textContent = '';
+            return;
+        }
+        const t0 = (startedAt ?? (startedAt = Date.now()));
+        ticking ?? (ticking = window.setInterval(() => {
+            timerEl.textContent = fmt(Date.now() - t0);
+        }, 500));
+        timerEl.textContent = fmt(Date.now() - t0);
     }
-    timerEl.textContent = fmt(Date.now() - startedAt)
-  }
-
-  // ---------- 描画 ----------
-
-  function render() {
-    slides.forEach(function (s, i) {
-      s.classList.toggle('active', i === idx)
-    })
-    slides[idx].scrollTop = 0
-    counter.textContent = idx + 1 + ' / ' + slides.length
-    progress.style.width = ((idx + 1) / slides.length) * 100 + '%'
-    syncTimer()
-  }
-  function go(n) {
-    n = clamp(n)
-    if (n === idx) return
-    idx = n
-    render()
-    history.replaceState(null, '', '#' + (idx + 1))
-  }
-  window.addEventListener('hashchange', function () {
-    var n = parseInt(location.hash.slice(1), 10)
-    if (n) go(n - 1)
-  })
-
-  // ---------- 一覧 ----------
-
-  var overview = document.getElementById('overview')
-  var ovItems = null
-  var ovOpen = false
-  var THUMB = 240
-
-  function buildOverview() {
-    ovItems = slides.map(function (s, i) {
-      var item = document.createElement('div')
-      item.className = 'ov-item'
-      var frame = document.createElement('div')
-      frame.className = 'ov-frame'
-      var scale = document.createElement('div')
-      scale.className = 'ov-scale'
-      var clone = s.cloneNode(true)
-      clone.classList.remove('active')
-      scale.appendChild(clone)
-      frame.appendChild(scale)
-      var num = document.createElement('div')
-      num.className = 'ov-num'
-      num.textContent = i + 1
-      item.appendChild(frame)
-      item.appendChild(num)
-      item.addEventListener('click', function () {
-        idx = i
-        closeOverview()
-        render()
-        history.replaceState(null, '', '#' + (idx + 1))
-      })
-      overview.appendChild(item)
-      return { item: item, frame: frame, scale: scale }
-    })
-  }
-  function layoutOverview() {
-    var w = window.innerWidth
-    var h = window.innerHeight
-    var k = THUMB / w
-    ovItems.forEach(function (t) {
-      t.frame.style.width = THUMB + 'px'
-      t.frame.style.height = h * k + 'px'
-      t.scale.style.width = w + 'px'
-      t.scale.style.height = h + 'px'
-      t.scale.style.transform = 'scale(' + k + ')'
-    })
-  }
-  function openOverview() {
-    if (!ovItems) buildOverview()
-    layoutOverview()
-    ovItems.forEach(function (t, i) {
-      t.item.classList.toggle('current', i === idx)
-    })
-    ovOpen = true
-    document.body.classList.add('overview')
-    ovItems[idx].item.scrollIntoView({ block: 'center' })
-  }
-  function closeOverview() {
-    ovOpen = false
-    document.body.classList.remove('overview')
-  }
-  window.addEventListener('resize', function () {
-    if (ovOpen) layoutOverview()
-  })
-
-  // ---------- 入力 ----------
-
-  document.addEventListener('keydown', function (e) {
-    if (e.metaKey || e.ctrlKey || e.altKey) return
-    if (ovOpen) {
-      if (e.key === 'Escape' || e.key === 'o') closeOverview()
-      return
+    // ---------- 描画 ----------
+    function render() {
+        slides.forEach((s, i) => s.classList.toggle('active', i === idx));
+        slides[idx].scrollTop = 0;
+        counter.textContent = idx + 1 + ' / ' + slides.length;
+        progress.style.width = ((idx + 1) / slides.length) * 100 + '%';
+        syncTimer();
     }
-    switch (e.key) {
-      case 'ArrowRight':
-      case 'PageDown':
-      case ' ':
-        e.preventDefault()
-        go(idx + 1)
-        break
-      case 'ArrowLeft':
-      case 'PageUp':
-        e.preventDefault()
-        go(idx - 1)
-        break
-      case 'Home':
-        go(0)
-        break
-      case 'End':
-        go(slides.length - 1)
-        break
-      case 'f':
-        if (document.fullscreenElement) document.exitFullscreen()
-        else document.documentElement.requestFullscreen()
-        break
-      case 'o':
-        openOverview()
-        break
-      case 'Escape':
-        if (!document.fullscreenElement) openOverview()
-        break
+    function go(n) {
+        n = clamp(n);
+        if (n === idx)
+            return;
+        idx = n;
+        render();
+        history.replaceState(null, '', '#' + (idx + 1));
     }
-  })
-
-  // 画面の右 3 割で次へ、左 3 割で前へ（リンクと文字選択は邪魔しない）
-  var deck = document.getElementById('deck')
-  deck.addEventListener('click', function (e) {
-    if (e.target.closest('a, button')) return
-    if (String(window.getSelection() || '')) return
-    var x = e.clientX / window.innerWidth
-    if (x > 0.7) go(idx + 1)
-    else if (x < 0.3) go(idx - 1)
-  })
-
-  // 横スワイプ
-  var tx = null
-  var ty = null
-  deck.addEventListener(
-    'touchstart',
-    function (e) {
-      if (e.touches.length !== 1) return (tx = null)
-      tx = e.touches[0].clientX
-      ty = e.touches[0].clientY
-    },
-    { passive: true }
-  )
-  deck.addEventListener(
-    'touchend',
-    function (e) {
-      if (tx === null) return
-      var t = e.changedTouches[0]
-      var dx = t.clientX - tx
-      var dy = t.clientY - ty
-      tx = null
-      if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5) go(dx < 0 ? idx + 1 : idx - 1)
-    },
-    { passive: true }
-  )
-
-  var start = parseInt(location.hash.slice(1), 10)
-  if (start) idx = clamp(start - 1)
-  render()
-})()
+    window.addEventListener('hashchange', () => {
+        const n = parseInt(location.hash.slice(1), 10);
+        if (n)
+            go(n - 1);
+    });
+    const overview = $('overview');
+    let ovItems = null;
+    let ovOpen = false;
+    const THUMB = 240;
+    const div = (className) => {
+        const el = document.createElement('div');
+        el.className = className;
+        return el;
+    };
+    function buildOverview() {
+        return slides.map((s, i) => {
+            const item = div('ov-item');
+            const frame = div('ov-frame');
+            const scale = div('ov-scale');
+            const clone = s.cloneNode(true);
+            clone.classList.remove('active');
+            scale.appendChild(clone);
+            frame.appendChild(scale);
+            const num = div('ov-num');
+            num.textContent = String(i + 1);
+            item.appendChild(frame);
+            item.appendChild(num);
+            item.addEventListener('click', () => {
+                idx = i;
+                closeOverview();
+                render();
+                history.replaceState(null, '', '#' + (idx + 1));
+            });
+            overview.appendChild(item);
+            return { item, frame, scale };
+        });
+    }
+    function layoutOverview(items) {
+        const w = window.innerWidth;
+        const h = window.innerHeight;
+        const k = THUMB / w;
+        for (const t of items) {
+            t.frame.style.width = THUMB + 'px';
+            t.frame.style.height = h * k + 'px';
+            t.scale.style.width = w + 'px';
+            t.scale.style.height = h + 'px';
+            t.scale.style.transform = 'scale(' + k + ')';
+        }
+    }
+    function openOverview() {
+        const items = (ovItems ?? (ovItems = buildOverview()));
+        layoutOverview(items);
+        items.forEach((t, i) => t.item.classList.toggle('current', i === idx));
+        ovOpen = true;
+        document.body.classList.add('overview');
+        items[idx].item.scrollIntoView({ block: 'center' });
+    }
+    function closeOverview() {
+        ovOpen = false;
+        document.body.classList.remove('overview');
+    }
+    window.addEventListener('resize', () => {
+        if (ovOpen && ovItems)
+            layoutOverview(ovItems);
+    });
+    // ---------- 入力 ----------
+    document.addEventListener('keydown', (e) => {
+        if (e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        if (ovOpen) {
+            if (e.key === 'Escape' || e.key === 'o')
+                closeOverview();
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'PageDown':
+            case ' ':
+                e.preventDefault();
+                go(idx + 1);
+                break;
+            case 'ArrowLeft':
+            case 'PageUp':
+                e.preventDefault();
+                go(idx - 1);
+                break;
+            case 'Home':
+                go(0);
+                break;
+            case 'End':
+                go(slides.length - 1);
+                break;
+            case 'f':
+                if (document.fullscreenElement)
+                    document.exitFullscreen();
+                else
+                    document.documentElement.requestFullscreen();
+                break;
+            case 'o':
+                openOverview();
+                break;
+            case 'Escape':
+                if (!document.fullscreenElement)
+                    openOverview();
+                break;
+        }
+    });
+    // 画面の右 3 割で次へ、左 3 割で前へ（リンクと文字選択は邪魔しない）
+    const deck = $('deck');
+    deck.addEventListener('click', (e) => {
+        if (e.target instanceof Element && e.target.closest('a, button'))
+            return;
+        if (String(window.getSelection() || ''))
+            return;
+        const x = e.clientX / window.innerWidth;
+        if (x > 0.7)
+            go(idx + 1);
+        else if (x < 0.3)
+            go(idx - 1);
+    });
+    // 横スワイプ
+    let touch = null;
+    deck.addEventListener('touchstart', (e) => {
+        const t = e.touches[0];
+        touch = e.touches.length === 1 && t ? { x: t.clientX, y: t.clientY } : null;
+    }, { passive: true });
+    deck.addEventListener('touchend', (e) => {
+        const t = e.changedTouches[0];
+        if (!touch || !t)
+            return;
+        const dx = t.clientX - touch.x;
+        const dy = t.clientY - touch.y;
+        touch = null;
+        if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy) * 1.5)
+            go(dx < 0 ? idx + 1 : idx - 1);
+    }, { passive: true });
+    const start = parseInt(location.hash.slice(1), 10);
+    if (start)
+        idx = clamp(start - 1);
+    render();
+})();

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,236 @@
+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!'))
+\`\`\`
+
+-# 行頭に "!! " を付けるとその行が強調される
+
+---
+
+\`\`\`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;