md-review 0.0.1

package/README.md

@@ -0,0 +1,220 @@
+# md-preview
+
+ローカルのMarkdownファイルをブラウザで見やすくプレビューするCLIツール
+
+## 特徴
+
+- 🎨 GitHub風の見やすいデザイン
+- 🌈 シンタックスハイライト対応（highlight.js）
+- ✅ GitHub Flavored Markdown (GFM) サポート
+  - テーブル
+  - タスクリスト
+  - 取り消し線
+- 📁 **ファイルツリー表示** - カレントディレクトリ内の全Markdownファイルを一覧表示
+- 🗂️ **2カラムレイアウト** - 左側にツリー、右側にプレビュー
+- ⚡ 高速な起動（Vite）
+- 🚀 軽量なAPIサーバー（Hono）
+- 📦 TypeScript + React 19
+
+## インストール
+
+```bash
+# 依存パッケージのインストール
+pnpm install
+```
+
+## 使い方
+
+md-previewには**2つのモード**があります：
+
+### 1. 開発モード（推奨）
+
+カレントディレクトリ内の全Markdownファイルをツリー表示し、選択してプレビューできます。
+
+```bash
+# APIサーバーを起動
+node server/index.js &
+
+# 開発サーバーを起動
+pnpm run dev
+```
+
+または、両方同時に起動：
+
+```bash
+# APIサーバーをバックグラウンドで起動
+node server/index.js &
+
+# Viteサーバーを起動（http://localhost:6060 が自動で開きます）
+pnpm run dev
+```
+
+ブラウザで `http://localhost:6060` を開くと、以下のようなUIが表示されます：
+- **左側**: ファイルツリー（カレントディレクトリ内の全Markdownファイル：.md、.markdown）
+- **右側**: 選択されたMarkdownファイルのプレビュー
+
+### 2. CLI モード
+
+特定のMarkdownファイルのみをプレビューします。
+
+```bash
+node bin/md-preview.js <markdown-file-path>
+```
+
+#### 例
+
+```bash
+# サンプルファイルをプレビュー
+node bin/md-preview.js test-samples/sample.md
+
+# 任意のMarkdownファイルをプレビュー
+node bin/md-preview.js ./docs/README.md
+node bin/md-preview.js ~/Documents/notes.md
+```
+
+### オプション
+
+```bash
+# ポート番号を指定
+node bin/md-preview.js --port 8080 --api-port 3000 file.md
+
+# ブラウザを自動的に開かない
+node bin/md-preview.js --no-open file.md
+
+# ヘルプを表示
+node bin/md-preview.js --help
+
+# バージョンを表示
+node bin/md-preview.js --version
+```
+
+## オプション一覧
+
+| オプション | 短縮形 | デフォルト | 説明 |
+|-----------|--------|-----------|------|
+| `--port` | `-p` | `6060` | Viteサーバーのポート番号 |
+| `--api-port` | - | `3030` | APIサーバーのポート番号 |
+| `--no-open` | - | - | ブラウザを自動的に開かない |
+| `--help` | `-h` | - | ヘルプを表示 |
+| `--version` | `-v` | - | バージョンを表示 |
+
+## 起動の流れ
+
+1. CLIコマンドを実行すると、以下のサーバーが起動します：
+   - **APIサーバー（Hono）**: `http://localhost:3030` - Markdownファイルを読み込むAPI
+   - **Viteサーバー**: `http://localhost:6060` - Reactアプリケーション
+
+2. 自動的にブラウザで `http://localhost:6060` が開き、Markdownファイルが表示されます
+
+3. 終了するには `Ctrl+C` を押してください
+
+## 技術スタック
+
+### フロントエンド
+- **React** 19 - UIライブラリ
+- **TypeScript** - 型安全な開発
+- **Vite** - 高速な開発サーバー
+- **react-markdown** - Markdownレンダリング
+- **remark-gfm** - GFM記法サポート
+- **rehype-highlight** - シンタックスハイライト
+- **highlight.js** - コードハイライトライブラリ
+
+### バックエンド
+- **Hono** - 高速で軽量なWebフレームワーク
+- **@hono/node-server** - Node.js用アダプター
+
+### CLI
+- **commander** - コマンドライン引数のパース
+- **chalk** - ターミナル出力の色付け
+- **open** - ブラウザを開く
+
+## プロジェクト構成
+
+```
+md-preview/
+├── bin/
+│   └── md-preview.js           # CLI エントリーポイント
+├── server/
+│   └── index.js                # Hono APIサーバー
+├── src/
+│   ├── components/
+│   │   ├── ErrorDisplay.tsx    # エラー表示
+│   │   └── MarkdownPreview.tsx # Markdownプレビュー
+│   ├── hooks/
+│   │   └── useMarkdown.ts      # Markdown取得フック
+│   ├── styles/
+│   │   └── markdown.css        # Markdownスタイル
+│   ├── App.tsx
+│   ├── main.tsx
+│   └── index.css
+├── test-samples/
+│   └── sample.md               # テスト用サンプル
+├── index.html
+├── vite.config.ts
+├── tsconfig.json
+└── package.json
+```
+
+## サポートするMarkdown記法
+
+### 基本記法
+- 見出し (h1-h6)
+- 段落
+- 強調 (**太字**, *斜体*)
+- リスト（順序付き/順序なし）
+- インラインコード
+- コードブロック（シンタックスハイライト付き）
+- リンク
+- 引用
+- 水平線
+
+### GFM拡張記法
+- テーブル
+- タスクリスト
+- 取り消し線 (~~text~~)
+
+## 開発
+
+### 開発サーバーの起動
+
+```bash
+# Vite開発サーバーのみ起動
+pnpm run dev
+
+# APIサーバーのみ起動
+pnpm run server
+```
+
+### ビルド
+
+```bash
+pnpm run build
+```
+
+## トラブルシューティング
+
+### ポートが既に使用されている
+
+デフォルトのポート（6060, 3030）が既に使用されている場合は、別のポートを指定してください：
+
+```bash
+node bin/md-preview.js --port 8080 --api-port 3000 file.md
+```
+
+### ブラウザが自動的に開かない
+
+`--no-open` オプションを付けずに実行してください。または、手動で以下のURLを開いてください：
+
+```
+http://localhost:6060
+```
+
+### Markdownが表示されない
+
+1. APIサーバーが正常に起動しているか確認してください（`http://localhost:3030/api/health` にアクセス）
+2. ファイルパスが正しいか確認してください
+3. ファイルが読み取り可能か確認してください
+
+## ライセンス
+
+MIT

package/bin/md-review.js

@@ -0,0 +1,170 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process';
+import { resolve, dirname } from 'path';
+import { existsSync, readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import mri from 'mri';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const packageRoot = resolve(__dirname, '..');
+
+const pkg = JSON.parse(readFileSync(resolve(packageRoot, 'package.json'), 'utf-8'));
+
+const SERVER_READY_MESSAGE = 'md-review server started';
+
+// Port validation function
+function validatePort(value, name) {
+  const port = parseInt(value, 10);
+  if (!Number.isInteger(port) || port < 1 || port > 65535) {
+    console.error(`Error: Invalid ${name}: ${value}. Must be between 1 and 65535`);
+    process.exit(1);
+  }
+  return port;
+}
+
+// Check if file has markdown extension
+function isMarkdownFile(filePath) {
+  return filePath.endsWith('.md') || filePath.endsWith('.markdown');
+}
+
+// Parse arguments
+const args = mri(process.argv.slice(2), {
+  alias: {
+    p: 'port',
+    h: 'help',
+    v: 'version'
+  },
+  default: {
+    port: '6060',
+    'api-port': '3030',
+    open: true
+  },
+  boolean: ['help', 'version', 'open']
+});
+
+// Help message
+if (args.help) {
+  console.log(`
+md-review - Review and annotate Markdown files with comments
+
+Usage:
+  md-review [options]              Start in dev mode (browse all markdown files)
+  md-review <file> [options]       Preview a specific markdown file (.md or .markdown)
+
+Options:
+  -p, --port <port>      Vite server port (default: 6060)
+  --api-port <port>      API server port (default: 3030)
+  --no-open              Do not open browser automatically
+  -h, --help             Show this help message
+  -v, --version          Show version number
+
+Examples:
+  md-review                        Start dev mode in current directory
+  md-review README.md              Preview README.md
+  md-review docs/guide.md --port 8080
+`);
+  process.exit(0);
+}
+
+// Version
+if (args.version) {
+  console.log(pkg.version);
+  process.exit(0);
+}
+
+const file = args._[0];
+const port = validatePort(args.port, 'port');
+const apiPort = validatePort(args['api-port'], 'api-port');
+const shouldOpen = args.open;
+
+// Set environment variables
+process.env.API_PORT = apiPort;
+process.env.VITE_PORT = port;
+
+// If file is specified, validate it
+if (file) {
+  const filePath = resolve(file);
+
+  if (!existsSync(filePath)) {
+    console.error(`Error: File not found: ${filePath}`);
+    process.exit(1);
+  }
+
+  if (!isMarkdownFile(filePath)) {
+    console.error(`Error: File must have .md or .markdown extension: ${filePath}`);
+    process.exit(1);
+  }
+
+  process.env.MARKDOWN_FILE_PATH = filePath;
+  console.log(`File: ${filePath}`);
+} else {
+  // Dev mode - browse all markdown files
+  process.env.BASE_DIR = process.cwd();
+  console.log(`Directory: ${process.cwd()}`);
+}
+
+console.log('Starting md-review...');
+console.log(`   API Port: ${apiPort}`);
+console.log(`   Vite Port: ${port}`);
+
+// Start API server
+const apiProcess = spawn('node', ['server/index.js'], {
+  cwd: packageRoot,
+  stdio: ['inherit', 'pipe', 'inherit'],
+  env: process.env
+});
+
+let viteProcess = null;
+let serverReady = false;
+
+// Wait for API server to be ready before starting Vite
+apiProcess.stdout.on('data', (data) => {
+  process.stdout.write(data);
+  const output = data.toString();
+
+  if (!serverReady && output.includes(SERVER_READY_MESSAGE)) {
+    serverReady = true;
+    console.log('Starting Vite dev server...');
+
+    viteProcess = spawn('node', [
+      'node_modules/vite/bin/vite.js',
+      '--port', port,
+      ...(shouldOpen ? ['--open'] : [])
+    ], {
+      cwd: packageRoot,
+      stdio: 'inherit',
+      env: process.env
+    });
+
+    viteProcess.on('error', (err) => {
+      console.error('Vite server error:', err.message);
+    });
+  }
+});
+
+// Handle graceful shutdown
+const shutdown = () => {
+  console.log('\nShutting down...');
+  apiProcess.kill('SIGINT');
+  viteProcess?.kill('SIGINT');
+  process.exit(0);
+};
+
+process.on('SIGINT', shutdown);
+process.on('SIGTERM', shutdown);
+
+// Handle API server exit
+apiProcess.on('exit', (code) => {
+  if (code !== 0 && code !== null) {
+    console.error(`API server exited with code ${code}`);
+  }
+  viteProcess?.kill('SIGINT');
+  process.exit(code || 0);
+});
+
+apiProcess.on('error', (err) => {
+  console.error('Failed to start API server:', err.message);
+  process.exit(1);
+});