@eventcatalog/core 2.33.6 → 2.33.8

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.6";
+var version = "2.33.8";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-UPH7SKWZ.js";
-import "../chunk-Q22YAXYM.js";
+} from "../chunk-HPV7UK2I.js";
+import "../chunk-SSJWAEJA.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.6";
+var version = "2.33.8";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-CHTRHQHZ.js";
-import "../chunk-UPH7SKWZ.js";
-import "../chunk-Q22YAXYM.js";
+} from "../chunk-DCU5UE7Y.js";
+import "../chunk-HPV7UK2I.js";
+import "../chunk-SSJWAEJA.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-CHTRHQHZ.js → chunk-DCU5UE7Y.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-UPH7SKWZ.js";
+} from "./chunk-HPV7UK2I.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-UPH7SKWZ.js → chunk-HPV7UK2I.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-Q22YAXYM.js";
+} from "./chunk-SSJWAEJA.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-Q22YAXYM.js → chunk-SSJWAEJA.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.33.6";
+var version = "2.33.8";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.33.6";
+var version = "2.33.8";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-Q22YAXYM.js";
+} from "./chunk-SSJWAEJA.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.6";
+var version = "2.33.8";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.config.d.cts

@@ -81,6 +81,9 @@ interface Config {
     customDocs?: {
         sidebar?: (ManualSideBarConfig | AutoGeneratedSideBarConfig)[];
     };
+    api?: {
+        fullCatalogAPIEnabled?: boolean;
+    };
 }
 
 export type { Config, SideBarConfig };

package/dist/eventcatalog.config.d.ts

@@ -81,6 +81,9 @@ interface Config {
     customDocs?: {
         sidebar?: (ManualSideBarConfig | AutoGeneratedSideBarConfig)[];
     };
+    api?: {
+        fullCatalogAPIEnabled?: boolean;
+    };
 }
 
 export type { Config, SideBarConfig };

package/dist/eventcatalog.js

@@ -6,15 +6,15 @@ import {
 } from "./chunk-UKJ7F5WR.js";
 import {
   log_build_default
-} from "./chunk-CHTRHQHZ.js";
-import "./chunk-UPH7SKWZ.js";
+} from "./chunk-DCU5UE7Y.js";
+import "./chunk-HPV7UK2I.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
 } from "./chunk-7SI5EVOX.js";
 import {
   VERSION
-} from "./chunk-Q22YAXYM.js";
+} from "./chunk-SSJWAEJA.js";
 import {
   isBackstagePluginEnabled,
   isEventCatalogScaleEnabled,

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

@@ -232,21 +232,24 @@ const NodeGraphBuilder = ({
   );
 
   const getNodesByCollectionWithColors = useCallback((nodes: Node[]) => {
-    const colors = {
-      events: 'orange',
-      services: 'pink',
-      commands: 'blue',
-      queries: 'green',
-      channels: 'gray',
+    const colorClasses = {
+      events: 'bg-orange-600',
+      services: 'bg-pink-600',
+      commands: 'bg-blue-600',
+      queries: 'bg-green-600',
+      channels: 'bg-gray-600',
+      externalSystem: 'bg-pink-600',
+      actor: 'bg-yellow-500',
+      step: 'bg-gray-700',
     };
 
-    return nodes.reduce((acc: { [key: string]: { count: number; color: string } }, node) => {
+    return nodes.reduce((acc: { [key: string]: { count: number; colorClass: string } }, node) => {
       const collection = node.type;
       if (collection) {
         if (acc[collection]) {
           acc[collection].count += 1;
         } else {
-          acc[collection] = { count: 1, color: colors[collection as keyof typeof colors] || 'black' };
+          acc[collection] = { count: 1, colorClass: colorClasses[collection as keyof typeof colorClasses] || 'bg-black' };
         }
       }
       return acc;
@@ -348,13 +351,13 @@ const NodeGraphBuilder = ({
         <Panel position="bottom-right">
           <div className=" bg-white font-light px-4 text-[12px] shadow-md py-1 rounded-md">
             <ul className="m-0 p-0 ">
-              {Object.entries(legend).map(([key, { count, color }]) => (
+              {Object.entries(legend).map(([key, { count, colorClass }]) => (
                 <li
                   key={key}
                   className="flex space-x-2 items-center text-[10px] cursor-pointer hover:text-purple-600 hover:underline"
                   onClick={() => handleLegendClick(key)}
                 >
-                  <span className={`w-2 h-2 block`} style={{ backgroundColor: color }} />
+                  <span className={`w-2 h-2 block ${colorClass}`} />
                   <span className="block capitalize">
                     {key} ({count})
                   </span>

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Channel.tsx

@@ -1,11 +1,10 @@
-import { BoltIcon } from '@heroicons/react/16/solid';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
-import type { CollectionMessageTypes, CollectionTypes } from '@types';
+import type { CollectionMessageTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import { buildUrl } from '@utils/url-builder';
-
+import { getIcon } from '@utils/badges';
 interface Data {
   title: string;
   label: string;
@@ -43,11 +42,16 @@ const getIconForProtocol = (icon: keyof typeof protocolIcons) => {
 export default function ChannelNode({ data, sourcePosition, targetPosition }: any) {
   const { mode, channel, source, target } = data as Data;
 
-  const { id, name, version, summary, owners = [], address, protocols = [] } = channel.data;
+  const { id, name, version, summary, owners = [], address, protocols = [], styles } = channel.data;
   const protocol = protocols[0];
+  const { node: { color = 'gray', label } = {}, icon = 'ArrowsRightLeftIcon' } = styles || {};
 
   const Icon = getIconForProtocol(protocol);
 
+  const SideBarIcon = getIcon(icon);
+  const nodeLabel = label || channel?.data?.sidebar?.badge || 'Channel';
+  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
+
   const getAddress = () => {
     const sourceChannel = source.data.channels?.find((channel) => channel.id === id);
     const targetChannel = target.data.channels?.find((channel) => channel.id === id);
@@ -74,19 +78,21 @@ export default function ChannelNode({ data, sourcePosition, targetPosition }: an
         <div
           className={classNames(
             mode === 'simple' ? 'min-h-[3em]' : 'min-h-[6.5em]',
-            'w-full rounded-md border flex justify-start  bg-white text-black border-gray-400 transform  '
+            `w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400 transform  `
           )}
         >
           <div
             className={classNames(
-              'bg-gradient-to-b from-gray-500 to-gray-700 relative flex items-center w-5 justify-center rounded-l-sm text-gray-100-500',
-              `border-r-[1px] border-gray-500`
+              `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex items-center w-5 justify-center rounded-l-sm text-${color}-100`,
+              `border-r-[1px] border-${color}-500`
             )}
           >
-            <ArrowsRightLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+            {SideBarIcon && <SideBarIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />}
             {mode === 'full' && (
-              <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-                Channel
+              <span
+                className={`rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[${fontSize}] text-white font-bold uppercase tracking-[3px] `}
+              >
+                {nodeLabel}
               </span>
             )}
           </div>

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Command.tsx

@@ -2,6 +2,7 @@ import { ChatBubbleLeftIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
 import MessageContextMenu from './MessageContextMenu';
+import { getIcon } from '@utils/badges';
 
 interface Data {
   title: string;
@@ -21,21 +22,28 @@ function classNames(...classes: any) {
 export default function CommandNode({ data, sourcePosition, targetPosition }: any) {
   const { mode, message } = data as Data;
 
-  const { id, name, version, summary, owners = [], producers = [], consumers = [], schemaPath } = message.data;
+  const { id, name, version, summary, owners = [], producers = [], consumers = [], schemaPath, styles } = message.data;
+  const { node: { color = 'blue', label } = {}, icon = 'ChatBubbleLeftIcon' } = styles || {};
+
+  const Icon = getIcon(icon);
+  const nodeLabel = label || message?.data?.sidebar?.badge || 'Command';
+  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
 
   return (
     <MessageContextMenu message={message} messageType="commands">
-      <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400')}>
+      <div className={classNames(`w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400`)}>
         <div
           className={classNames(
-            'bg-gradient-to-b from-blue-500 to-blue-700 relative flex items-center w-5 justify-center rounded-l-sm text-blue-100-500',
-            `border-r-[1px] border-blue-500`
+            `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex items-center w-5 justify-center rounded-l-sm text-${color}-100`,
+            `border-r-[1px] border-${color}-500`
           )}
         >
-          <ChatBubbleLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+          {Icon && <Icon className="w-4 h-4 opacity-90 text-white absolute top-1 " />}
           {mode === 'full' && (
-            <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-              Command
+            <span
+              className={`rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[${fontSize}] text-white font-bold uppercase tracking-[3px] `}
+            >
+              {nodeLabel}
             </span>
           )}
         </div>

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -2,7 +2,7 @@ import { BoltIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
 import MessageContextMenu from './MessageContextMenu';
-
+import { getIcon } from '@utils/badges';
 interface Data {
   title: string;
   label: string;
@@ -20,21 +20,28 @@ function classNames(...classes: any) {
 
 export default function EventNode({ data, sourcePosition, targetPosition }: any) {
   const { mode, message } = data as Data;
-  const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
+  const { name, version, summary, owners = [], producers = [], consumers = [], styles } = message.data;
+  const { node: { color = 'orange', label } = {}, icon = 'BoltIcon' } = styles || {};
+
+  const Icon = getIcon(icon);
+  const nodeLabel = label || message?.data?.sidebar?.badge || 'Event';
+  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
 
   return (
     <MessageContextMenu message={message} messageType="events">
-      <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-orange-400')}>
+      <div className={classNames(`w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400`)}>
         <div
           className={classNames(
-            'bg-gradient-to-b from-orange-500 to-orange-700 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500',
-            `border-r-[1px] border-orange-500`
+            `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex items-center w-5 justify-center rounded-l-sm text-${color}-100`,
+            `border-r-[1px] border-${color}-500`
           )}
         >
-          <BoltIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+          {Icon && <Icon className="w-4 h-4 opacity-90 text-white absolute top-1 " />}
           {mode === 'full' && (
-            <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-              Event
+            <span
+              className={`rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[${fontSize}] text-white font-bold uppercase tracking-[3px] `}
+            >
+              {nodeLabel}
             </span>
           )}
         </div>

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx

@@ -2,6 +2,7 @@ import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
 import MessageContextMenu from './MessageContextMenu';
+import { getIcon } from '@utils/badges';
 interface Data {
   title: string;
   label: string;
@@ -9,8 +10,6 @@ interface Data {
   color: string;
   mode: 'simple' | 'full';
   message: CollectionEntry<'queries'>;
-  showTarget?: boolean;
-  showSource?: boolean;
 }
 
 function classNames(...classes: any) {
@@ -18,26 +17,32 @@ function classNames(...classes: any) {
 }
 
 export default function QueryNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message, showTarget = true, showSource = true } = data as Data;
+  const { mode, message } = data as Data;
 
-  const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
+  const { name, version, summary, owners = [], producers = [], consumers = [], styles } = message.data;
+  const { node: { color = 'green', label } = {}, icon = 'MagnifyingGlassIcon' } = styles || {};
 
+  const Icon = getIcon(icon);
+  const nodeLabel = label || message?.data?.sidebar?.badge || 'Query';
+  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
   const renderTarget = true;
   const renderSource = true;
 
   return (
     <MessageContextMenu message={message} messageType="queries">
-      <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-green-400')}>
+      <div className={classNames(`w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400`)}>
         <div
           className={classNames(
-            'bg-gradient-to-b from-green-500 to-green-700 relative flex items-center w-5 justify-center rounded-l-sm text-green-100-500',
-            `border-r-[1px] border-green-500`
+            `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex items-center w-5 justify-center rounded-l-sm text-${color}-100`,
+            `border-r-[1px] border-${color}-500`
           )}
         >
-          <MagnifyingGlassIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+          {Icon && <Icon className="w-4 h-4 opacity-90 text-white absolute top-1 " />}
           {mode === 'full' && (
-            <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-              Query
+            <span
+              className={`rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[${fontSize}] text-white font-bold uppercase tracking-[3px] `}
+            >
+              {nodeLabel}
             </span>
           )}
         </div>

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -3,6 +3,7 @@ import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import { buildUrl } from '@utils/url-builder';
+import { getIcon } from '@utils/badges';
 
 interface Data {
   label: string;
@@ -19,9 +20,15 @@ function classNames(...classes: any) {
 }
 
 export default function ServiceNode({ data, sourcePosition, targetPosition }: any) {
-  const { label, bgColor = 'bg-blue-500', mode, service } = data as Data;
+  const { mode, service } = data as Data;
+
+  const { id, version, owners = [], sends = [], receives = [], name, specifications, repository, styles } = service.data;
+  const { node: { color = 'pink', label } = {}, icon = 'ServerIcon' } = styles || {};
+
+  const Icon = getIcon(icon);
+  const nodeLabel = label || service?.data?.sidebar?.badge || 'Service';
+  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
 
-  const { id, version, owners = [], sends = [], receives = [], name, specifications, repository } = service.data;
   const asyncApiPath = specifications?.asyncapiPath;
   const openApiPath = specifications?.openapiPath;
   const repositoryUrl = repository?.url;
@@ -29,17 +36,19 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger>
-        <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-pink-500')}>
+        <div className={classNames(`w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400`)}>
           <div
             className={classNames(
-              'bg-gradient-to-b from-pink-500 to-pink-700 relative flex items-center w-5 justify-center rounded-l-sm text-red-100-500',
-              `border-r-[1px] border-pink-500`
+              `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex items-center w-5 justify-center rounded-l-sm text-${color}-100`,
+              `border-r-[1px] border-${color}-500`
             )}
           >
-            <ServerIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+            {Icon && <Icon className="w-4 h-4 opacity-90 text-white absolute top-1 " />}
             {mode === 'full' && (
-              <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-                Service
+              <span
+                className={`rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[${fontSize}] text-white font-bold uppercase tracking-[3px] `}
+              >
+                {nodeLabel}
               </span>
             )}
           </div>

package/eventcatalog/src/content.config.ts

@@ -104,6 +104,17 @@ const baseSchema = z.object({
       })
     )
     .optional(),
+  styles: z
+    .object({
+      icon: z.string().optional(),
+      node: z
+        .object({
+          color: z.string().optional(),
+          label: z.string().optional(),
+        })
+        .optional(),
+    })
+    .optional(),
   // Used by eventcatalog
   versions: z.array(z.string()).optional(),
   latestVersion: z.string().optional(),

package/eventcatalog/src/pages/api/catalog.ts

@@ -0,0 +1,26 @@
+import type { APIRoute } from 'astro';
+import utils from '@eventcatalog/sdk';
+import config from '@config';
+
+/**
+ * Route the will dump the whole catalog as JSON (without markdown)
+ * Experimental API
+ * @param param0
+ * @returns
+ */
+export const GET: APIRoute = async ({ params, request }) => {
+  if (!config.api?.fullCatalogAPIEnabled) {
+    return new Response(JSON.stringify({ error: 'Full catalog API is not enabled' }), {
+      status: 404,
+    });
+  }
+
+  const { dumpCatalog } = utils(process.env.PROJECT_DIR || '');
+  const catalog = await dumpCatalog({ includeMarkdown: false });
+
+  return new Response(JSON.stringify(catalog), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.33.6",
+  "version": "2.33.8",
   "publishConfig": {
     "access": "public"
   },
@@ -30,6 +30,7 @@
     "@asyncapi/parser": "^3.4.0",
     "@asyncapi/react-component": "^2.4.3",
     "@eventcatalog/generator-ai": "^1.0.0",
+    "@eventcatalog/sdk": "^2.2.3",
     "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",