@clidey/dory 0.2.0 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/dory",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.3.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>
         )
     }