@mgks/docmd 0.1.2 → 0.1.3

package/src/commands/dev.js

@@ -8,6 +8,25 @@ const fs = require('fs-extra');
 const { buildSite } = require('./build'); // Re-use the build logic
 const { loadConfig } = require('../core/config-loader');
 
+/**
+ * Format paths for display to make them relative to CWD
+ * @param {string} absolutePath - The absolute path to format
+ * @param {string} cwd - Current working directory
+ * @returns {string} - Formatted relative path
+ */
+function formatPathForDisplay(absolutePath, cwd) {
+  // Get the relative path from CWD
+  const relativePath = path.relative(cwd, absolutePath);
+  
+  // If it's not a subdirectory, prefix with ./ for clarity
+  if (!relativePath.startsWith('..') && !path.isAbsolute(relativePath)) {
+    return `./${relativePath}`;
+  }
+  
+  // Return the relative path
+  return relativePath;
+}
+
 async function startDevServer(configPathOption, options = { preserve: false }) {
   let config = await loadConfig(configPathOption); // Load initial config
   const CWD = process.cwd(); // Current Working Directory where user runs `docmd dev`
@@ -48,22 +67,24 @@ async function startDevServer(configPathOption, options = { preserve: false }) {
     console.error('WebSocket Server error:', error);
   });
 
-
   function broadcastReload() {
-    // console.log('Broadcasting reload to', wsClients.size, 'clients');
     wsClients.forEach(client => {
       if (client.readyState === WebSocket.OPEN) {
-        client.send('reload');
+        try {
+          client.send('reload');
+        } catch (error) {
+          console.error('Error sending reload command to client:', error);
+        }
       }
     });
   }
 
-  // Inject live reload script into HTML
+  // Inject live reload script into HTML responses
   app.use((req, res, next) => {
-    if (req.path.endsWith('.html')) {
+    if (req.path.endsWith('.html') || !req.path.includes('.')) {
       const originalSend = res.send;
-      res.send = function (body) {
-        if (typeof body === 'string') {
+      res.send = function(body) {
+        if (typeof body === 'string' && body.includes('</body>')) {
           const liveReloadScript = `
             <script>
               (function() {
@@ -156,7 +177,7 @@ async function startDevServer(configPathOption, options = { preserve: false }) {
   // Initial build
   console.log('🚀 Performing initial build for dev server...');
   try {
-    await buildSite(configPathOption, { isDev: true, preserve: options.preserve }); // Use the original config path option
+    await buildSite(configPathOption, { isDev: true, preserve: options.preserve, noDoubleProcessing: true }); // Use the original config path option
     console.log('✅ Initial build complete.');
   } catch (error) {
       console.error('❌ Initial build failed:', error.message, error.stack);
@@ -186,14 +207,14 @@ async function startDevServer(configPathOption, options = { preserve: false }) {
   }
 
   console.log(`👀 Watching for changes in:`);
-  console.log(`    - Source: ${paths.srcDirToWatch}`);
-  console.log(`    - Config: ${paths.configFileToWatch}`);
+  console.log(`    - Source: ${formatPathForDisplay(paths.srcDirToWatch, CWD)}`);
+  console.log(`    - Config: ${formatPathForDisplay(paths.configFileToWatch, CWD)}`);
   if (userAssetsDirExists) {
-    console.log(`    - Assets: ${paths.userAssetsDir}`);
+    console.log(`    - Assets: ${formatPathForDisplay(paths.userAssetsDir, CWD)}`);
   }
   if (process.env.DOCMD_DEV === 'true') {
-    console.log(`    - docmd Templates: ${DOCMD_TEMPLATES_DIR} (internal)`);
-    console.log(`    - docmd Assets: ${DOCMD_ASSETS_DIR} (internal)`);
+    console.log(`    - docmd Templates: ${formatPathForDisplay(DOCMD_TEMPLATES_DIR, CWD)} (internal)`);
+    console.log(`    - docmd Assets: ${formatPathForDisplay(DOCMD_ASSETS_DIR, CWD)} (internal)`);
   }
 
   const watcher = chokidar.watch(watchedPaths, {
@@ -219,7 +240,7 @@ async function startDevServer(configPathOption, options = { preserve: false }) {
         // For simplicity, we might need to restart the watcher or inform user to restart dev server if srcDir/outputDir change.
         // For now, we'll at least update the static server path.
         if (newPaths.outputDir !== paths.outputDir) {
-            console.log(`Output directory changed from ${paths.outputDir} to ${newPaths.outputDir}. Updating static server.`);
+            console.log(`Output directory changed from ${formatPathForDisplay(paths.outputDir, CWD)} to ${formatPathForDisplay(newPaths.outputDir, CWD)}. Updating static server.`);
             staticMiddleware = express.static(newPaths.outputDir);
         }
         // If srcDirToWatch changes, chokidar won't automatically pick it up.
@@ -228,9 +249,9 @@ async function startDevServer(configPathOption, options = { preserve: false }) {
         paths = newPaths; // Update paths for next build reference
       }
 
-      await buildSite(configPathOption, { isDev: true, preserve: options.preserve }); // Re-build using the potentially updated config path
+      await buildSite(configPathOption, { isDev: true, preserve: options.preserve, noDoubleProcessing: true }); // Re-build using the potentially updated config path
       broadcastReload();
-      console.log('✅ Rebuild complete. Browser will refresh automatically.');
+      console.log('✅ Rebuild complete.');
     } catch (error) {
       console.error('❌ Rebuild failed:', error.message, error.stack);
     }
@@ -238,19 +259,40 @@ async function startDevServer(configPathOption, options = { preserve: false }) {
 
   watcher.on('error', error => console.error(`Watcher error: ${error}`));
 
+  // Try different ports if the default port is in use
   const PORT = process.env.PORT || 3000;
-  server.listen(PORT, async () => {
-    // Check if index.html exists after initial build
-    const indexHtmlPath = path.join(paths.outputDir, 'index.html');
-    if (!await fs.pathExists(indexHtmlPath)) {
-        console.warn(`⚠️  Warning: ${indexHtmlPath} not found after initial build.
-        The dev server is running, but you might see a 404 for the root page.
-        Ensure your '${config.srcDir}' directory contains an 'index.md' or your navigation points to existing files.`);
-    }
-    console.log(`🎉 Dev server started at http://localhost:${PORT}`);
-    console.log(`Serving content from: ${paths.outputDir}`);
-    console.log(`Live reload is active. Browser will refresh automatically when files change.`);
-  });
+  const MAX_PORT_ATTEMPTS = 10;
+  let currentPort = PORT;
+  
+  // Function to try starting the server on different ports
+  function tryStartServer(port, attempt = 1) {
+    server.listen(port)
+      .on('listening', async () => {
+        // Check if index.html exists after initial build
+        const indexHtmlPath = path.join(paths.outputDir, 'index.html');
+        if (!await fs.pathExists(indexHtmlPath)) {
+            console.warn(`⚠️  Warning: ${formatPathForDisplay(indexHtmlPath, CWD)} not found after initial build.
+            The dev server is running, but you might see a 404 for the root page.
+            Ensure your '${config.srcDir}' directory contains an 'index.md' or your navigation points to existing files.`);
+        }
+        console.log(`🎉 Dev server started at http://localhost:${port}`);
+        console.log(`Serving content from: ${formatPathForDisplay(paths.outputDir, CWD)}`);
+        console.log(`Live reload is active. Browser will refresh automatically when files change.`);
+      })
+      .on('error', (err) => {
+        if (err.code === 'EADDRINUSE' && attempt < MAX_PORT_ATTEMPTS) {
+          console.log(`Port ${port} is in use, trying port ${port + 1}...`);
+          server.close();
+          tryStartServer(port + 1, attempt + 1);
+        } else {
+          console.error(`Failed to start server: ${err.message}`);
+          process.exit(1);
+        }
+      });
+  }
+  
+  // Start the server with port fallback
+  tryStartServer(currentPort);
 
   // Graceful shutdown
   process.on('SIGINT', () => {

package/src/core/file-processor.js

@@ -5,6 +5,21 @@ const matter = require('gray-matter');
 const hljs = require('highlight.js');
 const container = require('markdown-it-container');
 const attrs = require('markdown-it-attrs');
+const path = require('path'); // Add path module for findMarkdownFiles
+
+// Function to format paths for display (relative to CWD)
+function formatPathForDisplay(absolutePath) {
+  const CWD = process.cwd();
+  const relativePath = path.relative(CWD, absolutePath);
+  
+  // If it's not a subdirectory, prefix with ./ for clarity
+  if (!relativePath.startsWith('..') && !path.isAbsolute(relativePath)) {
+    return `./${relativePath}`;
+  }
+  
+  // Return the relative path
+  return relativePath;
+}
 
 const md = new MarkdownIt({
   html: true,
@@ -335,7 +350,7 @@ function extractHeadingsFromHtml(htmlContent) {
   return headings;
 }
 
-async function processMarkdownFile(filePath) {
+async function processMarkdownFile(filePath, options = { isDev: false }) {
   const rawContent = await fs.readFile(filePath, 'utf8');
   let frontmatter, markdownContent;
 
@@ -346,21 +361,43 @@ async function processMarkdownFile(filePath) {
   } catch (e) {
     if (e.name === 'YAMLException') {
       // Provide more specific error for YAML parsing issues
-      const errorMessage = `Error parsing YAML frontmatter in ${filePath}: ${e.reason || e.message}${e.mark ? ` at line ${e.mark.line + 1}, column ${e.mark.column + 1}` : ''}. Please check the syntax.`;
+      const errorMessage = `Error parsing YAML frontmatter in ${formatPathForDisplay(filePath)}: ${e.reason || e.message}${e.mark ? ` at line ${e.mark.line + 1}, column ${e.mark.column + 1}` : ''}. Please check the syntax.`;
       console.error(`❌ ${errorMessage}`);
       throw new Error(errorMessage); // Propagate error to stop build/dev
     }
     // For other errors from gray-matter or unknown errors
-    console.error(`❌ Error processing frontmatter in ${filePath}: ${e.message}`);
+    console.error(`❌ Error processing frontmatter in ${formatPathForDisplay(filePath)}: ${e.message}`);
     throw e;
   }
 
   if (!frontmatter.title) {
-    console.warn(`⚠️ Warning: Markdown file ${filePath} is missing a 'title' in its frontmatter. Using filename as fallback.`);
+    console.warn(`⚠️ Warning: Markdown file ${formatPathForDisplay(filePath)} is missing a 'title' in its frontmatter. Using filename as fallback.`);
     // Fallback title, or you could make it an error
     // frontmatter.title = path.basename(filePath, path.extname(filePath));
   }
 
+  // Special handling for no-style pages with HTML content
+  if (frontmatter.noStyle === true) {
+    // Only log when not in dev mode to reduce console output during dev
+    if (!options.isDev) {
+      console.log(`📄 Processing no-style page: ${formatPathForDisplay(filePath)} - Using raw HTML content`);
+    }
+    
+    // For no-style pages, we'll use the raw content directly
+    // No markdown processing, no HTML escaping
+    const htmlContent = markdownContent;
+    
+    // Extract headings for table of contents (if needed)
+    const headings = extractHeadingsFromHtml(htmlContent);
+
+    return {
+      frontmatter,
+      htmlContent,
+      headings,
+    };
+  }
+
+  // Regular processing for standard pages
   // Check if this is a documentation example showing how to use containers
   const isContainerDocumentation = markdownContent.includes('containerName [optionalTitleOrType]') || 
                                   markdownContent.includes('## Callouts') || 
@@ -413,4 +450,29 @@ async function processMarkdownFile(filePath) {
   };
 }
 
-module.exports = { processMarkdownFile, mdInstance: md, extractHeadingsFromHtml }; // Export mdInstance if needed by plugins for consistency
+// Add findMarkdownFiles function
+/**
+ * Recursively finds all Markdown files in a directory and its subdirectories
+ * @param {string} dir - Directory to search in
+ * @returns {Promise<string[]>} - Array of file paths
+ */
+async function findMarkdownFiles(dir) {
+  let files = [];
+  const items = await fs.readdir(dir, { withFileTypes: true });
+  for (const item of items) {
+    const fullPath = path.join(dir, item.name);
+    if (item.isDirectory()) {
+      files = files.concat(await findMarkdownFiles(fullPath));
+    } else if (item.isFile() && (item.name.endsWith('.md') || item.name.endsWith('.markdown'))) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+module.exports = { 
+  processMarkdownFile, 
+  mdInstance: md, 
+  extractHeadingsFromHtml,
+  findMarkdownFiles // Export the findMarkdownFiles function
+};

package/src/core/html-generator.js

@@ -18,7 +18,7 @@ async function processPluginHooks(config, pageData, relativePathToRoot) {
     // 1. Favicon (built-in handling)
     if (config.favicon) {
         const faviconPath = config.favicon.startsWith('/') ? config.favicon.substring(1) : config.favicon;
-        faviconLinkHtml = `  <link rel="icon" href="${relativePathToRoot}${faviconPath}">\n`;
+        faviconLinkHtml = `<link rel="shortcut icon" href="${relativePathToRoot}${faviconPath}" type="image/x-icon">\n`;
     }
 
     // 2. Theme CSS (built-in handling for theme.name)
@@ -75,9 +75,21 @@ async function generateHtmlPage(templateData) {
         footerHtml = mdInstance.renderInline(config.footer);
     }
 
-    const layoutTemplatePath = path.join(__dirname, '..', 'templates', 'layout.ejs');
+    // Determine which template to use based on frontmatter
+    let templateName = 'layout.ejs';
+    if (frontmatter.noStyle === true) {
+        templateName = 'no-style.ejs';
+        
+        // For no-style pages, ensure we're passing the raw HTML content
+        // without any additional processing or escaping
+        if (content.includes('&lt;') || content.includes('&gt;')) {
+            console.warn(`⚠️ Warning: HTML content in no-style page appears to be escaped. This may cause rendering issues.`);
+        }
+    }
+
+    const layoutTemplatePath = path.join(__dirname, '..', 'templates', templateName);
     if (!await fs.pathExists(layoutTemplatePath)) {
-        throw new Error(`Layout template not found: ${layoutTemplatePath}`);
+        throw new Error(`Template not found: ${layoutTemplatePath}`);
     }
     const layoutTemplate = await fs.readFile(layoutTemplatePath, 'utf8');
 
@@ -105,6 +117,7 @@ async function generateHtmlPage(templateData) {
         currentPagePath, // Pass the current page path for active state detection
         headings: headings || [], // Pass headings for TOC, default to empty array if not provided
         isActivePage, // Flag to determine if TOC should be shown
+        frontmatter, // Pass the entire frontmatter for no-style template
         ...pluginOutputs, // Spread all plugin generated HTML strings
     };
 

package/src/plugins/sitemap.js

@@ -1,6 +1,20 @@
 const fs = require('fs-extra');
 const path = require('path');
 
+// Function to format paths for display (relative to CWD)
+function formatPathForDisplay(absolutePath) {
+  const CWD = process.cwd();
+  const relativePath = path.relative(CWD, absolutePath);
+  
+  // If it's not a subdirectory, prefix with ./ for clarity
+  if (!relativePath.startsWith('..') && !path.isAbsolute(relativePath)) {
+    return `./${relativePath}`;
+  }
+  
+  // Return the relative path
+  return relativePath;
+}
+
 /**
  * Generate sitemap.xml in the output directory root
  * @param {Object} config - The full configuration object
@@ -100,7 +114,7 @@ async function generateSitemap(config, pages, outputDir, options = { isDev: fals
   
   // Only show sitemap generation message in production mode or if DOCMD_DEV is true
   if (!options.isDev || process.env.DOCMD_DEV === 'true') {
-    console.log(`✅ Generated sitemap at ${sitemapPath}`);
+    console.log(`✅ Generated sitemap at ${formatPathForDisplay(sitemapPath)}`);
   }
 }
 

package/src/templates/no-style.ejs

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <% if (frontmatter.components?.meta !== false) { %>
+        <%- metaTagsHtml || '' %>
+        <title><%= pageTitle %><% if (frontmatter.components?.siteTitle !== false) { %> | <%= siteTitle %><% } %></title>
+        <% if (description && !(metaTagsHtml && metaTagsHtml.includes('name="description"'))) { %>
+            <meta name="description" content="<%= description %>">
+        <% } %>
+    <% } %>
+
+    <% if (frontmatter.components?.favicon !== false) { %>
+        <%- faviconLinkHtml || '' %>
+    <% } %>
+
+    <% if (frontmatter.components?.css !== false) { %>
+        <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css">
+        <% if (frontmatter.components?.highlight !== false) { %>
+            <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-highlight-<%= defaultMode === 'dark' ? 'dark' : 'light' %>.css" id="highlight-theme">
+        <% } %>
+    <% } %>
+
+    <% if (frontmatter.components?.theme !== false) { %>
+        <%- themeCssLinkHtml || '' %>
+    <% } %>
+
+    <% if (frontmatter.components?.customCss !== false && customCssFiles && customCssFiles.length > 0) { %>
+        <% customCssFiles.forEach(cssFile => { %>
+            <link rel="stylesheet" href="<%= relativePathToRoot %><%- cssFile.startsWith('/') ? cssFile.substring(1) : cssFile %>">
+        <% }); %>
+    <% } %>
+
+    <% if (frontmatter.components?.pluginStyles !== false) { %>
+        <%- pluginStylesHtml || '' %>
+    <% } %>
+
+    <% if (frontmatter.components?.pluginHeadScripts !== false) { %>
+        <%- pluginHeadScriptsHtml || '' %>
+    <% } %>
+    
+    <% if (frontmatter.customHead) { %>
+        <%- frontmatter.customHead %>
+    <% } %>
+</head>
+<body<% if (frontmatter.components?.theme !== false) { %> data-theme="<%= defaultMode %>"<% } %><% if (frontmatter.bodyClass) { %> class="<%= frontmatter.bodyClass %>"<% } %>>
+    <% if (frontmatter.components?.layout === true || frontmatter.components?.layout === 'full') { %>
+        <div class="main-content-wrapper">
+            <% if (frontmatter.components?.header !== false) { %>
+                <header class="page-header">
+                    <% if (frontmatter.components?.pageTitle !== false) { %>
+                        <h1><%= pageTitle %></h1>
+                    <% } %>
+                </header>
+            <% } %>
+            <main class="content-area">
+                <div class="content-layout">
+                    <div class="main-content">
+                        <%- content %>
+                    </div>
+                </div>
+            </main>
+            <% if (frontmatter.components?.footer !== false) { %>
+                <footer class="page-footer">
+                    <div class="footer-content">
+                        <div class="user-footer">
+                            <%- footerHtml || '' %>
+                        </div>
+                        <% if (frontmatter.components?.branding !== false) { %>
+                            <div class="branding-footer">
+                                Build with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path><path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66"></path><path d="m18 15-2-2"></path><path d="m15 18-2-2"></path></svg> <a href="https://docmd.mgks.dev" target="_blank" rel="noopener">docmd.</a>
+                            </div>
+                        <% } %>
+                    </div>
+                </footer>
+            <% } %>
+        </div>
+    <% } else if (frontmatter.components?.sidebar === true) { %>
+        <aside class="sidebar">
+            <% if (frontmatter.components?.logo !== false && logo && logo.light && logo.dark) { %>
+                <div class="sidebar-header">
+                    <a href="<%= logo.href || (relativePathToRoot + 'index.html') %>" class="logo-link">
+                        <img src="<%= relativePathToRoot %><%- logo.light.startsWith('/') ? logo.light.substring(1) : logo.light %>" alt="<%= logo.alt || siteTitle %>" class="logo-light" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
+                        <img src="<%= relativePathToRoot %><%- logo.dark.startsWith('/') ? logo.dark.substring(1) : logo.dark %>" alt="<%= logo.alt || siteTitle %>" class="logo-dark" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
+                    </a>
+                </div>
+            <% } %>
+            <% if (frontmatter.components?.navigation !== false) { %>
+                <%- navigationHtml %>
+            <% } %>
+            <% if (frontmatter.components?.themeToggle !== false && theme && theme.enableModeToggle) { %>
+                <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button">
+                    <%- renderIcon('sun', { class: 'icon-sun' }) %>
+                    <%- renderIcon('moon', { class: 'icon-moon' }) %>
+                </button>
+            <% } %>
+        </aside>
+        <div class="main-content-wrapper">
+            <% if (frontmatter.components?.header !== false) { %>
+                <header class="page-header">
+                    <% if (frontmatter.components?.pageTitle !== false) { %>
+                        <h1><%= pageTitle %></h1>
+                    <% } %>
+                </header>
+            <% } %>
+            <main class="content-area">
+                <div class="content-layout">
+                    <div class="main-content">
+                        <%- content %>
+                    </div>
+                    <% if (frontmatter.components?.toc !== false && headings && headings.length > 0) { %>
+                        <div class="toc-sidebar">
+                            <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
+                        </div>
+                    <% } %>
+                </div>
+            </main>
+            <% if (frontmatter.components?.footer !== false) { %>
+                <footer class="page-footer">
+                    <div class="footer-content">
+                        <div class="user-footer">
+                            <%- footerHtml || '' %>
+                        </div>
+                        <% if (frontmatter.components?.branding !== false) { %>
+                            <div class="branding-footer">
+                                Build with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path><path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66"></path><path d="m18 15-2-2"></path><path d="m15 18-2-2"></path></svg> <a href="https://docmd.mgks.dev" target="_blank" rel="noopener">docmd.</a>
+                            </div>
+                        <% } %>
+                    </div>
+                </footer>
+            <% } %>
+        </div>
+    <% } else { %>
+        <%- content %>
+    <% } %>
+
+    <% if (frontmatter.components?.scripts !== false) { %>
+        <% if (frontmatter.components?.themeToggle !== false) { %>
+            <script src="<%= relativePathToRoot %>assets/js/docmd-theme-toggle.js"></script>
+        <% } %>
+        
+        <% if (frontmatter.components?.customJs !== false && customJsFiles && customJsFiles.length > 0) { %>
+            <% customJsFiles.forEach(jsFile => { %>
+                <script src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>"></script>
+            <% }); %>
+        <% } %>
+        
+        <% if (frontmatter.components?.pluginBodyScripts !== false) { %>
+            <%- pluginBodyScriptsHtml || '' %>
+        <% } %>
+    <% } %>
+    
+    <% if (frontmatter.customScripts) { %>
+        <%- frontmatter.customScripts %>
+    <% } %>
+</body>
+</html>