ippon-slides 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 tanahiro2010
+
+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

@@ -1,3 +1,149 @@
-# Temporary Holding Version
+# ippon-slides
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**1 枚 1 メッセージ** のスライドを Markdown から作る CLI。
+
+- 黒背景・大きな文字・切り替え時のフェードイン
+- 出力は CSS / JS まで全部入った **HTML 1 ファイル**（会場がオフラインでも開ける）
+- `--pdf` で 16:9 の **PDF** も出せる
+- 依存パッケージなし
+
+## 使い方
+
+```sh
+npx ippon-slides init                    # サンプルの slide.md を作る
+npx ippon-slides build slide.md --html -w # 保存するたびに slide.html を作り直す
+npx ippon-slides build slide.md --pdf     # slide.pdf
+```
+
+グローバルに入れると `ippon` コマンドとして使えます。
+
+```sh
+npm i -g ippon-slides
+ippon build slide.md --html --pdf -o dist/
+```
+
+### オプション
+
+| オプション | |
+|---|---|
+| `--html` | HTML を出力する（`--pdf` がなければデフォルト） |
+| `--pdf` | PDF を出力する（Chrome / Chromium / Edge が必要） |
+| `-o, --output <path>` | 出力先。ディレクトリを指定するとその中に `<input>.html` / `.pdf` を作る。`--html --pdf` を両方指定したときは拡張子だけ差し替える |
+| `-w, --watch` | Markdown と `--css` の変更を監視して再ビルドする |
+| `--css <file>` | 追加の CSS（色やフォントの上書きなど） |
+| `--browser-path <path>` | PDF に使うブラウザ。環境変数 `CHROME_PATH` でも指定できる |
+
+`ippon slide.md` は `ippon build slide.md` の省略形です。
+
+## 書き方
+
+````md
+---
+title: タイトル
+author: 名前
+---
+
+::title::
+
+# タイトル
+
+サブタイトル
+
+名前 ・ 日付
+
+---
+
+::center::
+
+1 枚に
+
+1 メッセージ
+
+---
+
+::center size=2 bg=blue::
+
+**大きく**
+
+-# 小さい注釈
+
+---
+
+## 見出しと箇条書き
+
+- **太字** はアクセントカラー
+  - ネストもできる
+
+::right::
+
+```ts
+const app = new Hono()
+!! app.get('/', (c) => c.text('Hello!'))
+```
+````
+
+| 記法 | |
+|---|---|
+| `---` | スライドの区切り |
+| `::center::` | 1 枚 1 メッセージ（中央寄せの大きな文字） |
+| `::title::` | 表紙。最後の段落はページ下に寄る |
+| `::wide::` | 左右の余白を詰める（スクリーンショット向け） |
+| `::bg=blue::` | 背景色。`blue` / `orange` / `purple` / `red` / `green` / `black` / `white`、または `#rrggbb` |
+| `::size=1.5::` | 文字サイズの倍率 |
+| `::right::` | ここから右カラム。先頭の見出しはカラムの上に出る |
+| `-# 注釈` | 小さい注釈 |
+| ` ```hcl ` | コード。`hcl` / `console` / `sh` / `json` / `js` / `ts` をハイライト |
+| `!! ` | コードの行頭に付けるとその行を強調 |
+
+指示は `::center bg=blue size=2::` のようにまとめて書けます。
+`console` のコードは `$ ` で始まる行をコマンド、`Error` を含む行をエラーとして色分けします。
+
+## 発表中の操作
+
+| キー | |
+|---|---|
+| `→` / `Space` / 画面右側クリック | 次へ |
+| `←` / 画面左側クリック | 前へ |
+| `Home` / `End` | 最初 / 最後 |
+| `f` | フルスクリーン |
+| `o` / `Esc` | スライド一覧 |
+
+表紙から進むと右下でタイマーが動き、表紙に戻るとリセットされます。
+URL の `#12` で 12 枚目から開けます。
+
+## 見た目を変える
+
+`--css` で CSS 変数を上書きできます。
+
+```css
+:root {
+  --slide-accent: #7b42bc;   /* 進捗バー */
+  --slide-accent-2: #ff6a00; /* 太字・強調 */
+  --slide-display-font: 'Hiragino Sans', sans-serif;
+}
+```
+
+## ライブラリとして使う
+
+```js
+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

@@ -0,0 +1,197 @@
+"use strict";
+// スライドのナビゲーション。ippon が HTML に埋め込む。
+//   → / Space / PageDown / クリック右側     次へ
+//   ← / PageUp / クリック左側              前へ
+//   Home / End                              最初 / 最後
+//   f                                       フルスクリーン
+//   o / Esc                                 一覧
+(() => {
+    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;
+    }
+    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);
+    }
+    // ---------- 描画 ----------
+    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();
+    }
+    function go(n) {
+        n = clamp(n);
+        if (n === idx)
+            return;
+        idx = n;
+        render();
+        history.replaceState(null, '', '#' + (idx + 1));
+    }
+    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();
+})();