ippon-slides 0.0.0-stage → 0.1.0

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,136 @@
-# 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' })
+```
+
+## License
+
+MIT

package/assets/deck.js

@@ -0,0 +1,211 @@
+// スライドのナビゲーション。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
+    }
+    if (startedAt === null) startedAt = Date.now()
+    if (!ticking) {
+      ticking = setInterval(function () {
+        timerEl.textContent = fmt(Date.now() - startedAt)
+      }, 500)
+    }
+    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
+    }
+    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 割で前へ（リンクと文字選択は邪魔しない）
+  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()
+})()