npm - memd-cli - Versions diffs - 2.0.1 → 3.0.0 - Mend

memd-cli 2.0.1 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/.claude/settings.local.json +6 -1
package/README.md +40 -1
package/main.js +902 -97
package/package.json +4 -4
package/render-shared.js +95 -0
package/render-utils.js +31 -0
package/render-worker.js +13 -0
package/test/memd.test.js +324 -3
package/test/pixel.png +0 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "memd-cli",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "type": "module",
   "main": "main.js",
   "bin": {
@@ -10,10 +10,10 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "beautiful-mermaid": "^1.1.2",
+    "beautiful-mermaid": "^1.1.3",
     "chalk": "^5.6.2",
     "commander": "^14.0.3",
-    "marked": "^17.0.3",
+    "marked": "^17.0.4",
     "marked-terminal": "^7.3.0",
     "shiki": "^4.0.2"
   },
@@ -25,7 +25,7 @@
     "node": ">=20"
   },
   "license": "MIT",
-  "packageManager": "pnpm@10.15.1",
+  "packageManager": "pnpm@10.32.1",
   "devDependencies": {
     "tuistory": "^0.0.16",
     "vitest": "^4.0.18"

package/render-shared.js ADDED Viewed

@@ -0,0 +1,95 @@
+import crypto from 'node:crypto';
+import { Marked } from 'marked';
+import { renderMermaidSVG } from 'beautiful-mermaid';
+import { escapeHtml, resolveThemeColors } from './render-utils.js';
+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()}});",
+].join('');
+export function convertMermaidToSVG(markdown, diagramTheme) {
+  const mermaidRegex = /```mermaid\s+([\s\S]+?)```/g;
+  let svgIndex = 0;
+  return markdown.replace(mermaidRegex, (_, code) => {
+    try {
+      const prefix = `m${svgIndex++}`;
+      let svg = renderMermaidSVG(code.trim(), diagramTheme);
+      svg = svg.replace(/@import url\([^)]+\);\s*/g, '');
+      // Prefix all id="..." and url(#...) to avoid cross-SVG collisions
+      // Note: regex uses ` id=` (with leading space) to avoid matching `data-id`
+      svg = svg.replace(/ id="([^"]+)"/g, ` id="${prefix}-$1"`);
+      svg = svg.replace(/url\(#([^)]+)\)/g, `url(#${prefix}-$1)`);
+      return svg;
+    } catch (e) {
+      return `<pre class="mermaid-error">${escapeHtml(e.message)}\n\n${escapeHtml(code.trim())}</pre>`;
+    }
+  });
+}
+const htmlMarked = new Marked();
+// NOTE: Raw HTML in markdown (CSS, HTML tags) is passed through unsanitized.
+// JavaScript in markdown IS executable via inline HTML. This is intentional for a
+// development-only tool; CSS/HTML authoring in markdown is a useful feature.
+// The serve path mitigates XSS via CSP nonce-based script-src.
+export function renderToHTML(markdown, diagramColors) {
+  const processed = convertMermaidToSVG(markdown, diagramColors);
+  // Protect trusted SVGs/error blocks from HTML sanitization by replacing with placeholders
+  const nonce = crypto.randomUUID();
+  const svgStore = [];
+  const withPlaceholders = processed.replace(/<svg[\s\S]*?<\/svg>|<pre class="mermaid-error">[\s\S]*?<\/pre>/g, (match) => {
+    const id = svgStore.length;
+    svgStore.push(match);
+    return `MEMD_SVG_${nonce}_${id}`;
+  });
+  let body = htmlMarked.parse(withPlaceholders);
+  // Restore SVGs and wrap Mermaid diagrams in scrollable containers
+  for (let i = 0; i < svgStore.length; i++) {
+    const stored = svgStore[i];
+    const wrapped = stored.startsWith('<svg')
+      ? `<div class="mermaid-diagram">${stored}</div>`
+      : stored;
+    body = body.replace(`MEMD_SVG_${nonce}_${i}`, wrapped);
+  }
+  // Unwrap <p> tags around block-level mermaid containers
+  body = body.replace(/<p>\s*(<div class="mermaid-diagram">[\s\S]*?<\/div>)\s*<\/p>/g, '$1');
+  const t = resolveThemeColors(diagramColors);
+  const titleMatch = markdown.match(/^#\s+(.+)$/m);
+  const title = titleMatch ? titleMatch[1].replace(/<[^>]+>/g, '').trim() : '';
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<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; }
+a { color: ${t.accent}; }
+hr { border-color: ${t.line}; }
+blockquote { border-left: 3px solid ${t.line}; color: ${t.muted}; padding-left: 1rem; }
+svg { max-width: 100%; height: auto; }
+.mermaid-diagram { cursor: zoom-in; text-align: center; }
+.mermaid-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 2rem; }
+.mermaid-modal svg { max-width: calc(100vw - 4rem); max-height: calc(100vh - 4rem); }
+pre { background: color-mix(in srgb, ${t.fg} 8%, ${t.bg}); padding: 1rem; border-radius: 6px; overflow-x: auto; }
+code { font-size: 0.9em; color: ${t.accent}; }
+pre code { color: inherit; }
+table { border-collapse: collapse; }
+th, td { border: 1px solid ${t.line}; padding: 0.4rem 0.8rem; }
+th { background: color-mix(in srgb, ${t.fg} 5%, ${t.bg}); }
+.mermaid-error { background: color-mix(in srgb, ${t.accent} 10%, ${t.bg}); border: 1px solid color-mix(in srgb, ${t.accent} 40%, ${t.bg}); color: ${t.fg}; padding: 1rem; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; }
+</style>
+<!--memd:head-->
+</head>
+<body>
+<!--memd:content-->
+${body.trimEnd()}
+<!--/memd:content-->
+<!--memd:scripts-->
+</body>
+</html>
+`;
+}

package/render-utils.js ADDED Viewed

@@ -0,0 +1,31 @@
+export function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+// Color mixing: blend hex1 into hex2 at pct% (sRGB linear interpolation)
+// Equivalent to CSS color-mix(in srgb, hex1 pct%, hex2)
+export function mixHex(hex1, hex2, pct) {
+  const p = pct / 100;
+  const parse = (h, o) => parseInt(h.slice(o, o + 2), 16);
+  const mix = (c1, c2) => Math.round(c1 * p + c2 * (1 - p));
+  const toHex = x => x.toString(16).padStart(2, '0');
+  const r = mix(parse(hex1, 1), parse(hex2, 1));
+  const g = mix(parse(hex1, 3), parse(hex2, 3));
+  const b = mix(parse(hex1, 5), parse(hex2, 5));
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+// MIX ratios from beautiful-mermaid theme.ts:64-87
+export const MIX = { line: 50, arrow: 85, textSec: 60, nodeStroke: 20 };
+// Resolve optional DiagramColors fields for HTML template CSS
+export function resolveThemeColors(colors) {
+  return {
+    bg: colors.bg,
+    fg: colors.fg,
+    line: colors.line ?? mixHex(colors.fg, colors.bg, MIX.line),
+    accent: colors.accent ?? mixHex(colors.fg, colors.bg, MIX.arrow),
+    muted: colors.muted ?? mixHex(colors.fg, colors.bg, MIX.textSec),
+    border: colors.border ?? mixHex(colors.fg, colors.bg, MIX.nodeStroke),
+  };
+}

package/render-worker.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { parentPort } from 'node:worker_threads';
+import { renderToHTML } from './render-shared.js';
+if (!parentPort) throw new Error('This file must be run as a worker thread');
+parentPort.on('message', ({ id, markdown, diagramColors }) => {
+  try {
+    const html = renderToHTML(markdown, diagramColors);
+    parentPort.postMessage({ id, html });
+  } catch (e) {
+    parentPort.postMessage({ id, error: e.message });
+  }
+});

package/test/memd.test.js CHANGED Viewed

@@ -1,12 +1,16 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, beforeAll, afterAll } from 'vitest'
 import { launchTerminal } from 'tuistory'
-import { execSync } from 'child_process'
+import { execSync, spawn } from 'child_process'
+import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const MAIN = path.join(__dirname, '..', 'main.js')
+// Strip MEMD_THEME from env so tests always get the built-in default (nord)
+delete process.env.MEMD_THEME
 async function run(args, { waitFor = null } = {}) {
   const session = await launchTerminal({
     command: 'node',
@@ -27,7 +31,7 @@ function runSync(args) {
 describe('memd CLI', () => {
   it('--version', async () => {
     const output = await run(['-v'])
-    expect(output).toContain('2.0.0')
+    expect(output).toContain('3.0.0')
   })
   it('--help', async () => {
@@ -279,6 +283,37 @@ describe('memd CLI', () => {
       expect(output).toContain('Hello')
       expect(output).toContain('More text.')
     })
+    it('MEMD_THEME env sets default theme (HTML path)', () => {
+      const output = execSync(`node ${MAIN} --html test/test1.md`, {
+        encoding: 'utf-8',
+        timeout: 15000,
+        env: { ...process.env, MEMD_THEME: 'dracula' },
+      })
+      expect(output).toContain('#282a36') // dracula bg
+      expect(output).toContain('#f8f8f2') // dracula fg
+    })
+    it('--theme flag overrides MEMD_THEME env', () => {
+      const output = execSync(`node ${MAIN} --html --theme tokyo-night test/test1.md`, {
+        encoding: 'utf-8',
+        timeout: 15000,
+        env: { ...process.env, MEMD_THEME: 'dracula' },
+      })
+      expect(output).toContain('#1a1b26') // tokyo-night bg
+      expect(output).not.toContain('#282a36') // not dracula bg
+    })
+    it('invalid MEMD_THEME env exits with error', () => {
+      expect(() => {
+        execSync(`node ${MAIN} --html test/test1.md`, {
+          encoding: 'utf-8',
+          timeout: 15000,
+          stdio: 'pipe',
+          env: { ...process.env, MEMD_THEME: 'nonexistent' },
+        })
+      }).toThrow()
+    })
   })
   // chalk.level = 0 + Shiki: verify no ANSI codes for all themes
@@ -345,3 +380,289 @@ describe('memd CLI', () => {
     expect(output).not.toContain('Could not find the language')
   })
 })
+describe('memd serve', () => {
+  const PORT = 19876
+  const BASE_URL = `http://127.0.0.1:${PORT}`
+  let serverProcess
+  beforeAll(async () => {
+    serverProcess = spawn('node', [MAIN, 'serve', '--port', String(PORT), '--dir', __dirname, '--host', '127.0.0.1'], {
+      stdio: ['pipe', 'pipe', 'pipe'],
+    })
+    await new Promise((resolve, reject) => {
+      serverProcess.stdout.on('data', (data) => {
+        if (data.toString().includes('http://')) resolve()
+      })
+      serverProcess.on('error', reject)
+      setTimeout(() => reject(new Error('Server did not start in time')), 10000)
+    })
+  })
+  afterAll(async () => {
+    if (serverProcess) {
+      const exited = new Promise((resolve, reject) => {
+        serverProcess.on('close', resolve)
+        setTimeout(() => {
+          serverProcess.kill('SIGKILL')
+          reject(new Error('Server did not exit within 5s after SIGTERM'))
+        }, 5000)
+      })
+      serverProcess.kill('SIGTERM')
+      await exited
+    }
+  })
+  it('serve --help shows options', () => {
+    const output = runSync('serve --help')
+    expect(output).toContain('-d, --dir')
+    expect(output).toContain('--port')
+    expect(output).toContain('--host')
+    expect(output).toContain('--watch')
+    expect(output).toContain('--theme')
+  })
+  it('serves directory listing at root', async () => {
+    const res = await fetch(`${BASE_URL}/`)
+    expect(res.status).toBe(200)
+    expect(res.headers.get('content-type')).toContain('text/html')
+    const body = await res.text()
+    expect(body).toContain('Index of /')
+    expect(body).toContain('test1.md')
+    expect(body).toContain('test2.md')
+  })
+  it('serves .md file as HTML', async () => {
+    const res = await fetch(`${BASE_URL}/test1.md`)
+    expect(res.status).toBe(200)
+    expect(res.headers.get('content-type')).toContain('text/html')
+    const body = await res.text()
+    expect(body).toContain('<!DOCTYPE html>')
+    expect(body).toContain('<svg')
+  })
+  it('serves extensionless URL as .md', async () => {
+    const res = await fetch(`${BASE_URL}/test1`)
+    expect(res.status).toBe(200)
+    const body = await res.text()
+    expect(body).toContain('<!DOCTYPE html>')
+  })
+  it('returns 304 on matching ETag', async () => {
+    const res1 = await fetch(`${BASE_URL}/test1`)
+    const etag = res1.headers.get('etag')
+    expect(etag).toBeTruthy()
+    const res2 = await fetch(`${BASE_URL}/test1`, {
+      headers: { 'If-None-Match': etag },
+    })
+    expect(res2.status).toBe(304)
+  })
+  it('returns 404 for missing file', async () => {
+    const res = await fetch(`${BASE_URL}/nonexistent`)
+    expect(res.status).toBe(404)
+  })
+  it('blocks path traversal', async () => {
+    const res = await fetch(`${BASE_URL}/%2e%2e/package.json`)
+    expect([403, 404]).toContain(res.status)
+  })
+  it('returns 404 for non-.md static files', async () => {
+    const res = await fetch(`${BASE_URL}/memd.test.js`)
+    expect(res.status).toBe(404)
+  })
+  it('handles concurrent rendering without blocking', async () => {
+    const urls = [
+      `${BASE_URL}/test1.md`,
+      `${BASE_URL}/test2.md`,
+      `${BASE_URL}/test1`,
+      `${BASE_URL}/test2`,
+    ]
+    const results = await Promise.all(urls.map(u => fetch(u)))
+    for (const res of results) {
+      expect(res.status).toBe(200)
+      const body = await res.text()
+      expect(body).toContain('<!DOCTYPE html>')
+    }
+  })
+  // 4a. Static file serving
+  it('serves image files with correct Content-Type', async () => {
+    const res = await fetch(`${BASE_URL}/pixel.png`)
+    expect(res.status).toBe(200)
+    expect(res.headers.get('content-type')).toBe('image/png')
+  })
+  it('returns ETag header for static files', async () => {
+    const res = await fetch(`${BASE_URL}/pixel.png`)
+    expect(res.status).toBe(200)
+    expect(res.headers.get('etag')).toBeTruthy()
+  })
+  it('returns 304 on matching ETag for static files', async () => {
+    const res1 = await fetch(`${BASE_URL}/pixel.png`)
+    const etag = res1.headers.get('etag')
+    expect(etag).toBeTruthy()
+    const res2 = await fetch(`${BASE_URL}/pixel.png`, {
+      headers: { 'If-None-Match': etag },
+    })
+    expect(res2.status).toBe(304)
+  })
+  // 4b. Worker error recovery
+  it('server continues to respond after an error', async () => {
+    const res1 = await fetch(`${BASE_URL}/test1`)
+    expect(res1.status).toBe(200)
+    await res1.text()
+    const res2 = await fetch(`${BASE_URL}/nonexistent-error-test`)
+    expect(res2.status).toBe(404)
+    await res2.text()
+    const res3 = await fetch(`${BASE_URL}/test1`)
+    expect(res3.status).toBe(200)
+    const body = await res3.text()
+    expect(body).toContain('<!DOCTYPE html>')
+  })
+  // 4c. Cache behavior
+  it('second request for same .md returns same ETag (cache hit)', async () => {
+    const res1 = await fetch(`${BASE_URL}/test1`)
+    await res1.text()
+    const etag1 = res1.headers.get('etag')
+    const res2 = await fetch(`${BASE_URL}/test1`)
+    await res2.text()
+    const etag2 = res2.headers.get('etag')
+    expect(etag1).toBeTruthy()
+    expect(etag1).toBe(etag2)
+  })
+  it('modified .md file returns updated content (cache invalidation)', async () => {
+    const tmpFile = path.join(__dirname, 'test-cache-tmp.md')
+    fs.writeFileSync(tmpFile, '# Original')
+    try {
+      const res1 = await fetch(`${BASE_URL}/test-cache-tmp`)
+      expect(res1.status).toBe(200)
+      const body1 = await res1.text()
+      expect(body1).toContain('Original')
+      await new Promise(r => setTimeout(r, 50))
+      fs.writeFileSync(tmpFile, '# Updated')
+      const res2 = await fetch(`${BASE_URL}/test-cache-tmp`)
+      expect(res2.status).toBe(200)
+      const body2 = await res2.text()
+      expect(body2).toContain('Updated')
+    } finally {
+      fs.unlinkSync(tmpFile)
+    }
+  })
+  // 4d. Non-watch mode SSE
+  it('non-watch mode returns 404 for /_memd/events', async () => {
+    const res = await fetch(`${BASE_URL}/_memd/events`)
+    expect(res.status).toBe(404)
+  })
+  // 4f. Directory redirect
+  it('directory without trailing slash returns 302', async () => {
+    const tmpDir = path.join(__dirname, 'tmpsubdir')
+    fs.mkdirSync(tmpDir, { recursive: true })
+    try {
+      const res = await fetch(`${BASE_URL}/tmpsubdir`, { redirect: 'manual' })
+      expect(res.status).toBe(302)
+      expect(res.headers.get('location')).toBe('/tmpsubdir/')
+    } finally {
+      fs.rmdirSync(tmpDir)
+    }
+  })
+  // 4g. Path traversal vectors
+  it('../ encoded traversal returns 403 or 404', async () => {
+    const res = await fetch(`${BASE_URL}/%2e%2e/package.json`)
+    expect([403, 404]).toContain(res.status)
+  })
+  it('..%2f encoded traversal returns 403 or 404', async () => {
+    const res = await fetch(`${BASE_URL}/..%2fpackage.json`)
+    expect([403, 404]).toContain(res.status)
+  })
+  it('null byte in URL path returns 400 or 403', async () => {
+    const res = await fetch(`${BASE_URL}/test%00.md`)
+    expect([400, 403]).toContain(res.status)
+  })
+  // Sidebar
+  it('.md file response contains sidebar', async () => {
+    const res = await fetch(`${BASE_URL}/test1.md`)
+    const body = await res.text()
+    expect(body).toContain('memd-sidebar')
+    expect(body).toContain('memd-layout')
+    expect(body).toContain('aria-current="page"')
+  })
+  // isDotPath design: '..' allowed by isDotPath, caught by resolveServePath
+  describe('isDotPath and resolveServePath interaction', () => {
+    it('isDotPath allows .. (traversal caught by resolveServePath)', async () => {
+      const res = await fetch(`${BASE_URL}/../package.json`)
+      expect([403, 404]).toContain(res.status)
+    })
+    it('isDotPath blocks dotfiles like .hidden', async () => {
+      const res = await fetch(`${BASE_URL}/.hidden`)
+      expect(res.status).toBe(403)
+    })
+    it('isDotPath blocks .git paths', async () => {
+      const res = await fetch(`${BASE_URL}/.git/config`)
+      expect(res.status).toBe(403)
+    })
+  })
+})
+// 4d. Watch mode SSE
+describe('memd serve --watch', () => {
+  const WATCH_PORT = 19877
+  const WATCH_URL = `http://127.0.0.1:${WATCH_PORT}`
+  let watchProcess
+  beforeAll(async () => {
+    watchProcess = spawn('node', [MAIN, 'serve', '--port', String(WATCH_PORT), '--dir', __dirname, '--host', '127.0.0.1', '--watch'], {
+      stdio: ['pipe', 'pipe', 'pipe'],
+    })
+    await new Promise((resolve, reject) => {
+      watchProcess.stdout.on('data', (data) => {
+        if (data.toString().includes('http://')) resolve()
+      })
+      watchProcess.on('error', reject)
+      setTimeout(() => reject(new Error('Watch server did not start in time')), 10000)
+    })
+  })
+  afterAll(async () => {
+    if (watchProcess) {
+      const exited = new Promise((resolve, reject) => {
+        watchProcess.on('close', resolve)
+        setTimeout(() => {
+          watchProcess.kill('SIGKILL')
+          reject(new Error('Watch server did not exit within 5s after SIGTERM'))
+        }, 5000)
+      })
+      watchProcess.kill('SIGTERM')
+      await exited
+    }
+  })
+  it('/_memd/events returns text/event-stream content type', async () => {
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 3000)
+    try {
+      const res = await fetch(`${WATCH_URL}/_memd/events`, { signal: controller.signal })
+      expect(res.status).toBe(200)
+      expect(res.headers.get('content-type')).toBe('text/event-stream')
+    } finally {
+      clearTimeout(timeout)
+      controller.abort()
+    }
+  })
+})

package/test/pixel.png ADDED Viewed

Binary file