index.js

const express = require('express');
const fs = require('fs').promises;
const path = require('path');
const { marked } = require('marked');
const { gfmHeadingId } = require('marked-gfm-heading-id');
const { markedHighlight } = require('marked-highlight');
const hljs = require('highlight.js');
const open = require('open').default || require('open');
const chokidar = require('chokidar');

marked.use(gfmHeadingId());
marked.use(markedHighlight({
  langPrefix: 'hljs language-',
  highlight(code, lang) {
    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
    return hljs.highlight(code, { language }).value;
  }
}));

marked.setOptions({
  gfm: true,
  breaks: true,
  tables: true
});

function extractH1Title(markdown) {
  const lines = markdown.split('\n');
  for (const line of lines) {
    const trimmed = line.trim();
    if (trimmed.startsWith('# ')) {
      return trimmed.substring(2).trim();
    }
    if (trimmed && !trimmed.startsWith('#')) {
      break;
    }
  }
  return null;
}

async function viewMarkdown(filePaths, options = {}) {
  const app = express();
  const port = options.port || 0;
  const clients = new Set(); // Track SSE clients
  let shutdownTimer = null; // Timer for auto-shutdown
  
  try {
    // Handle both single file (legacy) and multiple files
    const paths = Array.isArray(filePaths) ? filePaths : [filePaths];
    
    // Function to read and process all files
    const readAllFiles = async () => {
      const fileContents = [];
      for (const filePath of paths) {
        const absolutePath = path.resolve(filePath);
        const markdown = await fs.readFile(absolutePath, 'utf-8');
        const html = marked(markdown);
        const filename = path.basename(filePath);
        const h1Title = extractH1Title(markdown);
        const displayTitle = h1Title || filename;
        const hasH1 = h1Title !== null;
        fileContents.push({ filename, displayTitle, html, filePath, hasH1 });
      }
      return fileContents;
    };
    
    // Initial read
    let fileContents = await readAllFiles();
    
    const title = paths.length === 1 ? fileContents[0].displayTitle : `${paths.length} Markdown Files`;
    
    app.get('/', async (req, res) => {
      // Always re-read files to get fresh content (no caching)
      try {
        fileContents = await readAllFiles();
      } catch (err) {
        console.error('Error re-reading files:', err.message);
      }
      
      // Generate table of contents for multiple files
      let tableOfContents = '';
      if (fileContents.length > 1) {
        tableOfContents = `
          <div class="table-of-contents">
            <h2>Table of Contents</h2>
            <ul>
              ${fileContents.map((file, index) => 
                `<li><a href="#file-${index}">${file.displayTitle}</a></li>`
              ).join('')}
            </ul>
          </div>
          <div class="page-break"></div>
        `;
      }
      
      // Generate combined content with page breaks
      const combinedContent = fileContents.map((file, index) => `
        <div id="file-${index}" class="file-section">
          ${index > 0 ? '<div class="page-break"></div>' : ''}
          ${!file.hasH1 ? `<div class="file-header">
            <h1 class="file-title">${file.displayTitle}</h1>
          </div>` : ''}
          <div class="file-content">
            ${file.html}
          </div>
        </div>
      `).join('');
      
      // Auto-reload/connection script
      const autoReloadScript = `
    // Auto-reload functionality
    (function() {
      let reconnectDelay = 1000;
      let reconnectAttempts = 0;
      const maxReconnectDelay = 30000;
      
      function connectEventSource() {
        const eventSource = new EventSource('/events');
        
        eventSource.onopen = function() {
          console.log('Auto-reload connected');
          reconnectDelay = 1000;
          reconnectAttempts = 0;
        };
        
        eventSource.onmessage = function(event) {
          try {
            const data = JSON.parse(event.data);
            if (data.type === 'reload' && ${options.watch ? 'true' : 'false'}) {
              console.log('File change detected, reloading...');
              isAutoReloading = true;
              // Set flag to show notification after reload
              sessionStorage.setItem('viewmd-reloaded', 'true');
              location.reload();
            }
          } catch (err) {
            console.error('Error parsing SSE message:', err);
          }
        };
        
        eventSource.onerror = function(err) {
          console.error('Auto-reload connection lost, retrying...');
          eventSource.close();
          
          // Exponential backoff for reconnection
          reconnectAttempts++;
          reconnectDelay = Math.min(reconnectDelay * 1.5, maxReconnectDelay);
          
          setTimeout(connectEventSource, reconnectDelay);
        };
      }
      
      // Start the connection
      connectEventSource();
      
      // Show a flash notification when page reloads (only in watch mode)
      if (${options.watch ? 'true' : 'false'}) {
        // Check if this is a reload (not initial load)
        if (performance.navigation.type === 1 || sessionStorage.getItem('viewmd-reloaded')) {
          const notification = document.createElement('div');
          notification.style.position = 'fixed';
          notification.style.bottom = '10px';
          notification.style.right = '10px';
          notification.style.padding = '8px 12px';
          notification.style.background = '#28a745';
          notification.style.color = 'white';
          notification.style.borderRadius = '4px';
          notification.style.fontSize = '13px';
          notification.style.opacity = '0';
          notification.style.transition = 'opacity 0.3s ease-in-out';
          notification.style.zIndex = '9999';
          notification.textContent = '⟳ Reloaded';
          document.body.appendChild(notification);
          
          // Fade in
          setTimeout(() => notification.style.opacity = '0.9', 10);
          
          // Fade out and remove after 1.5 seconds
          setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
          }, 1500);
          
          // Clear the flag
          sessionStorage.removeItem('viewmd-reloaded');
        }
      }
    })();
      `;
      
      res.send(`
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${title}</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown-light.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css">
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ 
      startOnLoad: true,
      theme: 'default',
      securityLevel: 'loose'
    });
  </script>
  <style>
    body {
      box-sizing: border-box;
      min-width: 200px;
      max-width: 980px;
      margin: 0 auto;
      padding: 45px;
      background-color: #ffffff;
    }
    .markdown-body {
      box-sizing: border-box;
      min-width: 200px;
      max-width: 100%;
    }
    @media (max-width: 767px) {
      body { padding: 15px; }
    }
    pre.mermaid {
      text-align: center;
      background: transparent;
      border: none;
    }
    
    /* Table of Contents Styles */
    .table-of-contents {
      background-color: #f6f8fa;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      padding: 16px;
      margin-bottom: 24px;
    }
    .table-of-contents h2 {
      margin-top: 0;
      color: #24292f;
    }
    .table-of-contents ul {
      margin-bottom: 0;
    }
    .table-of-contents a {
      text-decoration: none;
      color: #0969da;
    }
    .table-of-contents a:hover {
      text-decoration: underline;
    }
    
    /* File Section Styles */
    .file-section {
      margin-bottom: 2rem;
    }
    .file-header {
      border-bottom: 2px solid #d0d7de;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
    }
    .file-title {
      color: #24292f;
      font-size: 2em;
      font-weight: 600;
      margin: 0;
    }
    
    /* Page Break Styles */
    .page-break {
      display: none;
    }
    
    /* Print Styles */
    @media print {
      body {
        padding: 0;
        margin: 0;
        max-width: none;
      }
      .page-break {
        display: block;
        page-break-before: always;
        height: 0;
        border: none;
        margin: 0;
        padding: 0;
      }
      .table-of-contents {
        page-break-after: always;
      }
      .file-header {
        page-break-after: avoid;
      }
      /* Hide TOC links in print */
      @media print {
        .table-of-contents {
          display: block;
        }
      }
    }
    
    /* Screen-only file separators */
    @media screen {
      .file-section:not(:last-child) {
        border-bottom: 3px solid #d0d7de;
        padding-bottom: 2rem;
        margin-bottom: 3rem;
      }
    }
  </style>
</head>
<body>
  <article class="markdown-body">
    ${tableOfContents}
    ${combinedContent}
  </article>
  <script>
    document.querySelectorAll('pre > code.language-mermaid').forEach((element) => {
      const pre = element.parentElement;
      pre.classList.add('mermaid');
      pre.innerHTML = element.textContent;
    });
    
    // Track if we're reloading due to file change
    let isAutoReloading = false;
    
    ${autoReloadScript}
  </script>
</body>
</html>
      `);
    });
    
    // Server-Sent Events endpoint for auto-reload
    app.get('/events', (req, res) => {
      res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
        'Access-Control-Allow-Origin': '*'
      });
      
      // Send initial connection message
      res.write(`data: {"type":"connected"}\n\n`);
      
      // Clear shutdown timer when client connects
      if (shutdownTimer) {
        clearTimeout(shutdownTimer);
        shutdownTimer = null;
        console.log('Client reconnected, cancelling shutdown');
      }
      
      // Add client to tracking set
      clients.add(res);
      console.log(`Client connected. Total clients: ${clients.size}`);
      
      // Remove client on disconnect
      req.on('close', () => {
        clients.delete(res);
        console.log(`Client disconnected. Remaining clients: ${clients.size}`);
        
        // If no clients left and not in keep-alive mode, start shutdown timer
        if (clients.size === 0 && !options.keepAlive) {
          console.log('All clients disconnected, shutting down in 1 second...');
          shutdownTimer = setTimeout(() => {
            console.log('Auto-shutdown: No clients connected');
            if (watcher) watcher.close();
            server.close();
            process.exit(0);
          }, 1000);
        }
      });
    });
    
    app.post('/shutdown', (req, res) => {
      res.send('Shutting down');
      setTimeout(() => {
        if (watcher) watcher.close();
        server.close();
        process.exit(0);
      }, 100);
    });
    
    // Set up file watcher if watch option is enabled
    let watcher = null;
    if (options.watch) {
      const absolutePaths = paths.map(p => path.resolve(p));
      
      watcher = chokidar.watch(absolutePaths, {
        ignoreInitial: true,
        awaitWriteFinish: {
          stabilityThreshold: 200,
          pollInterval: 100
        }
      });
      
      let reloadTimeout = null;
      
      const triggerReload = (filepath) => {
        // Clear any pending reload
        if (reloadTimeout) {
          clearTimeout(reloadTimeout);
        }
        
        // Debounce: wait 300ms before triggering reload
        reloadTimeout = setTimeout(() => {
          console.log(`File change detected: ${filepath}`);
          console.log(`Connected clients: ${clients.size}`);
          
          // Notify all connected clients
          const message = `data: {"type":"reload","timestamp":${Date.now()}}\n\n`;
          clients.forEach(client => {
            try {
              client.write(message);
              console.log('Sent reload event to client');
            } catch (err) {
              console.error('Failed to send to client:', err.message);
              // Client might be disconnected
              clients.delete(client);
            }
          });
        }, 300);
      };
      
      watcher.on('change', (filepath) => {
        console.log(`File changed: ${filepath}`);
        triggerReload(filepath);
      });
      watcher.on('add', (filepath) => {
        console.log(`File added: ${filepath}`);
        triggerReload(filepath);
      });
      watcher.on('unlink', (filepath) => {
        console.log(`File removed: ${filepath}`);
        triggerReload(filepath);
      });
    }
    
    const server = app.listen(port, async () => {
      const actualPort = server.address().port;
      const url = `http://localhost:${actualPort}`;
      if (fileContents.length === 1) {
        console.log(`Viewing ${fileContents[0].displayTitle} at ${url}`);
      } else {
        console.log(`Viewing ${fileContents.length} markdown files at ${url}`);
        fileContents.forEach((file, index) => {
          console.log(`  ${index + 1}. ${file.displayTitle}`);
        });
      }
      
      if (options.watch) {
        console.log('Auto-reload enabled - watching for file changes');
      }
      
      if (!options.noOpen) {
        await open(url);
      }
      
      if (!options.keepAlive) {
        console.log('Press Ctrl+C to stop the server');
      }
    });
    
    process.on('SIGINT', () => {
      console.log('\nShutting down server...');
      if (watcher) watcher.close();
      server.close();
      process.exit(0);
    });
    
  } catch (error) {
    console.error('Error:', error.message);
    process.exit(1);
  }
}

module.exports = { viewMarkdown };