@clidey/dory 0.1.0 → 0.3.0

package/docs/features.mdx

@@ -0,0 +1,440 @@
+---
+title: 'Features'
+description: 'Overview of available components and features'
+---
+
+## Headings Examples
+
+```mdx
+# Heading 1
+```
+# Heading 1
+
+```mdx
+## Heading 2
+```
+# Heading 2
+
+```mdx
+### Heading 3
+```
+# Heading 3
+```mdx
+#### Heading 4
+```
+# Heading 4
+```mdx
+##### Heading 5
+```
+# Heading 5
+```mdx
+###### Heading 6
+```
+# Heading 6
+
+<br />
+
+## Lists Examples
+
+```mdx
+- List item 1
+- List item 2
+- List item 3
+```
+
+- List item 1
+- List item 2
+- List item 3
+
+```mdx
+1. List item 1
+2. List item 2
+3. List item 3
+```
+
+1. List item 1
+2. List item 2
+3. List item 3
+
+
+
+<br />
+
+### Images
+
+```mdx
+<img src="./assets/dory.jpeg" alt="Example image" className="object-cover w-64 h-64" />
+```
+
+<img src="./assets/dory.jpeg" alt="Example image" className="object-cover w-64 h-64" />
+
+
+<br />
+<br />
+<br />
+
+## Code Components
+
+### Code Block
+```typescript
+function example() {
+  return "Hello World";
+}
+```
+
+### Code Group Block
+
+<CodeGroup>
+```typescript
+function example(): string {
+  return "Hello World";
+}
+```
+```javascript
+function example() {
+  return "Hello World";
+}
+```
+</CodeGroup>
+
+
+<br />
+<br />
+<br />
+
+
+## Interactive Components
+
+### Mermaid
+
+```mdx
+mermaid
+graph TD
+
+  %% Main Start
+  Start([Start Process]) --> Validate[Validate Input]
+
+  %% Decision Point
+  Validate -->|Valid| ProcessData{Is Data Clean?}
+  Validate -->|Invalid| Error[Show Error Message]
+
+  %% Clean Data Branch
+  ProcessData -->|Yes| Clean[Clean Data]
+  Clean --> Analyze[Analyze Data]
+
+  %% Dirty Data Branch
+  ProcessData -->|No| Notify[Notify User]
+  Notify --> Wait[Wait for Input]
+  Wait --> Validate
+
+  %% Parallel Branches After Analysis
+  Analyze --> Split1 & Split2
+
+  subgraph Parallel Tasks
+    Split1[Generate Report] --> Merge
+    Split2[Update Dashboard] --> Merge
+  end
+
+  Merge --> Decision2{Is More Input Needed?}
+  Decision2 -->|Yes| WaitMore[Wait for More Input]
+  WaitMore --> Validate
+  Decision2 -->|No| End([End Process])
+
+  %% Style and Class Definitions
+  classDef decision fill:#f9f,stroke:#333,stroke-width:2px;
+  class ProcessData,Decision2 decision;
+
+```
+
+<strong>
+<p>Note: Mermaid should be inside a code block with type "mermaid"</p>
+</strong>
+
+```mermaid
+graph TD
+
+  %% Main Start
+  Start([Start Process]) --> Validate[Validate Input]
+
+  %% Decision Point
+  Validate -->|Valid| ProcessData{Is Data Clean?}
+  Validate -->|Invalid| Error[Show Error Message]
+
+  %% Clean Data Branch
+  ProcessData -->|Yes| Clean[Clean Data]
+  Clean --> Analyze[Analyze Data]
+
+  %% Dirty Data Branch
+  ProcessData -->|No| Notify[Notify User]
+  Notify --> Wait[Wait for Input]
+  Wait --> Validate
+
+  %% Parallel Branches After Analysis
+  Analyze --> Split1 & Split2
+
+  subgraph Parallel Tasks
+    Split1[Generate Report] --> Merge
+    Split2[Update Dashboard] --> Merge
+  end
+
+  Merge --> Decision2{Is More Input Needed?}
+  Decision2 -->|Yes| WaitMore[Wait for More Input]
+  WaitMore --> Validate
+  Decision2 -->|No| End([End Process])
+
+  %% Style and Class Definitions
+  classDef decision fill:#f9f,stroke:#333,stroke-width:2px;
+  class ProcessData,Decision2 decision;
+
+```
+
+### Accordion
+
+```mdx
+<AccordionGroup>
+  <Accordion title="First Section" icon="DocumentIcon">
+    This is the content of the first accordion section.
+  </Accordion>
+  <Accordion title="Second Section" icon="CodeBracketIcon">
+    This is the content of the second accordion section.
+  </Accordion>
+</AccordionGroup>
+```
+
+<AccordionGroup>
+  <Accordion title="First Section" icon="DocumentIcon">
+    This is the content of the first accordion section.
+  </Accordion>
+  <Accordion title="Second Section" icon="CodeBracketIcon">
+    This is the content of the second accordion section.
+  </Accordion>
+</AccordionGroup>
+
+### Callouts
+
+```mdx
+<Note>
+  This is a note callout with important information.
+</Note>
+```
+
+<Note>
+  This is a note callout with important information.
+</Note>
+
+```mdx
+<Warning>
+  This is a warning callout for critical information.
+</Warning>
+```
+
+<Warning>
+  This is a warning callout for critical information.
+</Warning>
+
+```mdx
+<Info>
+  This is an info callout for general information.
+</Info>
+```
+
+<Info>
+  This is an info callout for general information.
+</Info>
+
+```mdx
+<Tip>
+  This is a tip callout for helpful suggestions.
+</Tip>
+```
+
+<Tip>
+  This is a tip callout for helpful suggestions.
+</Tip>
+
+```mdx
+<Check>
+  This is a check callout for completed items.
+</Check>
+```
+
+<Check>
+  This is a check callout for completed items.
+</Check>
+
+
+<br />
+
+### Cards
+```mdx
+<CardGroup cols={2}>
+  <Card 
+    title="Example Card" 
+    description="This is an example card component with an icon and title."
+    icon="FileText"
+    href="#"
+  />
+  <Card 
+    title="Another Card" 
+    description="This is another example card with different content."
+    icon="Code"
+    href="#"
+  />
+</CardGroup>
+```
+
+<CardGroup cols={2}>
+  <Card 
+    title="Example Card" 
+    description="This is an example card component with an icon and title."
+    icon="FileText"
+    href="#"
+  />
+  <Card 
+    title="Another Card" 
+    description="This is another example card with different content."
+    icon="Code"
+    href="#"
+  />
+</CardGroup>
+
+<br />
+
+### Expandable
+
+```mdx
+<Expandable title="Click to Expand">
+  This is an expandable section that can be toggled.
+</Expandable>
+```
+
+<Expandable title="Click to Expand">
+  This is an expandable section that can be toggled.
+</Expandable>
+
+### Source
+
+```mdx
+<Source url="https://github.com/clidey/dory" paths={[
+  { path: "src/mdx/source.tsx", range: "1-46" },
+  { path: "docs/features.mdx", range: "318-322" },
+]} />
+```
+
+<Source url="https://github.com/clidey/dory" paths={[
+  { path: "src/mdx/source.tsx", range: "1-46" },
+  { path: "docs/features.mdx", range: "318-322" },
+]} />
+
+<br />
+<br />
+<br />
+
+
+## Special Components
+
+### Grids
+
+#### Rows
+```mdx
+<Row cols={2}>
+  <Icon icon="FileText" />
+  <Icon icon="CheckCircle" />
+</Row>
+```
+
+<Row cols={2}>
+  <Icon icon="FileText" />
+  <Icon icon="CheckCircle" />
+</Row>
+
+<br />
+
+#### Columns
+
+```mdx
+<Col>
+  <Icon icon="FileText" />
+  <Icon icon="FileText" />
+</Col>
+```
+
+<Col>
+  <Icon icon="FileText" />
+  <Icon icon="FileText" />
+</Col>
+
+<br />
+<br />
+<br />
+
+### Latex
+
+```mdx
+<Latex>
+E = mc^2
+</Latex>
+```
+
+<Latex>
+E = mc^2
+</Latex>
+
+<br />
+<br />
+<br />
+
+### Tables
+
+```mdx
+| Property | Description                           |
+| -------- | ------------------------------------- |
+| Name     | Full name of user                     |
+| Age      | Reported age                          |
+| Joined   | Whether the user joined the community |
+```
+
+| Property | Description                           |
+| -------- | ------------------------------------- |
+| Name     | Full name of user                     |
+| Age      | Reported age                          |
+| Joined   | Whether the user joined the community |
+
+
+### Steps
+
+```mdx
+<Steps>
+  <Step title="First Step">
+  This is the first step in the process.
+  </Step>
+  <Step title="Second Step">
+  This is the second step in the process.
+  </Step>
+</Steps>
+```
+
+<Steps>
+  <Step title="First Step">
+  This is the first step in the process.
+  </Step>
+  <Step title="Second Step">
+  This is the second step in the process.
+  </Step>
+</Steps>
+
+### Icons
+
+```mdx
+<Col rows={2}>
+  <Icon icon="Code" />
+  <Icon icon="FileText" />
+  <Icon icon="CheckCircle" />
+</Col>
+```
+
+<Row cols={3}>
+<Icon icon="Code" />
+<Icon icon="FileText" />
+<Icon icon="CheckCircle" />
+</Row>

package/docs/introduction.mdx

@@ -0,0 +1,44 @@
+---
+title: 'Introduction'
+description: 'Welcome to Docucod and Dory documentation'
+---
+
+# Introduction
+
+## Welcome to Docucod and Dory
+
+This documentation is powered by two complementary tools:
+
+1. **Docucod** - An AI-powered documentation assistant that automatically generates and maintains documentation
+2. **Dory** - A lightweight static site generator specifically designed to deploy Docucod-generated documentation
+
+## What is Docucod?
+
+Docucod analyzes your codebase and automatically:
+- Generates comprehensive documentation
+- Updates existing documentation when code changes
+- Maintains consistent style and formatting
+- Ensures accuracy and completeness
+
+## What is Dory?
+
+Dory is a lightweight static site generator built for developers who want fast, clean, and customizable documentation. It was created specifically to deploy Docucod-generated documentation with:
+
+- 🧠 **Simple** — Drop in `.mdx` files and configure one `dory.json`
+- ⚡ **Fast** — Instant hot reload in dev, quick static builds for prod
+- 🌐 **Portable** — No SSR, no lock-in, deploy anywhere
+- 🧩 **Flexible** — Hackable theme, readable codebase, minimal magic
+
+## Documentation Structure
+
+This documentation is organized to help you:
+- Get started quickly with both Docucod and Dory
+- Understand core concepts and features
+- Follow best practices and examples
+- Find detailed API references
+
+Let's begin exploring Docucod and Dory's capabilities!
+
+<br/>
+<br/>
+<br/>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/dory",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "A CLI tool for building and previewing documentation sites",
   "keywords": [
@@ -27,7 +27,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "publish": "npm publish --access public"
   },
   "dependencies": {
     "@algolia/autocomplete-core": "^1.19.2",
@@ -40,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",
@@ -53,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>
         )
     }

package/src/mdx/source.tsx

@@ -1,6 +1,6 @@
 type PathRange = {
     path: string;
-    range: string;
+    range?: string;
 };
 
 type SourceProps = {
@@ -10,7 +10,18 @@ type SourceProps = {
 };
 
 export const Source = ({ url, branch = "main", paths }: SourceProps) => {
-    const createSourceUrl = (path: string, range: string) => {
+    const createSourceUrl = (path: string, range?: string) => {
+        if (!range) {
+            if (url.includes('github.com')) {
+                return `${url}/blob/${branch}/${path}`;
+            } else if (url.includes('bitbucket.org')) {
+                return `${url}/src/${branch}/${path}`;
+            } else if (url.includes('gitlab.com')) {
+                return `${url}/-/blob/${branch}/${path}`;
+            }
+            return url;
+        }
+
         const [start, end] = range.split('-');
 
         if (url.includes('github.com')) {
@@ -29,7 +40,7 @@ export const Source = ({ url, branch = "main", paths }: SourceProps) => {
             <p className="text-sm text-slate-900 dark:text-white">Sources:</p>
             <ul className="list-none pl-0 flex flex-wrap gap-2 mt-2">
                 {paths.map(({ path, range }) => (
-                    <li key={path + range}>
+                    <li key={path + (range || '')}>
                         <a
                             href={createSourceUrl(path, range)}
                             target="_blank"
@@ -37,7 +48,7 @@ export const Source = ({ url, branch = "main", paths }: SourceProps) => {
                             className="rounded px-3 py-1 font-mono text-sm text-slate-700 dark:text-slate-400 hover:opacity-80 transition-colors border border-slate-200 dark:border-slate-700"
                         >
                             {path}
-                            <span className="ml-2 opacity-70">{range}</span>
+                            {range && <span className="ml-2 opacity-70">{range}</span>}
                         </a>
                     </li>
                 ))}

package/docs/README.md

@@ -1,2 +0,0 @@
-# genie-internal
-Created via Docucod