md-lv 1.0.0

package/public/styles/modern.css

@@ -0,0 +1,289 @@
+/* ==========================================================================
+   markdown-viewer Modern Styles
+   Dark mode support and enhanced UI
+   ========================================================================== */
+
+/* ============================================
+   CSS Custom Properties (Light Theme Default)
+   ============================================ */
+:root {
+  --color-bg: #ffffff;
+  --color-bg-secondary: #f6f8fa;
+  --color-text: #24292e;
+  --color-text-secondary: #586069;
+  --color-text-muted: #6a737d;
+  --color-link: #0366d6;
+  --color-border: #e1e4e8;
+  --color-border-strong: #c6cbd1;
+  --color-code-bg: #f6f8fa;
+  --color-blockquote-border: #dfe2e5;
+  --color-success: #28a745;
+  --color-warning: #ffc107;
+  --color-error: #dc3545;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.25s ease;
+}
+
+/* ============================================
+   Dark Theme
+   ============================================ */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #0d1117;
+    --color-bg-secondary: #161b22;
+    --color-text: #c9d1d9;
+    --color-text-secondary: #8b949e;
+    --color-text-muted: #6e7681;
+    --color-link: #58a6ff;
+    --color-border: #30363d;
+    --color-border-strong: #484f58;
+    --color-code-bg: #161b22;
+    --color-blockquote-border: #3b434b;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+  }
+}
+
+/* ============================================
+   Base Overrides
+   ============================================ */
+body {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+}
+
+a {
+  color: var(--color-link);
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-link);
+  opacity: 0.8;
+}
+
+/* ============================================
+   Breadcrumbs Enhancement
+   ============================================ */
+#breadcrumbs {
+  background-color: var(--color-bg-secondary);
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 24px;
+  border: 1px solid var(--color-border);
+}
+
+#breadcrumbs a {
+  color: var(--color-link);
+}
+
+#breadcrumbs .current {
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+/* ============================================
+   Code Blocks Enhancement
+   ============================================ */
+pre {
+  background-color: var(--color-code-bg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+code {
+  background-color: var(--color-code-bg);
+}
+
+/* Dark mode syntax highlighting adjustments */
+@media (prefers-color-scheme: dark) {
+  .hljs {
+    background: var(--color-code-bg) !important;
+  }
+}
+
+/* ============================================
+   Directory Listing Enhancement
+   ============================================ */
+.directory-listing {
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.directory-listing li {
+  background-color: var(--color-bg);
+  border-bottom: 1px solid var(--color-border);
+  transition: background-color var(--transition-fast);
+}
+
+.directory-listing li:last-child {
+  border-bottom: none;
+}
+
+.directory-listing li:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.directory-listing li a {
+  display: block;
+  padding: 8px 0;
+}
+
+.directory-listing .size {
+  color: var(--color-text-muted);
+  font-size: 0.85em;
+  margin-left: auto;
+}
+
+/* Folder icons */
+.directory-listing li.folder::before {
+  content: '📁';
+  margin-right: 8px;
+}
+
+.directory-listing li.parent::before {
+  content: '⬆️';
+}
+
+.directory-listing li.file::before {
+  content: '📄';
+  margin-right: 8px;
+}
+
+.directory-listing li.file-md::before {
+  content: '📝';
+  margin-right: 8px;
+}
+
+.directory-listing li.file-code::before {
+  content: '💻';
+  margin-right: 8px;
+}
+
+.directory-listing li.file-image::before {
+  content: '🖼️';
+  margin-right: 8px;
+}
+
+.directory-listing li.file-data::before {
+  content: '📊';
+  margin-right: 8px;
+}
+
+/* Keyboard Navigation Focus */
+.directory-listing li.keyboard-focus {
+  background-color: var(--color-bg-secondary);
+  outline: 2px solid var(--color-link);
+  outline-offset: -2px;
+}
+
+.directory-listing li.keyboard-focus a {
+  color: var(--color-link);
+}
+
+/* ============================================
+   Tables Enhancement
+   ============================================ */
+table {
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+table th {
+  background-color: var(--color-bg-secondary);
+}
+
+table tr {
+  border-top: 1px solid var(--color-border);
+}
+
+table tr:nth-child(2n) {
+  background-color: var(--color-bg-secondary);
+}
+
+/* ============================================
+   Blockquote Enhancement
+   ============================================ */
+blockquote {
+  border-left-color: var(--color-blockquote-border);
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-secondary);
+  padding: 12px 16px;
+  border-radius: 0 6px 6px 0;
+}
+
+/* ============================================
+   Footer Enhancement
+   ============================================ */
+footer {
+  color: var(--color-text-muted);
+  border-top: 1px solid var(--color-border);
+  padding-top: 20px;
+}
+
+footer hr {
+  display: none;
+}
+
+/* ============================================
+   Mermaid Diagram Enhancement
+   ============================================ */
+.mermaid {
+  background-color: var(--color-bg-secondary);
+  padding: 20px;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+}
+
+.mermaid-error {
+  background-color: rgba(220, 53, 69, 0.1);
+  border-color: var(--color-error);
+  color: var(--color-error);
+  padding: 16px;
+}
+
+/* ============================================
+   Scrollbar Styling (Webkit)
+   ============================================ */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-strong);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+
+/* ============================================
+   Focus Styles (Accessibility)
+   ============================================ */
+a:focus,
+button:focus,
+input:focus {
+  outline: 2px solid var(--color-link);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   Print Styles
+   ============================================ */
+@media print {
+  :root {
+    --color-bg: #ffffff;
+    --color-text: #000000;
+  }
+}

package/src/cli.js

@@ -0,0 +1,137 @@
+import { Command } from 'commander';
+import path from 'path';
+import { createServer } from './server.js';
+import { findReadme } from './utils/readme.js';
+import { findAvailablePort } from './utils/port.js';
+
+const program = new Command();
+
+/**
+ * ポート番号を検証
+ * @param {string} value - 入力値
+ * @returns {number} - 検証済みポート番号
+ */
+function validatePort(value) {
+  const port = parseInt(value, 10);
+  if (isNaN(port) || port < 1 || port > 65535) {
+    throw new Error(`Invalid port number: ${value}. Must be between 1 and 65535.`);
+  }
+  return port;
+}
+
+/**
+ * CLI オプションをパースする
+ * @param {string[]} argv - コマンドライン引数
+ * @returns {object} - パースされたオプション
+ */
+export function parseCLI(argv) {
+  // Check if readme subcommand is being used
+  const args = argv.slice(2);
+  const isReadmeCommand = args[0] === 'readme';
+
+  if (isReadmeCommand) {
+    // Parse readme subcommand with its options
+    program
+      .name('mdv readme')
+      .description('Find and display the nearest README.md')
+      .option('-p, --port <number>', 'Server port', validatePort, 3000);
+
+    program.parse(argv);
+    const cmdOptions = program.opts();
+
+    // Handle readme command
+    const readmePath = findReadme(process.cwd());
+
+    if (!readmePath) {
+      console.error('Error: README.md not found');
+      console.error('Searched from:', process.cwd());
+      process.exit(1);
+    }
+
+    const dirPath = path.dirname(readmePath);
+    const fileName = path.basename(readmePath);
+    const port = cmdOptions.port || 3000;
+
+    console.log(`Found: ${readmePath}`);
+
+    const app = createServer({ dir: dirPath });
+
+    app.listen(port, 'localhost', async () => {
+      const url = `http://localhost:${port}/${fileName}`;
+      console.log(`Opening ${url}`);
+
+      // ブラウザを開く
+      try {
+        const open = await import('open');
+        await open.default(url);
+      } catch (err) {
+        console.log(`Please open manually: ${url}`);
+      }
+    });
+
+    // Return empty object since we handled the command
+    return {};
+  }
+
+  // Default: parse as regular server options
+  program
+    .name('mdv')
+    .description('Serve Markdown files as HTML')
+    .version('2.0.0')
+    .option('-p, --port <number>', 'Server port', validatePort, 3000)
+    .option('-H, --host <string>', 'Bind address', 'localhost')
+    .option('-d, --dir <path>', 'Document root directory', '.')
+    .option('--no-watch', 'Disable file watching')
+    .option('-q, --quiet', 'Suppress log output')
+    .option('--debug', 'Enable debug logging')
+    .allowUnknownOption();
+
+  program.parse(argv);
+  return program.opts();
+}
+
+/**
+ * CLI を実行し、サーバーを起動する
+ * @param {string[]} argv - コマンドライン引数
+ */
+export async function run(argv) {
+  try {
+    // サブコマンドがある場合は parseCLI 内で処理される
+    const args = argv.slice(2);
+    if (args[0] === 'readme') {
+      parseCLI(argv);
+      return;
+    }
+
+    const options = parseCLI(argv);
+    const app = createServer(options);
+
+    // 空きポートを検索
+    let actualPort;
+    try {
+      actualPort = await findAvailablePort(options.port, 10, options.quiet);
+    } catch (err) {
+      console.error(`Error: ${err.message}`);
+      process.exit(1);
+    }
+
+    // 元のポートと異なる場合は通知
+    if (actualPort !== options.port && !options.quiet) {
+      console.log(`Port ${options.port} is in use.`);
+    }
+
+    app.listen(actualPort, options.host, () => {
+      if (!options.quiet) {
+        console.log(`mdv running at http://${options.host}:${actualPort}`);
+        console.log(`Document root: ${options.dir}`);
+        if (options.debug) {
+          console.log('Debug mode enabled');
+          console.log('Options:', { ...options, port: actualPort });
+        }
+      }
+    });
+  } catch (error) {
+    console.error(`Error: ${error.message}`);
+    process.exit(1);
+  }
+}

package/src/index.js

@@ -0,0 +1,15 @@
+import { createServer } from './server.js';
+import { parseCLI } from './cli.js';
+
+export { createServer, parseCLI };
+
+// CLI から直接実行された場合
+if (process.argv[1] && process.argv[1].includes('index.js')) {
+  const options = parseCLI(process.argv);
+  const app = createServer(options);
+
+  app.listen(parseInt(options.port, 10), options.host, () => {
+    console.log(`mdv running at http://${options.host}:${options.port}`);
+    console.log(`Document root: ${options.dir}`);
+  });
+}

package/src/middleware/error.js

@@ -0,0 +1,118 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { logger } from '../utils/logger.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// エラーテンプレートを読み込み
+let errorTemplate;
+try {
+  const templatePath = path.join(__dirname, '../../templates/error.html');
+  errorTemplate = fs.readFileSync(templatePath, 'utf-8');
+} catch {
+  // テンプレートが読み込めない場合のフォールバック
+  errorTemplate = `
+    <!DOCTYPE html>
+    <html>
+    <head><title>{{title}}</title></head>
+    <body>
+      <h1>{{statusCode}} - {{title}}</h1>
+      <p>{{message}}</p>
+      <a href="/">Go to Home</a>
+    </body>
+    </html>
+  `;
+}
+
+/**
+ * エラーページをレンダリング
+ * @param {object} data - テンプレートデータ
+ * @returns {string} - レンダリング済み HTML
+ */
+function renderErrorPage(data) {
+  let html = errorTemplate;
+
+  // {{#if details}} ... {{/if}} の処理
+  if (data.details) {
+    html = html.replace(/\{\{#if details\}\}([\s\S]*?)\{\{\/if\}\}/g, '$1');
+  } else {
+    html = html.replace(/\{\{#if details\}\}[\s\S]*?\{\{\/if\}\}/g, '');
+  }
+
+  // 変数置換
+  for (const [key, value] of Object.entries(data)) {
+    const regex = new RegExp(`\\{\\{${key}\\}\\}`, 'g');
+    html = html.replace(regex, value ?? '');
+  }
+
+  return html;
+}
+
+/**
+ * 404 ハンドラ
+ */
+export function notFoundHandler(req, res, next) {
+  logger.warn(`404 Not Found: ${req.path}`, { method: req.method, ip: req.ip });
+
+  res.status(404);
+  const html = renderErrorPage({
+    statusCode: '404',
+    title: 'Page Not Found',
+    message: `The requested path "${req.path}" was not found on this server.`,
+    details: null
+  });
+  res.type('html').send(html);
+}
+
+/**
+ * グローバルエラーハンドラ
+ */
+export function errorHandler(err, req, res, next) {
+  // ステータスコードを決定
+  const statusCode = err.statusCode || err.status || 500;
+
+  // エラーをログに記録
+  logger.error(`Error ${statusCode}: ${err.message}`, {
+    path: req.path,
+    method: req.method,
+    stack: process.env.NODE_ENV !== 'production' ? err.stack : undefined
+  });
+
+  res.status(statusCode);
+
+  // 本番環境ではスタックトレースを隠す
+  const isProduction = process.env.NODE_ENV === 'production';
+
+  const html = renderErrorPage({
+    statusCode: String(statusCode),
+    title: getErrorTitle(statusCode),
+    message: isProduction && statusCode >= 500
+      ? 'An internal error occurred. Please try again later.'
+      : err.message,
+    details: !isProduction && err.stack ? err.stack : null
+  });
+
+  res.type('html').send(html);
+}
+
+/**
+ * ステータスコードからエラータイトルを取得
+ */
+function getErrorTitle(statusCode) {
+  const titles = {
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    403: 'Forbidden',
+    404: 'Not Found',
+    405: 'Method Not Allowed',
+    408: 'Request Timeout',
+    429: 'Too Many Requests',
+    500: 'Internal Server Error',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable',
+    504: 'Gateway Timeout'
+  };
+  return titles[statusCode] || 'Error';
+}

package/src/middleware/security.js

@@ -0,0 +1,49 @@
+/**
+ * セキュリティヘッダーミドルウェア
+ */
+export function securityHeaders(req, res, next) {
+  // Content Security Policy
+  res.setHeader('Content-Security-Policy', [
+    "default-src 'self'",
+    "script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net",
+    "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net",
+    "font-src 'self' https://cdn.jsdelivr.net data:",
+    "img-src 'self' data: https:",
+    "connect-src 'self'"
+  ].join('; '));
+
+  // その他のセキュリティヘッダー
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader('X-Frame-Options', 'DENY');
+  res.setHeader('X-XSS-Protection', '1; mode=block');
+  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
+
+  // キャッシュ制御（開発向けに無効化）
+  res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
+  res.setHeader('Pragma', 'no-cache');
+
+  next();
+}
+
+/**
+ * パストラバーサル検出ミドルウェア
+ */
+export function pathTraversalGuard(req, res, next) {
+  const suspiciousPatterns = [
+    /\.\.\//,           // ../
+    /\.\.\\/,           // ..\
+    /%2e%2e[\/\\]/i,    // URL encoded ../
+    /%252e%252e/i,      // Double URL encoded
+    /\0/,               // Null byte
+  ];
+
+  const path = req.path;
+
+  for (const pattern of suspiciousPatterns) {
+    if (pattern.test(path)) {
+      return res.status(403).send('Access denied: Suspicious path pattern detected');
+    }
+  }
+
+  next();
+}

package/src/routes/api.js

@@ -0,0 +1,92 @@
+import { Router } from 'express';
+import fs from 'fs/promises';
+import path from 'path';
+import { validatePath } from '../utils/path.js';
+
+const router = Router();
+
+/**
+ * 再帰的にファイル一覧を取得
+ * @param {string} dir - ディレクトリパス
+ * @param {string} baseDir - ベースディレクトリ（相対パス計算用）
+ * @param {number} maxDepth - 最大深度
+ * @param {number} currentDepth - 現在の深度
+ * @returns {Promise<string[]>} - ファイルパスの配列
+ */
+async function getAllFiles(dir, baseDir, maxDepth = 5, currentDepth = 0) {
+  if (currentDepth >= maxDepth) return [];
+
+  const files = [];
+
+  try {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      // 隠しファイル・ディレクトリをスキップ
+      if (entry.name.startsWith('.')) continue;
+
+      // node_modules をスキップ
+      if (entry.name === 'node_modules') continue;
+
+      const fullPath = path.join(dir, entry.name);
+      const relativePath = '/' + path.relative(baseDir, fullPath);
+
+      if (entry.isDirectory()) {
+        const subFiles = await getAllFiles(fullPath, baseDir, maxDepth, currentDepth + 1);
+        files.push(...subFiles);
+      } else {
+        files.push(relativePath);
+      }
+    }
+  } catch (error) {
+    // ディレクトリ読み取りエラーは無視
+  }
+
+  return files;
+}
+
+/**
+ * 検索 API エンドポイント
+ * GET /api/search?q=query&dir=/path
+ */
+router.get('/api/search', async (req, res) => {
+  try {
+    const { q, dir = '/' } = req.query;
+
+    if (!q || typeof q !== 'string' || q.length < 1) {
+      return res.json({ results: [], total: 0 });
+    }
+
+    const docRoot = req.app.get('docRoot');
+
+    let searchDir;
+    try {
+      searchDir = validatePath(dir, docRoot);
+    } catch (error) {
+      return res.status(400).json({ error: 'Invalid directory path' });
+    }
+
+    // ファイル一覧を取得
+    const files = await getAllFiles(searchDir, docRoot);
+
+    // クエリでフィルタ（大文字小文字を区別しない）
+    const query = q.toLowerCase();
+    const results = files.filter(f => {
+      const fileName = path.basename(f).toLowerCase();
+      const filePath = f.toLowerCase();
+      return fileName.includes(query) || filePath.includes(query);
+    });
+
+    // 結果を制限（最大50件）
+    res.json({
+      results: results.slice(0, 50),
+      total: results.length,
+      query: q
+    });
+  } catch (error) {
+    console.error('Search error:', error);
+    res.status(500).json({ error: 'Search failed' });
+  }
+});
+
+export default router;