mdbrowse-cli 0.1.0 → 0.1.2

package/README.md

@@ -2,8 +2,8 @@
 
 **Browse and preview markdown files in any directory.**
 
-[![npm version](https://img.shields.io/npm/v/mdbrowse)](https://www.npmjs.com/package/mdbrowse)
-[![license](https://img.shields.io/npm/l/mdbrowse)](LICENSE)
+[![npm version](https://img.shields.io/npm/v/mdbrowse-cli)](https://www.npmjs.com/package/mdbrowse-cli)
+[![license](https://img.shields.io/npm/l/mdbrowse-cli)](LICENSE)
 
 Zero-install CLI that spins up a local web UI with a file tree, rendered markdown, live reload, and optional Cloudflare Tunnel for remote access.
 
@@ -13,9 +13,9 @@ Zero-install CLI that spins up a local web UI with a file tree, rendered markdow
 ## Quick start
 
 ```bash
-npx mdbrowse .           # serve current directory
-npx mdbrowse ./docs      # serve a specific folder
-npx mdbrowse . --tunnel  # expose via Cloudflare Tunnel
+npx mdbrowse-cli .           # serve current directory
+npx mdbrowse-cli ./docs      # serve a specific folder
+npx mdbrowse-cli . --tunnel  # expose via Cloudflare Tunnel
 ```
 
 Opens in your browser automatically. On SSH/headless servers, grab the printed URL.
@@ -49,7 +49,7 @@ Opens in your browser automatically. On SSH/headless servers, grab the printed U
 
 ## Use cases
 
-**Remote / headless servers** — Working on a cloud dev box or VPS? Run `npx mdbrowse . --tunnel` to get a public URL and view rendered markdown from any browser.
+**Remote / headless servers** — Working on a cloud dev box or VPS? Run `npx mdbrowse-cli . --tunnel` to get a public URL and view rendered markdown from any browser.
 
 **AI coding tools** — Using Claude Code, Codex, or similar tools that generate lots of markdown? Browse their output rendered, not raw.
 

package/bin/{mdnow.js → mdbrowse-cli.js}

@@ -6,12 +6,12 @@ import { startServer } from '../src/server.js';
 const program = new Command();
 
 program
-  .name('mdnow')
+  .name('mdbrowse-cli')
   .description('Browse and preview markdown files in any directory')
   .version('0.1.0')
   .argument('[directory]', 'Directory to serve', '.')
   .option('-p, --port <number>', 'Port to listen on', '3000')
-  .option('--host <address>', 'Host to bind to', 'localhost')
+  .option('--host <address>', 'Host to bind to', '0.0.0.0')
   .option('--no-ignore', 'Show all files (ignore .gitignore)')
   .option('--auth <credentials>', 'Require basic auth (user:pass)')
   .option('--read-only', 'Disable file editing')
@@ -32,7 +32,7 @@ program
       auth = { username: user, password: rest.join(':') };
     }
 
-    await startServer({
+    const { port: actualPort } = await startServer({
       directory,
       port,
       host,
@@ -41,15 +41,28 @@ program
       readOnly,
     });
 
-    const url = `http://${host === '0.0.0.0' ? 'localhost' : host}:${port}`;
-    console.log(`\n  mdnow serving ${directory}`);
-    console.log(`  → ${url}\n`);
+    const localUrl = `http://localhost:${actualPort}`;
+    console.log(`\n  mdbrowse-cli serving ${directory}`);
+    console.log(`  → Local:   ${localUrl}`);
+
+    if (host === '0.0.0.0') {
+      const { networkInterfaces } = await import('os');
+      const nets = networkInterfaces();
+      for (const name of Object.keys(nets)) {
+        for (const net of nets[name]) {
+          if (net.family === 'IPv4' && !net.internal) {
+            console.log(`  → Network: http://${net.address}:${actualPort}`);
+          }
+        }
+      }
+    }
+    console.log();
 
     if (options.tunnel) {
       const { startTunnel, registerCleanup } = await import('../src/tunnel.js');
       try {
         console.log('  Starting Cloudflare Tunnel...');
-        const { url: tunnelUrl, child } = await startTunnel(port);
+        const { url: tunnelUrl, child } = await startTunnel(actualPort);
         registerCleanup(child);
         console.log(`  → ${tunnelUrl}\n`);
       } catch (err) {
@@ -73,7 +86,7 @@ program
           : process.platform === 'win32'
             ? 'start'
             : 'xdg-open';
-      exec(`${cmd} ${url}`);
+      exec(`${cmd} ${localUrl}`);
     }
   });
 

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "mdbrowse-cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "CLI tool to browse and preview markdown files in any directory",
   "type": "module",
   "bin": {
-    "mdnow": "bin/mdnow.js"
+    "mdbrowse-cli": "bin/mdbrowse-cli.js"
   },
   "files": [
     "bin/",

package/public/app.js

@@ -1,4 +1,4 @@
-/* ── mdnow client ── */
+/* ── mdbrowse-cli client ── */
 
 const fileTreeEl = document.getElementById('file-tree');
 const contentInner = document.getElementById('content-inner');
@@ -31,7 +31,7 @@ function isImageFile(name) {
 // ── Theme ──
 
 function getTheme() {
-  return localStorage.getItem('mdnow-theme') || 'auto';
+  return localStorage.getItem('mdbrowse-cli-theme') || 'auto';
 }
 
 function applyTheme(theme) {
@@ -39,7 +39,7 @@ function applyTheme(theme) {
   if (theme !== 'auto') {
     document.documentElement.classList.add(theme);
   }
-  localStorage.setItem('mdnow-theme', theme);
+  localStorage.setItem('mdbrowse-cli-theme', theme);
 }
 
 themeToggle.addEventListener('click', () => {
@@ -199,17 +199,17 @@ function renderFile(filePath, data) {
   const pathHeader = `<div class="file-path-header">${escapeHtml(filePath)}</div>`;
 
   if (data.type === 'image') {
-    document.title = `${filePath} — mdnow`;
+    document.title = `${filePath} — mdbrowse-cli`;
     const name = filePath.split('/').pop();
     contentInner.innerHTML = pathHeader + `<div class="image-preview"><img src="${data.src}" alt="${escapeHtml(name)}"></div>`;
   } else if (data.type === 'notice') {
-    document.title = `${filePath} — mdnow`;
+    document.title = `${filePath} — mdbrowse-cli`;
     contentInner.innerHTML = pathHeader + `<div class="file-notice">${escapeHtml(data.message)}</div>`;
   } else if (data.type === 'markdown') {
-    document.title = `${data.title || filePath} — mdnow`;
+    document.title = `${data.title || filePath} — mdbrowse-cli`;
     contentInner.innerHTML = pathHeader + `<div class="markdown-body">${data.html}</div>`;
   } else {
-    document.title = `${filePath} — mdnow`;
+    document.title = `${filePath} — mdbrowse-cli`;
     contentInner.innerHTML = pathHeader + `<div class="code-view">${data.html}</div>`;
   }
 
@@ -265,12 +265,12 @@ window.addEventListener('popstate', (e) => {
 });
 
 function showWelcome() {
-  document.title = 'mdnow';
+  document.title = 'mdbrowse-cli';
   hideAllToolbarButtons();
   editMode = false;
   contentInner.innerHTML = `
     <div id="welcome">
-      <h1>mdnow</h1>
+      <h1>mdbrowse-cli</h1>
       <p>Select a file from the sidebar to get started.</p>
     </div>
   `;

package/public/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>mdnow</title>
+  <title>mdbrowse-cli</title>
   <link rel="stylesheet" href="/assets/style.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
   <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
@@ -12,7 +12,7 @@
   <div id="app">
     <aside id="sidebar">
       <div class="sidebar-header">
-        <span class="logo">mdnow</span>
+        <span class="logo">mdbrowse-cli</span>
         <button id="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
           <svg class="icon-sun" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
           <svg class="icon-moon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -32,7 +32,7 @@
       </div>
       <div id="content-inner">
         <div id="welcome">
-          <h1>mdnow</h1>
+          <h1>mdbrowse-cli</h1>
           <p>Select a file from the sidebar to get started.</p>
         </div>
       </div>

package/src/server.js

@@ -1,4 +1,5 @@
 import fs from 'fs';
+import net from 'net';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { Hono } from 'hono';
@@ -13,6 +14,34 @@ import { search } from './search.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const publicDir = path.join(__dirname, '..', 'public');
 
+/**
+ * Check if a port is available.
+ */
+function isPortAvailable(port, host) {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.once('error', () => resolve(false));
+    server.once('listening', () => {
+      server.close(() => resolve(true));
+    });
+    server.listen(port, host);
+  });
+}
+
+/**
+ * Find the next available port starting from the given port.
+ * Tries up to maxAttempts ports.
+ */
+async function findAvailablePort(startPort, host, maxAttempts = 10) {
+  for (let i = 0; i < maxAttempts; i++) {
+    const port = startPort + i;
+    if (await isPortAvailable(port, host)) {
+      return port;
+    }
+  }
+  return null;
+}
+
 const MAX_FILE_SIZE = 1024 * 1024; // 1 MB
 
 const BINARY_EXTENSIONS = new Set([
@@ -256,23 +285,24 @@ export async function startServer({ directory, port, host, respectIgnore, auth,
     return c.html(html);
   });
 
+  // Find an available port
+  const availablePort = await findAvailablePort(port, host);
+  if (!availablePort) {
+    console.error(`\n  Error: No available port found (tried ${port}-${port + 9}).`);
+    console.error(`  Try: mdbrowse-cli --port <number>\n`);
+    process.exit(1);
+  }
+  if (availablePort !== port) {
+    console.log(`  Port ${port} in use, using ${availablePort} instead.`);
+  }
+
   // Start HTTP server
   const server = serve({
     fetch: app.fetch,
-    port,
+    port: availablePort,
     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 });
 
@@ -295,5 +325,5 @@ export async function startServer({ directory, port, host, respectIgnore, auth,
   // Start file watcher
   startWatcher(rootDir, broadcast, respectIgnore);
 
-  return server;
+  return { server, port: availablePort };
 }