mdv-live 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.3.0] - 2026-01-31
+
+### Added
+
+- Initial Node.js version (rewrite from Python mdv-live)
+- Express server with WebSocket for live reload
+- markdown-it for standard Markdown rendering
+- @marp-team/marp-core for Marp slide rendering
+- File tree navigation with lazy loading
+- Edit mode with textarea editor
+- Dark/Light theme support
+- Syntax highlighting with highlight.js
+- Mermaid diagram support
+- PDF output via browser print
+- File operations (create, delete, rename, move, upload)
+- Keyboard shortcuts for common actions
+- Task list (checkbox) support with markdown-it-task-lists
+- Range Request support for video/audio streaming
+- WebSocket tree_update broadcast for multi-client sync
+- Comprehensive security tests (76 tests)
+
+### Security
+
+- Path traversal prevention (absolute path, `..`, null byte)
+- Filename sanitization for uploads
+- Unified validatePath() for all API endpoints
+
+### Marp Features
+
+- Full compatibility with marp-core
+- Official themes: default, gaia, uncover
+- All directives: paginate, header, footer, backgroundColor, etc.
+- Background images and split backgrounds
+- KaTeX math support
+- Slide navigation with arrow keys
+
+### CLI Features
+
+- Port auto-increment when port is in use
+- Server list (`mdv -l`)
+- Server kill (`mdv -k PID` or `mdv -k -a`)
+- PDF conversion (`mdv --pdf file.md`)
+- No-browser mode (`mdv --no-browser`)

package/LICENSE

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

@@ -0,0 +1,240 @@
+# MDV - Markdown Viewer with Marp Support
+
+ファイルツリー + ライブプレビュー + Marp完全対応のMarkdownビューア
+
+[![npm version](https://badge.fury.io/js/mdv-live.svg)](https://www.npmjs.com/package/mdv-live)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 📁 左側にフォルダツリー表示（遅延読み込み対応）
+- 📄 Markdownをリアルタイムレンダリング
+- 🎬 **Marp完全対応**（公式テーマ・ディレクティブ・数式）
+- 🔄 ファイル更新時に自動リロード（WebSocket）
+- 🎨 シンタックスハイライト（highlight.js）
+- 📊 Mermaid図のレンダリング
+- 🌙 ダーク/ライトテーマ切り替え
+- ✏️ インラインエディタ（Cmd+E）
+- ✅ タスクリスト（チェックボックス）対応
+- 📥 PDF出力（Cmd+P）
+- 🎬 動画/音声ストリーミング再生（Range Request対応）
+- 📤 ファイルアップロード（ドラッグ&ドロップ）
+- 🔒 セキュリティ強化（パストラバーサル防止）
+
+## Installation
+
+```bash
+# グローバルインストール（推奨）
+npm install -g mdv-live
+
+# または npx で直接実行
+npx mdv-live
+```
+
+## Usage
+
+```bash
+# カレントディレクトリを表示
+mdv
+
+# 特定のディレクトリを表示
+mdv ./docs
+
+# 特定のファイルを開く
+mdv README.md
+
+# ポート指定（デフォルト: 8642）
+mdv -p 9000
+
+# ブラウザを自動で開かない
+mdv --no-browser
+
+# 起動中のサーバー一覧
+mdv -l
+
+# サーバーを停止（PID指定）
+mdv -k 12345
+
+# 全サーバーを停止
+mdv -k -a
+
+# PDFに変換
+mdv --pdf slide.md
+mdv --pdf slide.md -o output.pdf
+
+# バージョン表示
+mdv -v
+```
+
+### ポート自動増分
+
+ポートが使用中の場合、自動的に次のポート番号を試します。
+
+```
+$ mdv -p 8642
+ポート 8642 は使用中です。8643 を試します...
+MDV server running at http://localhost:8643
+```
+
+## macOS Finder Integration
+
+macOSで`.md`ファイルをダブルクリックしてMDVで開けるようにする設定です。
+
+### セットアップスクリプトを使用（推奨）
+
+```bash
+# mdvがインストールされていることを確認
+which mdv
+
+# セットアップスクリプトを実行
+curl -fsSL https://raw.githubusercontent.com/panhouse/mdv/main/scripts/setup-macos-app.sh | bash
+```
+
+または、リポジトリをクローンしている場合：
+
+```bash
+npm run setup-macos
+```
+
+### デフォルトアプリに設定
+
+1. Finderで任意の`.md`ファイルを右クリック
+2. 「情報を見る」を選択
+3. 「このアプリケーションで開く」で「MDV」を選択
+4. 「すべてを変更...」をクリック
+
+## Marp Support
+
+`marp: true` フロントマターを含むMarkdownファイルは自動的にMarpスライドとしてレンダリングされます。
+
+```markdown
+---
+marp: true
+theme: default
+paginate: true
+---
+
+# スライドタイトル
+
+内容...
+
+---
+
+# 次のスライド
+
+- 箇条書き
+- 数式: $E = mc^2$
+```
+
+### サポートされるMarp機能
+
+- **テーマ**: default, gaia, uncover
+- **ディレクティブ**: paginate, header, footer, backgroundColor, etc.
+- **画像構文**: `![bg]`, `![w:100px]`, `![bg left]`
+- **数式**: KaTeX対応（インライン `$...$`、ブロック `$$...$$`）
+
+## Keyboard Shortcuts
+
+| ショートカット | 機能 |
+|---------------|------|
+| Cmd/Ctrl + B | サイドバー表示切替 |
+| Cmd/Ctrl + E | 編集モード切替 |
+| Cmd/Ctrl + S | 保存（編集モード時） |
+| Cmd/Ctrl + P | PDF出力 |
+| Cmd/Ctrl + W | タブを閉じる |
+| ← / → | スライド移動（Marp時） |
+| F2 | ファイル名変更 |
+| Delete | ファイル削除 |
+
+## API Endpoints
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/file` | GET | ファイル内容取得 |
+| `/api/file` | POST | ファイル保存 |
+| `/api/file` | DELETE | ファイル/ディレクトリ削除 |
+| `/api/tree` | GET | ファイルツリー取得 |
+| `/api/tree/expand` | GET | ディレクトリ展開（遅延読み込み） |
+| `/api/mkdir` | POST | ディレクトリ作成 |
+| `/api/move` | POST | ファイル移動/リネーム |
+| `/api/download` | GET | ファイルダウンロード |
+| `/api/upload` | POST | ファイルアップロード |
+| `/api/info` | GET | サーバー情報 |
+
+## Tech Stack
+
+- **Backend**: Node.js + Express
+- **Frontend**: Vanilla JavaScript
+- **Markdown**: markdown-it + markdown-it-task-lists
+- **Marp**: @marp-team/marp-core
+- **WebSocket**: ws
+- **File Watching**: chokidar
+- **Syntax Highlight**: highlight.js
+
+## Development
+
+```bash
+# Clone repository
+git clone https://github.com/panhouse/mdv.git
+cd mdv
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Run tests
+npm test
+```
+
+## Project Structure
+
+```
+mdv/
+├── bin/mdv.js           # CLI entry point
+├── src/
+│   ├── server.js        # Express server setup
+│   ├── watcher.js       # File watching (chokidar)
+│   ├── api/
+│   │   ├── file.js      # File operations API
+│   │   ├── tree.js      # File tree API
+│   │   └── upload.js    # Upload API
+│   ├── rendering/
+│   │   ├── index.js     # Rendering entry
+│   │   ├── markdown.js  # Markdown rendering
+│   │   └── marp.js      # Marp rendering
+│   ├── utils/
+│   │   ├── fileTypes.js # File type detection
+│   │   └── path.js      # Path security utilities
+│   └── static/          # Frontend files
+│       ├── index.html
+│       ├── app.js
+│       └── styles.css
+├── scripts/
+│   └── setup-macos-app.sh  # macOS app setup
+└── tests/               # Test files
+```
+
+## Requirements
+
+- Node.js 18+
+
+## Migration from Python version
+
+以前のPython版（`pip install mdv-live`）からの移行：
+
+```bash
+# Python版をアンインストール
+pip uninstall mdv-live
+
+# Node.js版をインストール
+npm install -g mdv-live
+
+# macOSアプリを再設定（必要な場合）
+npm run setup-macos
+```
+
+## License
+
+MIT

package/bin/mdv.js

@@ -0,0 +1,400 @@
+#!/usr/bin/env node
+
+/**
+ * MDV CLI - Markdown Viewer with Marp support
+ * Compatible with the original Python mdv-live CLI
+ */
+
+import { createMdvServer } from '../src/server.js';
+import { parseArgs } from 'node:util';
+import { execSync, spawn } from 'child_process';
+import { createServer as createNetServer } from 'net';
+import path from 'path';
+import fs from 'fs/promises';
+import open from 'open';
+
+const DEFAULT_PORT = 8642;
+
+// Parse command line arguments
+const options = {
+  port: {
+    type: 'string',
+    short: 'p',
+  },
+  'no-browser': {
+    type: 'boolean',
+    default: false
+  },
+  list: {
+    type: 'boolean',
+    short: 'l',
+    default: false
+  },
+  kill: {
+    type: 'boolean',
+    short: 'k',
+    default: false
+  },
+  all: {
+    type: 'boolean',
+    short: 'a',
+    default: false
+  },
+  pdf: {
+    type: 'boolean',
+    default: false
+  },
+  output: {
+    type: 'string',
+    short: 'o',
+  },
+  help: {
+    type: 'boolean',
+    short: 'h',
+    default: false
+  },
+  version: {
+    type: 'boolean',
+    short: 'v',
+    default: false
+  }
+};
+
+function showHelp() {
+  console.log(`
+MDV - Markdown Viewer with file tree + live preview + Marp support
+
+Usage: mdv [options] [path]
+
+Arguments:
+  path                Directory or file path to view (default: current directory)
+
+Server Options:
+  -p, --port <n>      Server port (default: ${DEFAULT_PORT})
+  --no-browser        Don't open browser automatically
+
+Server Management:
+  -l, --list          List running MDV servers
+  -k, --kill [PID]    Stop server (-k -a for all, -k <PID> for specific)
+  -a, --all           Use with -k to stop all servers
+
+PDF Conversion:
+  --pdf               Convert markdown file to PDF
+  -o, --output <file> Output PDF file path
+
+Other:
+  -h, --help          Show this help message
+  -v, --version       Show version number
+
+Examples:
+  mdv                    Start viewer in current directory
+  mdv /path/to/dir       Start viewer in specified directory
+  mdv README.md          Open specific file
+  mdv --pdf README.md    Convert markdown to PDF
+  mdv -p 3000            Start on port 3000
+  mdv -l                 List running servers
+  mdv -k -a              Stop all servers
+`);
+}
+
+/**
+ * Get running MDV server processes
+ */
+function getMdvProcesses() {
+  try {
+    const result = execSync('lsof -i -P -n 2>/dev/null || true', { encoding: 'utf-8' });
+    const processes = [];
+
+    for (const line of result.split('\n')) {
+      if (!line.includes('node') || !line.includes('LISTEN')) continue;
+
+      const parts = line.split(/\s+/);
+      if (parts.length < 9) continue;
+
+      const pid = parts[1];
+
+      // Check if this is an MDV process
+      try {
+        const cmdResult = execSync(`ps -p ${pid} -o command= 2>/dev/null || true`, { encoding: 'utf-8' }).trim();
+        if (!cmdResult.toLowerCase().includes('mdv')) continue;
+
+        // Extract port
+        const portInfo = parts[8] || '';
+        let port = '';
+        if (portInfo.includes(':')) {
+          port = portInfo.split(':').pop().split('->')[0];
+        }
+
+        const displayCmd = cmdResult.length > 60 ? cmdResult.slice(0, 60) + '...' : cmdResult;
+        processes.push({ pid, port, command: displayCmd });
+      } catch {
+        continue;
+      }
+    }
+
+    return processes;
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * List running MDV servers
+ */
+function listServers() {
+  const processes = getMdvProcesses();
+
+  if (processes.length === 0) {
+    console.log('稼働中のMDVサーバーはありません');
+    return 0;
+  }
+
+  console.log(`稼働中のMDVサーバー: ${processes.length}件`);
+  console.log('-'.repeat(60));
+  console.log(`${'PID'.padEnd(8)} ${'Port'.padEnd(8)} Command`);
+  console.log('-'.repeat(60));
+
+  for (const proc of processes) {
+    console.log(`${proc.pid.padEnd(8)} ${proc.port.padEnd(8)} ${proc.command}`);
+  }
+
+  console.log('-'.repeat(60));
+  console.log('\n停止: mdv -k -a (全停止) / mdv -k <PID> (個別停止)');
+  return 0;
+}
+
+/**
+ * Kill MDV server(s)
+ */
+function killServers(target, killAll) {
+  if (target) {
+    // Kill specific PID
+    try {
+      execSync(`kill ${target}`, { encoding: 'utf-8' });
+      console.log(`PID ${target} を停止しました`);
+      return 0;
+    } catch {
+      console.log(`PID ${target} の停止に失敗しました`);
+      return 1;
+    }
+  }
+
+  if (!killAll) {
+    console.log('全サーバーを停止するには -a オプションが必要です');
+    console.log('   mdv -k -a     全サーバーを停止');
+    console.log('   mdv -k <PID>  特定のサーバーを停止');
+    return 1;
+  }
+
+  // Kill all servers
+  const processes = getMdvProcesses();
+
+  if (processes.length === 0) {
+    console.log('稼働中のMDVサーバーはありません');
+    return 0;
+  }
+
+  console.log(`${processes.length}件のMDVサーバーを停止します...`);
+
+  let killed = 0;
+  for (const proc of processes) {
+    try {
+      execSync(`kill ${proc.pid}`, { encoding: 'utf-8' });
+      console.log(`  PID ${proc.pid} (port ${proc.port}) を停止`);
+      killed++;
+    } catch {
+      console.log(`  PID ${proc.pid} の停止に失敗`);
+    }
+  }
+
+  console.log(`\n完了: ${killed}/${processes.length} 件を停止しました`);
+  return killed === processes.length ? 0 : 1;
+}
+
+/**
+ * Convert markdown to PDF using marp-cli
+ */
+async function convertToPdf(inputPath, outputPath) {
+  const resolved = path.resolve(inputPath);
+
+  try {
+    await fs.access(resolved);
+  } catch {
+    console.error(`Error: File not found: ${inputPath}`);
+    return 1;
+  }
+
+  const ext = path.extname(resolved).toLowerCase();
+  if (!['.md', '.markdown'].includes(ext)) {
+    console.error(`Error: Not a markdown file: ${inputPath}`);
+    return 1;
+  }
+
+  const defaultOutput = resolved.replace(/\.(md|markdown)$/i, '.pdf');
+  const finalOutput = outputPath ? path.resolve(outputPath) : defaultOutput;
+
+  console.log(`Converting ${inputPath} to PDF...`);
+
+  try {
+    // Use marp-cli for PDF conversion (supports Marp slides)
+    execSync(`npx @marp-team/marp-cli "${resolved}" --pdf -o "${finalOutput}"`, {
+      encoding: 'utf-8',
+      stdio: 'inherit'
+    });
+    console.log(`PDF saved: ${finalOutput}`);
+    return 0;
+  } catch (err) {
+    console.error('Error: PDF conversion failed');
+    console.error('Make sure Node.js and npx are installed');
+    return 1;
+  }
+}
+
+/**
+ * Check if a port is available
+ */
+async function isPortAvailable(port) {
+  return new Promise((resolve) => {
+    const server = createNetServer();
+    server.once('error', () => resolve(false));
+    server.once('listening', () => {
+      server.close(() => resolve(true));
+    });
+    server.listen(port);
+  });
+}
+
+/**
+ * Find an available port starting from the given port
+ */
+async function findAvailablePort(startPort, maxRetries = 100) {
+  for (let i = 0; i < maxRetries; i++) {
+    const port = startPort + i;
+    const available = await isPortAvailable(port);
+    if (available) {
+      return port;
+    }
+    if (i > 0) {
+      console.log(`ポート ${port - 1} は使用中です。${port} を試します...`);
+    }
+  }
+  return null;
+}
+
+/**
+ * Start MDV server with auto port increment
+ */
+async function startViewer(targetPath, startPort, openBrowser) {
+  let rootDir = process.cwd();
+  let initialFile = null;
+
+  if (targetPath && targetPath !== '.') {
+    const resolved = path.resolve(targetPath);
+    try {
+      const stats = await fs.stat(resolved);
+      if (stats.isDirectory()) {
+        rootDir = resolved;
+      } else if (stats.isFile()) {
+        rootDir = path.dirname(resolved);
+        initialFile = path.basename(resolved);
+      }
+    } catch {
+      console.error(`Error: Path not found: ${targetPath}`);
+      process.exit(1);
+    }
+  }
+
+  // Find available port
+  const port = await findAvailablePort(startPort);
+  if (!port) {
+    console.error('Error: 利用可能なポートが見つかりませんでした');
+    process.exit(1);
+  }
+
+  if (port !== startPort) {
+    console.log(`ポート ${startPort} は使用中のため、${port} で起動します`);
+  }
+
+  // Create and start server
+  const mdv = createMdvServer({ rootDir, port });
+  await mdv.start();
+
+  const url = initialFile
+    ? `http://localhost:${port}?file=${encodeURIComponent(initialFile)}`
+    : `http://localhost:${port}`;
+
+  console.log(`
+  MDV - Markdown Viewer with Marp support
+
+  Server running at: ${url}
+  Root directory: ${rootDir}
+
+  Press Ctrl+C to stop
+`);
+
+  if (openBrowser) {
+    await open(url);
+  }
+}
+
+async function main() {
+  let args;
+  try {
+    args = parseArgs({
+      options,
+      allowPositionals: true,
+      strict: false
+    });
+  } catch (err) {
+    console.error('Error parsing arguments:', err.message);
+    showHelp();
+    process.exit(1);
+  }
+
+  const { values, positionals } = args;
+
+  // Help
+  if (values.help) {
+    showHelp();
+    process.exit(0);
+  }
+
+  // Version
+  if (values.version) {
+    console.log('mdv v0.3.0');
+    process.exit(0);
+  }
+
+  // List servers
+  if (values.list) {
+    process.exit(listServers());
+  }
+
+  // Kill servers
+  if (values.kill) {
+    const pid = positionals[0] || null;
+    process.exit(killServers(pid, values.all));
+  }
+
+  // PDF conversion
+  if (values.pdf) {
+    const inputPath = positionals[0];
+    if (!inputPath) {
+      console.error('Error: --pdf requires a markdown file path');
+      process.exit(1);
+    }
+    process.exit(await convertToPdf(inputPath, values.output));
+  }
+
+  // Default: start viewer
+  const targetPath = positionals[0] || '.';
+  const port = parseInt(values.port, 10) || DEFAULT_PORT;
+  const openBrowser = !values['no-browser'];
+
+  await startViewer(targetPath, port, openBrowser);
+}
+
+main().catch(err => {
+  console.error('Error:', err.message);
+  process.exit(1);
+});