ippon-slides 0.1.0 → 0.1.2

package/src/highlight.js

@@ -1,113 +0,0 @@
-// コードのハイライト。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/src/index.js

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

package/src/markdown.js

@@ -1,232 +0,0 @@
-// 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[i])
-}
-
-// ---------------------------------------------------------------
-// block
-// ---------------------------------------------------------------
-
-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()
-      html += `<h${h[1].length}>${inline(h[2])}</h${h[1].length}>`
-      continue
-    }
-
-    if (LIST_ITEM.test(line) && !line.startsWith('-# ')) {
-      flush()
-      const items = []
-      while (i < lines.length && LIST_ITEM.test(lines[i])) {
-        const 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) {
-        style += `background:${esc(BG[bg[1]] || bg[1])};`
-        if (bg[1] === '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 head = parts[0].match(/^\s*(#{1,3} .*)\n/)
-    const left = head ? parts[0].replace(head[0], '') : parts[0]
-    html =
-      (head ? blocks(head[1]) : '') +
-      `<div class="cols"><div>${blocks(left)}</div><div>${blocks(parts[1])}</div></div>`
-  } else {
-    html = blocks(body)
-  }
-
-  return `<section class="${classes.join(' ')}"${style ? ` style="${style}"` : ''}>${html}</section>`
-}
-
-export function frontmatter(md) {
-  const m = md.replace(/^/, '').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/src/pdf.js

@@ -1,89 +0,0 @@
-// 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 {string} html  file:// URL の画像で組み立てた HTML
- * @param {string} out   出力する PDF のパス
- * @param {object} opts
- * @param {string} [opts.browserPath]
- */
-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/src/render.js

@@ -1,64 +0,0 @@
-// スライドの 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
-  })
-}
-
-/**
- * @param {string} md          Markdown
- * @param {object} opts
- * @param {string} opts.baseDir 画像の相対パスの基準（= Markdown のあるディレクトリ）
- * @param {string} [opts.outDir] 出力先ディレクトリ。省略すると画像は file:// URL になる
- * @param {string} [opts.css]   追加の CSS（--css）
- * @returns {{ html: string, count: number }}
- */
-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 }
-}