@mgks/docmd 0.3.3 → 0.3.5

package/src/core/html-generator.js

@@ -8,18 +8,63 @@ const { generateSeoMetaTags } = require('../plugins/seo');
 const { generateAnalyticsScripts } = require('../plugins/analytics');
 const { renderIcon } = require('./icon-renderer');
 
-// Create a markdown instance for inline rendering
 let mdInstance = null;
-
 let themeInitScript = '';
+
 (async () => {
-    const themeInitPath = path.join(__dirname, '..', 'templates', 'partials', 'theme-init.js');
-    if (await fs.pathExists(themeInitPath)) {
-        const scriptContent = await fs.readFile(themeInitPath, 'utf8');
-        themeInitScript = `<script>${scriptContent}</script>`;
+    if (typeof __dirname !== 'undefined') {
+        const themeInitPath = path.join(__dirname, '..', 'templates', 'partials', 'theme-init.js');
+        if (await fs.pathExists(themeInitPath)) {
+            const scriptContent = await fs.readFile(themeInitPath, 'utf8');
+            themeInitScript = `<script>${scriptContent}</script>`;
+        }
     }
 })();
 
+// Helper to handle link rewriting based on build mode
+function fixHtmlLinks(htmlContent, relativePathToRoot, isOfflineMode) {
+    if (!htmlContent) return '';
+    const root = relativePathToRoot || './';
+
+    // Regex matches hrefs starting with /, ./, or ../
+    return htmlContent.replace(/href="((?:\/|\.\/|\.\.\/)[^"]*)"/g, (match, href) => {
+        let finalPath = href;
+
+        // 1. Convert Absolute to Relative
+        if (href.startsWith('/')) {
+            finalPath = root + href.substring(1);
+        }
+        
+        // 2. Logic based on Mode
+        if (isOfflineMode) {
+            // Offline Mode: Force index.html for directories
+            const cleanPath = finalPath.split('#')[0].split('?')[0];
+            // If it has no extension (like .html, .css, .png), treat as directory
+            if (!path.extname(cleanPath)) {
+                if (finalPath.includes('#')) {
+                    // Handle anchors: ./foo/#bar -> ./foo/index.html#bar
+                    const parts = finalPath.split('#');
+                    const prefix = parts[0].endsWith('/') ? parts[0] : parts[0] + '/';
+                    finalPath = prefix + 'index.html#' + parts[1];
+                } else {
+                    if (finalPath.endsWith('/')) {
+                        finalPath += 'index.html';
+                    } else {
+                        finalPath += '/index.html';
+                    }
+                }
+            }
+        } else {
+            // Online/Dev Mode: Strip index.html for clean URLs
+            if (finalPath.endsWith('/index.html')) {
+                finalPath = finalPath.substring(0, finalPath.length - 10);
+            }
+        }
+        
+        return `href="${finalPath}"`;
+    });
+}
+
 async function processPluginHooks(config, pageData, relativePathToRoot) {
     let metaTagsHtml = '';
     let faviconLinkHtml = '';
@@ -28,63 +73,52 @@ async function processPluginHooks(config, pageData, relativePathToRoot) {
     let pluginHeadScriptsHtml = '';
     let pluginBodyScriptsHtml = '';
 
-    // Favicon (built-in handling)
+    const safeRoot = relativePathToRoot || './';
+
+    // Favicon
     if (config.favicon) {
-        const faviconPath = config.favicon.startsWith('/') ? config.favicon.substring(1) : config.favicon;
-        faviconLinkHtml = `<link rel="shortcut icon" href="${relativePathToRoot}${faviconPath}" type="image/x-icon">\n`;
+        const cleanFaviconPath = config.favicon.startsWith('/') ? config.favicon.substring(1) : config.favicon;
+        const finalFaviconHref = `${safeRoot}${cleanFaviconPath}`;
+        
+        faviconLinkHtml = `  <link rel="icon" href="${finalFaviconHref}" type="image/x-icon" sizes="any">\n`;
+        faviconLinkHtml += `  <link rel="shortcut icon" href="${finalFaviconHref}" type="image/x-icon">\n`;
     }
 
-    // Theme CSS (built-in handling for theme.name)
     if (config.theme && config.theme.name && config.theme.name !== 'default') {
         const themeCssPath = `assets/css/docmd-theme-${config.theme.name}.css`;
-        themeCssLinkHtml = `  <link rel="stylesheet" href="${relativePathToRoot}${themeCssPath}">\n`;
+        themeCssLinkHtml = `  <link rel="stylesheet" href="${safeRoot}${themeCssPath}">\n`;
     }
 
-    // SEO Plugin (if configured)
     if (config.plugins?.seo) {
-        metaTagsHtml += generateSeoMetaTags(config, pageData, relativePathToRoot);
+        metaTagsHtml += generateSeoMetaTags(config, pageData, safeRoot);
     }
 
-    // Analytics Plugin (if configured)
     if (config.plugins?.analytics) {
         const analyticsScripts = generateAnalyticsScripts(config, pageData);
         pluginHeadScriptsHtml += analyticsScripts.headScriptsHtml;
         pluginBodyScriptsHtml += analyticsScripts.bodyScriptsHtml;
     }
 
-    return {
-        metaTagsHtml,
-        faviconLinkHtml,
-        themeCssLinkHtml,
-        pluginStylesHtml,
-        pluginHeadScriptsHtml,
-        pluginBodyScriptsHtml,
-    };
+    return { metaTagsHtml, faviconLinkHtml, themeCssLinkHtml, pluginStylesHtml, pluginHeadScriptsHtml, pluginBodyScriptsHtml };
 }
 
-async function generateHtmlPage(templateData) {
-    const {
-        content, siteTitle, navigationHtml,
-        relativePathToRoot, config, frontmatter, outputPath,
-        prevPage, nextPage, currentPagePath, headings
-    } = templateData;
-
+async function generateHtmlPage(templateData, isOfflineMode = false) {
+    let { content, siteTitle, navigationHtml, relativePathToRoot, config, frontmatter, outputPath, prevPage, nextPage, currentPagePath, headings } = templateData;
     const pageTitle = frontmatter.title;
 
-    // Process plugins to get their HTML contributions
-    const pluginOutputs = await processPluginHooks(
-        config,
-        { frontmatter, outputPath },
-        relativePathToRoot
-    );
+    if (!relativePathToRoot) relativePathToRoot = './';
+
+    // Fix Content Links based on mode
+    content = fixHtmlLinks(content, relativePathToRoot, isOfflineMode);
+
+    const pluginOutputs = await processPluginHooks(config, { frontmatter, outputPath }, relativePathToRoot);
 
     let footerHtml = '';
     if (config.footer) {
-        // Initialize mdInstance if not already done
-        if (!mdInstance) {
-            mdInstance = createMarkdownItInstance(config);
-        }
+        if (!mdInstance) mdInstance = createMarkdownItInstance(config);
         footerHtml = mdInstance.renderInline(config.footer);
+        // Fix Footer Links based on mode
+        footerHtml = fixHtmlLinks(footerHtml, relativePathToRoot, isOfflineMode);
     }
 
     let templateName = 'layout.ejs';
@@ -100,89 +134,60 @@ async function generateHtmlPage(templateData) {
 
     const isActivePage = currentPagePath && content && content.trim().length > 0;
 
-    // Calculate Edit Link
     let editUrl = null;
     let editLinkText = 'Edit this page';
-    
     if (config.editLink && config.editLink.enabled && config.editLink.baseUrl) {
-        // Normalize URL (remove trailing slash)
-        const baseUrl = config.editLink.baseUrl.replace(/\/$/, '');
-
-        // Get the source file path relative to srcDir
-        let relativeSourcePath = outputPath
-            .replace(/\/index\.html$/, '.md') // folder/index.html -> folder.md
-            .replace(/\\/g, '/'); // fix windows slashes
-
-        // Special case: The root index.html comes from index.md
-        if (relativeSourcePath === 'index.html') relativeSourcePath = 'index.md';
-
-        // Let's assume a standard 1:1 mapping for v0.2.x        
-        editUrl = `${baseUrl}/${relativeSourcePath}`;
-        editLinkText = config.editLink.text || editLinkText;
+         editUrl = `${config.editLink.baseUrl.replace(/\/$/, '')}/${outputPath.replace(/\/index\.html$/, '.md').replace(/\\/g, '/')}`;
+         if (outputPath.endsWith('index.html') && outputPath !== 'index.html') editUrl = editUrl.replace('.md', '/index.md'); 
+         if (outputPath === 'index.html') editUrl = `${config.editLink.baseUrl.replace(/\/$/, '')}/index.md`;
+         editLinkText = config.editLink.text || editLinkText;
     }
 
     const ejsData = {
-        content,
-        pageTitle,
-        themeInitScript,
-        description: frontmatter.description,
-        siteTitle,
-        navigationHtml,
-        editUrl,
-        editLinkText,
-        defaultMode: config.theme?.defaultMode || 'light',
-        relativePathToRoot,
-        logo: config.logo,
-        sidebarConfig: { 
-            collapsible: config.sidebar?.collapsible ?? false,
-            defaultCollapsed: config.sidebar?.defaultCollapsed ?? false,
-        },
-        theme: config.theme,
-        customCssFiles: config.theme?.customCss || [],
-        customJsFiles: config.customJs || [],
-        sponsor: config.sponsor,
-        footer: config.footer,
-        footerHtml,
-        renderIcon,
-        prevPage,
-        nextPage,
-        currentPagePath,
-        headings: frontmatter.toc !== false ? (headings || []) : [],
-        isActivePage,
-        frontmatter,
-        config: config,
-        ...pluginOutputs,
+        content, pageTitle, themeInitScript, description: frontmatter.description, siteTitle, navigationHtml,
+        editUrl, editLinkText, defaultMode: config.theme?.defaultMode || 'light', relativePathToRoot,
+        logo: config.logo, sidebarConfig: config.sidebar || {}, theme: config.theme,
+        customCssFiles: config.theme?.customCss || [], customJsFiles: config.customJs || [],
+        sponsor: config.sponsor, footer: config.footer, footerHtml, renderIcon,
+        prevPage, nextPage, currentPagePath, headings: frontmatter.toc !== false ? (headings || []) : [],
+        isActivePage, frontmatter, config, ...pluginOutputs,
+        isOfflineMode 
     };
 
+    return renderHtmlPage(layoutTemplate, ejsData, layoutTemplatePath);
+}
+
+function renderHtmlPage(templateContent, ejsData, filename = 'template.ejs', options = {}) {
     try {
-        return ejs.render(layoutTemplate, ejsData, {
-            filename: layoutTemplatePath
+        return ejs.render(templateContent, ejsData, {
+            filename: filename,
+            ...options
         });
     } catch (e) {
-        console.error(`❌ Error rendering EJS template for ${outputPath}: ${e.message}`);
-        console.error("EJS Data:", JSON.stringify(ejsData, null, 2).substring(0, 1000) + "...");
+        console.error(`❌ Error rendering EJS template: ${e.message}`);
         throw e;
     }
 }
 
-async function generateNavigationHtml(navItems, currentPagePath, relativePathToRoot, config) {
+// FIX: Added isOfflineMode parameter
+async function generateNavigationHtml(navItems, currentPagePath, relativePathToRoot, config, isOfflineMode = false) {
     const navTemplatePath = path.join(__dirname, '..', 'templates', 'navigation.ejs');
     if (!await fs.pathExists(navTemplatePath)) {
         throw new Error(`Navigation template not found: ${navTemplatePath}`);
     }
     const navTemplate = await fs.readFile(navTemplatePath, 'utf8');
-
     const ejsHelpers = { renderIcon };
-
-    return ejs.render(navTemplate, {
-        navItems,
-        currentPagePath,
-        relativePathToRoot,
-        config,
-        ...ejsHelpers
-    }, {
-        filename: navTemplatePath
-    });
+    
+    const safeRoot = relativePathToRoot || './';
+
+    return ejs.render(navTemplate, { 
+        navItems, 
+        currentPagePath, 
+        relativePathToRoot: safeRoot, 
+        config, 
+        isOfflineMode, // <--- Passing the variable here
+        ...ejsHelpers 
+    }, { filename: navTemplatePath });
 }
 
-module.exports = { generateHtmlPage, generateNavigationHtml };
+module.exports = { generateHtmlPage, generateNavigationHtml, renderHtmlPage };

package/src/live/core.js

@@ -0,0 +1,63 @@
+const { processMarkdownContent, createMarkdownItInstance } = require('../core/file-processor');
+const { renderHtmlPage } = require('../core/html-generator');
+const templates = require('./templates'); 
+
+function compile(markdown, config = {}, options = {}) {
+    // Default config values for the browser
+    const defaults = {
+        siteTitle: 'Live Preview',
+        theme: { defaultMode: 'light', name: 'default' },
+        ...config
+    };
+
+    const md = createMarkdownItInstance(defaults);
+    const result = processMarkdownContent(markdown, md, defaults, 'memory');
+
+    if (!result) return '<p>Error parsing markdown</p>';
+
+    const { frontmatter, htmlContent, headings } = result;
+
+    const pageData = {
+        content: htmlContent,
+        frontmatter,
+        headings,
+        siteTitle: defaults.siteTitle,
+        pageTitle: frontmatter.title || 'Untitled',
+        description: frontmatter.description || '',
+        defaultMode: defaults.theme.defaultMode,
+        editUrl: null,
+        editLinkText: '',
+        navigationHtml: '', // Navigation is usually empty in a single-page preview
+        relativePathToRoot: options.relativePathToRoot || './', // Important for finding CSS in dist/assets
+        outputPath: 'index.html',
+        currentPagePath: '/index',
+        prevPage: null, nextPage: null,
+        config: defaults,
+        // Empty hooks
+        metaTagsHtml: '', faviconLinkHtml: '', themeCssLinkHtml: '',
+        pluginStylesHtml: '', pluginHeadScriptsHtml: '', pluginBodyScriptsHtml: '',
+        themeInitScript: '', 
+        logo: defaults.logo, sidebarConfig: { collapsible: false }, theme: defaults.theme,
+        customCssFiles: [], customJsFiles: [],
+        sponsor: { enabled: false }, footer: '', footerHtml: '',
+        renderIcon: () => '', // Icons disabled in live preview to save weight
+        isActivePage: true
+    };
+
+    let templateName = frontmatter.noStyle === true ? 'no-style.ejs' : 'layout.ejs';
+    const templateContent = templates[templateName];
+
+    if (!templateContent) return `Template ${templateName} not found`;
+
+    const ejsOptions = {
+        includer: (originalPath) => {
+            let name = originalPath.endsWith('.ejs') ? originalPath : originalPath + '.ejs';
+            if (templates[name]) return { template: templates[name] };
+            return null;
+        }
+    };
+
+    return renderHtmlPage(templateContent, pageData, templateName, ejsOptions);
+}
+
+module.exports = { compile };

package/src/live/index.html

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Docmd Live</title>
+    <link rel="stylesheet" href="live.css">
+    <script src="docmd-live.js"></script>
+</head>
+<body class="mode-split mobile-tab-editor">
+
+    <!-- Top Bar (Desktop) -->
+    <div class="top-bar">
+        <div class="logo">
+            <a href="/" class="back-link" id="back-btn" title="Back to Home" aria-label="Back to Home">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="m12 19-7-7 7-7"/>
+                    <path d="M19 12H5"/>
+                </svg>
+            </a>
+            docmd <span>Live</span>
+        </div>
+        
+        <div class="view-controls desktop-only">
+            <button class="view-btn active" onclick="setViewMode('split')" id="btn-split">Split View</button>
+            <button class="view-btn" onclick="setViewMode('single')" id="btn-single">Single View</button>
+        </div>
+
+        <!-- Single View Tabs (Visible only when in Single Mode on Desktop) -->
+        <div class="view-controls" id="single-view-tabs" style="display:none;">
+            <button class="view-btn active" onclick="switchSingleTab('editor')" id="btn-tab-edit">Editor</button>
+            <button class="view-btn" onclick="switchSingleTab('preview')" id="btn-tab-prev">Preview</button>
+        </div>
+    </div>
+
+    <!-- Workspace -->
+    <div class="workspace" id="workspace">
+        <!-- Editor -->
+        <div class="pane editor-pane" id="editorPane">
+            <div class="pane-header">Markdown</div>
+            <textarea id="input" spellcheck="false">---
+title: My Page
+description: Start editing to see changes instantly.
+---
+
+# Hello World
+
+This is a **live** preview.
+
+::: callout tip
+Try resizing the window or switching to mobile view!
+:::
+
+## Features
+1. Responsive Design
+2. Split or Tabbed view
+3. Instant Rendering
+</textarea>
+        </div>
+
+        <!-- Resizer Handle -->
+        <div class="resizer" id="resizer"></div>
+
+        <!-- Preview -->
+        <div class="pane preview-pane" id="previewPane">
+            <div class="pane-header">Preview</div>
+            <iframe id="preview"></iframe>
+        </div>
+    </div>
+
+    <!-- Mobile Bottom Tabs -->
+    <div class="mobile-tabs">
+        <button class="mobile-tab-btn active" onclick="setMobileTab('editor')" id="mob-edit">Editor</button>
+        <button class="mobile-tab-btn" onclick="setMobileTab('preview')" id="mob-prev">Preview</button>
+    </div>
+
+    <script>
+        // --- Core Logic ---
+        const input = document.getElementById('input');
+        const preview = document.getElementById('preview');
+        const backBtn = document.getElementById('back-btn');
+
+        function render() {
+            try {
+                let html = docmd.compile(input.value, {
+                    siteTitle: 'My Project', // User can change this in real config, but here we set a default
+                    search: false, 
+                    theme: { name: 'sky', defaultMode: 'light' },
+                    sidebar: { collapsible: false } 
+                });
+
+                // --- INJECTIONS ---
+                
+                // 1. Force links to open in new tab (Fixes infinite iframe recursion)
+                html = html.replace('<head>', '<head><base target="_blank">');
+
+                // 2. Hide Sidebar Header via CSS
+                const customStyle = `
+                    <style>
+                        .sidebar-header { display: none !important; }
+                        .sidebar-nav { margin-top: 1rem; }
+                    </style>
+                `;
+                html = html.replace('</body>', `${customStyle}</body>`);
+                // ------------------
+
+                const doc = preview.contentWindow.document;
+                doc.open();
+                doc.write(html);
+                doc.close();
+            } catch (e) { console.error(e); }
+        }
+
+        // Debounce Render
+        let timer;
+        input.addEventListener('input', () => {
+            clearTimeout(timer);
+            timer = setTimeout(render, 300);
+        });
+        
+        // Initial Render
+        render();
+
+
+        // --- Resizer Logic ---
+        const resizer = document.getElementById('resizer');
+        const editorPane = document.getElementById('editorPane');
+        const workspace = document.getElementById('workspace');
+        let isResizing = false;
+
+        resizer.addEventListener('mousedown', (e) => {
+            isResizing = true;
+            resizer.classList.add('resizing');
+            preview.style.pointerEvents = 'none';
+            document.body.style.cursor = 'col-resize';
+        });
+
+        document.addEventListener('mousemove', (e) => {
+            if (!isResizing) return;
+            const containerWidth = workspace.offsetWidth;
+            const newEditorWidth = (e.clientX / containerWidth) * 100;
+            if (newEditorWidth > 15 && newEditorWidth < 85) {
+                editorPane.style.width = newEditorWidth + '%';
+            }
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (isResizing) {
+                isResizing = false;
+                resizer.classList.remove('resizing');
+                preview.style.pointerEvents = 'auto';
+                document.body.style.cursor = 'default';
+            }
+        });
+
+
+        // --- View Mode Logic (Desktop) ---
+        function setViewMode(mode) {
+            document.body.classList.remove('mode-split', 'mode-single');
+            document.body.classList.add('mode-' + mode);
+            
+            document.getElementById('btn-split').classList.toggle('active', mode === 'split');
+            document.getElementById('btn-single').classList.toggle('active', mode === 'single');
+            
+            document.getElementById('single-view-tabs').style.display = mode === 'single' ? 'flex' : 'none';
+            
+            if (mode === 'single') {
+                switchSingleTab('editor');
+            }
+        }
+
+        function switchSingleTab(tab) {
+            document.body.classList.remove('show-editor', 'show-preview');
+            document.body.classList.add('show-' + tab);
+            
+            document.getElementById('btn-tab-edit').classList.toggle('active', tab === 'editor');
+            document.getElementById('btn-tab-prev').classList.toggle('active', tab === 'preview');
+        }
+
+
+        // --- Mobile Logic ---
+        function setMobileTab(tab) {
+            document.body.classList.remove('mobile-tab-editor', 'mobile-tab-preview');
+            document.body.classList.add('mobile-tab-' + tab);
+            
+            document.getElementById('mob-edit').classList.toggle('active', tab === 'editor');
+            document.getElementById('mob-prev').classList.toggle('active', tab === 'preview');
+        }
+
+        // --- Back Button Logic ---
+        if (window.history.length <= 1) {
+            backBtn.style.display = 'none';
+        } else {
+            backBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                window.history.back();
+            });
+        }
+    </script>
+</body>
+</html>