memd-cli 3.3.0 → 3.4.0

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
@@ -763,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, {
@@ -873,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) {
@@ -896,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()};';
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memd-cli",
-  "version": "3.3.0",
+  "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 () => {