md-review 0.0.1 → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 Ryo Matsukawa
+
+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,220 +1,38 @@
-# md-preview
+# md-review
 
-ローカルのMarkdownファイルをブラウザで見やすくプレビューするCLIツール
+English | [日本語](./README-ja.md)
 
-## 特徴
+A CLI tool for reviewing Markdown files with inline comments.
+Comments can be copied and used as feedback for AI agents.
 
-- 🎨 GitHub風の見やすいデザイン
-- 🌈 シンタックスハイライト対応（highlight.js）
-- ✅ GitHub Flavored Markdown (GFM) サポート
-  - テーブル
-  - タスクリスト
-  - 取り消し線
-- 📁 **ファイルツリー表示** - カレントディレクトリ内の全Markdownファイルを一覧表示
-- 🗂️ **2カラムレイアウト** - 左側にツリー、右側にプレビュー
-- ⚡ 高速な起動（Vite）
-- 🚀 軽量なAPIサーバー（Hono）
-- 📦 TypeScript + React 19
+## Features
 
-## インストール
+- Display Markdown in its original format
+- Add comments to specific lines
+- Select files from tree view
 
-```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
-```
-
-## オプション一覧
+## Install
 
-| オプション | 短縮形 | デフォルト | 説明 |
-|-----------|--------|-----------|------|
-| `--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
+```sh
+npm install -g md-review
 ```
 
-## トラブルシューティング
-
-### ポートが既に使用されている
+## Usage
 
-デフォルトのポート（6060, 3030）が既に使用されている場合は、別のポートを指定してください：
-
-```bash
-node bin/md-preview.js --port 8080 --api-port 3000 file.md
+```sh
+md-review README.md
 ```
 
-### ブラウザが自動的に開かない
-
-`--no-open` オプションを付けずに実行してください。または、手動で以下のURLを開いてください：
+### Options
 
+```sh
+-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 help
+-v, --version          Show version
 ```
-http://localhost:6060
-```
-
-### Markdownが表示されない
-
-1. APIサーバーが正常に起動しているか確認してください（`http://localhost:3030/api/health` にアクセス）
-2. ファイルパスが正しいか確認してください
-3. ファイルが読み取り可能か確認してください
 
-## ライセンス
+## License
 
-MIT
+[MIT](./LICENSE)

package/bin/md-review.js

@@ -126,10 +126,11 @@ apiProcess.stdout.on('data', (data) => {
 
   if (!serverReady && output.includes(SERVER_READY_MESSAGE)) {
     serverReady = true;
-    console.log('Starting Vite dev server...');
+    console.log('Starting Vite preview server...');
 
     viteProcess = spawn('node', [
       'node_modules/vite/bin/vite.js',
+      'preview',
       '--port', port,
       ...(shouldOpen ? ['--open'] : [])
     ], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-review",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Review Markdown files in your browser with inline comments",
   "type": "module",
   "bin": {
@@ -35,6 +35,7 @@
   "packageManager": "pnpm@10.23.0",
   "dependencies": {
     "@hono/node-server": "^1.19.6",
+    "@vitejs/plugin-react": "^4.3.4",
     "highlight.js": "^11.11.1",
     "hono": "^4.10.6",
     "mri": "^1.2.0",
@@ -43,16 +44,15 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "vite": "^6.0.3"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
     "concurrently": "^9.2.1",
-    "typescript": "^5.6.3",
-    "vite": "^6.0.3"
+    "typescript": "^5.6.3"
   }
 }

package/server/index.js

@@ -14,6 +14,31 @@ function validatePort(value) {
   return port;
 }
 
+// Try to start server on port, incrementing if busy
+async function startServer(app, port, maxRetries = 10) {
+  for (let i = 0; i < maxRetries; i++) {
+    const tryPort = port + i;
+    try {
+      await new Promise((resolve, reject) => {
+        const server = serve({
+          fetch: app.fetch,
+          port: tryPort
+        });
+        server.once('listening', () => resolve(server));
+        server.once('error', reject);
+      });
+      return tryPort;
+    } catch (err) {
+      if (err.code === 'EADDRINUSE') {
+        console.log(`Port ${tryPort} is in use, trying ${tryPort + 1}...`);
+        continue;
+      }
+      throw err;
+    }
+  }
+  throw new Error(`Could not find an available port after ${maxRetries} attempts`);
+}
+
 const app = new Hono();
 const PORT = validatePort(process.env.API_PORT || 3030);
 const VITE_PORT = process.env.VITE_PORT || 6060;
@@ -58,12 +83,12 @@ async function scanMarkdownFiles(dir, baseDir = dir) {
   return files;
 }
 
-// CORS設定
+// CORS configuration
 app.use('/*', cors({
   origin: CORS_ORIGIN
 }));
 
-// ヘルスチェック
+// Health check
 app.get('/api/health', (c) => {
   return c.json({ status: 'ok' });
 });
@@ -81,7 +106,7 @@ app.get('/api/files', async (c) => {
   }
 });
 
-// Markdownファイル取得API (CLI mode)
+// Get markdown file API (CLI mode)
 app.get('/api/markdown', async (c) => {
   if (!MARKDOWN_FILE_PATH) {
     return c.json({
@@ -126,10 +151,11 @@ app.get('/api/markdown/:path{.+}', async (c) => {
 });
 
 const SERVER_READY_MESSAGE = 'md-review server started';
-console.log(`API Server running on http://localhost:${PORT}`);
-console.log(SERVER_READY_MESSAGE);
 
-serve({
-  fetch: app.fetch,
-  port: PORT
+startServer(app, PORT).then((actualPort) => {
+  console.log(`API Server running on http://localhost:${actualPort}`);
+  console.log(SERVER_READY_MESSAGE);
+}).catch((err) => {
+  console.error('Failed to start server:', err.message);
+  process.exit(1);
 });