mdbrowse-cli 0.1.0

package/src/renderer.js

@@ -0,0 +1,170 @@
+import path from 'path';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkHtml from 'remark-html';
+import rehypeKatex from 'rehype-katex';
+import rehypeStringify from 'rehype-stringify';
+import matter from 'gray-matter';
+import { createHighlighter } from 'shiki';
+
+let highlighterPromise = null;
+
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['github-dark', 'github-light'],
+      langs: [
+        'javascript', 'typescript', 'python', 'rust', 'go', 'java',
+        'c', 'cpp', 'csharp', 'ruby', 'php', 'swift', 'kotlin',
+        'html', 'css', 'json', 'yaml', 'toml', 'xml', 'sql',
+        'bash', 'shell', 'markdown', 'dockerfile', 'graphql',
+        'lua', 'r', 'scala', 'haskell', 'elixir', 'zig',
+      ],
+    });
+  }
+  return highlighterPromise;
+}
+
+// Map file extensions to shiki language IDs
+const EXT_TO_LANG = {
+  '.js': 'javascript', '.mjs': 'javascript', '.cjs': 'javascript',
+  '.ts': 'typescript', '.tsx': 'typescript', '.jsx': 'javascript',
+  '.py': 'python', '.rs': 'rust', '.go': 'go', '.java': 'java',
+  '.c': 'c', '.h': 'c', '.cpp': 'cpp', '.hpp': 'cpp', '.cc': 'cpp',
+  '.cs': 'csharp', '.rb': 'ruby', '.php': 'php', '.swift': 'swift',
+  '.kt': 'kotlin', '.kts': 'kotlin',
+  '.html': 'html', '.htm': 'html', '.css': 'css',
+  '.json': 'json', '.yaml': 'yaml', '.yml': 'yaml',
+  '.toml': 'toml', '.xml': 'xml', '.svg': 'xml',
+  '.sql': 'sql', '.sh': 'bash', '.bash': 'bash', '.zsh': 'bash',
+  '.md': 'markdown', '.mdx': 'markdown',
+  '.dockerfile': 'dockerfile', '.graphql': 'graphql', '.gql': 'graphql',
+  '.lua': 'lua', '.r': 'r', '.scala': 'scala',
+  '.hs': 'haskell', '.ex': 'elixir', '.exs': 'elixir', '.zig': 'zig',
+};
+
+function detectLanguage(filePath) {
+  const ext = filePath.substring(filePath.lastIndexOf('.')).toLowerCase();
+  return EXT_TO_LANG[ext] || null;
+}
+
+/**
+ * Render markdown content to HTML.
+ */
+export async function renderMarkdown(content, filePath) {
+  const { data: frontmatter, content: body } = matter(content);
+  const highlighter = await getHighlighter();
+
+  // Build the remark pipeline
+  // We use remark-html which outputs an HTML string directly,
+  // then do a second pass for math with rehype
+  const remarkResult = await unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkMath)
+    .use(remarkHtml, { sanitize: false })
+    .process(body);
+
+  let html = String(remarkResult);
+
+  // Highlight code blocks in the HTML
+  // Match <code class="language-xxx">...</code> blocks
+  html = html.replace(
+    /<pre><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g,
+    (match, lang, code) => {
+      // Decode HTML entities
+      const decoded = code
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'");
+
+      try {
+        return highlighter.codeToHtml(decoded, {
+          lang,
+          themes: { dark: 'github-dark', light: 'github-light' },
+        });
+      } catch {
+        return match;
+      }
+    }
+  );
+
+  // Handle KaTeX rendering for math blocks
+  // remark-math + remark-html produces <span class="math math-inline"> and <div class="math math-display">
+  // We need rehype-katex for proper rendering, but since we used remark-html directly,
+  // we handle math with a second pass
+  const mathInlineRegex = /<code class="language-math math-inline">([\s\S]*?)<\/code>/g;
+  const mathDisplayRegex = /<code class="language-math math-display">([\s\S]*?)<\/code>/g;
+
+  // For now, leave math as-is — KaTeX CSS + auto-render will handle it client-side
+  // The remark-math plugin wraps math in appropriate classes
+
+  // Rewrite relative image URLs to /raw/ paths
+  const fileDir = path.posix.dirname(filePath);
+  html = html.replace(/<img([^>]*?)src="([^"]*?)"([^>]*?)>/gi, (match, before, src, after) => {
+    if (/^(https?:\/\/|\/\/|data:)/.test(src)) return match;
+    const resolved = path.posix.normalize(path.posix.join(fileDir, src));
+    return `<img${before}src="/raw/${resolved}"${after}>`;
+  });
+
+  // Extract title from frontmatter or first heading
+  let title = frontmatter?.title;
+  if (!title) {
+    const headingMatch = body.match(/^#\s+(.+)$/m);
+    if (headingMatch) title = headingMatch[1];
+  }
+
+  // Build frontmatter HTML block
+  let frontmatterHtml = '';
+  if (Object.keys(frontmatter).length > 0) {
+    frontmatterHtml = '<div class="frontmatter"><table>';
+    for (const [key, value] of Object.entries(frontmatter)) {
+      frontmatterHtml += `<tr><td class="fm-key">${escapeHtml(key)}</td><td class="fm-value">${escapeHtml(String(value))}</td></tr>`;
+    }
+    frontmatterHtml += '</table></div>';
+  }
+
+  return {
+    html: frontmatterHtml + html,
+    frontmatter,
+    title: title || filePath.split('/').pop(),
+  };
+}
+
+/**
+ * Render a non-markdown file with syntax highlighting.
+ */
+export async function renderCode(content, filePath) {
+  const highlighter = await getHighlighter();
+  const language = detectLanguage(filePath);
+
+  if (language) {
+    try {
+      const html = highlighter.codeToHtml(content, {
+        lang: language,
+        themes: { dark: 'github-dark', light: 'github-light' },
+      });
+      return { html, language };
+    } catch {
+      // Fall through to plain text
+    }
+  }
+
+  // Plain text fallback
+  return {
+    html: `<pre><code>${escapeHtml(content)}</code></pre>`,
+    language: 'text',
+  };
+}
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

package/src/scanner.js

@@ -0,0 +1,96 @@
+import fs from 'fs';
+import path from 'path';
+import ignore from 'ignore';
+
+/**
+ * Build ignore filter by reading .gitignore files up the tree.
+ */
+export function buildIgnoreFilter(dirPath, rootDir) {
+  const ig = ignore();
+  // Always skip these
+  ig.add(['node_modules', '.git']);
+
+  // Walk from root to current dir, collecting .gitignore rules
+  const relative = path.relative(rootDir, dirPath);
+  const segments = relative ? relative.split(path.sep) : [];
+  const dirs = [rootDir];
+  let current = rootDir;
+  for (const seg of segments) {
+    current = path.join(current, seg);
+    dirs.push(current);
+  }
+
+  for (const dir of dirs) {
+    const gitignorePath = path.join(dir, '.gitignore');
+    if (fs.existsSync(gitignorePath)) {
+      const content = fs.readFileSync(gitignorePath, 'utf-8');
+      const prefix = path.relative(rootDir, dir);
+      const lines = content.split('\n').filter(l => l.trim() && !l.startsWith('#'));
+      if (prefix) {
+        ig.add(lines.map(l => path.join(prefix, l)));
+      } else {
+        ig.add(lines);
+      }
+    }
+  }
+
+  return ig;
+}
+
+/**
+ * Scan a directory recursively and return a tree structure.
+ */
+export function scanDirectory(rootDir, respectIgnore = true) {
+  const ig = respectIgnore ? buildIgnoreFilter(rootDir, rootDir) : null;
+
+  function scan(dirPath) {
+    let entries;
+    try {
+      entries = fs.readdirSync(dirPath, { withFileTypes: true });
+    } catch {
+      return [];
+    }
+
+    const results = [];
+
+    // Sort: directories first, then alphabetical
+    entries.sort((a, b) => {
+      const aIsDir = a.isDirectory();
+      const bIsDir = b.isDirectory();
+      if (aIsDir !== bIsDir) return aIsDir ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    for (const entry of entries) {
+      const fullPath = path.join(dirPath, entry.name);
+      const relativePath = path.relative(rootDir, fullPath);
+
+      // Always skip .git and node_modules
+      if (entry.name === '.git' || entry.name === 'node_modules') continue;
+
+      if (ig && ig.ignores(relativePath + (entry.isDirectory() ? '/' : ''))) {
+        continue;
+      }
+
+      if (entry.isDirectory()) {
+        const children = scan(fullPath);
+        results.push({
+          name: entry.name,
+          path: relativePath,
+          type: 'directory',
+          children,
+        });
+      } else if (entry.isFile()) {
+        results.push({
+          name: entry.name,
+          path: relativePath,
+          type: 'file',
+        });
+      }
+    }
+
+    return results;
+  }
+
+  return scan(rootDir);
+}

package/src/search.js

@@ -0,0 +1,118 @@
+import fs from 'fs';
+import path from 'path';
+import { buildIgnoreFilter } from './scanner.js';
+
+const MAX_FILES = 50;
+const MAX_MATCHES_PER_FILE = 5;
+const BINARY_CHECK_SIZE = 8192;
+
+function isBinary(absPath) {
+  let fd;
+  try {
+    fd = fs.openSync(absPath, 'r');
+    const buf = Buffer.alloc(BINARY_CHECK_SIZE);
+    const bytesRead = fs.readSync(fd, buf, 0, BINARY_CHECK_SIZE, 0);
+    for (let i = 0; i < bytesRead; i++) {
+      if (buf[i] === 0) return true;
+    }
+    return false;
+  } catch {
+    return true;
+  } finally {
+    if (fd !== undefined) fs.closeSync(fd);
+  }
+}
+
+function collectFiles(dirPath, rootDir, ig) {
+  const files = [];
+
+  function walk(dir) {
+    let entries;
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+
+    for (const entry of entries) {
+      if (entry.name === '.git' || entry.name === 'node_modules') continue;
+
+      const fullPath = path.join(dir, entry.name);
+      const relativePath = path.relative(rootDir, fullPath);
+
+      if (ig && ig.ignores(relativePath + (entry.isDirectory() ? '/' : ''))) {
+        continue;
+      }
+
+      if (entry.isDirectory()) {
+        walk(fullPath);
+      } else if (entry.isFile()) {
+        files.push({ name: entry.name, path: relativePath, absPath: fullPath });
+      }
+    }
+  }
+
+  walk(dirPath);
+  return files;
+}
+
+export async function search(rootDir, query, respectIgnore = true) {
+  const lowerQuery = query.toLowerCase();
+  const ig = respectIgnore ? buildIgnoreFilter(rootDir, rootDir) : null;
+  const files = collectFiles(rootDir, rootDir, ig);
+
+  const results = [];
+
+  for (const file of files) {
+    if (results.length >= MAX_FILES) break;
+
+    const nameMatch = file.name.toLowerCase().includes(lowerQuery);
+
+    if (isBinary(file.absPath)) {
+      if (nameMatch) {
+        results.push({ path: file.path, name: file.name, matches: [] });
+      }
+      continue;
+    }
+
+    let content;
+    try {
+      content = fs.readFileSync(file.absPath, 'utf-8');
+    } catch {
+      if (nameMatch) {
+        results.push({ path: file.path, name: file.name, matches: [] });
+      }
+      continue;
+    }
+
+    const lines = content.split('\n');
+    const matches = [];
+
+    for (let i = 0; i < lines.length && matches.length < MAX_MATCHES_PER_FILE; i++) {
+      if (lines[i].toLowerCase().includes(lowerQuery)) {
+        const before = i > 0 ? lines[i - 1] : '';
+        const after = i < lines.length - 1 ? lines[i + 1] : '';
+        const contextParts = [];
+        if (i > 0) contextParts.push(before);
+        contextParts.push(lines[i]);
+        if (i < lines.length - 1) contextParts.push(after);
+
+        matches.push({
+          line: lines[i],
+          lineNumber: i + 1,
+          context: contextParts.join('\n'),
+        });
+      }
+    }
+
+    if (nameMatch || matches.length > 0) {
+      results.push({ path: file.path, name: file.name, matches });
+    }
+  }
+
+  return {
+    results,
+    query,
+    totalFiles: results.length,
+  };
+}

package/src/server.js

@@ -0,0 +1,299 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { Hono } from 'hono';
+import { basicAuth } from 'hono/basic-auth';
+import { serve } from '@hono/node-server';
+import { WebSocketServer } from 'ws';
+import { scanDirectory } from './scanner.js';
+import { renderMarkdown, renderCode } from './renderer.js';
+import { startWatcher } from './watcher.js';
+import { search } from './search.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const publicDir = path.join(__dirname, '..', 'public');
+
+const MAX_FILE_SIZE = 1024 * 1024; // 1 MB
+
+const BINARY_EXTENSIONS = new Set([
+  '.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.bmp', '.tiff', '.tif',
+  '.mp3', '.mp4', '.avi', '.mov', '.wmv', '.flv', '.mkv', '.webm', '.wav', '.ogg',
+  '.zip', '.tar', '.gz', '.bz2', '.7z', '.rar', '.xz',
+  '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx',
+  '.woff', '.woff2', '.ttf', '.otf', '.eot',
+  '.exe', '.dll', '.so', '.dylib', '.o', '.a',
+  '.class', '.pyc', '.pyo',
+  '.sqlite', '.db',
+]);
+
+const MIME_TYPES = {
+  '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif', '.webp': 'image/webp', '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon', '.bmp': 'image/bmp', '.tiff': 'image/tiff',
+  '.pdf': 'application/pdf',
+  '.woff': 'font/woff', '.woff2': 'font/woff2', '.ttf': 'font/ttf', '.otf': 'font/otf',
+  '.mp3': 'audio/mpeg', '.wav': 'audio/wav', '.ogg': 'audio/ogg',
+  '.mp4': 'video/mp4', '.webm': 'video/webm',
+  '.zip': 'application/zip', '.gz': 'application/gzip',
+  '.json': 'application/json', '.xml': 'application/xml',
+  '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript',
+  '.txt': 'text/plain', '.md': 'text/markdown',
+  '.yaml': 'text/yaml', '.yml': 'text/yaml',
+};
+
+/**
+ * Validate that a requested path stays within the root directory.
+ * Returns the resolved absolute path or null if invalid.
+ */
+function safePath(rootDir, requestedPath) {
+  const resolved = path.resolve(rootDir, requestedPath);
+  if (!resolved.startsWith(rootDir + path.sep) && resolved !== rootDir) {
+    return null;
+  }
+  return resolved;
+}
+
+export async function startServer({ directory, port, host, respectIgnore, auth, readOnly }) {
+  const rootDir = path.resolve(directory);
+
+  if (!fs.existsSync(rootDir) || !fs.statSync(rootDir).isDirectory()) {
+    console.error(`Error: "${directory}" is not a valid directory`);
+    process.exit(1);
+  }
+
+  const app = new Hono();
+
+  if (auth) {
+    app.use('*', basicAuth({ username: auth.username, password: auth.password }));
+  }
+
+  // API: file tree
+  app.get('/api/tree', (c) => {
+    const tree = scanDirectory(rootDir, respectIgnore);
+    return c.json(tree);
+  });
+
+  // API: render file
+  app.get('/api/file', async (c) => {
+    const filePath = c.req.query('path');
+    if (!filePath) {
+      return c.json({ error: 'Missing path parameter' }, 400);
+    }
+
+    const absPath = safePath(rootDir, filePath);
+    if (!absPath) {
+      return c.json({ error: 'Invalid path' }, 403);
+    }
+
+    let stats;
+    try {
+      stats = fs.statSync(absPath);
+    } catch {
+      return c.json({ error: 'File not found' }, 404);
+    }
+
+    if (!stats.isFile()) {
+      return c.json({ error: 'File not found' }, 404);
+    }
+
+    if (stats.size > MAX_FILE_SIZE) {
+      const sizeMB = (stats.size / 1024 / 1024).toFixed(1);
+      return c.json({ type: 'notice', message: `File too large to preview (${sizeMB} MB, limit: 1 MB)` });
+    }
+
+    const ext = path.extname(absPath).toLowerCase();
+    if (BINARY_EXTENSIONS.has(ext)) {
+      return c.json({ type: 'notice', message: 'Binary file — cannot display' });
+    }
+
+    const content = fs.readFileSync(absPath, 'utf-8');
+    const isMarkdown = /\.mdx?$/.test(filePath);
+
+    if (isMarkdown) {
+      const result = await renderMarkdown(content, filePath);
+      return c.json({ type: 'markdown', ...result });
+    } else {
+      const result = await renderCode(content, filePath);
+      return c.json({ type: 'code', ...result });
+    }
+  });
+
+  // API: save file
+  app.post('/api/file', async (c) => {
+    if (readOnly) {
+      return c.json({ error: 'Read-only mode' }, 403);
+    }
+
+    const filePath = c.req.query('path');
+    if (!filePath) {
+      return c.json({ error: 'Missing path parameter' }, 400);
+    }
+
+    const absPath = safePath(rootDir, filePath);
+    if (!absPath) {
+      return c.json({ error: 'Invalid path' }, 403);
+    }
+
+    try {
+      const stats = fs.statSync(absPath);
+      if (!stats.isFile()) {
+        return c.json({ error: 'File not found' }, 404);
+      }
+    } catch {
+      return c.json({ error: 'File not found' }, 404);
+    }
+
+    const body = await c.req.text();
+    await fs.promises.writeFile(absPath, body, 'utf-8');
+    return c.json({ ok: true });
+  });
+
+  // API: raw file content (for edit mode)
+  app.get('/api/raw-content', (c) => {
+    const filePath = c.req.query('path');
+    if (!filePath) {
+      return c.text('Missing path parameter', 400);
+    }
+
+    const absPath = safePath(rootDir, filePath);
+    if (!absPath) {
+      return c.text('Invalid path', 403);
+    }
+
+    let stats;
+    try {
+      stats = fs.statSync(absPath);
+    } catch {
+      return c.text('File not found', 404);
+    }
+
+    if (!stats.isFile()) {
+      return c.text('File not found', 404);
+    }
+
+    const content = fs.readFileSync(absPath, 'utf-8');
+    return c.text(content);
+  });
+
+  // API: config
+  app.get('/api/config', (c) => {
+    return c.json({ readOnly: !!readOnly });
+  });
+
+  // API: search
+  app.get('/api/search', async (c) => {
+    const q = c.req.query('q');
+    if (!q) {
+      return c.json({ results: [], query: '', totalFiles: 0 });
+    }
+    const results = await search(rootDir, q, respectIgnore);
+    return c.json(results);
+  });
+
+  // Static assets from public/
+  app.get('/assets/*', (c) => {
+    const assetPath = c.req.path.replace('/assets/', '');
+    const absPath = path.join(publicDir, assetPath);
+
+    // Prevent traversal
+    if (!absPath.startsWith(publicDir)) {
+      return c.text('Forbidden', 403);
+    }
+
+    if (!fs.existsSync(absPath)) {
+      return c.text('Not found', 404);
+    }
+
+    const content = fs.readFileSync(absPath);
+    const ext = path.extname(absPath);
+    const contentTypes = {
+      '.html': 'text/html',
+      '.css': 'text/css',
+      '.js': 'application/javascript',
+      '.json': 'application/json',
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.svg': 'image/svg+xml',
+    };
+
+    return c.body(content, 200, {
+      'Content-Type': contentTypes[ext] || 'application/octet-stream',
+    });
+  });
+
+  // Raw file serving (images and other assets)
+  app.get('/raw/*', (c) => {
+    let reqPath;
+    try {
+      reqPath = decodeURIComponent(c.req.path.slice(5));
+    } catch {
+      return c.text('Bad request', 400);
+    }
+
+    const absPath = safePath(rootDir, reqPath);
+    if (!absPath) {
+      return c.text('Forbidden', 403);
+    }
+
+    if (!fs.existsSync(absPath) || !fs.statSync(absPath).isFile()) {
+      return c.text('Not found', 404);
+    }
+
+    const content = fs.readFileSync(absPath);
+    const ext = path.extname(absPath).toLowerCase();
+    const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+
+    return c.body(content, 200, {
+      'Content-Type': contentType,
+      'Cache-Control': 'public, max-age=300',
+    });
+  });
+
+  // SPA catch-all: serve index.html
+  app.get('*', (c) => {
+    const indexPath = path.join(publicDir, 'index.html');
+    const html = fs.readFileSync(indexPath, 'utf-8');
+    return c.html(html);
+  });
+
+  // Start HTTP server
+  const server = serve({
+    fetch: app.fetch,
+    port,
+    hostname: host,
+  });
+
+  // Handle port-in-use errors
+  server.on('error', (err) => {
+    if (err.code === 'EADDRINUSE') {
+      console.error(`\n  Error: Port ${port} is already in use.`);
+      console.error(`  Try: mdnow --port ${port + 1}\n`);
+      process.exit(1);
+    }
+    throw err;
+  });
+
+  // WebSocket server
+  const wss = new WebSocketServer({ server });
+
+  const clients = new Set();
+  wss.on('connection', (ws) => {
+    clients.add(ws);
+    ws.on('close', () => clients.delete(ws));
+    ws.on('error', () => clients.delete(ws));
+  });
+
+  function broadcast(message) {
+    const data = JSON.stringify(message);
+    for (const client of clients) {
+      if (client.readyState === 1) {
+        client.send(data);
+      }
+    }
+  }
+
+  // Start file watcher
+  startWatcher(rootDir, broadcast, respectIgnore);
+
+  return server;
+}