@docmd/live 0.4.0 → 0.4.3

package/package.json

@@ -1,26 +1,52 @@
 {
   "name": "@docmd/live",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "Browser-based editor engine for docmd",
   "bin": {
-    "docmd-live": "./bin/docmd-live.js"
+    "docmd-live": "bin/docmd-live.js"
+  },
+  "scripts": {
+    "build": "node -e \"require('./src/build.js').build()\""
   },
   "files": [
     "bin",
+    "src",
     "dist",
     "index.js",
     "src/build.js"
   ],
   "dependencies": {
-    "esbuild": "^0.20.0",
+    "esbuild": "^0.27.3",
     "buffer": "^6.0.3",
     "serve": "^14.2.1",
-    "@docmd/ui": "0.4.0",
-    "@docmd/themes": "0.4.0",
-    "@docmd/parser": "0.4.0"
+    "@docmd/parser": "^0.4.3",
+    "@docmd/ui": "^0.4.3",
+    "@docmd/themes": "^0.4.3"
   },
-  "license": "MIT",
-  "scripts": {
-    "build": "node -e \"require('./src/build.js').build()\""
-  }
+  "keywords": [
+    "docmd",
+    "editor",
+    "browser",
+    "live",
+    "parser",
+    "markdown",
+    "minimalist",
+    "zero-config",
+    "site-generator",
+    "docs"
+  ],
+  "author": {
+    "name": "Ghazi",
+    "url": "https://mgks.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/docmd-io/docmd.git"
+  },
+  "bugs": {
+    "url": "https://github.com/docmd-io/docmd/issues"
+  },
+  "homepage": "https://docmd.io",
+  "funding": "https://github.com/sponsors/mgks",
+  "license": "MIT"
 }

package/src/browser-entry.js

@@ -0,0 +1,102 @@
+const { createMarkdownProcessor, processContent } = require('@docmd/parser/src/markdown-processor');
+const { renderTemplate } = require('@docmd/parser/src/html-renderer');
+const templates = require('virtual:docmd-templates');
+
+// Expose the compile function to the window.docmd global
+function compile(markdown, config = {}) {
+    const defaults = {
+        siteTitle: 'Live Preview',
+        theme: { defaultMode: 'light', name: 'default', codeHighlight: true },
+        ...config
+    };
+
+    // 1. Process Markdown
+    const md = createMarkdownProcessor(defaults);
+    const result = processContent(markdown, md, defaults);
+    
+    if (!result) return '<p>Error parsing markdown</p>';
+
+    // Since we are in the browser, we assume assets are served at ./assets/
+    const assetsRoot = './assets';
+    
+    // 1. CSS Injection
+    const cssTags = [
+        `<link rel="stylesheet" href="${assetsRoot}/css/docmd-main.css">`
+    ];
+    
+    if (defaults.theme.codeHighlight !== false) {
+        const mode = defaults.theme.defaultMode === 'dark' ? 'dark' : 'light';
+        cssTags.push(`<link rel="stylesheet" href="${assetsRoot}/css/docmd-highlight-${mode}.css">`);
+    }
+    
+    if (defaults.theme.name && defaults.theme.name !== 'default') {
+        cssTags.push(`<link rel="stylesheet" href="${assetsRoot}/css/docmd-theme-${defaults.theme.name}.css">`);
+    }
+
+    cssTags.push(`<link rel="stylesheet" href="${assetsRoot}/css/docmd-live-preview.css">`);
+
+    // 2. JS Injection
+    const jsTags = [
+        `<script src="${assetsRoot}/js/docmd-main.js"></script>`
+    ];
+
+    // 3. Theme Init Script
+    let themeInitScript = '';
+    if (templates['partials/theme-init.js']) {
+        themeInitScript = `<script>${templates['partials/theme-init.js']}</script>`;
+    }
+
+    // 4. Prepare Data
+    const pageData = {
+        content: result.htmlContent,
+        frontmatter: result.frontmatter,
+        headings: result.headings,
+        config: defaults,
+        buildHash: 'live',
+        siteTitle: defaults.siteTitle,
+        pageTitle: result.frontmatter.title || 'Untitled',
+        description: result.frontmatter.description || '',
+        defaultMode: defaults.theme.defaultMode,
+
+        // Navigation Stub
+        navigationHtml: '', 
+        relativePathToRoot: './', 
+        outputPath: 'index.html',
+        currentPagePath: '/index',
+        prevPage: null,
+        nextPage: null,
+
+        // Inject the constructed assets
+        pluginHeadScriptsHtml: cssTags.join('\n'), 
+        pluginBodyScriptsHtml: jsTags.join('\n'),
+        themeInitScript: themeInitScript,
+
+        // Helpers
+        faviconLinkHtml: '', 
+        logo: defaults.logo, 
+        sidebarConfig: { collapsible: false }, 
+        theme: defaults.theme,
+        customCssFiles: [], customJsFiles: [],
+        sponsor: {}, footer: '', footerHtml: '',
+        isActivePage: true,
+        editUrl: null, editLinkText: ''
+    };
+
+    // 5. Render
+    const templateName = result.frontmatter.noStyle ? 'no-style.ejs' : 'layout.ejs';
+    const templateStr = templates[templateName];
+    
+    if (!templateStr) return `Template ${templateName} not found`;
+
+    const options = {
+        includer: (originalPath) => {
+            let name = originalPath.endsWith('.ejs') ? originalPath : originalPath + '.ejs';
+            if (templates[name]) return { template: templates[name] };
+            return null;
+        }
+    };
+
+    return renderTemplate(templateStr, pageData, options);
+}
+
+module.exports = { compile };

package/src/docmd-live-preview.css

@@ -0,0 +1,33 @@
+/* 
+ * Styles specific to the Live Editor Preview Iframe 
+ */
+
+/* Always hide TOC and Footer Actions in preview to save space */
+.toc-sidebar,
+.page-footer-actions {
+    display: none !important;
+}
+
+/* Ensure the main content takes full width since TOC is gone */
+.content-layout {
+    display: block !important;
+}
+
+/* Hide Sidebar specifically on mobile in the preview */
+/* (In Split View on mobile, space is very limited) */
+@media (max-width: 768px) {
+    .sidebar {
+        display: none !important;
+    }
+    
+    .main-content-wrapper {
+        margin-left: 0 !important;
+    }
+}
+
+/* Adjust header to look better without sidebar on mobile */
+@media (max-width: 768px) {
+    .sidebar-toggle-button {
+        display: none !important;
+    }
+}

package/src/docmd-live.css

@@ -0,0 +1,275 @@
+/* Source file from the docmd project — https://github.com/docmd-io/docmd */
+
+:root {
+    --header-height: 50px;
+    --border-color: #e0e0e0;
+    --bg-color: #f9fafb;
+    --primary-color: #007bff;
+    --resizer-width: 8px
+}
+
+body {
+    margin: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    overflow: hidden
+}
+
+.top-bar {
+    height: var(--header-height);
+    background: #fff;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    flex-shrink: 0
+}
+
+.logo {
+    font-weight: 700;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 12px
+}
+
+.logo span {
+    background: var(--primary-color);
+    color: #fff;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: .75rem;
+    text-transform: uppercase
+}
+
+.back-link {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    background-color: #f0f0f0;
+    border-radius: 100%;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    transition: color 0.2s, transform .2s;
+    text-decoration: none;
+    padding: 4px;
+}
+
+.back-link:hover {
+    color: var(--primary-color);
+    background: #f0f0f0;
+    transform: translateX(-2px)
+}
+
+.logo .docmd-logo {
+    color: inherit;
+    text-decoration: none;
+    transition: .5s;
+}
+
+.logo .docmd-logo:hover {
+    color: var(--primary-color);
+}
+
+.view-switcher {
+    display: flex;
+    background: #f0f0f0;
+    padding: 3px;
+    border-radius: 8px;
+    gap: 0;
+}
+
+.view-btn {
+    border: none;
+    background: transparent;
+    padding: 6px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    color: #666;
+    font-weight: 500;
+    transition: background 0.15s, color 0.15s;
+}
+
+.view-btn:hover {
+    color: #333;
+}
+
+.view-btn.active {
+    background: #fff;
+    color: #000;
+    box-shadow: 0 1px 3px #0000001a;
+    font-weight: 600;
+}
+
+.workspace {
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden
+}
+
+.pane {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+    background: #fff
+}
+
+.pane-header {
+    padding: 8px 16px;
+    font-size: .75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #888;
+    background: var(--bg-color);
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0
+}
+
+.editor-pane {
+    width: 50%
+}
+
+textarea#input {
+    flex: 1;
+    border: none;
+    resize: none;
+    padding: 20px;
+    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    outline: none;
+    background: var(--bg-color)
+}
+
+.preview-pane {
+    flex: 1;
+    background: #fff
+}
+
+iframe#preview {
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block
+}
+
+.resizer {
+    width: var(--resizer-width);
+    background: var(--bg-color);
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+    cursor: col-resize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background .2s;
+    z-index: 10
+}
+
+.resizer:hover,
+.resizer.resizing {
+    background: #e0e0e0
+}
+
+.resizer::after {
+    content: "||";
+    color: #aaa;
+    font-size: 10px;
+    letter-spacing: 1px
+}
+
+body.mode-single .resizer {
+    display: none
+}
+
+body.mode-single .pane {
+    width: 100% !important;
+    min-width: 0
+}
+
+body.mode-single .editor-pane {
+    display: none
+}
+
+body.mode-single .preview-pane {
+    display: none
+}
+
+body.mode-single.show-editor .editor-pane {
+    display: flex
+}
+
+body.mode-single.show-preview .preview-pane {
+    display: flex
+}
+
+@media (max-width: 768px) {
+    .desktop-only {
+        display: none !important
+    }
+
+    .resizer {
+        display: none !important
+    }
+
+    .pane {
+        width: 100% !important
+    }
+
+    .editor-pane {
+        display: none
+    }
+
+    .preview-pane {
+        display: none
+    }
+
+    body.mobile-tab-editor .editor-pane {
+        display: flex
+    }
+
+    body.mobile-tab-preview .preview-pane {
+        display: flex
+    }
+
+    .mobile-tabs {
+        display: flex !important;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 50px;
+        background: #fff;
+        border-top: 1px solid var(--border-color);
+        z-index: 100
+    }
+
+    .mobile-tab-btn {
+        flex: 1;
+        border: none;
+        background: transparent;
+        font-weight: 600;
+        color: #888;
+        cursor: pointer
+    }
+
+    .mobile-tab-btn.active {
+        color: var(--primary-color);
+        border-top: 2px solid var(--primary-color)
+    }
+
+    .workspace {
+        padding-bottom: 50px
+    }
+}
+
+.mobile-tabs {
+    display: none
+}

package/src/index.html

@@ -0,0 +1,189 @@
+<!-- Source file from the docmd project — https://github.com/docmd-io/docmd -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Docmd Live Editor</title>
+    <meta name="description" content="Real-time Markdown preview and editor powered by docmd.">
+
+    <link rel="stylesheet" href="docmd-live.css">
+    <script src="docmd-live.js"></script>
+
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VCMQ0MCSHN"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
+        gtag('config', 'G-VCMQ0MCSHN');
+    </script>
+</head>
+
+<body class="mode-split">
+
+    <!-- Top Bar -->
+    <div class="top-bar">
+        <div class="logo">
+            <!--<a href="/" class="back-link" id="back-btn" title="Previous Page" aria-label="Back to previous page">
+                <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>-->
+            <a href="https://docmd.io" class="docmd-logo" title="Back to home" aria-label="Back to homepage"><svg width="24" height="24" id="icon-feather" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg></a> docmd <span>Live</span>
+        </div>
+
+        <!-- Unified 3-Way Switcher -->
+        <div class="view-switcher desktop-only">
+            <button class="view-btn active" onclick="setMode('split')" data-mode="split">Split</button>
+            <button class="view-btn" onclick="setMode('editor')" data-mode="editor">Editor</button>
+            <button class="view-btn" onclick="setMode('preview')" data-mode="preview">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 Documentation
+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 (Keep for small screens) -->
+    <div class="mobile-tabs">
+        <button class="mobile-tab-btn active" onclick="setMode('editor')" id="mob-edit">Editor</button>
+        <button class="mobile-tab-btn" onclick="setMode('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',
+                    search: false,
+                    theme: { name: 'sky', defaultMode: 'light' },
+                    sidebar: { collapsible: false }
+                });
+
+                // Injections
+                html = html.replace('<head>', '<head><base target="_blank">');
+                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); }
+        }
+
+        let timer;
+        input.addEventListener('input', () => {
+            clearTimeout(timer);
+            timer = setTimeout(render, 300);
+        });
+        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';
+            }
+        });
+
+        // --- Unified View Logic ---
+        function setMode(mode) {
+            // 1. Update UI Buttons (Desktop)
+            document.querySelectorAll('.view-switcher .view-btn').forEach(btn => {
+                btn.classList.toggle('active', btn.dataset.mode === mode);
+            });
+
+            // 2. Update Mobile Buttons
+            const mobMode = mode === 'split' ? 'editor' : mode; // Map split to editor on mobile
+            document.getElementById('mob-edit').classList.toggle('active', mobMode === 'editor');
+            document.getElementById('mob-prev').classList.toggle('active', mobMode === 'preview');
+
+            // 3. Update Layout Classes
+            // Reset
+            document.body.classList.remove('mode-split', 'mode-single', 'show-editor', 'show-preview');
+
+            if (mode === 'split') {
+                document.body.classList.add('mode-split');
+            } else {
+                document.body.classList.add('mode-single');
+                document.body.classList.add('show-' + mode);
+            }
+        }
+
+        // --- Back Button ---
+        /*
+        if (window.history.length <= 1) backBtn.style.display = 'none';
+        else backBtn.addEventListener('click', (e) => { e.preventDefault(); window.history.back(); });
+        */
+    </script>
+</body>
+</html>

package/src/shims.js

@@ -0,0 +1 @@
+import { Buffer } from 'buffer'; globalThis.Buffer = Buffer;