@clidey/dory 0.2.0 → 0.4.0

package/bin/dory.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 import { execSync } from 'child_process';
-import { existsSync, rmSync, mkdirSync, cpSync, readFileSync } from 'fs';
+import { existsSync, rmSync, mkdirSync, cpSync, readFileSync, readdirSync } from 'fs';
 import { resolve, dirname } from 'path';
 import { fileURLToPath } from 'url'
 import http from 'http';
@@ -12,40 +12,63 @@ const __dirname = dirname(__filename);
 
 const commands = {
   build: () => {
-    console.log('🏗️  Starting Dory build...');
+    console.log('🐟 Dory is ready to build your docs!');
+    
+    // Clear the docs folder if it exists
+    const docsDir = resolve(__dirname, '..', 'docs');
+    if (existsSync(docsDir)) {
+      console.log('🧹 Tidying up the workspace...');
+      rmSync(docsDir, { recursive: true, force: true });
+    }
     
     // Check if dory.json exists in current directory
     const currentDir = process.cwd();
     const doryConfigPath = resolve(currentDir, 'dory.json');
     
     if (!existsSync(doryConfigPath)) {
-      console.error('❌ dory.json not found in current directory');
+      console.error('❌ Oops! dory.json is missing from your project');
       process.exit(1);
     }
     
     // Read and validate dory.json
     try {
       const config = JSON.parse(readFileSync(doryConfigPath, 'utf8'));
-      console.log(`📋 Using config: ${config.name || 'Unnamed project'}`);
+      console.log(`📋 Building: ${config.name || 'Your awesome project'}`);
     } catch (error) {
-      console.error('❌ Invalid dory.json file:', error.message);
+      console.error('❌ Your dory.json seems to have some issues:', error.message);
       process.exit(1);
     }
     
-    // Clear and prepare docs folder
-    const docsDir = resolve(currentDir, 'docs');
-    if (existsSync(docsDir)) {
-      console.log('🧹 Clearing docs folder...');
-      rmSync(docsDir, { recursive: true, force: true });
-    }
     mkdirSync(docsDir, { recursive: true });
     
-    // Copy dory.json to docs folder
+    console.log('📁 Gathering your project files...');
     cpSync(doryConfigPath, resolve(docsDir, 'dory.json'));
-    console.log('📄 Copied dory.json to docs folder');
+    
+    const copyFiles = (src, dest) => {
+      if (existsSync(src)) {
+        if (existsSync(dest)) {
+          rmSync(dest, { recursive: true, force: true });
+        }
+        cpSync(src, dest, { recursive: true });
+      }
+    };
+    
+    // Copy all files and directories except node_modules, dist, and .git
+    const excludeDirs = ['node_modules', 'dist', '.git', 'docs', 'pnpm-lock.yaml'];
+    
+    const items = readdirSync(currentDir);
+    for (const item of items) {
+      if (!excludeDirs.includes(item)) {
+        const srcPath = resolve(currentDir, item);
+        const destPath = resolve(docsDir, item);
+        copyFiles(srcPath, destPath);
+      }
+    }
+    
+    console.log('✅ All files gathered successfully!');
     
     // Run the build command
-    console.log('⚡ Running build command...');
+    console.log('⚡ Magic is happening...');
     try {
       execSync('npm run build', { stdio: 'inherit', cwd: __dirname });
     } catch (error) {
@@ -56,19 +79,23 @@ const commands = {
     // Check if dist folder was created
     const distDir = resolve(__dirname, '..', 'dist');
     if (existsSync(distDir)) {
-      console.log('✅ Build completed successfully!');
-      console.log(`📦 Build output available in: ${distDir}`);
-      console.log('📋 Moving build output to current directory...');
+      console.log('🎉 Build completed successfully!');
+      console.log('📦 Moving your docs to the right place...');
       cpSync(distDir, resolve(currentDir, 'dist'), { recursive: true });
-      console.log(`📦 Build output moved to: ${resolve(currentDir, 'dist')}`);
+      console.log('✨ Your docs are ready in the dist folder!');
     } else {
-      console.log('⚠️  Build completed but no dist folder found');
+      console.log('⚠️  Build completed but no output found');
     }
     rmSync(distDir, { recursive: true, force: true });
+    
+    // Revert docs folder back to original state
+    console.log('🧹 Cleaning up...');
+    rmSync(docsDir, { recursive: true, force: true });
+    console.log('✅ All done!');
   },
 
   preview: () => {
-    console.log('👀 Starting Dory preview...');
+    console.log('👀 Starting your docs preview...');
     const currentDir = process.cwd();
     const distDir = resolve(currentDir, 'dist');
     const port = process.env.PORT || 3000;
@@ -86,33 +113,31 @@ const commands = {
     });
 
     server.listen(port, () => {
-      console.log(`🚀 Serving Dory at http://localhost:${port}`);
+      console.log(`🚀 Your docs are live at http://localhost:${port}`);
     });
   },
 
   help: () => {
     console.log(`
-🐟 Dory CLI - Documentation Build Tool
+🐟 Dory CLI - Your Friendly Documentation Builder
 
 Usage:
   dory <command>
 
 Commands:
-  build     Build the documentation site
-            - Requires dory.json in current directory
-            - Clears and copies to docs folder
-            - Runs build command
-            - Creates dist folder with build output
+  build     Build your documentation site
+            - Needs dory.json in your project
+            - Creates a beautiful dist folder
             
-  preview   Preview the built documentation site
-            - Requires dist folder (run build first)
-            - Starts preview server
+  preview   Preview your built documentation
+            - Shows your docs in the browser
+            - Run build first!
             
   help      Show this help message
 
 Examples:
-  dory build    # Build the documentation
-  dory preview  # Preview the built site
+  dory build    # Build your docs
+  dory preview  # Preview your docs
 `);
   }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/dory",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "A CLI tool for building and previewing documentation sites",
   "keywords": [
@@ -41,10 +41,13 @@
     "@heroicons/react": "^2.2.0",
     "@mdx-js/preact": "^3.1.0",
     "@mdx-js/rollup": "^3.1.0",
+    "@preact/preset-vite": "^2.10.1",
     "@tailwindcss/vite": "^4.1.8",
+    "@types/react-highlight-words": "^0.20.0",
     "classnames": "^2.5.1",
     "flexsearch": "^0.8.205",
     "gray-matter": "^4.0.3",
+    "gzip-size-cli": "^5.1.0",
     "katex": "^0.16.22",
     "lucide-react": "^0.513.0",
     "mermaid": "^11.6.0",
@@ -54,19 +57,14 @@
     "react-highlight-words": "^0.21.0",
     "remark-gfm": "^4.0.1",
     "saas": "^1.0.0",
+    "sass-embedded": "^1.89.2",
     "sirv": "^3.0.1",
     "tailwindcss": "^4.1.8",
+    "typescript": "~5.8.3",
     "unist-util-visit": "^5.0.0",
+    "vite": "^6.3.5",
     "vite-plugin-mdx": "^3.6.1",
     "wouter-preact": "^3.7.1"
   },
-  "devDependencies": {
-    "@preact/preset-vite": "^2.10.1",
-    "@types/react-highlight-words": "^0.20.0",
-    "gzip-size-cli": "^5.1.0",
-    "sass-embedded": "^1.89.2",
-    "typescript": "~5.8.3",
-    "vite": "^6.3.5"
-  },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }

package/src/mdx/fence.tsx

@@ -4,6 +4,7 @@ import { Code, CodeGroup, CodeGroupContext, supportedLanguages } from './code'
 import { MermaidRenderer } from './mermaid'
 import { Loading } from '../components/loading'
 import { useDarkMode } from '../utils/hooks'
+import classNames from 'classnames'
 
 
 export function Fence({
@@ -34,7 +35,7 @@ export function Fence({
       theme={isDark ? themes.vsDark : themes.vsLight}>
       {({ className, style, tokens, getTokenProps }) => (
         <pre>
-          <Code className={className} style={style} title={supportedLanguage}>
+          <Code className={classNames(className, "whitespace-pre-wrap")} style={style} title={supportedLanguage}>
             {tokens.map((line, lineIndex) => (
               <Fragment key={lineIndex}>
                 {line

package/src/mdx/mermaid.tsx

@@ -1,3 +1,4 @@
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import classNames from 'classnames'
 import { useEffect, useMemo, useRef, useState } from 'preact/compat'
 
@@ -6,6 +7,7 @@ export function MermaidRenderer({ content }: { content: string }) {
     const [isFullscreen, setIsFullscreen] = useState(false)
     const [isLoaded, setIsLoaded] = useState(false)
     const [error, setError] = useState<string | null>(null)
+    const [isValid, setIsValid] = useState<boolean | null>(null)
 
     const diagramId = useMemo(() => `mermaid-${btoa(content).replace(/[^a-zA-Z0-9]/g, '').substring(0, 10)}`, [content])
 
@@ -15,8 +17,7 @@ export function MermaidRenderer({ content }: { content: string }) {
         const renderMermaid = async () => {
             try {
                 const mermaid = (await import('mermaid')).default
-                mermaid.initialize({ startOnLoad: true });
-
+                
                 if (!mounted || !mermaidRef.current) return
 
                 mermaid.initialize({
@@ -24,14 +25,14 @@ export function MermaidRenderer({ content }: { content: string }) {
                     theme: 'base',
                     themeVariables: {
                         fontSize: '14px',
-                        nodePadding: 20,        // More padding inside nodes
+                        nodePadding: 20,
                         notePadding: 15,
-                        padding: 10,            // Diagram-wide padding
-                        nodeBorderRadius: 8,    // Rounded corners for nodes
+                        padding: 10,
+                        nodeBorderRadius: 8,
                     },
                     flowchart: {
-                        nodeSpacing: 50,      // horizontal spacing between nodes
-                        rankSpacing: 80,      // vertical spacing between layers
+                        nodeSpacing: 50,
+                        rankSpacing: 80,
                         padding: 20,
                         useMaxWidth: true,
                     },
@@ -45,9 +46,20 @@ export function MermaidRenderer({ content }: { content: string }) {
                     .replace(/^\s*style .*$/gm, '')
                     .replace(/^\s*classDef .*$/gm, '')
                     .replace(/^\s*class .*$/gm, '');
+
+                // Validate the mermaid syntax first
+                try {
+                    await mermaid.parse(contentWithoutStyle)
+                    setIsValid(true)
+                } catch (parseError) {
+                    setIsValid(false)
+                    if (mounted) {
+                        setError(parseError instanceof Error ? parseError.message : 'Invalid diagram syntax')
+                    }
+                    return
+                }
               
                 const { svg } = await mermaid.render(diagramId, contentWithoutStyle);
-                
 
                 if (mounted && mermaidRef.current) {
                     mermaidRef.current.innerHTML = svg
@@ -56,6 +68,7 @@ export function MermaidRenderer({ content }: { content: string }) {
             } catch (err) {
                 console.error('Mermaid rendering error:', err)
                 if (mounted) {
+                    setIsValid(false)
                     setError(err instanceof Error ? err.message : 'Failed to render diagram')
                 }
             }
@@ -72,10 +85,25 @@ export function MermaidRenderer({ content }: { content: string }) {
         setIsFullscreen(!isFullscreen)
     }
 
-    if (error) {
+    if (error || isValid === false) {
         return (
-            <div className="flex items-center justify-center py-8 text-red-400 bg-red-900/20 border border-red-800 rounded">
-                <span>Error rendering diagram: {error}</span>
+            <div className="mermaid-wrapper my-8">
+                <div className="flex flex-col items-center justify-center py-12 px-6 text-center bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 border-2 border-dashed border-red-300 dark:border-red-700 rounded-lg">
+                    <div className="w-16 h-16 mb-4 flex items-center justify-center bg-red-100 dark:bg-red-900/30 rounded-full">
+                        <ExclamationTriangleIcon className="w-8 h-8 text-red-500" />
+                    </div>
+                    <h3 className="text-lg font-semibold text-red-700 dark:text-red-300 mb-2">
+                        Diagram Syntax Error
+                    </h3>
+                    <p className="text-red-600 dark:text-red-400 mb-4 max-w-md">
+                        The Mermaid diagram contains invalid syntax and cannot be rendered.
+                    </p>
+                    <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-md p-3 max-w-md">
+                        <p className="text-sm text-red-700 dark:text-red-300 font-mono break-all">
+                            {error}
+                        </p>
+                    </div>
+                </div>
             </div>
         )
     }