@eventcatalog/core 3.2.2 → 3.3.1

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

@@ -0,0 +1,47 @@
+// This file exposes the markdown for diagrams in the URL
+// For example http://localhost:3000/diagrams/target-architecture/1.0.0 loads the Page
+// and http://localhost:3000/diagrams/target-architecture/1.0.0.mdx loads the markdown
+// This is used for LLMs to load the markdown for diagrams (llms.txt)
+
+import type { APIRoute } from 'astro';
+import { getCollection } from 'astro:content';
+import fs from 'fs';
+import { isLLMSTxtEnabled, isSSR } from '@utils/feature';
+
+const diagrams = await getCollection('diagrams');
+
+export async function getStaticPaths() {
+  // Just return empty array if LLMs are not enabled
+  if (!isLLMSTxtEnabled()) {
+    return [];
+  }
+
+  return diagrams.map((diagram) => ({
+    params: { id: diagram.data.id, version: diagram.data.version },
+    props: { content: diagram },
+  }));
+}
+
+export const GET: APIRoute = async ({ params, 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 });
+  }
+
+  if (isSSR()) {
+    // For SSR mode, find the diagram and read its file
+    const diagram = diagrams.find((d) => d.data.id === params.id && d.data.version === params.version);
+    if (!diagram?.filePath) {
+      return new Response('Not found', { status: 404 });
+    }
+    const file = fs.readFileSync(diagram.filePath, 'utf8');
+    return new Response(file, { status: 200 });
+  } else {
+    if (props?.content?.filePath) {
+      const file = fs.readFileSync(props.content.filePath, 'utf8');
+      return new Response(file, { status: 200 });
+    }
+  }
+
+  return new Response('Not found', { status: 404 });
+};

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

@@ -9,6 +9,8 @@ import '@asyncapi/react-component/styles/default.min.css';
 import js from '@asyncapi/react-component/browser/standalone/without-parser.js?url';
 import { AsyncApiComponentWP, type ConfigInterface } from '@asyncapi/react-component';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import CopyAsMarkdown from '@components/CopyAsMarkdown';
+import { isEventCatalogChatEnabled } from '@utils/feature';
 import Config from '@utils/eventcatalog-config/catalog';
 import { Page } from './_[filename].data';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
@@ -46,6 +48,10 @@ const renderedComponent = renderToString(component);
 // Capitalize the first letter of a string
 const pageTitle = `${collection} | ${data.name} | AsyncApi Spec`.replace(/^\w/, (c) => c.toUpperCase());
 
+// Chat configuration
+const chatEnabled = isEventCatalogChatEnabled();
+const chatQuery = `Tell me about the AsyncAPI specification for "${data.name}" (version ${data.version})`;
+
 // Index only the latest version
 const pagefindAttributes =
   data.version === data.latestVersion
@@ -57,13 +63,30 @@ const pagefindAttributes =
 ---
 
 <VerticalSideBarLayout title={pageTitle}>
-  <div {...pagefindAttributes}>
+  <div {...pagefindAttributes} class="relative">
     {
       // Currently, Pagefind does not index metadata (such as the title),
       // so we need to ensure it is included as text on the page.
       // https://github.com/CloudCannon/pagefind/issues/437
     }
     <h2 class="hidden">{pageTitle}</h2>
+    {
+      chatEnabled && (
+        <div class="absolute top-3 right-4 z-10">
+          <CopyAsMarkdown
+            client:only="react"
+            schemas={[]}
+            chatQuery={chatQuery}
+            chatEnabled={chatEnabled}
+            editUrl=""
+            markdownDownloadEnabled={false}
+            rssFeedEnabled={false}
+            preferChatAsDefault={true}
+            chatButtonText="Ask about this specification"
+          />
+        </div>
+      )
+    }
     <div id="asyncapi" class="md:pr-14" set:html={renderedComponent} />
   </div>
 </VerticalSideBarLayout>

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

@@ -305,6 +305,7 @@ nodeGraphs.push({
                   markdownDownloadEnabled={isMarkdownDownloadEnabled()}
                   rssFeedEnabled={isRSSEnabled()}
                   editUrl={editUrl}
+                  preferChatAsDefault={isEventCatalogChatEnabled()}
                 />
               </div>
             </div>

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

@@ -4,6 +4,8 @@ import OpenAPISpec from './_OpenAPI.tsx';
 
 import { DocumentMinusIcon } from '@heroicons/react/24/outline';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import CopyAsMarkdown from '@components/CopyAsMarkdown';
+import { isEventCatalogChatEnabled } from '@utils/feature';
 import './_styles.css';
 import { Page } from './_[filename].data.ts';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
@@ -27,6 +29,10 @@ let content = '';
 // Capitalize the first letter of a string
 const pageTitle = `${collection} | ${data.name} | OpenAPI Spec`.replace(/^\w/, (c) => c.toUpperCase());
 
+// Chat configuration
+const chatEnabled = isEventCatalogChatEnabled();
+const chatQuery = `Tell me about the OpenAPI specification for "${data.name}" (version ${data.version})`;
+
 // Index only the latest version
 const pagefindAttributes =
   data.version === data.latestVersion
@@ -57,13 +63,28 @@ if (isRemote) {
         </p>
       </div>
     ) : (
-      <div {...pagefindAttributes}>
+      <div {...pagefindAttributes} class="relative">
         {
           // Currently, Pagefind does not index metadata (such as the title),
           // so we need to ensure it is included as text on the page.
           // https://github.com/CloudCannon/pagefind/issues/437
         }
         <h2 class="hidden">{pageTitle}</h2>
+        {chatEnabled && (
+          <div class="absolute top-3 right-14 z-10">
+            <CopyAsMarkdown
+              client:only="react"
+              schemas={[]}
+              chatQuery={chatQuery}
+              chatEnabled={chatEnabled}
+              editUrl=""
+              markdownDownloadEnabled={false}
+              rssFeedEnabled={false}
+              preferChatAsDefault={true}
+              chatButtonText="Ask about this specification"
+            />
+          </div>
+        )}
         <OpenAPISpec client:only="react" spec={content} />
       </div>
     )

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/_OpenAPI.tsx

@@ -1,13 +1,38 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { ApiReferenceReact } from '@scalar/api-reference-react';
 import '@scalar/api-reference-react/style.css';
 import './_styles.css';
+
 const OpenAPISpec = ({ spec }: { spec: string }) => {
   const [loaded, setLoaded] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    return document.documentElement.getAttribute('data-theme') === 'dark';
+  });
+
+  useEffect(() => {
+    // Watch for theme changes
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'data-theme') {
+          const theme = document.documentElement.getAttribute('data-theme');
+          setIsDarkMode(theme === 'dark');
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div>
       {!loaded && <div>Loading...</div>}
       <ApiReferenceReact
+        key={isDarkMode ? 'dark' : 'light'}
         configuration={{
           spec: {
             content: spec,
@@ -17,13 +42,12 @@ const OpenAPISpec = ({ spec }: { spec: string }) => {
           onLoaded: () => {
             setLoaded(true);
           },
-          forceDarkModeState: 'light',
-          darkMode: false,
+          forceDarkModeState: isDarkMode ? 'dark' : 'light',
+          darkMode: isDarkMode,
           defaultOpenAllTags: true,
           hideDarkModeToggle: true,
           searchHotKey: 'p',
           showSidebar: true,
-          customCss: 'bg-red-500',
         }}
       />
     </div>

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

@@ -7,6 +7,7 @@ import { getCollection } from 'astro:content';
 import { getEntities } from '@utils/collections/entities';
 import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 const events = await getCollection('events');
 const commands = await getCollection('commands');
@@ -19,7 +20,7 @@ const containers = await getCollection('containers');
 const entities = await getEntities();
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -46,7 +47,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

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

@@ -21,7 +21,7 @@ import utils from '@eventcatalog/sdk';
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
   const collections = {
@@ -45,11 +45,15 @@ 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/pages/docs/[type]/[id]/language.mdx.ts

@@ -3,6 +3,7 @@ import type { CollectionEntry } from 'astro:content';
 import type { APIRoute } from 'astro';
 import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 export async function getStaticPaths() {
   const domains = await getDomains({ getAllVersions: false });
@@ -25,7 +26,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/custom/[...path].mdx.ts

@@ -4,8 +4,8 @@
 
 import type { APIRoute, GetStaticPaths } from 'astro';
 import { getCollection } from 'astro:content';
-import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 export const getStaticPaths = (async () => {
   const docs = await getCollection('customPages');
@@ -19,7 +19,7 @@ export const getStaticPaths = (async () => {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/teams/[id].md.ts

@@ -6,12 +6,13 @@ import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
 import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 const teams = await getCollection('teams');
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -23,7 +24,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

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

@@ -4,14 +4,14 @@
 
 import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
-import config from '@config';
+import { isLLMSTxtEnabled } from '@utils/feature';
 import fs from 'fs';
 
 const teams = await getCollection('teams');
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -23,7 +23,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/users/[id].md.ts

@@ -6,12 +6,13 @@ import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
 import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 const users = await getCollection('users');
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -23,7 +24,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

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

@@ -4,14 +4,14 @@
 
 import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
-import config from '@config';
+import { isLLMSTxtEnabled } from '@utils/feature';
 import fs from 'fs';
 
 const users = await getCollection('users');
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -23,7 +23,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/stores/sidebar-store/builders/container.ts

@@ -1,16 +1,21 @@
 import type { CollectionEntry } from 'astro:content';
 import { buildUrl } from '@utils/url-builder';
-import type { NavNode, ChildRef } from './shared';
+import type { NavNode, ChildRef, ResourceGroupContext } from './shared';
 import {
   buildQuickReferenceSection,
   buildOwnersSection,
   shouldRenderSideBarSection,
   buildRepositorySection,
   buildAttachmentsSection,
+  buildDiagramNavItems,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 
-export const buildContainerNode = (container: CollectionEntry<'containers'>, owners: any[]): NavNode => {
+export const buildContainerNode = (
+  container: CollectionEntry<'containers'>,
+  owners: any[],
+  context: ResourceGroupContext
+): NavNode => {
   const servicesWritingToContainer = container.data.servicesThatWriteToContainer || [];
   const servicesReadingFromContainer = container.data.servicesThatReadFromContainer || [];
 
@@ -27,6 +32,11 @@ export const buildContainerNode = (container: CollectionEntry<'containers'>, own
 
   const renderRepository = container.data.repository && shouldRenderSideBarSection(container, 'repository');
 
+  // Diagrams
+  const containerDiagrams = container.data.diagrams || [];
+  const diagramNavItems = buildDiagramNavItems(containerDiagrams, context.diagrams);
+  const hasDiagrams = diagramNavItems.length > 0;
+
   return {
     type: 'item',
     title: container.data.name,
@@ -41,16 +51,22 @@ export const buildContainerNode = (container: CollectionEntry<'containers'>, own
       ]),
       renderVisualiser && {
         type: 'group',
-        title: 'Architecture & Design',
+        title: 'Architecture',
         icon: 'Workflow',
         pages: [
           {
             type: 'item',
-            title: 'Interaction Map',
+            title: 'Map',
             href: buildUrl(`/visualiser/containers/${container.data.id}/${container.data.version}`),
           },
         ],
       },
+      hasDiagrams && {
+        type: 'group',
+        title: 'Diagrams',
+        icon: 'FileImage',
+        pages: diagramNavItems,
+      },
       renderServicesWritingToContainer && {
         type: 'group',
         title: 'Services (Writes)',

package/eventcatalog/src/stores/sidebar-store/builders/domain.ts

@@ -8,6 +8,7 @@ import {
   shouldRenderSideBarSection,
   buildRepositorySection,
   buildAttachmentsSection,
+  buildDiagramNavItems,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 
@@ -35,6 +36,12 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
   const hasAttachments = domain.data.attachments && domain.data.attachments.length > 0;
 
   const renderRepository = domain.data.repository && shouldRenderSideBarSection(domain, 'repository');
+
+  // Diagrams
+  const domainDiagrams = domain.data.diagrams || [];
+  const diagramNavItems = buildDiagramNavItems(domainDiagrams, context.diagrams);
+  const hasDiagrams = diagramNavItems.length > 0;
+
   return {
     type: 'item',
     title: domain.data.name,
@@ -47,32 +54,33 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
       ]),
       {
         type: 'group',
-        title: 'Architecture & Design',
+        title: 'Architecture',
         icon: 'Workflow',
         pages: [
           {
             type: 'item',
-            title: 'Architecture Overview',
+            title: 'Overview',
             href: buildUrl(`/architecture/domains/${domain.data.id}/${domain.data.version}`),
           },
+          renderVisualiser && {
+            type: 'item',
+            title: 'Map',
+            href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
+          },
           renderEntities &&
             renderVisualiser && {
               type: 'item',
               title: 'Entity Map',
               href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}/entity-map`),
             },
-          renderVisualiser && {
-            type: 'item',
-            title: 'Interaction Map',
-            href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
-          },
-          renderVisualiser && {
-            type: 'item',
-            title: 'Global Domain Map',
-            href: buildUrl(`/visualiser/domain-integrations`),
-          },
         ].filter(Boolean) as ChildRef[],
       },
+      hasDiagrams && {
+        type: 'group',
+        title: 'Diagrams',
+        icon: 'FileImage',
+        pages: diagramNavItems,
+      },
       renderSubDomains && {
         type: 'group',
         title: 'Subdomains',

package/eventcatalog/src/stores/sidebar-store/builders/flow.ts

@@ -14,7 +14,7 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>): NavNode => {
       buildQuickReferenceSection([{ title: 'Overview', href: buildUrl(`/docs/flows/${flow.data.id}/${flow.data.version}`) }]),
       {
         type: 'group',
-        title: 'Architecture & Design',
+        title: 'Architecture',
         icon: 'Workflow',
         pages: [
           {

package/eventcatalog/src/stores/sidebar-store/builders/message.ts

@@ -1,17 +1,22 @@
 import type { CollectionEntry } from 'astro:content';
 import { buildUrl } from '@utils/url-builder';
 import { getSchemaFormatFromURL } from '@utils/collections/schemas';
-import type { NavNode, ChildRef } from './shared';
+import type { NavNode, ChildRef, ResourceGroupContext } from './shared';
 import {
   buildQuickReferenceSection,
   buildOwnersSection,
   shouldRenderSideBarSection,
   buildRepositorySection,
   buildAttachmentsSection,
+  buildDiagramNavItems,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 
-export const buildMessageNode = (message: CollectionEntry<'events' | 'commands' | 'queries'>, owners: any[]): NavNode => {
+export const buildMessageNode = (
+  message: CollectionEntry<'events' | 'commands' | 'queries'>,
+  owners: any[],
+  context: ResourceGroupContext
+): NavNode => {
   const producers = message.data.producers || [];
   const consumers = message.data.consumers || [];
   const collection = message.collection;
@@ -35,6 +40,11 @@ export const buildMessageNode = (message: CollectionEntry<'events' | 'commands'
 
   const renderOwners = owners.length > 0 && shouldRenderSideBarSection(message, 'owners');
 
+  // Diagrams
+  const messageDiagrams = message.data.diagrams || [];
+  const diagramNavItems = buildDiagramNavItems(messageDiagrams, context.diagrams);
+  const hasDiagrams = diagramNavItems.length > 0;
+
   return {
     type: 'item',
     title: message.data.name,
@@ -49,16 +59,22 @@ export const buildMessageNode = (message: CollectionEntry<'events' | 'commands'
       ]),
       renderVisualiser && {
         type: 'group',
-        title: 'Architecture & Design',
+        title: 'Architecture',
         icon: 'Workflow',
         pages: [
           {
             type: 'item',
-            title: 'Interaction Map',
+            title: 'Map',
             href: buildUrl(`/visualiser/${collection}/${message.data.id}/${message.data.version}`),
           },
         ],
       },
+      hasDiagrams && {
+        type: 'group',
+        title: 'Diagrams',
+        icon: 'FileImage',
+        pages: diagramNavItems,
+      },
       hasSchema && {
         type: 'group',
         title: `API & Contracts`,