mdv-live 0.3.6 → 0.3.8

package/bin/mdv.js

@@ -274,7 +274,7 @@ async function convertToPdf(inputPath, outputPath) {
  */
 async function convertMarpToPdf(inputPath, outputPath) {
   try {
-    execSync(`npx @marp-team/marp-cli --no-stdin "${inputPath}" --pdf -o "${outputPath}"`, {
+    execSync(`npx @marp-team/marp-cli --no-stdin "${inputPath}" --pdf --html --allow-local-files -o "${outputPath}"`, {
       encoding: 'utf-8',
       stdio: 'inherit'
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/api/pdf.js

@@ -49,7 +49,7 @@ export function setupPdfRoutes(app) {
 
     const outputPath = fullPath.replace(/\.md$/, '.pdf');
     const outputFileName = path.basename(outputPath);
-    const command = `"${marpBin}" "${fullPath}" -o "${outputPath}" --allow-local-files --no-stdin`;
+    const command = `"${marpBin}" "${fullPath}" -o "${outputPath}" --html --allow-local-files --no-stdin`;
 
     try {
       await execAsync(command, { timeout: 60000 });

package/src/static/app.js

@@ -608,6 +608,16 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                         </svg>
                     </button>
+                    <button class="marp-fullscreen-btn" title="Fullscreen (F)">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
+                        </svg>
+                    </button>
+                    <button class="marp-close-nav" title="Hide (N to show)">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
                 `;
                 marpit.appendChild(nav);
             }
@@ -669,18 +679,104 @@
             if (prevBtn) prevBtn.addEventListener('click', prevSlide);
             if (nextBtn) nextBtn.addEventListener('click', nextSlide);
 
+            // Fullscreen toggle
+            const fullscreenBtn = elements.content.querySelector('.marp-fullscreen-btn');
+            const expandIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>';
+            const shrinkIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4m0 5H4m5 0L4 4m11 5h5m-5 0V4m0 5l5-5M9 15v5m0-5H4m5 0l-5 5m11-5h5m-5 0v5m0-5l5 5" /></svg>';
+            const toggleFullscreen = () => {
+                document.body.classList.toggle('marp-fullscreen');
+                const isFullscreen = document.body.classList.contains('marp-fullscreen');
+                if (fullscreenBtn) {
+                    fullscreenBtn.innerHTML = isFullscreen ? shrinkIcon : expandIcon;
+                    fullscreenBtn.title = isFullscreen ? 'Exit Fullscreen (Esc)' : 'Fullscreen (F)';
+                }
+                // Reset nav position when exiting fullscreen
+                const nav = elements.content.querySelector('.marp-nav');
+                if (!isFullscreen && nav) {
+                    nav.style.left = '';
+                    nav.style.top = '';
+                    nav.style.right = '';
+                    nav.style.bottom = '';
+                    nav.style.transform = '';
+                }
+            };
+            if (fullscreenBtn) fullscreenBtn.addEventListener('click', toggleFullscreen);
+
+            // Make nav draggable and closeable
+            const nav = elements.content.querySelector('.marp-nav');
+            if (nav) {
+                let isDragging = false;
+                let dragStartX, dragStartY, navStartX, navStartY;
+
+                nav.addEventListener('mousedown', (e) => {
+                    // Don't drag when clicking buttons or not in fullscreen
+                    if (e.target.closest('button')) return;
+                    if (!document.body.classList.contains('marp-fullscreen')) return;
+                    isDragging = true;
+                    nav.classList.add('dragging');
+                    dragStartX = e.clientX;
+                    dragStartY = e.clientY;
+                    const rect = nav.getBoundingClientRect();
+                    navStartX = rect.left;
+                    navStartY = rect.top;
+                    e.preventDefault();
+                });
+
+                document.addEventListener('mousemove', (e) => {
+                    if (!isDragging) return;
+                    const dx = e.clientX - dragStartX;
+                    const dy = e.clientY - dragStartY;
+                    const newX = Math.max(0, Math.min(window.innerWidth - nav.offsetWidth, navStartX + dx));
+                    const newY = Math.max(0, Math.min(window.innerHeight - nav.offsetHeight, navStartY + dy));
+                    nav.style.left = newX + 'px';
+                    nav.style.top = newY + 'px';
+                    nav.style.right = 'auto';
+                    nav.style.bottom = 'auto';
+                    nav.style.transform = 'none';
+                });
+
+                document.addEventListener('mouseup', () => {
+                    if (isDragging) {
+                        isDragging = false;
+                        nav.classList.remove('dragging');
+                    }
+                });
+
+                // Close button to hide nav
+                const closeBtn = nav.querySelector('.marp-close-nav');
+                if (closeBtn) {
+                    closeBtn.addEventListener('click', () => {
+                        nav.classList.add('hidden');
+                    });
+                }
+            }
+
             // Keyboard navigation
             marpKeyHandler = (e) => {
                 // Don't handle if editing or in dialog
                 if (state.isEditMode || !elements.dialogOverlay.classList.contains('hidden')) {
                     return;
                 }
+                const nav = elements.content.querySelector('.marp-nav');
                 if (e.key === 'ArrowRight' || e.key === ' ') {
                     e.preventDefault();
                     nextSlide();
                 } else if (e.key === 'ArrowLeft') {
                     e.preventDefault();
                     prevSlide();
+                } else if (e.key === 'f' || e.key === 'F') {
+                    e.preventDefault();
+                    toggleFullscreen();
+                } else if (e.key === 'n' || e.key === 'N') {
+                    e.preventDefault();
+                    if (nav) nav.classList.toggle('hidden');
+                } else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    if (document.body.classList.contains('marp-fullscreen')) {
+                        toggleFullscreen();
+                    } else if (nav && nav.classList.contains('hidden')) {
+                        nav.classList.remove('hidden');
+                    }
                 }
             };
             document.addEventListener('keydown', marpKeyHandler);
@@ -688,6 +784,7 @@
 
         cleanupMarp() {
             elements.content.classList.remove('marp-viewer');
+            document.body.classList.remove('marp-fullscreen');
             if (marpKeyHandler) {
                 document.removeEventListener('keydown', marpKeyHandler);
                 marpKeyHandler = null;

package/src/static/styles.css

@@ -875,6 +875,7 @@ body {
     border-radius: 8px;
     border: 1px solid var(--border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    user-select: none;
 }
 
 .marp-nav button {
@@ -911,12 +912,94 @@ body {
     text-align: center;
 }
 
+body.marp-fullscreen .marp-nav .slide-counter {
+    cursor: grab;
+}
+
+body.marp-fullscreen .marp-nav.dragging {
+    cursor: grabbing;
+    opacity: 0.9;
+}
+
+body.marp-fullscreen .marp-nav.dragging .slide-counter {
+    cursor: grabbing;
+}
+
 .marp-nav .keyboard-hint {
     font-size: 11px;
     color: var(--text-muted);
     margin-left: 8px;
 }
 
+/* Fullscreen Mode */
+body.marp-fullscreen {
+    overflow: hidden;
+}
+
+body.marp-fullscreen .sidebar,
+body.marp-fullscreen .resize-handle,
+body.marp-fullscreen .toolbar,
+body.marp-fullscreen .tab-bar {
+    display: none !important;
+}
+
+body.marp-fullscreen .container {
+    display: block;
+}
+
+body.marp-fullscreen .main {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background: #0f172a;
+}
+
+body.marp-fullscreen .content {
+    height: 100vh;
+    padding: 0;
+}
+
+body.marp-fullscreen .marp-nav {
+    bottom: 32px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    cursor: grab;
+}
+
+body.marp-fullscreen .marpit {
+    padding: 0;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+body.marp-fullscreen .marpit > svg[data-marpit-svg] {
+    max-height: 95vh;
+    max-width: 95vw;
+}
+
+.marp-fullscreen-btn {
+    margin-left: 4px;
+}
+
+.marp-close-nav {
+    margin-left: 4px;
+}
+
+.marp-close-nav:hover:not(:disabled) {
+    background: var(--danger) !important;
+    border-color: var(--danger) !important;
+}
+
+.marp-nav.hidden {
+    display: none !important;
+}
+
 /* Print styles for Marp */
 @media print {
     .marp-nav { display: none !important; }