@eventcatalog/core 2.33.0 → 2.33.2

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

@@ -4,7 +4,7 @@ import Footer from '@layouts/Footer.astro';
 
 import components from '@components/MDX/components';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
-import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
+import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewerRoot.astro';
 
 // SideBars
 import ServiceSideBar from '@components/SideBars/ServiceSideBar.astro';
@@ -202,7 +202,8 @@ const pagefindAttributes =
         </div>
         <div data-pagefind-ignore>
           <!-- @ts-ignore -->
-          <SchemaViewer id={props.data.id} catalog={props.catalog} filePath={props.filePath} />
+          <!-- <SchemaViewer id={props.data.id} catalog={props.catalog} filePath={props.filePath} /> -->
+          <SchemaViewer id={props.data.id} filePath={props.filePath} />
           <NodeGraph
             id={props.data.id}
             collection={props.collection}

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

@@ -0,0 +1,32 @@
+// This file exposes the markdown for EventCatalog in the Url
+// For example http://localhost:3000/docs/events/OrderAmended/0.0.1 loads the Page and http://localhost:3000/docs/events/OrderAmended/0.0.1.md loads the markdown
+// This is used for the LLMs to load the markdown for the given item (llms.txt);
+
+import type { APIRoute, GetStaticPaths } from 'astro';
+import { getCollection } from 'astro:content';
+import config from '@config';
+import fs from 'fs';
+
+export const getStaticPaths = (async () => {
+  const docs = await getCollection('customPages');
+  const paths = docs.map((doc) => ({
+    params: { path: doc.id.replace('docs/', '') },
+    props: doc,
+    type: 'custom',
+  }));
+  return paths;
+}) satisfies GetStaticPaths;
+
+export const GET: APIRoute = async ({ params, props }) => {
+  // Just return empty array if LLMs are not enabled
+  if (!config.llmsTxt?.enabled) {
+    return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
+  }
+
+  if (props.filePath) {
+    const file = fs.readFileSync(props.filePath, 'utf8');
+    return new Response(file, { status: 200 });
+  }
+
+  return new Response('Not found', { status: 404 });
+};

package/eventcatalog/src/pages/docs/llm/llms-full.txt.ts

@@ -1,7 +1,10 @@
-import { getCollection } from 'astro:content';
+import { getCollection, type CollectionEntry } from 'astro:content';
 import config from '@config';
 import type { APIRoute } from 'astro';
 import fs from 'fs';
+import { isCustomDocsEnabled } from '@utils/feature';
+
+type AllowedCollections = 'events' | 'commands' | 'queries' | 'services' | 'domains' | 'teams' | 'users' | 'customPages';
 
 const events = await getCollection('events');
 const commands = await getCollection('commands');
@@ -11,12 +14,26 @@ const domains = await getCollection('domains');
 const teams = await getCollection('teams');
 const users = await getCollection('users');
 
+const customDocs = await getCollection('customPages');
+
 export const GET: APIRoute = async ({ params, request }) => {
   if (!config.llmsTxt?.enabled) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 
-  const resources = [...events, ...commands, ...queries, ...services, ...domains, ...teams, ...users];
+  const resources: CollectionEntry<AllowedCollections>[] = [
+    ...events,
+    ...commands,
+    ...queries,
+    ...services,
+    ...domains,
+    ...teams,
+    ...users,
+  ];
+
+  if (isCustomDocsEnabled()) {
+    resources.push(...(customDocs as CollectionEntry<AllowedCollections>[]));
+  }
 
   const content = resources
     .map((item) => {

package/eventcatalog/src/pages/docs/llm/llms.txt.ts

@@ -2,6 +2,8 @@ import { getCollection } from 'astro:content';
 import config from '@config';
 import type { APIRoute } from 'astro';
 
+import { isCustomDocsEnabled } from '@utils/feature';
+
 const events = await getCollection('events');
 const commands = await getCollection('commands');
 const queries = await getCollection('queries');
@@ -12,6 +14,8 @@ const domains = await getCollection('domains');
 const teams = await getCollection('teams');
 const users = await getCollection('users');
 
+const customDocs = await getCollection('customPages');
+
 export const GET: APIRoute = async ({ params, request }) => {
   const url = new URL(request.url);
   const baseUrl = `${url.protocol}//${url.host}`;
@@ -22,6 +26,9 @@ export const GET: APIRoute = async ({ params, request }) => {
   const formatSimpleItem = (item: any, type: string) =>
     `- [${item.id.replace('.mdx', '')}](${baseUrl}/docs/${type}/${item.data.id}.mdx) - ${item.data.name}`;
 
+  const formatCustomDoc = (item: any, route: string) =>
+    `- [${item.data.title}](${baseUrl}/${route}/${item.id.replace('docs\/', '')}.mdx) - ${item.data.summary || ''}`;
+
   const content = [
     `# ${config.organizationName} EventCatalog Documentation\n`,
     `> ${config.tagline}`,
@@ -39,6 +46,9 @@ export const GET: APIRoute = async ({ params, request }) => {
     teams.map((item) => formatSimpleItem(item, 'teams')).join('\n'),
     '\n## Users',
     users.map((item) => formatSimpleItem(item, 'users')).join('\n'),
+    ...(isCustomDocsEnabled()
+      ? ['\n## Custom Docs', customDocs.map((item) => formatCustomDoc(item, 'docs/custom')).join('\n')]
+      : []),
   ].join('\n');
 
   return new Response(content, {

package/eventcatalog/src/utils/collections/util.ts

@@ -97,3 +97,15 @@ export const findMatchingNodes = (
     });
   });
 };
+
+export const resourceToCollectionMap = {
+  service: 'services',
+  event: 'events',
+  command: 'commands',
+  query: 'queries',
+  domain: 'domains',
+  flow: 'flows',
+  channel: 'channels',
+  user: 'users',
+  team: 'teams',
+} as const;

package/eventcatalog/src/utils/markdown.ts

@@ -0,0 +1,30 @@
+// Method returns MDX components and there props in markdown files
+// rarely used, but useful for components that need to know how many times
+// the user wants to render a component in a markdown file
+export const getMDXComponentsByName = (document: string, componentName: string) => {
+  // Define regex pattern to match <SchemaViewer ... />
+  const pattern = new RegExp(`<${componentName}\\s+([^>]*)\\/>`, 'g');
+
+  // Find all matches of the pattern
+  const matches = [...document.matchAll(pattern)];
+
+  // Extract the properties of each SchemaViewer
+  const components = matches.map((match) => {
+    const propsString = match[1];
+    const props = {};
+
+    // Use regex to extract key-value pairs from propsString
+    const propsPattern = /(\w+)=["']([^"']+)["']/g;
+    let propMatch;
+    while ((propMatch = propsPattern.exec(propsString)) !== null) {
+      const key = propMatch[1];
+      const value = propMatch[2];
+      // @ts-ignore
+      props[key] = value;
+    }
+
+    return props;
+  });
+
+  return components;
+};

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.33.0",
+  "version": "2.33.2",
   "publishConfig": {
     "access": "public"
   },
@@ -42,7 +42,6 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@scalar/api-reference-react": "^0.4.37",
-    "@stoplight/json-schema-viewer": "^4.16.4",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
@@ -69,7 +68,6 @@
     "lucide-react": "^0.453.0",
     "marked": "^15.0.6",
     "mermaid": "^11.4.1",
-    "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rehype-slug": "^6.0.0",

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.tsx

@@ -1,62 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import 'prismjs';
-// @ts-ignore
-import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
-import './css/stoplight-mosaic-styles.css';
-import './css/stoplight-mosaic-theme-default.css';
-
-import { createPortal } from 'react-dom';
-
-type Props = {
-  id: string;
-  file: string;
-  renderRootTreeLines?: boolean;
-  hideExamples?: boolean;
-  defaultExpandedDepth?: number;
-  maxHeight?: string;
-  schema: any;
-  catalog: any;
-  title?: string;
-};
-
-const SchemaViewer = ({
-  id,
-  maxHeight = '500',
-  renderRootTreeLines = true,
-  hideExamples = false,
-  defaultExpandedDepth = 3,
-  title,
-  schema,
-}: Props) => {
-  const [elem, setElem] = useState(null);
-  useEffect(() => {
-    // @ts-ignore
-    setElem(document.getElementById(`${id}-SchemaViewer-portal`));
-  }, []);
-
-  if (!elem) return null;
-
-  return (
-    <div>
-      {createPortal(
-        <section className="not-prose space-y-2 ">
-          {title && <h2 className="text-3xl font-bold">{title}</h2>}
-          <div className="border border-gray-100 p-2 schemaViewer">
-            <JsonSchemaViewer
-              schema={schema}
-              emptyText="No schema defined"
-              maxHeight={parseInt(maxHeight, 10)}
-              defaultExpandedDepth={defaultExpandedDepth}
-              renderRootTreeLines={renderRootTreeLines}
-              hideExamples={hideExamples}
-            />
-          </div>
-        </section>,
-        elem
-      )}
-    </div>
-  );
-};
-
-export default SchemaViewer;