npm - @docmd/live - Versions diffs - 0.4.0 - Mend

@docmd/live 0.4.0

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

package/LICENSE +21 -0
package/README.md +24 -0
package/bin/docmd-live.js +3 -0
package/dist/assets/css/docmd-highlight-dark.css +86 -0
package/dist/assets/css/docmd-highlight-light.css +86 -0
package/dist/assets/css/docmd-live-preview.css +33 -0
package/dist/assets/css/docmd-main.css +1720 -0
package/dist/assets/css/docmd-theme-retro.css +867 -0
package/dist/assets/css/docmd-theme-ruby.css +629 -0
package/dist/assets/css/docmd-theme-sky.css +617 -0
package/dist/assets/js/docmd-main.js +276 -0
package/dist/docmd-live.css +275 -0
package/dist/docmd-live.js +26725 -0
package/dist/index.html +189 -0
package/index.js +42 -0
package/package.json +26 -0
package/src/build.js +141 -0

package/dist/index.html ADDED Viewed

@@ -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/index.js ADDED Viewed

@@ -0,0 +1,42 @@
+const path = require('path');
+const { spawn } = require('child_process');
+const { build } = require('./src/build');
+async function start() {
+  // 1. Build the editor
+  await build();
+  const distDir = path.resolve(process.cwd(), 'dist');
+  console.log(`\n🌍 Launching Live Editor at ${distDir}...`);
+  console.log('   (Press Ctrl+C to stop)');
+  // 2. Resolve the 'serve' executable path safely
+  // We do this to avoid using 'npx' (which triggers npm warnings in pnpm repos)
+  // and to avoid shell injection issues.
+  let serveBinPath;
+  try {
+    const servePkgJsonPath = require.resolve('serve/package.json');
+    const serveDir = path.dirname(servePkgJsonPath);
+    const servePkg = require(servePkgJsonPath);
+    // 'bin' can be a string or an object in package.json
+    const binPath = typeof servePkg.bin === 'string' ? servePkg.bin : servePkg.bin.serve;
+    serveBinPath = path.join(serveDir, binPath);
+  } catch (e) {
+    console.error('❌ Could not locate "serve" package. Ensure it is installed.');
+    process.exit(1);
+  }
+  // 3. Spawn Node directly
+  // shell: false is the default (fixing DEP0190)
+  // We pass the script path directly to node
+  const p = spawn(process.execPath, [serveBinPath, distDir], {
+      stdio: 'inherit'
+  });
+  process.on('SIGINT', () => {
+      p.kill();
+      process.exit();
+  });
+}
+module.exports = { start, build };

package/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "@docmd/live",
+  "version": "0.4.0",
+  "description": "Browser-based editor engine for docmd",
+  "bin": {
+    "docmd-live": "./bin/docmd-live.js"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "index.js",
+    "src/build.js"
+  ],
+  "dependencies": {
+    "esbuild": "^0.20.0",
+    "buffer": "^6.0.3",
+    "serve": "^14.2.1",
+    "@docmd/ui": "0.4.0",
+    "@docmd/themes": "0.4.0",
+    "@docmd/parser": "0.4.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "node -e \"require('./src/build.js').build()\""
+  }
+}

package/src/build.js ADDED Viewed

@@ -0,0 +1,141 @@
+const path = require('path');
+const fs = require('fs/promises');
+const esbuild = require('esbuild');
+const ui = require('@docmd/ui');
+const themes = require('@docmd/themes'); // New import
+// Path Constants
+const PKG_ROOT = path.resolve(__dirname, '..');
+const SRC_DIR = path.join(PKG_ROOT, 'src');
+const DIST_DIR = path.resolve(process.cwd(), 'dist');
+async function build() {
+    console.log('📦 Building Live Editor...');
+    // 1. Prepare Dist
+    await fs.rm(DIST_DIR, { recursive: true, force: true });
+    await fs.mkdir(DIST_DIR, { recursive: true });
+    // 2. Generate Shims
+    const shimPath = path.join(SRC_DIR, 'shims.js');
+    await fs.writeFile(shimPath, `import { Buffer } from 'buffer'; globalThis.Buffer = Buffer;`);
+    // 3. Template Plugin (Same as before, keep your existing logic here)
+    const templatePlugin = {
+        name: 'docmd-templates',
+        setup(build) {
+            build.onResolve({ filter: /^virtual:docmd-templates$/ }, args => ({
+                path: args.path, namespace: 'docmd-templates-ns',
+            }));
+            build.onLoad({ filter: /.*/, namespace: 'docmd-templates-ns' }, async () => {
+                const templatesDir = ui.getTemplatesDir();
+                const templates = {};
+                const tryRead = async (f) => {
+                    const p = path.join(templatesDir, f);
+                    try { return await fs.readFile(p, 'utf8'); } catch(e) { return null; }
+                };
+                const files = await fs.readdir(templatesDir);
+                for (const file of files) {
+                    if (file.endsWith('.ejs')) templates[file] = await tryRead(file);
+                }
+                const themeInit = await tryRead('partials/theme-init.js');
+                if (themeInit) templates['partials/theme-init.js'] = themeInit;
+                return {
+                    contents: `module.exports = ${JSON.stringify(templates)};`,
+                    loader: 'js',
+                };
+            });
+        },
+    };
+    // 4. Node Shim Plugin (Same as before)
+    const nodeShimPlugin = {
+        name: 'node-deps-shim',
+        setup(build) {
+            build.onResolve({ filter: /^(node:)?path$/ }, args => ({ path: args.path, namespace: 'path-shim' }));
+            build.onLoad({ filter: /.*/, namespace: 'path-shim' }, () => ({
+                contents: `module.exports = {
+                    join: (...a) => a.filter(Boolean).join('/'),
+                    resolve: (...a) => '/' + a.filter(Boolean).join('/'),
+                    basename: (p) => p ? p.split(/[\\\\/]/).pop() : '',
+                    dirname: (p) => p ? p.split(/[\\\\/]/).slice(0, -1).join('/') || '.' : '.',
+                    extname: (p) => p ? '.' + p.split('.').pop() : '',
+                    sep: '/'
+                };`, loader: 'js'
+            }));
+            build.onResolve({ filter: /^(node:)?fs(\/promises)?|fs-extra$/ }, args => ({ path: args.path, namespace: 'fs-shim' }));
+            build.onLoad({ filter: /.*/, namespace: 'fs-shim' }, () => ({
+                contents: `module.exports = { promises: {}, existsSync: ()=>false };`, loader: 'js'
+            }));
+        }
+    };
+    try {
+        // 5. Bundle JS
+        await esbuild.build({
+            entryPoints: [path.join(SRC_DIR, 'browser-entry.js')],
+            bundle: true,
+            outfile: path.join(DIST_DIR, 'docmd-live.js'),
+            platform: 'browser',
+            format: 'iife',
+            globalName: 'docmd',
+            minify: true,
+            define: { 'process.env.NODE_ENV': '"production"' },
+            inject: [shimPath],
+            plugins: [templatePlugin, nodeShimPlugin]
+        });
+        // 6. Copy Static Assets
+        await fs.copyFile(path.join(SRC_DIR, 'index.html'), path.join(DIST_DIR, 'index.html'));
+        await fs.copyFile(path.join(SRC_DIR, 'docmd-live.css'), path.join(DIST_DIR, 'docmd-live.css'));
+        const cssDest = path.join(DIST_DIR, 'assets/css');
+        const jsDest = path.join(DIST_DIR, 'assets/js');
+        await fs.mkdir(cssDest, { recursive: true });
+        await fs.mkdir(jsDest, { recursive: true });
+        await fs.copyFile(path.join(SRC_DIR, 'docmd-live-preview.css'), path.join(cssDest, 'docmd-live-preview.css'));
+        // Helper copy function
+        const copy = async (src, destName) => {
+            try {
+                await fs.copyFile(src, path.join(path.extname(destName) === '.js' ? jsDest : cssDest, destName));
+            } catch(e) { console.warn(`⚠️ Missing asset: ${path.basename(src)}`); }
+        };
+        // UI Assets (Source: main.css -> Dest: docmd-main.css)
+        await copy(path.join(ui.getAssetsDir(), 'css/docmd-main.css'), 'docmd-main.css');
+        await copy(path.join(ui.getAssetsDir(), 'css/docmd-highlight-light.css'), 'docmd-highlight-light.css');
+        await copy(path.join(ui.getAssetsDir(), 'css/docmd-highlight-dark.css'), 'docmd-highlight-dark.css');
+        await copy(path.join(ui.getAssetsDir(), 'js/docmd-main.js'), 'docmd-main.js');
+        // Theme Assets (Source: sky.css -> Dest: docmd-theme-sky.css)
+        const themesDir = themes.getThemesDir();
+        const themeFiles = await fs.readdir(themesDir);
+        for (const t of themeFiles) {
+            if (t.endsWith('.css')) {
+                // Remove prefix if source has it, then add it back standardly
+                const cleanName = t.replace('docmd-theme-', '');
+                await copy(path.join(themesDir, t), `docmd-theme-${cleanName}`);
+            }
+        }
+        // Copy User Assets (if in playground context)
+        const userAssets = path.resolve(process.cwd(), 'assets');
+        const distAssets = path.join(DIST_DIR, 'assets');
+        // Simple check to avoid copying into itself if CWD is somehow dist parent
+        try {
+            await fs.cp(userAssets, distAssets, { recursive: true, force: false });
+        } catch(e) {} // Ignore if user assets don't exist
+        console.log('✅ Live Editor built in ./dist');
+    } catch (e) {
+        console.error('❌ Live build failed:', e);
+        process.exit(1);
+    }
+}
+module.exports = { build };