@clidey/dory 0.9.0 → 0.11.0

package/docs/websocket-playground-demo.mdx

@@ -0,0 +1,135 @@
+---
+title: 'WebSocket Playground Demo'
+description: 'Interactive WebSocket playground for testing real-time connections'
+---
+
+# WebSocket Playground Demo
+
+This page demonstrates the WebSocket playground component with various configuration options and real-time connection testing capabilities.
+
+## Basic WebSocket Connection
+
+<WebSocketPlayground
+  url="/ws/chat"
+  title="Basic Chat WebSocket"
+  description="Connect to a WebSocket server and send/receive messages in real-time"
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "WebSocket Echo Server"
+    },
+    {
+      url: "wss://ws.postman-echo.com/raw",
+      description: "Postman Echo WebSocket"
+    }
+  ]}
+/>
+
+## WebSocket with Subprotocols
+
+<WebSocketPlayground
+  url="/ws/protocol"
+  title="WebSocket with Subprotocols"
+  description="WebSocket connection with custom subprotocols for specialized communication"
+  subprotocols={["chat", "v1.0"]}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Echo Server with Subprotocols"
+    }
+  ]}
+/>
+
+## WebSocket with Authentication
+
+<WebSocketPlayground
+  url="/ws/secure"
+  title="Authenticated WebSocket"
+  description="WebSocket connection with authentication headers"
+  authType="bearer"
+  headers={{
+    "User-Agent": "Dory WebSocket Client",
+    "X-Client-Version": "1.0.0"
+  }}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Secure Echo Server"
+    }
+  ]}
+/>
+
+## Real-time Chat Example
+
+<WebSocketPlayground
+  url="/chat"
+  title="Real-time Chat"
+  description="Connect to a chat server and participate in real-time conversations"
+  subprotocols={["chat.v1", "json"]}
+  headers={{
+    "X-Client-Type": "web",
+    "X-Protocol-Version": "1.0"
+  }}
+  servers={[
+    {
+      url: "wss://echo.websocket.org",
+      description: "Chat Echo Server"
+    }
+  ]}
+/>
+
+## Testing Instructions
+
+1. **Connect**: Click the "Connect" button to establish a WebSocket connection
+2. **Send Messages**: Type messages in the input field and click "Send" or press Enter
+3. **View Messages**: All sent and received messages appear in the message history with timestamps
+4. **Configuration**: Use the tabs to configure headers, subprotocols, and authentication
+5. **Server Selection**: Choose different servers from the dropdown to test various endpoints
+
+## Features
+
+- **Real-time Connection**: Live WebSocket connection with status indicators
+- **Message History**: View all sent/received messages with timestamps
+- **Custom Headers**: Add authentication and custom headers
+- **Subprotocols**: Configure WebSocket subprotocols
+- **Multiple Servers**: Easy switching between different WebSocket endpoints
+- **Error Handling**: Clear error messages for connection issues
+- **Binary Support**: Handles both text and binary messages
+
+## Message Types
+
+The playground supports different message types:
+- **Sent**: Messages you send (blue background)
+- **Received**: Messages from the server (green background)
+- **Error**: Connection or sending errors (red background)
+- **System**: Connection status updates (gray background)
+
+## Example Messages
+
+Try sending these JSON messages to test structured data:
+
+```json
+{
+  "type": "chat",
+  "message": "Hello, WebSocket!",
+  "userId": "user123",
+  "timestamp": "2024-01-15T10:30:00Z"
+}
+```
+
+```json
+{
+  "type": "presence",
+  "status": "online",
+  "userId": "user123"
+}
+```
+
+```json
+{
+  "type": "notification",
+  "title": "Test Notification",
+  "message": "This is a test notification",
+  "level": "info"
+}
+```

package/k8s/Dockerfile

@@ -2,6 +2,9 @@ FROM node:22.16-alpine
 
 WORKDIR /app
 
+# Install git
+RUN apk add --no-cache git
+
 COPY ./k8s/config/nginx-default.conf /app/k8s/config/nginx-default.conf
 
 # Install dory globally

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/dory",
   "private": false,
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "A CLI tool for building and previewing documentation sites",
   "keywords": [

package/scripts/generate-frontmatter-json.js

@@ -0,0 +1,154 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Read dory.json to get navigation order (flat list, in order)
+function getNavigationOrder(docsDir) {
+  const doryJsonPath = path.join(docsDir, 'dory.json');
+  if (!fs.existsSync(doryJsonPath)) return [];
+  const doryJson = JSON.parse(fs.readFileSync(doryJsonPath, 'utf-8'));
+  const order = [];
+
+  function walkPages(pages) {
+    for (const page of pages) {
+      if (typeof page === 'string') {
+        order.push(page);
+      } else if (typeof page === 'object' && page.pages) {
+        walkPages(page.pages);
+      }
+    }
+  }
+
+  if (doryJson.navigation && Array.isArray(doryJson.navigation.tabs)) {
+    for (const tab of doryJson.navigation.tabs) {
+      if (tab.groups && Array.isArray(tab.groups)) {
+        for (const group of tab.groups) {
+          if (group.pages && Array.isArray(group.pages)) {
+            walkPages(group.pages);
+          }
+        }
+      }
+    }
+  }
+  return order;
+}
+
+// Function to parse frontmatter from MDX content
+function parseFrontmatter(content) {
+  const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!frontmatterMatch) return { data: {}, content };
+  
+  const frontmatter = frontmatterMatch[1];
+  const data = {};
+  
+  frontmatter.split('\n').forEach(line => {
+    const [key, ...valueParts] = line.split(':');
+    if (key && valueParts.length) {
+      const value = valueParts.join(':').trim();
+      data[key.trim()] = value.replace(/^["']|["']$/g, '');
+    }
+  });
+
+  return { data, content: content.slice(frontmatterMatch[0].length) };
+}
+
+// Convert filename to path format used by the store
+function pathFromFilename(filename, docsDir) {
+  return filename
+    .replace(docsDir, '')
+    .replace(/\/?index\.mdx$/, '/')
+    .replace(/\.mdx$/, '')
+    .replace(/\\/g, '/')
+    .toLowerCase();
+}
+
+// Function to recursively find all MDX files and map by relative path (without .mdx)
+function findMdxFilesMap(dir, baseDir) {
+  const files = {};
+  const items = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const item of items) {
+    const fullPath = path.join(dir, item.name);
+    if (item.isDirectory()) {
+      Object.assign(files, findMdxFilesMap(fullPath, baseDir));
+    } else if (item.isFile() && item.name.endsWith('.mdx')) {
+      // Key: relative path without .mdx, with forward slashes
+      let rel = path.relative(baseDir, fullPath).replace(/\\/g, '/');
+      if (rel.endsWith('.mdx')) rel = rel.slice(0, -4);
+      files[rel] = fullPath;
+    }
+  }
+
+  return files;
+}
+
+// Main function to generate frontmatter JSON
+async function generateFrontmatterJson() {
+  const docsDir = path.join(__dirname, '..', 'docs');
+  const outputDir = path.join(__dirname, '..', 'dist');
+  
+  // Ensure output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+  
+  const navOrder = getNavigationOrder(docsDir);
+  const mdxFilesMap = findMdxFilesMap(docsDir, docsDir);
+  const usedKeys = new Set();
+  const frontmatterArray = [];
+
+  // Process files in navigation order first
+  for (const navKey of navOrder) {
+    // Try both with and without "index"
+    let fileKey = navKey;
+    if (mdxFilesMap[fileKey]) {
+      usedKeys.add(fileKey);
+    } else if (mdxFilesMap[`${fileKey}/index`]) {
+      fileKey = `${fileKey}/index`;
+      usedKeys.add(fileKey);
+    } else {
+      continue;
+    }
+
+    const filePath = mdxFilesMap[fileKey];
+    const rawContent = fs.readFileSync(filePath, 'utf-8');
+    const { data } = parseFrontmatter(rawContent);
+    const pathname = pathFromFilename(filePath, docsDir);
+
+    frontmatterArray.push({
+      ...data,
+      path: pathname
+    });
+  }
+
+  // Process any extra files not in navigation order, sorted
+  const extraKeys = Object.keys(mdxFilesMap).filter(k => !usedKeys.has(k)).sort();
+  for (const fileKey of extraKeys) {
+    const filePath = mdxFilesMap[fileKey];
+    const rawContent = fs.readFileSync(filePath, 'utf-8');
+    const { data } = parseFrontmatter(rawContent);
+    const pathname = pathFromFilename(filePath, docsDir);
+
+    frontmatterArray.push({
+      ...data,
+      path: pathname
+    });
+  }
+
+  // Write to output file
+  const jsonContent = JSON.stringify(frontmatterArray, null, 2);
+  const outputPath = path.join(outputDir, 'frontmatter.json');
+  fs.writeFileSync(outputPath, jsonContent);
+  
+  console.log(`✅ Generated frontmatter JSON file: ${outputPath}`);
+  console.log(`📄 Processed ${frontmatterArray.length} MDX files`);
+  console.log(`📝 Total JSON size: ${jsonContent.length} characters`);
+}
+
+// Run the script
+generateFrontmatterJson().catch(console.error);

package/src/components/store.ts

@@ -11,6 +11,10 @@ export const ALL_OPENAPI = Object.fromEntries(
   Object.entries(import.meta.glob<{ default: string }>('../../docs/**/openapi.json', { query: 'raw', eager: true }))
     .map(([path, loader]) => [pathFromFilename(path), loader])
 );
+export const ALL_ASYNCAPI = Object.fromEntries(
+  Object.entries(import.meta.glob<{ default: string }>('../../docs/**/asyncapi.json', { query: 'raw', eager: true }))
+    .map(([path, loader]) => [pathFromFilename(path), loader])
+);
 
 export interface Route {
     path: string;
@@ -71,11 +75,70 @@ function parseFrontMatter(content: string) {
 }
 
 export let completeFrontMatter: Record<string, any>[] = [];
+let preloadedFrontMatter: Record<string, any>[] | null = null;
+
+// Preload frontmatter from JSON file (optimized approach)
+export async function preloadFrontmatter() {
+    if (preloadedFrontMatter) return; // Already loaded
+    
+    try {
+        const response = await fetch('/frontmatter.json');
+        if (response.ok) {
+            preloadedFrontMatter = await response.json();
+            if (preloadedFrontMatter) {
+                completeFrontMatter = [...preloadedFrontMatter];
+                
+                // Update navigation titles from preloaded data
+                for (const fm of preloadedFrontMatter) {
+                    updateNavigationTitle(fm.path, fm.title);
+                }
+                
+                // Add to search index
+                await addPreloadedContentToSearch();
+            }
+        }
+    } catch (error) {
+        console.warn('Failed to load prebuilt frontmatter JSON, falling back to dynamic loading:', error);
+    }
+}
 
-// Load frontmatter for a specific pathname
+// Add preloaded content to search index
+async function addPreloadedContentToSearch() {
+    if (!preloadedFrontMatter) return;
+    
+    const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: 'raw' });
+    const fileEntries = Object.entries(mdxFiles);
+
+    await Promise.all(
+        preloadedFrontMatter.map(async (fm) => {
+            const fileEntry = fileEntries.find(([filePath]) => pathFromFilename(filePath) === fm.path);
+            if (fileEntry) {
+                const [, loader] = fileEntry;
+                const rawContent = (await loader()).default;
+                const { content } = parseFrontMatter(rawContent);
+                
+                searchIndex.add({
+                    url: fm.path,
+                    title: fm.title || '',
+                    content,
+                    pageTitle: fm.title || ''
+                });
+            }
+        })
+    );
+}
+
+// Load frontmatter for a specific pathname (optimized with fallback)
 export async function loadMDXFrontMatterForPath(pathname: string) {
+    // If we have preloaded data, check if this path is already loaded
+    if (preloadedFrontMatter && preloadedFrontMatter.find(fm => fm.path === pathname)) {
+        return;
+    }
+    
+    // Check if already loaded in completeFrontMatter
     if (completeFrontMatter.find(fm => fm.path === pathname)) return;
 
+    // Fallback to dynamic loading
     const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: 'raw' });
     const fileEntries = Object.entries(mdxFiles);
 
@@ -99,8 +162,14 @@ export async function loadMDXFrontMatterForPath(pathname: string) {
     completeFrontMatter = [...completeFrontMatter, frontmatterItem];
 }
 
-// Load all remaining frontmatter (after initial load)
+// Load all remaining frontmatter (after initial load) - optimized with fallback
 export async function loadAllMDXFrontMatter(pathname: string) {
+    // If we have preloaded data, we're already done
+    if (preloadedFrontMatter) {
+        return;
+    }
+
+    // Fallback to dynamic loading
     const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: 'raw' });
     const fileEntries = Object.entries(mdxFiles);