@mgks/docmd 0.2.7 → 0.2.9

package/src/assets/js/docmd-main.js

@@ -20,7 +20,7 @@ function initializeCollapsibleNav() {
     const submenu = item.querySelector('.submenu');
 
     if (!navId || !anchor || !submenu) return;
-    
+
     const isParentActive = item.classList.contains('active-parent');
     // Default to expanded if it's a parent of the active page, otherwise check stored state.
     let isExpanded = isParentActive || (navStates[navId] === true);
@@ -51,19 +51,19 @@ function initializeCollapsibleNav() {
       }
     });
 
-/*    anchor.addEventListener('click', (e) => {
-      // If the click target is the icon, ALWAYS prevent navigation and toggle.
-      if (e.target.closest('.collapse-icon')) {
-        e.preventDefault();
-        toggleSubmenu(item.getAttribute('aria-expanded') !== 'true');
-      } 
-      // If the link is just a placeholder, also prevent navigation and toggle.
-      else if (anchor.getAttribute('href') === '#') {
-        e.preventDefault();
-        toggleSubmenu(item.getAttribute('aria-expanded') !== 'true');
-      }
-      // Otherwise, let the click proceed to navigate to the link.
-    });*/
+    /*    anchor.addEventListener('click', (e) => {
+          // If the click target is the icon, ALWAYS prevent navigation and toggle.
+          if (e.target.closest('.collapse-icon')) {
+            e.preventDefault();
+            toggleSubmenu(item.getAttribute('aria-expanded') !== 'true');
+          } 
+          // If the link is just a placeholder, also prevent navigation and toggle.
+          else if (anchor.getAttribute('href') === '#') {
+            e.preventDefault();
+            toggleSubmenu(item.getAttribute('aria-expanded') !== 'true');
+          }
+          // Otherwise, let the click proceed to navigate to the link.
+        });*/
   });
 }
 
@@ -101,7 +101,7 @@ function setupThemeToggleListener() {
     document.documentElement.setAttribute('data-theme', theme);
     document.body.setAttribute('data-theme', theme);
     localStorage.setItem('docmd-theme', theme);
-    
+
     // Switch highlight.js theme
     const highlightThemeLink = document.getElementById('highlight-theme');
     if (highlightThemeLink) {
@@ -131,7 +131,7 @@ function initializeSidebarToggle() {
 
   const defaultConfigCollapsed = body.dataset.defaultCollapsed === 'true';
   let isCollapsed = localStorage.getItem('docmd-sidebar-collapsed');
-  
+
   if (isCollapsed === null) {
     isCollapsed = defaultConfigCollapsed;
   } else {
@@ -161,8 +161,8 @@ function initializeTabs() {
         tabPanes.forEach(pane => pane.classList.remove('active'));
 
         navItem.classList.add('active');
-        if(tabPanes[index]) {
-            tabPanes[index].classList.add('active');
+        if (tabPanes[index]) {
+          tabPanes[index].classList.add('active');
         }
       });
     });
@@ -186,16 +186,16 @@ function initializeCopyCodeButtons() {
     const wrapper = document.createElement('div');
     wrapper.style.position = 'relative';
     wrapper.style.display = 'block';
-    
+
     // Insert the wrapper before the pre element
     preElement.parentNode.insertBefore(wrapper, preElement);
-    
+
     // Move the pre element into the wrapper
     wrapper.appendChild(preElement);
-    
+
     // Remove the relative positioning from pre since wrapper handles it
     preElement.style.position = 'static';
-    
+
     const copyButton = document.createElement('button');
     copyButton.className = 'copy-code-button';
     copyButton.innerHTML = copyIconSvg;
@@ -224,7 +224,7 @@ function syncBodyTheme() {
   if (currentTheme && document.body) {
     document.body.setAttribute('data-theme', currentTheme);
   }
-  
+
   // Also ensure highlight CSS matches the current theme
   const highlightThemeLink = document.getElementById('highlight-theme');
   if (highlightThemeLink && currentTheme) {

package/src/assets/js/docmd-mermaid.js

@@ -1,13 +1,13 @@
 // Source file from the docmd project — https://github.com/mgks/docmd
 // Mermaid diagram integration with theme support
 
-(function() {
+(function () {
   'use strict';
 
   // Configuration for mermaid based on current theme
   function getMermaidConfig(theme) {
     const isDark = theme === 'dark';
-    
+
     return {
       startOnLoad: false,
       theme: isDark ? 'dark' : 'default',
@@ -33,16 +33,16 @@
 
     const currentTheme = document.body.getAttribute('data-theme') || 'light';
     const config = getMermaidConfig(currentTheme);
-    
+
     mermaid.initialize(config);
-    
+
     // Render all mermaid diagrams
     renderMermaidDiagrams();
   }
 
   // Store for diagram codes
   const diagramStore = new Map();
-  
+
   // Render all mermaid diagrams on the page
   function renderMermaidDiagrams() {
     if (typeof mermaid === 'undefined') {
@@ -50,7 +50,7 @@
     }
 
     const mermaidElements = document.querySelectorAll('pre.mermaid');
-    
+
     mermaidElements.forEach((element, index) => {
       // Skip if already rendered
       if (element.getAttribute('data-processed') === 'true') {
@@ -60,22 +60,22 @@
       try {
         // Get the diagram code
         const code = element.textContent;
-        
+
         // Create a unique ID for this diagram
         const id = `mermaid-diagram-${index}-${Date.now()}`;
-        
+
         // Store the original code for re-rendering
         diagramStore.set(id, code);
-        
+
         // Create a container div
         const container = document.createElement('div');
         container.className = 'mermaid-container';
         container.setAttribute('data-mermaid-id', id);
         container.setAttribute('data-processed', 'true');
-        
+
         // Replace the pre element with the container
         element.parentNode.replaceChild(container, element);
-        
+
         // Render the diagram
         renderSingleDiagram(container, id, code);
       } catch (error) {
@@ -83,17 +83,17 @@
       }
     });
   }
-  
+
   // Render a single diagram
   function renderSingleDiagram(container, id, code) {
     if (typeof mermaid === 'undefined') {
       return;
     }
-    
+
     // Process the code to handle theme overrides
     const currentTheme = document.body.getAttribute('data-theme') || 'light';
     const processedCode = processThemeInCode(code, currentTheme);
-    
+
     // Render the diagram
     mermaid.render(id, processedCode).then(result => {
       container.innerHTML = result.svg;
@@ -102,21 +102,21 @@
       container.innerHTML = `<pre class="mermaid-error">Error rendering diagram: ${error.message}</pre>`;
     });
   }
-  
+
   // Process mermaid code to inject or override theme
   function processThemeInCode(code, theme) {
     const isDark = theme === 'dark';
     const targetTheme = isDark ? 'dark' : 'default';
-    
+
     // Check if code has %%{init: config - match the entire init block including nested objects
     const initRegex = /%%\{init:\s*\{.*?\}\s*\}%%/s;
     const match = code.match(initRegex);
-    
+
     if (match) {
       // Code has init config, replace only the theme property
       const initBlock = match[0];
       let updatedBlock = initBlock;
-      
+
       // Try to replace theme property
       if (initBlock.includes("'theme'")) {
         updatedBlock = initBlock.replace(/'theme'\s*:\s*'[^']*'/, `'theme':'${targetTheme}'`);
@@ -126,10 +126,10 @@
         // Add theme to the config - insert after the first {
         updatedBlock = initBlock.replace(/%%\{init:\s*\{/, `%%{init: {'theme':'${targetTheme}',`);
       }
-      
+
       return code.replace(initRegex, updatedBlock);
     }
-    
+
     // No init config, code will use global mermaid config
     return code;
   }
@@ -142,21 +142,21 @@
 
     const currentTheme = document.body.getAttribute('data-theme') || 'light';
     const config = getMermaidConfig(currentTheme);
-    
+
     // Re-initialize mermaid with new theme
     mermaid.initialize(config);
-    
+
     // Find all rendered diagrams and re-render them
     const containers = document.querySelectorAll('.mermaid-container[data-processed="true"]');
-    
+
     containers.forEach((container) => {
       const mermaidId = container.getAttribute('data-mermaid-id');
       const code = diagramStore.get(mermaidId);
-      
+
       if (code) {
         // Create a new unique ID for re-rendering
         const newId = `${mermaidId}-${Date.now()}`;
-        
+
         // Clear the container and re-render
         container.innerHTML = '';
         renderSingleDiagram(container, newId, code);
@@ -182,7 +182,7 @@
 
   // Initialize when DOM is ready
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
       initializeMermaid();
       setupThemeObserver();
     });
@@ -192,12 +192,11 @@
   }
 
   // Handle tab switches - render mermaid in newly visible tabs
-  document.addEventListener('click', function(e) {
+  document.addEventListener('click', function (e) {
     if (e.target.classList.contains('docmd-tabs-nav-item')) {
       // Wait a bit for tab content to be visible
       setTimeout(renderMermaidDiagrams, 100);
     }
   });
 
-})();
-
+})();

package/src/commands/build.js

@@ -12,6 +12,8 @@ const { version } = require('../../package.json');
 const matter = require('gray-matter');
 const MarkdownIt = require('markdown-it');
 const hljs = require('highlight.js');
+const CleanCSS = require('clean-css');
+const esbuild = require('esbuild');
 
 // Debug function to log navigation information
 function logNavigationPaths(pagePath, navPath, normalizedPath) {
@@ -42,12 +44,12 @@ const ASSET_VERSIONS = {
 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;
 }
@@ -61,6 +63,7 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
   const OUTPUT_DIR = path.resolve(CWD, config.outputDir);
   const USER_ASSETS_DIR = path.resolve(CWD, 'assets');
   const md = createMarkdownItInstance(config);
+  const shouldMinify = !options.isDev && config.minify !== false;
 
   if (!await fs.pathExists(SRC_DIR)) {
     throw new Error(`Source directory not found: ${formatPathForDisplay(SRC_DIR, CWD)}`);
@@ -85,27 +88,70 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
   const preservedFiles = [];
   const userAssetsCopied = [];
 
+  // Function to process and copy a single asset
+  const processAndCopyAsset = async (srcPath, destPath) => {
+    const ext = path.extname(srcPath).toLowerCase();
+
+    if (process.env.DOCMD_DEBUG) {
+      console.log(`[Asset Debug] Processing: ${path.basename(srcPath)} | Minify: ${shouldMinify} | Ext: ${ext}`);
+    }
+
+    if (shouldMinify && ext === '.css') {
+      try {
+        const content = await fs.readFile(srcPath, 'utf8');
+        const output = new CleanCSS({}).minify(content);
+        if (output.errors.length > 0) {
+          console.warn(`⚠️ CSS Minification error for ${path.basename(srcPath)}, using original.`, output.errors);
+          await fs.copyFile(srcPath, destPath);
+        } else {
+          await fs.writeFile(destPath, output.styles);
+        }
+      } catch (e) {
+        console.warn(`⚠️ CSS processing failed: ${e.message}`);
+        await fs.copyFile(srcPath, destPath);
+      }
+    }
+    else if (shouldMinify && ext === '.js') {
+      try {
+        const content = await fs.readFile(srcPath, 'utf8');
+        // Simple minification transform
+        const result = await esbuild.transform(content, {
+          minify: true,
+          loader: 'js',
+          target: 'es2015' // Ensure compatibility
+        });
+        await fs.writeFile(destPath, result.code);
+      } catch (e) {
+        console.warn(`⚠️ JS Minification failed: ${e.message}`);
+        await fs.copyFile(srcPath, destPath);
+      }
+    }
+    else {
+      // Images, fonts, or dev mode -> standard copy
+      await fs.copyFile(srcPath, destPath);
+    }
+  };
+
   // Copy user assets from root assets/ directory if it exists
   if (await fs.pathExists(USER_ASSETS_DIR)) {
     const assetsDestDir = path.join(OUTPUT_DIR, 'assets');
     await fs.ensureDir(assetsDestDir);
-    
+
     if (!options.isDev) {
       console.log(`📂 Copying user assets from ${formatPathForDisplay(USER_ASSETS_DIR, CWD)} to ${formatPathForDisplay(assetsDestDir, CWD)}...`);
     }
-    
+
     const userAssetFiles = await getAllFiles(USER_ASSETS_DIR);
-    
     for (const srcFile of userAssetFiles) {
       const relativePath = path.relative(USER_ASSETS_DIR, srcFile);
       const destFile = path.join(assetsDestDir, relativePath);
-      
-      // Ensure directory exists
+
       await fs.ensureDir(path.dirname(destFile));
-      await fs.copyFile(srcFile, destFile);
+      await processAndCopyAsset(srcFile, destFile);
+
       userAssetsCopied.push(relativePath);
     }
-    
+
     if (!options.isDev && userAssetsCopied.length > 0) {
       console.log(`📦 Copied ${userAssetsCopied.length} user assets`);
     }
@@ -114,41 +160,34 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
   // Copy assets
   const assetsSrcDir = path.join(__dirname, '..', 'assets');
   const assetsDestDir = path.join(OUTPUT_DIR, 'assets');
-  
+
   if (await fs.pathExists(assetsSrcDir)) {
     if (!options.isDev) {
       console.log(`📂 Copying docmd assets to ${formatPathForDisplay(assetsDestDir, CWD)}...`);
     }
-    
+
     // Create destination directory if it doesn't exist
     await fs.ensureDir(assetsDestDir);
-    
+
     // Get all files from source directory recursively
     const assetFiles = await getAllFiles(assetsSrcDir);
-    
-    // Copy each file individually, checking for existing files if preserve flag is set
     for (const srcFile of assetFiles) {
       const relativePath = path.relative(assetsSrcDir, srcFile);
       const destFile = path.join(assetsDestDir, relativePath);
-      
-      // Check if destination file already exists
       const fileExists = await fs.pathExists(destFile);
-      
-      // Skip if the file exists and either:
-      // 1. The preserve flag is set, OR
-      // 2. The file was copied from user assets (user assets take precedence)
+
       if (fileExists && (options.preserve || userAssetsCopied.includes(relativePath))) {
-        // Skip file and add to preserved list
         preservedFiles.push(relativePath);
         if (!options.isDev && options.preserve) {
           console.log(`  Preserving existing file: ${relativePath}`);
         }
+
       } else {
-        // Copy file (either it doesn't exist or we're not preserving)
         await fs.ensureDir(path.dirname(destFile));
-        await fs.copyFile(srcFile, destFile);
+        await processAndCopyAsset(srcFile, destFile);
       }
     }
+
   } else {
     console.warn(`⚠️  Assets source directory not found: ${formatPathForDisplay(assetsSrcDir, CWD)}`);
   }
@@ -189,7 +228,7 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
   for (const filePath of markdownFiles) {
     try {
       const relativePath = path.relative(SRC_DIR, filePath);
-      
+
       // Skip file if already processed in this dev build cycle
       if (options.noDoubleProcessing && processedFiles.has(relativePath)) {
         continue;
@@ -203,12 +242,12 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
       if (!processedData) {
         continue;
       }
-      
+
       // Destructure the valid data
       const { frontmatter: pageFrontmatter, htmlContent, headings } = processedData;
-      
+
       const isIndexFile = path.basename(relativePath) === 'index.md';
-      
+
       let outputHtmlPath;
       if (isIndexFile) {
         const dirPath = path.dirname(relativePath);
@@ -221,9 +260,9 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
 
       let relativePathToRoot = path.relative(path.dirname(finalOutputHtmlPath), OUTPUT_DIR);
       if (relativePathToRoot === '') {
-          relativePathToRoot = './';
+        relativePathToRoot = './';
       } else {
-          relativePathToRoot = relativePathToRoot.replace(/\\/g, '/') + '/';
+        relativePathToRoot = relativePathToRoot.replace(/\\/g, '/') + '/';
       }
 
       let normalizedPath = path.relative(SRC_DIR, filePath).replace(/\\/g, '/');
@@ -259,7 +298,7 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
         const cleanPath = prevPage.path.substring(1);
         prevPage.url = relativePathToRoot + cleanPath;
       }
-      
+
       if (nextPage) {
         const cleanPath = nextPage.path.substring(1);
         nextPage.url = relativePathToRoot + cleanPath;
@@ -286,9 +325,9 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
       await fs.ensureDir(path.dirname(finalOutputHtmlPath));
       await fs.writeFile(finalOutputHtmlPath, pageHtml);
 
-      const sitemapOutputPath = isIndexFile 
-          ? (path.dirname(relativePath) === '.' ? '' : path.dirname(relativePath) + '/')
-          : relativePath.replace(/\.md$/, '/');
+      const sitemapOutputPath = isIndexFile
+        ? (path.dirname(relativePath) === '.' ? '' : path.dirname(relativePath) + '/')
+        : relativePath.replace(/\.md$/, '/');
 
       processedPages.push({
         outputPath: sitemapOutputPath.replace(/\\/g, '/'),
@@ -314,7 +353,7 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
     preservedFiles.forEach(file => console.log(`  - assets/${file}`));
     console.log(`\nTo update these files in future builds, run without the --preserve flag.`);
   }
-  
+
   if (userAssetsCopied.length > 0 && !options.isDev) {
     console.log(`\n📋 User Assets: ${userAssetsCopied.length} files were copied from your assets/ directory:`);
     if (userAssetsCopied.length <= 10) {
@@ -336,10 +375,10 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
 async function findFilesToCleanup(dir) {
   const filesToRemove = [];
   const items = await fs.readdir(dir, { withFileTypes: true });
-  
+
   for (const item of items) {
     const fullPath = path.join(dir, item.name);
-    
+
     if (item.isDirectory()) {
       // Don't delete the assets directory
       if (item.name !== 'assets') {
@@ -347,13 +386,13 @@ async function findFilesToCleanup(dir) {
         filesToRemove.push(...subDirFiles);
       }
     } else if (
-      item.name.endsWith('.html') || 
+      item.name.endsWith('.html') ||
       item.name === 'sitemap.xml'
     ) {
       filesToRemove.push(fullPath);
     }
   }
-  
+
   return filesToRemove;
 }
 
@@ -361,7 +400,7 @@ async function findFilesToCleanup(dir) {
 async function getAllFiles(dir) {
   const files = [];
   const items = await fs.readdir(dir, { withFileTypes: true });
-  
+
   for (const item of items) {
     const fullPath = path.join(dir, item.name);
     if (item.isDirectory()) {
@@ -370,7 +409,7 @@ async function getAllFiles(dir) {
       files.push(fullPath);
     }
   }
-  
+
   return files;
 }
 

package/src/commands/init.js

@@ -23,6 +23,7 @@ module.exports = {
   // Directory Configuration
   srcDir: 'docs',       // Source directory for Markdown files
   outputDir: 'site',    // Directory for generated static site
+  minify: true,        // Enable/disable HTML/CSS/JS minification
 
   // Sidebar Configuration
   sidebar: {
@@ -88,6 +89,15 @@ module.exports = {
     // Add other future plugin configurations here by their key
   },
 
+  // "Edit this page" Link Configuration
+  editLink: {
+    enabled: false,
+    // The URL to the folder containing your docs in the git repo
+    // Note: It usually ends with /edit/main/docs or /blob/main/docs
+    baseUrl: 'https://github.com/mgks/docmd/edit/main/docs',
+    text: 'Edit this page on GitHub'
+  },
+
   // Navigation Structure (Sidebar)
   // Icons are kebab-case names from Lucide Icons (https://lucide.dev/)
   navigation: [