npm - @thanhvn14/csvibe - Versions diffs - 0.1.4 → 0.1.5 - Mend

@thanhvn14/csvibe 0.1.4 → 0.1.5

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 (392) hide show

package/.github/skills/markdown-novel-viewer/scripts/lib/http-server.cjs ADDED Viewed

@@ -0,0 +1,434 @@
+/**
+ * Core HTTP server for markdown-novel-viewer
+ * Handles routing for markdown viewer and directory browser
+ *
+ * Routes:
+ * - /view?file=<path>  - Markdown file viewer
+ * - /browse?dir=<path> - Directory browser
+ * - /assets/*          - Static assets
+ * - /file/*            - Local files (images, etc.)
+ *
+ * Security: Paths are validated to prevent directory traversal attacks
+ */
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
+// Allowed base directories for file access (set at runtime)
+let allowedBaseDirs = [];
+/**
+ * Set allowed directories for file serving
+ * @param {string[]} dirs - Array of allowed directory paths
+ */
+function setAllowedDirs(dirs) {
+  allowedBaseDirs = dirs.map(d => path.resolve(d));
+}
+/**
+ * Validate path is within allowed directories (prevents path traversal)
+ * @param {string} filePath - Path to validate
+ * @param {string[]} allowedDirs - Allowed base directories
+ * @returns {boolean} - True if path is safe
+ */
+function isPathSafe(filePath, allowedDirs = allowedBaseDirs) {
+  const resolved = path.resolve(filePath);
+  // Check for path traversal attempts
+  if (resolved.includes('..') || filePath.includes('\0')) {
+    return false;
+  }
+  // If no allowed dirs set, allow only project paths
+  if (allowedDirs.length === 0) {
+    return true;
+  }
+  // Must be within one of the allowed directories
+  return allowedDirs.some(dir => resolved.startsWith(dir));
+}
+/**
+ * Sanitize error message to prevent path disclosure
+ */
+function sanitizeErrorMessage(message) {
+  return message.replace(/\/[^\s'"<>]+/g, '[path]');
+}
+// MIME type mapping
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.ico': 'image/x-icon',
+  '.md': 'text/markdown',
+  '.txt': 'text/plain',
+  '.pdf': 'application/pdf'
+};
+/**
+ * Get MIME type for file extension
+ */
+function getMimeType(filePath) {
+  const ext = path.extname(filePath).toLowerCase();
+  return MIME_TYPES[ext] || 'application/octet-stream';
+}
+/**
+ * Send response with content
+ */
+function sendResponse(res, statusCode, contentType, content) {
+  res.writeHead(statusCode, { 'Content-Type': contentType });
+  res.end(content);
+}
+/**
+ * Send error response (sanitized)
+ */
+function sendError(res, statusCode, message) {
+  const safeMessage = sanitizeErrorMessage(message);
+  sendResponse(res, statusCode, 'text/html', `
+    <!DOCTYPE html>
+    <html>
+    <head><title>Error ${statusCode}</title></head>
+    <body style="font-family: system-ui; padding: 2rem;">
+      <h1>Error ${statusCode}</h1>
+      <p>${safeMessage}</p>
+    </body>
+    </html>
+  `);
+}
+/**
+ * Serve static file with path validation
+ */
+function serveFile(res, filePath, skipValidation = false) {
+  if (!skipValidation && !isPathSafe(filePath)) {
+    sendError(res, 403, 'Access denied');
+    return;
+  }
+  if (!fs.existsSync(filePath)) {
+    sendError(res, 404, 'File not found');
+    return;
+  }
+  const content = fs.readFileSync(filePath);
+  const mimeType = getMimeType(filePath);
+  sendResponse(res, 200, mimeType, content);
+}
+/**
+ * Get file icon based on extension
+ */
+function getFileIcon(filename) {
+  const ext = path.extname(filename).toLowerCase();
+  const iconMap = {
+    '.md': '📄',
+    '.txt': '📝',
+    '.json': '📋',
+    '.js': '📜',
+    '.cjs': '📜',
+    '.mjs': '📜',
+    '.ts': '📘',
+    '.css': '🎨',
+    '.html': '🌐',
+    '.png': '🖼️',
+    '.jpg': '🖼️',
+    '.jpeg': '🖼️',
+    '.gif': '🖼️',
+    '.svg': '🖼️',
+    '.pdf': '📕',
+    '.yaml': '⚙️',
+    '.yml': '⚙️',
+    '.toml': '⚙️',
+    '.env': '🔐',
+    '.sh': '💻',
+    '.bash': '💻'
+  };
+  return iconMap[ext] || '📄';
+}
+/**
+ * Render directory browser HTML
+ */
+function renderDirectoryBrowser(dirPath, assetsDir) {
+  const items = fs.readdirSync(dirPath);
+  const displayPath = dirPath.length > 50 ? '...' + dirPath.slice(-47) : dirPath;
+  // Separate directories and files, sort alphabetically
+  const dirs = [];
+  const files = [];
+  for (const item of items) {
+    // Skip hidden files and deprecated folders
+    if (item.startsWith('.') || item === 'deprecated') continue;
+    const itemPath = path.join(dirPath, item);
+    try {
+      const stats = fs.statSync(itemPath);
+      if (stats.isDirectory()) {
+        dirs.push(item);
+      } else {
+        files.push(item);
+      }
+    } catch {
+      // Skip items we can't stat
+    }
+  }
+  dirs.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+  files.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+  // Build file list HTML
+  let listHtml = '';
+  // Parent directory link (if not root)
+  const parentDir = path.dirname(dirPath);
+  if (parentDir !== dirPath) {
+    listHtml += `<li class="dir-item parent">
+      <a href="/browse?dir=${encodeURIComponent(parentDir)}">
+        <span class="icon">📁</span>
+        <span class="name">..</span>
+      </a>
+    </li>`;
+  }
+  // Directories
+  for (const dir of dirs) {
+    const fullPath = path.join(dirPath, dir);
+    listHtml += `<li class="dir-item folder">
+      <a href="/browse?dir=${encodeURIComponent(fullPath)}">
+        <span class="icon">📁</span>
+        <span class="name">${dir}/</span>
+      </a>
+    </li>`;
+  }
+  // Files
+  for (const file of files) {
+    const fullPath = path.join(dirPath, file);
+    const icon = getFileIcon(file);
+    const isMarkdown = file.endsWith('.md');
+    if (isMarkdown) {
+      listHtml += `<li class="dir-item file markdown">
+        <a href="/view?file=${encodeURIComponent(fullPath)}">
+          <span class="icon">${icon}</span>
+          <span class="name">${file}</span>
+        </a>
+      </li>`;
+    } else {
+      listHtml += `<li class="dir-item file">
+        <a href="/file${fullPath}" target="_blank">
+          <span class="icon">${icon}</span>
+          <span class="name">${file}</span>
+        </a>
+      </li>`;
+    }
+  }
+  // Empty directory message
+  if (dirs.length === 0 && files.length === 0) {
+    listHtml = '<li class="empty">This directory is empty</li>';
+  }
+  // Read CSS
+  let css = '';
+  const cssPath = path.join(assetsDir, 'directory-browser.css');
+  if (fs.existsSync(cssPath)) {
+    css = fs.readFileSync(cssPath, 'utf8');
+  }
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>📁 ${path.basename(dirPath)}</title>
+  <style>
+    ${css}
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>📁 ${path.basename(dirPath)}</h1>
+      <p class="path">${displayPath}</p>
+    </header>
+    <ul class="file-list">
+      ${listHtml}
+    </ul>
+    <footer>
+      <p>${dirs.length} folder${dirs.length !== 1 ? 's' : ''}, ${files.length} file${files.length !== 1 ? 's' : ''}</p>
+    </footer>
+  </div>
+</body>
+</html>`;
+}
+/**
+ * Create HTTP server with routing
+ * @param {Object} options - Server options
+ * @param {string} options.assetsDir - Static assets directory
+ * @param {Function} options.renderMarkdown - Markdown render function (filePath) => html
+ * @param {string[]} options.allowedDirs - Allowed directories for file access
+ * @returns {http.Server} - HTTP server instance
+ */
+function createHttpServer(options) {
+  const { assetsDir, renderMarkdown, allowedDirs = [] } = options;
+  // Set allowed directories for path validation
+  if (allowedDirs.length > 0) {
+    setAllowedDirs(allowedDirs);
+  }
+  const server = http.createServer((req, res) => {
+    const parsedUrl = url.parse(req.url, true);
+    const pathname = decodeURIComponent(parsedUrl.pathname);
+    // Route: /assets/* - serve static files from assets directory
+    if (pathname.startsWith('/assets/')) {
+      const relativePath = pathname.replace('/assets/', '');
+      if (relativePath.includes('..')) {
+        sendError(res, 403, 'Access denied');
+        return;
+      }
+      const assetPath = path.join(assetsDir, relativePath);
+      serveFile(res, assetPath, true);
+      return;
+    }
+    // Route: /file/* - serve local files (images, etc.)
+    if (pathname.startsWith('/file/')) {
+      // Extract path after '/file/' prefix (slice(6) removes '/file/')
+      // Path is already URL-decoded by decodeURIComponent above
+      const filePath = pathname.slice(6);
+      if (!isPathSafe(filePath)) {
+        sendError(res, 403, 'Access denied');
+        return;
+      }
+      serveFile(res, filePath);
+      return;
+    }
+    // Route: /view?file=<path> - render markdown (query param)
+    if (pathname === '/view') {
+      const filePath = parsedUrl.query?.file;
+      if (!filePath) {
+        sendError(res, 400, 'Missing ?file= parameter. Use /view?file=/path/to/file.md');
+        return;
+      }
+      if (!isPathSafe(filePath)) {
+        sendError(res, 403, 'Access denied');
+        return;
+      }
+      if (!fs.existsSync(filePath)) {
+        sendError(res, 404, 'File not found');
+        return;
+      }
+      try {
+        const html = renderMarkdown(filePath);
+        sendResponse(res, 200, 'text/html', html);
+      } catch (err) {
+        console.error('[http-server] Render error:', err.message);
+        sendError(res, 500, 'Error rendering markdown');
+      }
+      return;
+    }
+    // Route: /browse?dir=<path> - directory browser (query param)
+    if (pathname === '/browse') {
+      const dirPath = parsedUrl.query?.dir;
+      if (!dirPath) {
+        sendError(res, 400, 'Missing ?dir= parameter. Use /browse?dir=/path/to/directory');
+        return;
+      }
+      if (!isPathSafe(dirPath)) {
+        sendError(res, 403, 'Access denied');
+        return;
+      }
+      if (!fs.existsSync(dirPath) || !fs.statSync(dirPath).isDirectory()) {
+        sendError(res, 404, 'Directory not found');
+        return;
+      }
+      try {
+        const html = renderDirectoryBrowser(dirPath, assetsDir);
+        sendResponse(res, 200, 'text/html', html);
+      } catch (err) {
+        console.error('[http-server] Browse error:', err.message);
+        sendError(res, 500, 'Error listing directory');
+      }
+      return;
+    }
+    // Route: / - show welcome/usage page
+    if (pathname === '/') {
+      sendResponse(res, 200, 'text/html', `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>Markdown Novel Viewer</title>
+          <style>
+            body { font-family: system-ui; max-width: 600px; margin: 2rem auto; padding: 1rem; }
+            h1 { color: #8b4513; }
+            code { background: #f5f5f5; padding: 0.2rem 0.4rem; border-radius: 3px; }
+            .routes { background: #faf8f3; padding: 1rem; border-radius: 8px; margin: 1rem 0; }
+          </style>
+        </head>
+        <body>
+          <h1>📖 Markdown Novel Viewer</h1>
+          <p>A calm, book-like viewer for markdown files.</p>
+          <div class="routes">
+            <h3>Routes</h3>
+            <ul>
+              <li><code>/view?file=/path/to/file.md</code> - View markdown</li>
+              <li><code>/browse?dir=/path/to/dir</code> - Browse directory</li>
+            </ul>
+          </div>
+          <p>Use the <code>/preview</code> command to start viewing files.</p>
+        </body>
+        </html>
+      `);
+      return;
+    }
+    // Default: 404
+    sendError(res, 404, 'Not found');
+  });
+  return server;
+}
+module.exports = {
+  createHttpServer,
+  getMimeType,
+  sendResponse,
+  sendError,
+  serveFile,
+  isPathSafe,
+  setAllowedDirs,
+  sanitizeErrorMessage,
+  MIME_TYPES,
+  renderDirectoryBrowser,
+  getFileIcon
+};

package/.github/skills/markdown-novel-viewer/scripts/lib/markdown-renderer.cjs ADDED Viewed

@@ -0,0 +1,272 @@
+/**
+ * Markdown rendering engine with syntax highlighting and image resolution
+ * Converts markdown to styled HTML for novel-reader UI
+ */
+const fs = require('fs');
+const path = require('path');
+// Lazy load dependencies
+let marked = null;
+let hljs = null;
+let matter = null;
+/**
+ * Initialize markdown dependencies
+ */
+function initDependencies() {
+  if (!marked) {
+    const { Marked } = require('marked');
+    hljs = require('highlight.js');
+    marked = new Marked({
+      gfm: true,
+      breaks: true
+    });
+    // Configure highlight.js renderer
+    marked.setOptions({
+      highlight: (code, lang) => {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return hljs.highlight(code, { language: lang }).value;
+          } catch {
+            return code;
+          }
+        }
+        return hljs.highlightAuto(code).value;
+      }
+    });
+    matter = require('gray-matter');
+  }
+}
+/**
+ * Resolve a single image source path to /file/ route
+ * @param {string} src - Image source path
+ * @param {string} basePath - Base directory path
+ * @returns {string} - Resolved path or original if absolute URL
+ */
+function resolveImageSrc(src, basePath) {
+  // Skip absolute URLs
+  if (src.startsWith('http://') || src.startsWith('https://') || src.startsWith('/file')) {
+    return src;
+  }
+  // Resolve relative path to absolute /file/ route
+  // Use URL encoding to handle special chars and Windows paths (D:\...)
+  const absolutePath = path.resolve(basePath, src);
+  return `/file/${encodeURIComponent(absolutePath)}`;
+}
+/**
+ * Resolve relative image paths to /file/ routes
+ * Supports both inline and reference-style markdown images
+ * @param {string} markdown - Markdown content
+ * @param {string} basePath - Base directory path
+ * @returns {string} - Markdown with resolved image paths
+ */
+function resolveImages(markdown, basePath) {
+  let result = markdown;
+  // 1. Handle inline images: ![alt](src) or ![alt](src "title")
+  const inlineImgRegex = /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g;
+  result = result.replace(inlineImgRegex, (match, alt, src) => {
+    const resolvedSrc = resolveImageSrc(src, basePath);
+    return `![${alt}](${resolvedSrc})`;
+  });
+  // 2. Handle reference-style image definitions: [label]: src or [label]: src "title"
+  // These appear at the end of the document like: [Step 1 Initial]: ./screenshots/step1.png
+  const refDefRegex = /^\[([^\]]+)\]:\s*(\S+)(?:\s+"[^"]*")?$/gm;
+  result = result.replace(refDefRegex, (match, label, src) => {
+    const resolvedSrc = resolveImageSrc(src, basePath);
+    return `[${label}]: ${resolvedSrc}`;
+  });
+  return result;
+}
+/**
+ * Generate table of contents from headings
+ * @param {string} html - Rendered HTML
+ * @returns {Array<{level: number, id: string, text: string}>} - TOC items
+ */
+function generateTOC(html) {
+  const headings = [];
+  // Match h1-h3 with id attribute
+  const regex = /<h([1-3])[^>]*id="([^"]+)"[^>]*>([^<]+)<\/h\1>/gi;
+  let match;
+  while ((match = regex.exec(html)) !== null) {
+    headings.push({
+      level: parseInt(match[1], 10),
+      id: match[2],
+      text: match[3].trim()
+    });
+  }
+  return headings;
+}
+/**
+ * Generate a slug from text for use as anchor ID (matches plan-navigator.cjs)
+ * @param {string} text - Text to slugify
+ * @returns {string} - URL-safe slug
+ */
+function slugify(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+/**
+ * Add IDs to headings for anchor links
+ * Also adds phase-specific IDs for inline phases in plan.md
+ * @param {string} html - Rendered HTML
+ * @returns {string} - HTML with heading IDs
+ */
+function addHeadingIds(html) {
+  const usedIds = new Set();
+  return html.replace(/<h([1-6])>([^<]+)<\/h\1>/gi, (match, level, text) => {
+    // Check if this is a phase heading (e.g., "Phase 01: Name" or contains phase table row content)
+    const phaseMatch = text.match(/^Phase\s*(\d+)[:\s]+(.+)/i);
+    let id;
+    if (phaseMatch) {
+      // Generate phase-specific anchor ID that matches plan-navigator.cjs format
+      const phaseNum = parseInt(phaseMatch[1], 10);
+      const phaseName = phaseMatch[2].trim();
+      id = `phase-${String(phaseNum).padStart(2, '0')}-${slugify(phaseName)}`;
+    } else {
+      // Standard heading ID generation
+      id = slugify(text);
+    }
+    // Handle duplicate IDs
+    let uniqueId = id;
+    let counter = 1;
+    while (usedIds.has(uniqueId)) {
+      uniqueId = `${id}-${counter}`;
+      counter++;
+    }
+    usedIds.add(uniqueId);
+    return `<h${level} id="${uniqueId}">${text}</h${level}>`;
+  });
+}
+/**
+ * Add anchor IDs to phase table rows
+ * Matches table rows with phase numbers: | 01 | Description | Status |
+ * @param {string} html - Rendered HTML
+ * @returns {string} - HTML with phase anchor IDs in table rows
+ */
+function addPhaseTableAnchors(html) {
+  const usedIds = new Set();
+  // Match table rows with phase pattern: <tr><td>01</td><td>Description</td>...
+  // This handles the "Phase Summary" table format
+  return html.replace(/<tr>\s*<td>(\d{2})<\/td>\s*<td>([^<]+)<\/td>/gi, (match, phaseNum, description) => {
+    const num = parseInt(phaseNum, 10);
+    const slug = slugify(description.trim());
+    const id = `phase-${String(num).padStart(2, '0')}-${slug}`;
+    // Handle duplicates
+    let uniqueId = id;
+    let counter = 1;
+    while (usedIds.has(uniqueId)) {
+      uniqueId = `${id}-${counter}`;
+      counter++;
+    }
+    usedIds.add(uniqueId);
+    // Add anchor span at the start of the row
+    return `<tr id="${uniqueId}"><td>${phaseNum}</td><td>${description}</td>`;
+  });
+}
+/**
+ * Parse frontmatter from markdown
+ * @param {string} content - Raw markdown content
+ * @returns {{data: Object, content: string}} - Parsed frontmatter and content
+ */
+function parseFrontmatter(content) {
+  initDependencies();
+  return matter(content);
+}
+/**
+ * Render markdown file to HTML
+ * @param {string} filePath - Path to markdown file
+ * @param {Object} options - Render options
+ * @returns {{html: string, toc: Array, frontmatter: Object, title: string}}
+ */
+function renderMarkdownFile(filePath, options = {}) {
+  initDependencies();
+  const rawContent = fs.readFileSync(filePath, 'utf8');
+  const basePath = path.dirname(filePath);
+  // Parse frontmatter
+  const { data: frontmatter, content } = parseFrontmatter(rawContent);
+  // Resolve image paths
+  const resolvedContent = resolveImages(content, basePath);
+  // Render markdown to HTML
+  let html = marked.parse(resolvedContent);
+  // Add IDs to headings
+  html = addHeadingIds(html);
+  // Add anchor IDs to phase table rows (for inline phases in plan.md)
+  html = addPhaseTableAnchors(html);
+  // Generate TOC
+  const toc = generateTOC(html);
+  // Extract title from frontmatter or first h1
+  let title = frontmatter.title;
+  if (!title) {
+    const h1Match = html.match(/<h1[^>]*>([^<]+)<\/h1>/i);
+    title = h1Match ? h1Match[1] : path.basename(filePath, '.md');
+  }
+  return {
+    html,
+    toc,
+    frontmatter,
+    title
+  };
+}
+/**
+ * Render TOC as HTML sidebar
+ * @param {Array} toc - TOC items
+ * @returns {string} - HTML string
+ */
+function renderTOCHtml(toc) {
+  if (!toc.length) return '';
+  const items = toc.map(({ level, id, text }) => {
+    const indent = (level - 1) * 12;
+    return `<li style="padding-left: ${indent}px"><a href="#${id}">${text}</a></li>`;
+  }).join('\n');
+  return `<ul class="toc-list">${items}</ul>`;
+}
+module.exports = {
+  renderMarkdownFile,
+  resolveImages,
+  resolveImageSrc,
+  generateTOC,
+  addHeadingIds,
+  addPhaseTableAnchors,
+  parseFrontmatter,
+  renderTOCHtml,
+  initDependencies
+};