memd-cli 3.2.1 → 3.4.0

package/CLAUDE.md

@@ -41,7 +41,8 @@ node main.js test/test1.md
 node main.js test/test2.md
 node main.js test/complex.md
 node main.js --html test/test1.md          # HTML output to stdout
-node main.js serve --dir test --port 3000  # HTTP serve mode
+node main.js serve test --port 3000        # HTTP serve mode (directory)
+node main.js serve test/test1.md           # HTTP serve mode (single file)
 ```
 
 ## Key CLI flags
@@ -70,4 +71,5 @@ nord-light, zinc-dark, zinc-light
 - `render-shared.js` converts Mermaid fenced blocks to SVG via `@ktrysmt/beautiful-mermaid`, then renders full HTML with `marked`
 - `render-worker.js` runs `renderToHTML` in a worker thread for non-blocking serve mode
 - `render-utils.js` provides theme color resolution and HTML escaping (shared by main.js and render-shared.js)
-- Serve mode supports: directory listing, ETag/304 caching, gzip, static file serving (images/css), sidebar navigation, `--watch` with SSE live reload, CSP nonce
+- Serve mode supports: directory or single-file serving, directory listing, ETag/304 caching, gzip, static file serving (images/css), sidebar navigation, `--watch` with SSE live reload, CSP nonce
+- Single-file mode (`serve foo.md`): sets baseDir to the file's parent directory, root `/` redirects to `/<filename>`

package/main.js

@@ -622,10 +622,12 @@ async function main() {
 
       if (options.html) {
         // 3a. HTML path
-        const { renderToHTML, MERMAID_MODAL_SCRIPT } = await import('./render-shared.js');
+        const { renderToHTML, MERMAID_MODAL_SCRIPT, WIDTH_TOGGLE_SCRIPT } = await import('./render-shared.js');
         const combined = markdownParts.join('\n\n');
         let html = renderToHTML(combined, diagramColors);
-        html = html.replace('<!--memd:scripts-->', html.includes('mermaid-diagram') ? `<script>${MERMAID_MODAL_SCRIPT}</script>` : '');
+        let inlineScripts = WIDTH_TOGGLE_SCRIPT;
+        if (html.includes('mermaid-diagram')) inlineScripts += MERMAID_MODAL_SCRIPT;
+        html = html.replace('<!--memd:scripts-->', `<script>${inlineScripts}</script>`);
         process.stdout.write(html);
       } else {
         // 3b. Terminal path
@@ -707,13 +709,13 @@ async function main() {
   program
     .command('serve')
     .description('Start HTTP server to serve .md files as HTML')
-    .option('-d, --dir <path>', 'directory to serve', '.')
+    .argument('[path]', 'directory or .md file to serve', '.')
     .option('-p, --port <number>', 'port number (0-65535)', Number, 8888)
     .option('--host <string>', 'host to bind', '127.0.0.1')
     .option('--workers <number>', 'number of render workers (default: min(cpus-1, 4))', Number)
     .option('--watch', 'watch for file changes and live-reload')
     .option('--theme <name>', `color theme (env: MEMD_THEME)\n${THEME_NAMES.join(', ')}`, process.env.MEMD_THEME || 'nord')
-    .action(async (options) => {
+    .action(async (servePath, options) => {
       if (!(options.theme in THEME_MAP)) {
         const names = Object.keys(THEME_MAP).join(', ');
         console.error(`Unknown theme: ${options.theme}\nAvailable themes: ${names}`);
@@ -732,14 +734,26 @@ async function main() {
       }
 
       let baseDir;
+      let singleFile = null; // basename of .md file in single-file mode
+      let resolvedServePath;
       try {
-        baseDir = fs.realpathSync(path.resolve(options.dir));
+        resolvedServePath = fs.realpathSync(path.resolve(servePath));
       } catch {
-        console.error(`Directory not found: ${options.dir}`);
+        console.error(`Path not found: ${servePath}`);
         process.exit(1);
       }
-      if (!fs.statSync(baseDir).isDirectory()) {
-        console.error(`Not a directory: ${options.dir}`);
+      const serveStat = fs.statSync(resolvedServePath);
+      if (serveStat.isFile()) {
+        if (!resolvedServePath.endsWith('.md')) {
+          console.error(`Not a .md file: ${servePath}`);
+          process.exit(1);
+        }
+        singleFile = path.basename(resolvedServePath);
+        baseDir = path.dirname(resolvedServePath);
+      } else if (serveStat.isDirectory()) {
+        baseDir = resolvedServePath;
+      } else {
+        console.error(`Not a file or directory: ${servePath}`);
         process.exit(1);
       }
       if (baseDir === '/') {
@@ -751,7 +765,7 @@ async function main() {
         console.error('Invalid --workers: must be a positive integer');
         process.exit(1);
       }
-      const { MERMAID_MODAL_SCRIPT: mermaidModalScript } = await import('./render-shared.js');
+      const { MERMAID_MODAL_SCRIPT: mermaidModalScript, WIDTH_TOGGLE_SCRIPT: widthToggleScript } = await import('./render-shared.js');
       const poolSize = options.workers ?? Math.min(Math.max(1, os.cpus().length - 1), 4);
       const workerPath = new URL('./render-worker.js', import.meta.url);
       const pool = createRenderPool(workerPath, poolSize, {
@@ -861,7 +875,10 @@ async function main() {
 .memd-sidebar a { color: ${t.accent}; text-decoration: none; display: block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.9rem; }
 .memd-sidebar a:hover { background: color-mix(in srgb, ${t.fg} 5%, ${t.bg}); }
 .memd-sidebar a[aria-current="page"] { background: color-mix(in srgb, ${t.accent} 12%, ${t.bg}); }
-.memd-content { max-width: 800px; padding: 2rem 1rem; }
+.memd-content { max-width: 70%; padding: 2rem 1rem; margin: 0 auto; }
+@media (max-width: 1024px) { .memd-content { max-width: 85%; } }
+@media (max-width: 768px) { .memd-content { max-width: 100%; } }
+body.memd-full-width .memd-content { max-width: none; margin: 0; }
 body:has(.memd-layout) { max-width: none; margin: 0; padding: 0; }
 .memd-hamburger { display: none; position: fixed; top: 0.5rem; left: 0.5rem; z-index: 10; background: color-mix(in srgb, ${t.fg} 8%, ${t.bg}); border: 1px solid ${t.line}; color: ${t.fg}; padding: 0.3rem 0.5rem; cursor: pointer; border-radius: 4px; font-size: 1.2rem; }
 @media (max-width: 768px) {
@@ -884,7 +901,7 @@ body:has(.memd-layout) { max-width: none; margin: 0; padding: 0; }
           res.end();
           return;
         }
-        let scripts = '';
+        let scripts = widthToggleScript;
         if (options.watch) {
           scripts += 'new EventSource("/_memd/events").onmessage=function(){location.reload()};';
         }
@@ -1069,6 +1086,14 @@ body:has(.memd-layout) { max-width: none; margin: 0; padding: 0; }
             return;
           }
 
+          // Single-file mode: redirect root to the served file
+          if (singleFile && urlPath === '/') {
+            const target = '/' + encodeURIComponent(singleFile) + parsedUrl.search;
+            res.writeHead(302, { Location: target });
+            res.end();
+            return;
+          }
+
           if (isDotPath(urlPath)) {
             res.writeHead(403, { 'Content-Type': 'text/plain' });
             res.end('Forbidden');
@@ -1277,7 +1302,11 @@ body:has(.memd-layout) { max-width: none; margin: 0; padding: 0; }
         let displayHost = options.host === '0.0.0.0' || options.host === '::' ? 'localhost' : options.host;
         if (displayHost.includes(':')) displayHost = `[${displayHost}]`;
         console.log(`memd serve`);
-        console.log(`  Directory: ${baseDir}`);
+        if (singleFile) {
+          console.log(`  File:      ${path.join(baseDir, singleFile)}`);
+        } else {
+          console.log(`  Directory: ${baseDir}`);
+        }
         console.log(`  Theme:     ${options.theme}`);
         if (options.watch) console.log('  Watch:     enabled');
         console.log(`  URL:       http://${displayHost}:${addr.port}/`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memd-cli",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "type": "module",
   "main": "main.js",
   "bin": {

package/render-shared.js

@@ -3,6 +3,8 @@ import { Marked } from 'marked';
 import { renderMermaidSVG } from '@ktrysmt/beautiful-mermaid';
 import { escapeHtml, resolveThemeColors } from './render-utils.js';
 
+export const WIDTH_TOGGLE_SCRIPT = "(function(){var b=document.body,btn=document.querySelector('.memd-width-toggle');if(!btn)return;var sb=document.querySelector('.memd-sidebar');if(sb){sb.insertBefore(btn,sb.firstChild);btn.style.position='static';btn.style.margin='0 0 0.5rem 0';btn.style.width='100%'}function u(){btn.textContent=b.classList.contains('memd-full-width')?'Full':'Smart'}if(localStorage.getItem('memd-width')==='full')b.classList.add('memd-full-width');u();btn.onclick=function(){b.classList.toggle('memd-full-width');localStorage.setItem('memd-width',b.classList.contains('memd-full-width')?'full':'smart');u()}})();";
+
 export const MERMAID_MODAL_SCRIPT = [
   "document.addEventListener('click',function(e){var d=e.target.closest('.mermaid-diagram');if(d){var o=document.createElement('div');o.className='mermaid-modal';o.innerHTML=d.querySelector('svg').outerHTML;o.onclick=function(){o.remove()};document.body.appendChild(o)}});",
   "document.addEventListener('keydown',function(e){if(e.key==='Escape'){var m=document.querySelector('.mermaid-modal');if(m)m.remove()}});",
@@ -66,7 +68,12 @@ export function renderToHTML(markdown, diagramColors) {
 <meta name="viewport" content="width=device-width, initial-scale=1">
 ${title ? `<title>${escapeHtml(title)}</title>` : ''}
 <style>
-body { background: ${t.bg}; color: ${t.fg}; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
+body { background: ${t.bg}; color: ${t.fg}; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; max-width: 70%; margin: 0 auto; padding: 2rem 1rem; }
+@media (max-width: 1024px) { body { max-width: 85%; } }
+@media (max-width: 768px) { body { max-width: 100%; } }
+body.memd-full-width { max-width: none; margin: 0; }
+.memd-width-toggle { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 11; background: color-mix(in srgb, ${t.fg} 8%, ${t.bg}); border: 1px solid ${t.line}; color: ${t.muted}; padding: 0.2rem 0.6rem; cursor: pointer; border-radius: 4px; font-size: 0.75rem; }
+.memd-width-toggle:hover { background: color-mix(in srgb, ${t.fg} 15%, ${t.bg}); }
 a { color: ${t.accent}; }
 hr { border-color: ${t.line}; }
 blockquote { border-left: 3px solid ${t.line}; color: ${t.muted}; padding-left: 1rem; }
@@ -85,6 +92,7 @@ th { background: color-mix(in srgb, ${t.fg} 5%, ${t.bg}); }
 <!--memd:head-->
 </head>
 <body>
+<button class="memd-width-toggle" aria-label="Toggle width"></button>
 <!--memd:content-->
 ${body.trimEnd()}
 <!--/memd:content-->

package/test/memd.test.js

@@ -26,7 +26,7 @@ function runSync(args) {
 describe('memd CLI', () => {
   it.concurrent('--version', async () => {
     const output = await run(['-v'])
-    expect(output).toContain('3.2.1')
+    expect(output).toContain('3.4.0')
   })
 
   it.concurrent('--help', async () => {
@@ -416,7 +416,7 @@ describe('memd serve', () => {
   let serverProcess
 
   beforeAll(async () => {
-    serverProcess = spawn('node', [MAIN, 'serve', '--port', String(PORT), '--dir', __dirname, '--host', '127.0.0.1'], {
+    serverProcess = spawn('node', [MAIN, 'serve', __dirname, '--port', String(PORT), '--host', '127.0.0.1'], {
       stdio: ['pipe', 'pipe', 'pipe'],
     })
     await new Promise((resolve, reject) => {
@@ -444,7 +444,7 @@ describe('memd serve', () => {
 
   it('serve --help shows options', () => {
     const output = runSync(['serve', '--help'])
-    expect(output).toContain('-d, --dir')
+    expect(output).toContain('[path]')
     expect(output).toContain('--port')
     expect(output).toContain('--host')
     expect(output).toContain('--watch')
@@ -655,7 +655,7 @@ describe('memd serve --watch', () => {
   let watchProcess
 
   beforeAll(async () => {
-    watchProcess = spawn('node', [MAIN, 'serve', '--port', String(WATCH_PORT), '--dir', __dirname, '--host', '127.0.0.1', '--watch'], {
+    watchProcess = spawn('node', [MAIN, 'serve', __dirname, '--port', String(WATCH_PORT), '--host', '127.0.0.1', '--watch'], {
       stdio: ['pipe', 'pipe', 'pipe'],
     })
     await new Promise((resolve, reject) => {

package/.claude/settings.local.json

@@ -1,28 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(echo:*)",
-      "Bash(FORCE_COLOR=1 echo:*)",
-      "Bash(script:*)",
-      "Bash(FORCE_COLOR=1 node:*)",
-      "Bash(node -e \"import\\('beautiful-mermaid/src/ascii/ansi.ts'\\).then\\(m=>console.log\\(Object.keys\\(m\\)\\)\\).catch\\(e=>console.error\\('ERROR:',e.message\\)\\)\" 2>&1 | head -5)",
-      "Bash(node main.js test/test-highlight.md --no-pager --theme catppuccin-mocha 2>&1 | head -3 | xxd | head -10)",
-      "Bash(FORCE_COLOR=1 node main.js test/test-highlight.md --no-pager --theme catppuccin-mocha 2>&1 | head -3 | xxd | head -5)",
-      "Bash(FORCE_COLOR=1 node main.js test/test-highlight.md --no-pager --theme zinc-dark 2>&1 | head -3 | xxd | head -5)",
-      "mcp__grep-github__searchGitHub",
-      "Bash(npx npm-check-updates:*)",
-      "Bash(MEMD_THEME= pnpm test 2>&1 | tail -20)",
-      "Bash(MEMD_THEME= npx vitest run 2>&1)",
-      "Bash(node:*)",
-      "Bash(printf:*)",
-      "WebFetch(domain:registry.npmjs.org)",
-      "WebFetch(domain:api.github.com)",
-      "Bash(mkdir:*)",
-      "Bash(# Restore original dist\ncp node_modules/@ktrysmt/beautiful-mermaid/dist/index.js.bak node_modules/@ktrysmt/beautiful-mermaid/dist/index.js && rm node_modules/@ktrysmt/beautiful-mermaid/dist/index.js.bak && rm -f debug-mermaid*.mjs bm-debug.mjs)",
-      "Bash(cp dist/index.js.bak dist/index.js)",
-      "Bash(rm -f dist/index.js.debug)",
-      "Bash(rm -f pnpm-lock.yaml)",
-      "Bash(rm -rf node_modules)"
-    ]
-  }
-}