@eventcatalog/core 3.3.1 → 3.4.1

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -571,162 +571,47 @@ nodeGraphs.push({
     </script>
 
     <script>
-      // Listen for Astro transititions
+      import { destroyZoomInstances, renderMermaidWithZoom } from '@utils/mermaid-zoom';
+
+      // Listen for Astro transitions
       document.addEventListener('astro:page-load', () => {
+        destroyZoomInstances();
         const graphs = document.getElementsByClassName('mermaid');
-        if (document.getElementsByClassName('mermaid').length > 0) {
-          renderDiagrams(graphs);
+        if (graphs.length > 0) {
+          renderMermaidWithZoom(graphs, window.eventcatalog?.mermaid);
         }
       });
 
-      /**
-       * Renders mermaid diagrams in the page
-       * @param {HTMLCollectionOf<HTMLElement>} graphs - The collection of mermaid graph elements
-       */
-      async function renderDiagrams(graphs: any) {
-        const { default: mermaid } = await import('mermaid');
-
-        if (window.eventcatalog.mermaid) {
-          const { icons } = await import('@iconify-json/logos');
-          const { iconPacks = [], enableSupportForElkLayout = false } = window.eventcatalog.mermaid ?? {};
-
-          if (iconPacks.length > 0) {
-            const iconPacksToRegister = iconPacks.map((name: any) => {
-              return {
-                name,
-                icons,
-              };
-            });
-
-            mermaid.registerIconPacks(iconPacksToRegister);
-          }
-
-          if (enableSupportForElkLayout) {
-            // @ts-ignore
-            const { default: elkLayouts } = await import('@mermaid-js/layout-elk/dist/mermaid-layout-elk.core.mjs');
-            mermaid.registerLayoutLoaders(elkLayouts);
-          }
-        }
-
-        // Detect current theme from data-theme attribute
-        const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
-        const currentTheme = isDarkMode ? 'dark' : 'default';
-
-        // Custom theme variables for better readability in dark mode
-        const darkThemeVariables = {
-          // Sequence diagram - improve text contrast
-          signalColor: '#f0f6fc',
-          signalTextColor: '#f0f6fc',
-          actorTextColor: '#0d1117',
-          actorBkg: '#f0f6fc',
-          actorBorder: '#484f58',
-          actorLineColor: '#6b7280',
-          // General text colors
-          primaryTextColor: '#f0f6fc',
-          secondaryTextColor: '#c9d1d9',
-          tertiaryTextColor: '#f0f6fc',
-          // Line colors
-          lineColor: '#6b7280',
-        };
-
-        mermaid.initialize({
-          // fontSize: 2,
-          flowchart: {
-            curve: 'linear',
-            rankSpacing: 0,
-            nodeSpacing: 0,
-          },
-          startOnLoad: false,
-          fontFamily: 'var(--sans-font)',
-          // @ts-ignore This works, but TS expects a enum for some reason
-          theme: currentTheme,
-          themeVariables: isDarkMode ? darkThemeVariables : undefined,
-          architecture: {
-            useMaxWidth: true,
-          },
-        });
-
-        for (const graph of graphs) {
-          const content = graph.getAttribute('data-content');
-          if (!content) continue;
-          let svg = document.createElement('svg');
-          const id = (svg.id = 'mermaid-' + Math.round(Math.random() * 100000));
-          graph.appendChild(svg);
-          mermaid.render(id, content).then((result) => {
-            graph.innerHTML = result.svg;
-          });
-        }
-      }
-
+      // Initial render
       const graphs = document.getElementsByClassName('mermaid');
-      if (document.getElementsByClassName('mermaid').length > 0) {
-        renderDiagrams(graphs);
+      if (graphs.length > 0) {
+        renderMermaidWithZoom(graphs, window.eventcatalog?.mermaid);
       }
 
-      // Make renderDiagrams available globally for accordion component
-      window.renderDiagrams = renderDiagrams;
+      // Make available globally for accordion component
+      window.renderDiagrams = (graphs: HTMLCollectionOf<Element>) => {
+        renderMermaidWithZoom(graphs, window.eventcatalog?.mermaid);
+      };
     </script>
 
     <script>
-      import('pako').then(({ deflate }: any) => {
-        document.addEventListener('astro:page-load', () => {
-          const blocks = document.getElementsByClassName('plantuml');
-          if (blocks.length > 0) {
-            renderPlantUML(blocks, deflate);
-          }
-        });
-
-        function renderPlantUML(blocks: any, deflate: any) {
-          for (const block of blocks) {
-            const content = block.getAttribute('data-content');
-            if (!content) continue;
-
-            const encoded = encodePlantUML(content, deflate);
-            const img = document.createElement('img');
-            img.src = `https://www.plantuml.com/plantuml/svg/~1${encoded}`;
-            img.alt = 'PlantUML diagram';
-            img.loading = 'lazy';
-            block.innerHTML = '';
-            // Add class to the img
-            img.classList.add('mx-auto');
-            block.appendChild(img);
-          }
-        }
+      import { renderPlantUMLWithZoom } from '@utils/mermaid-zoom';
 
-        function encodePlantUML(text: any, deflate: any) {
-          const utf8encoded = new TextEncoder().encode(text);
-          const compressed = deflate(utf8encoded, { level: 9 });
-          return encode64(compressed);
+      function initPlantUML() {
+        const blocks = document.getElementsByClassName('plantuml');
+        if (blocks.length > 0) {
+          renderPlantUMLWithZoom(blocks);
         }
+      }
 
-        const encode64 = (data: any) => {
-          const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_';
-          let str = '';
-          let i = 0;
-          while (i < data.length) {
-            let b1 = data[i++];
-            let b2 = i < data.length ? data[i++] : 0;
-            let b3 = i < data.length ? data[i++] : 0;
-
-            let c1 = b1 >> 2;
-            let c2 = ((b1 & 0x3) << 4) | (b2 >> 4);
-            let c3 = ((b2 & 0xf) << 2) | (b3 >> 6);
-            let c4 = b3 & 0x3f;
-
-            str += chars[c1] + chars[c2] + chars[c3] + chars[c4];
-          }
-          return str;
-        };
+      // Run on initial load and page transitions
+      initPlantUML();
+      document.addEventListener('astro:page-load', initPlantUML);
 
-        const graphs = document.getElementsByClassName('plantuml');
-        if (document.getElementsByClassName('plantuml').length > 0) {
-          renderPlantUML(graphs, deflate);
-        }
-
-        window.renderPlantUML = (graphs: any) => {
-          renderPlantUML(graphs, deflate);
-        };
-      });
+      // Make available globally for accordion component
+      window.renderPlantUML = (blocks: HTMLCollectionOf<Element>) => {
+        renderPlantUMLWithZoom(blocks);
+      };
     </script>
     <script>
       // @ts-nocheck

package/eventcatalog/src/pages/docs/[type]/[id]/[version].mdx.ts

@@ -45,15 +45,11 @@ export async function getStaticPaths() {
 }
 
 export const GET: APIRoute = async ({ params, props }) => {
-  console.log('props', props);
-
   // Just return empty array if LLMs are not enabled
   if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 
-  console.log('params', params);
-
   if (isSSR()) {
     const { getResourcePath } = utils(process.env.PROJECT_DIR ?? '');
     const filePath = await getResourcePath(process.env.PROJECT_DIR ?? '', params.id ?? '', params.version ?? '');

package/eventcatalog/src/types/mcp-modules.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Type declarations for MCP server dependencies
+ * These are used by the enterprise MCP server feature
+ */
+
+declare module 'hono' {
+  export interface Context {
+    req: {
+      raw: Request;
+    };
+    json: (data: unknown, status?: number) => Response;
+  }
+
+  export class Hono {
+    constructor();
+    basePath(path: string): Hono;
+    get(path: string, handler: (c: Context) => Response | Promise<Response>): void;
+    post(path: string, handler: (c: Context) => Response | Promise<Response>): void;
+    fetch(request: Request): Promise<Response>;
+  }
+}
+
+declare module '@modelcontextprotocol/sdk/server/mcp.js' {
+  import { z } from 'zod';
+
+  export interface ToolConfig {
+    description: string;
+    inputSchema: z.ZodType<any>;
+  }
+
+  export interface ToolResult {
+    content: Array<{ type: 'text'; text: string }>;
+    isError?: boolean;
+  }
+
+  export interface ResourceConfig {
+    description: string;
+    mimeType: string;
+  }
+
+  export interface ResourceResult {
+    contents: Array<{
+      uri: string;
+      text: string;
+      mimeType: string;
+    }>;
+  }
+
+  export class McpServer {
+    constructor(config: { name: string; version: string });
+    registerTool(name: string, config: ToolConfig, handler: (params: any) => Promise<ToolResult>): void;
+    registerResource(name: string, uri: string, config: ResourceConfig, handler: (uri: URL) => Promise<ResourceResult>): void;
+    connect(transport: any): Promise<void>;
+  }
+}
+
+declare module '@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js' {
+  export interface WebStandardStreamableHTTPServerTransportConfig {
+    sessionIdGenerator: undefined;
+  }
+
+  export class WebStandardStreamableHTTPServerTransport {
+    constructor(config: WebStandardStreamableHTTPServerTransportConfig);
+    handleRequest(request: Request): Promise<Response>;
+  }
+}

package/eventcatalog/src/utils/feature.ts

@@ -69,3 +69,5 @@ export const isCustomStylesEnabled = () => {
 };
 
 export const isDiagramComparisonEnabled = () => isEventCatalogScaleEnabled();
+
+export const isEventCatalogMCPEnabled = () => isEventCatalogScaleEnabled() && isSSR();