@eventcatalog/core 2.38.0 → 2.39.0

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.38.0";
+var version = "2.39.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-2WN6WIV6.js";
-import "../chunk-XJ2PHUZU.js";
+} from "../chunk-7TGRVLSE.js";
+import "../chunk-PG6VTEEI.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.38.0";
+var version = "2.39.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-QTN3KJEE.js";
-import "../chunk-2WN6WIV6.js";
-import "../chunk-XJ2PHUZU.js";
+} from "../chunk-YFIADR2I.js";
+import "../chunk-7TGRVLSE.js";
+import "../chunk-PG6VTEEI.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-2WN6WIV6.js → chunk-7TGRVLSE.js}

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

package/dist/{chunk-XJ2PHUZU.js → chunk-PG6VTEEI.js}

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

package/dist/{chunk-QTN3KJEE.js → chunk-YFIADR2I.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-2WN6WIV6.js";
+} from "./chunk-7TGRVLSE.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-XJ2PHUZU.js";
+} from "./chunk-PG6VTEEI.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.38.0";
+var version = "2.39.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,15 +6,15 @@ import {
 } from "./chunk-DCLTVJDP.js";
 import {
   log_build_default
-} from "./chunk-QTN3KJEE.js";
-import "./chunk-2WN6WIV6.js";
+} from "./chunk-YFIADR2I.js";
+import "./chunk-7TGRVLSE.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
 } from "./chunk-SLEMYHTU.js";
 import {
   VERSION
-} from "./chunk-XJ2PHUZU.js";
+} from "./chunk-PG6VTEEI.js";
 import {
   isBackstagePluginEnabled,
   isEventCatalogScaleEnabled,

package/eventcatalog/src/components/Lists/SpecificationsList.astro

@@ -2,7 +2,8 @@
 import type { CollectionTypes } from '@types';
 import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
-
+import { getSpecificationsForService } from '@utils/collections/services';
+import type { Service } from '@utils/collections/services';
 interface Props {
   collectionItem: CollectionEntry<CollectionTypes>;
 }
@@ -11,30 +12,41 @@ const { collectionItem } = Astro.props;
 
 const specVersions = collectionItem.data.specifications || {};
 const numberOfSpecifications = Object.keys(specVersions).length;
+
+const specs = getSpecificationsForService(collectionItem as Service);
+
+const openAPISpecifications = specs.filter((spec) => spec.type === 'openapi');
+const asyncAPISpecifications = specs.filter((spec) => spec.type === 'asyncapi');
 ---
 
 <div class="space-y-2 mb-8">
   <span class="text-sm text-black group-data-[hover]:text-black/80 capitalize">Specifications ({numberOfSpecifications})</span>
   {
-    collectionItem.data.specifications?.openapiPath && (
-      <a
-        href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/spec`)}
-        class="px-1 text-sm font-light flex items-center space-x-1 hover:underline hover:text-primary rounded-md hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white"
-      >
-        <img src={buildUrl('/icons/openapi.svg', true)} class="h-4 w-4" />
-        <span>OpenAPI spec</span>
-      </a>
-    )
+    openAPISpecifications.length > 0 &&
+      openAPISpecifications.map((spec) => (
+        <a
+          href={buildUrl(
+            `/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/spec/${spec.filenameWithoutExtension}`
+          )}
+          class="px-1 text-sm font-light flex items-center space-x-1 hover:underline hover:text-primary rounded-md hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white"
+        >
+          <img src={buildUrl('/icons/openapi.svg', true)} class="h-4 w-4" />
+          <span>{spec.name}</span>
+        </a>
+      ))
   }
   {
-    collectionItem.data.specifications?.asyncapiPath && (
-      <a
-        href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/asyncapi`)}
-        class="px-1 text-sm font-light flex items-center space-x-1 hover:underline rounded-md hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white"
-      >
-        <img src={buildUrl('/icons/asyncapi.svg', true)} class="h-4 w-4" />
-        <span>AsyncAPI spec</span>
-      </a>
-    )
+    asyncAPISpecifications.length > 0 &&
+      asyncAPISpecifications.map((spec) => (
+        <a
+          href={buildUrl(
+            `/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/asyncapi/${spec.filenameWithoutExtension}`
+          )}
+          class="px-1 text-sm font-light flex items-center space-x-1 hover:underline rounded-md hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white"
+        >
+          <img src={buildUrl('/icons/asyncapi.svg', true)} class="h-4 w-4" />
+          <span>{spec.name}</span>
+        </a>
+      ))
   }
 </div>

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

@@ -11,7 +11,9 @@ import {
   getNodesAndEdgesForDomainContextMap,
 } from '@utils/node-graphs/domains-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
-
+import { buildUrl } from '@utils/url-builder';
+import { getVersionFromCollection } from '@utils/collections/versions';
+import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 interface Props {
   id: string;
   collection: string;
@@ -40,6 +42,8 @@ const getNodesAndEdgesFunctions = {
   flows: getNodesAndEdgesForFlows,
 };
 
+let links: { label: string; url: string }[] = [];
+
 if (collection in getNodesAndEdgesFunctions) {
   const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesFunctions[
     collection as keyof typeof getNodesAndEdgesFunctions
@@ -51,6 +55,30 @@ if (collection in getNodesAndEdgesFunctions) {
 
   nodes = fetchedNodes;
   edges = fetchedEdges;
+
+  if (mode === 'full') {
+    // Try and get the list of versions for the rendered item
+    try {
+      const allItems = await pageDataLoader[collection as keyof typeof pageDataLoader]();
+      const versions = getVersionFromCollection(allItems, id, version);
+
+      const item = versions[0];
+      const listOfVersions = item.data.versions || [];
+
+      // Order by version
+      listOfVersions.sort((a, b) => b.localeCompare(a));
+
+      if (listOfVersions.length > 1) {
+        links = listOfVersions.map((version) => ({
+          label: `${item.data.name} v${version}`,
+          url: buildUrl(`/visualiser/${collection}/${id}/${version}`),
+          selected: version === version,
+        }));
+      }
+    } catch (error) {
+      links = [];
+    }
+  }
 }
 
 if (collection === 'domain-context-map') {
@@ -71,6 +99,7 @@ if (collection === 'domain-context-map') {
     linkTo={linkTo}
     client:only="react"
     linksToVisualiser={linksToVisualiser}
+    links={links}
   />
 </div>
 

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

@@ -14,7 +14,7 @@ import {
   useReactFlow,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-
+import { HistoryIcon } from 'lucide-react';
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
 import FlowNode from './Nodes/Flow';
@@ -46,6 +46,7 @@ interface Props {
   linkTo: 'docs' | 'visualiser';
   includeKey?: boolean;
   linksToVisualiser?: boolean;
+  links?: { label: string; url: string }[];
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -60,6 +61,7 @@ const NodeGraphBuilder = ({
   linkTo = 'docs',
   includeKey = true,
   linksToVisualiser = false,
+  links = [],
 }: Props) => {
   const nodeTypes = useMemo(
     () => ({
@@ -317,8 +319,33 @@ const NodeGraphBuilder = ({
               {title}
             </span>
           )}
-          <div className="flex justify-end ">
+          <div className="flex justify-end space-x-2">
             <DownloadButton filename={title} addPadding={false} />
+            {/* // Dropdown for links */}
+            {links.length > 0 && (
+              <div className="relative flex items-center -mt-1">
+                <span className="absolute left-2 pointer-events-none flex items-center h-full">
+                  <HistoryIcon className="h-4 w-4 text-gray-600" />
+                </span>
+                <select
+                  value={links.find((link) => window.location.href.includes(link.url))?.url || links[0].url}
+                  onChange={(e) => navigate(e.target.value)}
+                  className="appearance-none pl-7 pr-6 py-0 text-[14px] bg-white rounded-md border border-gray-200 hover:bg-gray-100/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                  style={{ minWidth: 120, height: '26px' }}
+                >
+                  {links.map((link) => (
+                    <option key={link.url} value={link.url}>
+                      {link.label}
+                    </option>
+                  ))}
+                </select>
+                <span className="absolute right-2 pointer-events-none">
+                  <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </span>
+              </div>
+            )}
           </div>
         </div>
       </Panel>
@@ -409,6 +436,7 @@ interface NodeGraphProps {
   includeKey?: boolean;
   footerLabel?: string;
   linksToVisualiser?: boolean;
+  links?: { label: string; url: string }[];
 }
 
 const NodeGraph = ({
@@ -422,6 +450,7 @@ const NodeGraph = ({
   includeKey = true,
   footerLabel,
   linksToVisualiser = false,
+  links = [],
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -452,6 +481,7 @@ const NodeGraph = ({
             linkTo={linkTo}
             includeKey={includeKey}
             linksToVisualiser={linksToVisualiser}
+            links={links}
           />
 
           {showFooter && (

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

@@ -29,8 +29,32 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
   const nodeLabel = label || service?.data?.sidebar?.badge || 'Service';
   const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
 
-  const asyncApiPath = specifications?.asyncapiPath;
-  const openApiPath = specifications?.openapiPath;
+  let asyncApiFiles = Array.isArray(specifications) ? specifications?.filter((spec) => spec.type === 'asyncapi') : [];
+  let openApiFiles = Array.isArray(specifications) ? specifications?.filter((spec) => spec.type === 'openapi') : [];
+
+  if (!Array.isArray(specifications) && specifications?.asyncapiPath) {
+    asyncApiFiles.push({ path: specifications.asyncapiPath, type: 'asyncapi', name: 'AsyncAPI' });
+  }
+
+  if (!Array.isArray(specifications) && specifications?.openapiPath) {
+    openApiFiles.push({ path: specifications.openapiPath, type: 'openapi', name: 'OpenAPI' });
+  }
+
+  // Add filename on asyncApiFiles and openApiFiles
+  asyncApiFiles = asyncApiFiles.map((file) => {
+    return {
+      ...file,
+      filename: file.path.split('/').pop()?.split('.').shift(),
+    };
+  });
+  openApiFiles = openApiFiles.map((file) => {
+    return {
+      ...file,
+      filename: file.path.split('/').pop()?.split('.').shift(),
+      name: file.name,
+    };
+  });
+
   const repositoryUrl = repository?.url;
 
   return (
@@ -95,31 +119,33 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
             <a href={buildUrl(`/docs/services/${id}/${version}`)}>Read documentation</a>
           </ContextMenu.Item>
           <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
-          {asyncApiPath && (
-            <ContextMenu.Item asChild>
-              <a
-                href={buildUrl(`/docs/services/${id}/${version}/asyncapi`)}
-                className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                View AsyncAPI specification
-              </a>
-            </ContextMenu.Item>
-          )}
-          {openApiPath && (
-            <ContextMenu.Item asChild>
-              <a
-                href={buildUrl(`/docs/services/${id}/${version}/spec`)}
-                className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                View OpenAPI specification
-              </a>
-            </ContextMenu.Item>
-          )}
-          {asyncApiPath && openApiPath && <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />}
+          {asyncApiFiles.length > 0 &&
+            asyncApiFiles.map((file) => (
+              <ContextMenu.Item asChild key={file.path}>
+                <a
+                  href={buildUrl(`/docs/services/${id}/${version}/asyncapi/${file.filename}`)}
+                  className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View AsyncAPI specification {file.name ? `(${file.name})` : ''}
+                </a>
+              </ContextMenu.Item>
+            ))}
+          {openApiFiles.length > 0 &&
+            openApiFiles.map((file) => (
+              <ContextMenu.Item asChild key={file.path}>
+                <a
+                  href={buildUrl(`/docs/services/${id}/${version}/spec/${file.filename}`)}
+                  className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View OpenAPI specification {file.name ? `(${file.name})` : ''}
+                </a>
+              </ContextMenu.Item>
+            ))}
+          {asyncApiFiles.length > 0 && openApiFiles.length > 0 && <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />}
           {repositoryUrl && (
             <>
               <ContextMenu.Item asChild>

package/eventcatalog/src/components/SideNav/ListViewSideBar/components/SpecificationList.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { buildUrl } from '@utils/url-builder';
+import type { ServiceItem } from '../types';
+
+interface SpecificationListProps {
+  specifications: {
+    type: string;
+    path: string;
+    name?: string;
+    filename?: string;
+    filenameWithoutExtension?: string;
+  }[];
+  id: string;
+  version: string;
+}
+
+const SpecificationList: React.FC<SpecificationListProps> = ({ specifications, id, version }) => {
+  const asyncAPISpecifications = specifications.filter((spec) => spec.type === 'asyncapi');
+  const openAPISpecifications = specifications.filter((spec) => spec.type === 'openapi');
+
+  return (
+    <ul className="space-y-0.5 border-l border-gray-200/80 ml-[9px] pl-4">
+      {asyncAPISpecifications &&
+        asyncAPISpecifications.length > 0 &&
+        asyncAPISpecifications.map((spec) => (
+          <a
+            key={`${spec.name}-asyncapi`}
+            href={buildUrl(`/docs/services/${id}/${version}/asyncapi/${spec.filenameWithoutExtension}`)}
+            className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md justify-between ${
+              window.location.href.includes(`docs/services/${id}/${version}/asyncapi`) ? 'bg-purple-100' : 'hover:bg-purple-100'
+            }`}
+          >
+            <span className="truncate flex items-center gap-1">{spec.name}</span>
+            <span className="text-purple-600 ml-2 text-[10px] uppercase font-medium bg-gray-50 px-4 py-0.5 rounded">
+              <img src={buildUrl('/icons/asyncapi.svg', true)} className="w-4 h-4" alt="AsyncAPI" />
+            </span>
+          </a>
+        ))}
+      {openAPISpecifications &&
+        openAPISpecifications.length > 0 &&
+        openAPISpecifications.map((spec) => (
+          <a
+            key={`${spec.name}-openapi`}
+            href={buildUrl(`/docs/services/${id}/${version}/spec/${spec.filenameWithoutExtension}`)}
+            className={`items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md flex justify-between ${
+              window.location.href.includes(`docs/services/${id}/${version}/spec/${spec.filenameWithoutExtension}`)
+                ? 'bg-purple-100'
+                : 'hover:bg-purple-100'
+            }`}
+          >
+            <span className="truncate flex items-center gap-1">{spec.name}</span>
+            <span className="text-green-600 ml-2 text-[10px] uppercase font-medium bg-gray-50 px-4 py-0.5 rounded">
+              <img src={buildUrl('/icons/openapi.svg', true)} className="w-4 h-4" alt="OpenAPI" />
+            </span>
+          </a>
+        ))}
+    </ul>
+  );
+};
+
+export default SpecificationList;

package/eventcatalog/src/components/SideNav/ListViewSideBar/index.tsx

@@ -3,6 +3,7 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
 import CollapsibleGroup from './components/CollapsibleGroup';
 import MessageList from './components/MessageList';
+import SpecificationsList from './components/SpecificationList';
 import type { MessageItem, ServiceItem, ListViewSideBarProps } from './types';
 const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
 const DEBOUNCE_DELAY = 300; // 300ms debounce delay
@@ -51,130 +52,128 @@ const ServiceItem = React.memo(
     collapsedGroups: { [key: string]: boolean };
     toggleGroupCollapse: (group: string) => void;
     isVisualizer: boolean;
-  }) => (
-    <CollapsibleGroup
-      isCollapsed={collapsedGroups[item.href]}
-      onToggle={() => toggleGroupCollapse(item.href)}
-      title={
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            toggleGroupCollapse(item.href);
-          }}
-          className="flex justify-between items-center pl-2 w-full text-xs"
-        >
-          <span className="truncate text-xs font-bold">{item.label}</span>
-          <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded">SERVICE</span>
-        </button>
-      }
-    >
-      <div className="space-y-0.5 border-gray-200/80 border-l pl-3 ml-[9px] mt-1">
-        <a
-          href={`${item.href}`}
-          className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
-            decodedCurrentPath === item.href ? 'bg-purple-100' : 'hover:bg-purple-100'
-          }`}
-        >
-          <span className="truncate">Overview</span>
-        </a>
-        <a
-          href={buildUrlWithParams('/architecture/docs/messages', {
-            serviceName: item.name,
-            serviceId: item.id,
-          })}
-          className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
-            window.location.href.includes(`serviceId=${item.id}`) ? 'bg-purple-100' : 'hover:bg-purple-100'
-          }`}
-        >
-          <span className="truncate flex items-center gap-1">Architecture</span>
-        </a>
-        {item.specifications && item.specifications.asyncapiPath && (
-          <a
-            href={buildUrl(`/docs/services/${item.id}/${item.version}/asyncapi`)}
-            className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md flex justify-between ${
-              window.location.href.includes(`docs/services/${item.id}/${item.version}/asyncapi`)
-                ? 'bg-purple-100'
-                : 'hover:bg-purple-100'
-            }`}
+  }) => {
+    const asyncAPISpecifications = item.specifications?.filter((spec) => spec.type === 'asyncapi');
+    const openAPISpecifications = item.specifications?.filter((spec) => spec.type === 'openapi');
+
+    return (
+      <CollapsibleGroup
+        isCollapsed={collapsedGroups[item.href]}
+        onToggle={() => toggleGroupCollapse(item.href)}
+        title={
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleGroupCollapse(item.href);
+            }}
+            className="flex justify-between items-center pl-2 w-full text-xs"
           >
-            <span className="truncate flex items-center gap-1">AsyncAPI specification</span>
-            <span className="text-purple-600 ml-2 text-[10px] uppercase font-medium bg-gray-50 px-4 py-0.5 rounded">
-              <img src={buildUrl('/icons/asyncapi.svg', true)} className="w-4 h-4" />
-            </span>
-          </a>
-        )}
-        {item.specifications && item.specifications.openapiPath && (
+            <span className="truncate text-xs font-bold">{item.label}</span>
+            <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded">SERVICE</span>
+          </button>
+        }
+      >
+        <div className="space-y-0.5 border-gray-200/80 border-l pl-3 ml-[9px] mt-1">
           <a
-            href={buildUrl(`/docs/services/${item.id}/${item.version}/spec`)}
-            className={`items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md flex justify-between ${
-              window.location.href.includes(`docs/services/${item.id}/${item.version}/spec`)
-                ? 'bg-purple-100'
-                : 'hover:bg-purple-100'
+            href={`${item.href}`}
+            className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+              decodedCurrentPath === item.href ? 'bg-purple-100' : 'hover:bg-purple-100'
             }`}
           >
-            <span className="truncate flex items-center gap-1">OpenAPI specification</span>
-            <span className="text-green-600 ml-2 text-[10px] uppercase font-medium bg-gray-50 px-4 py-0.5 rounded">
-              <img src={buildUrl('/icons/openapi.svg', true)} className="w-4 h-4" />
-            </span>
+            <span className="truncate">Overview</span>
           </a>
-        )}
-        <CollapsibleGroup
-          isCollapsed={collapsedGroups[`${item.href}-receives`]}
-          onToggle={() => toggleGroupCollapse(`${item.href}-receives`)}
-          title={
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleGroupCollapse(`${item.href}-receives`);
-              }}
-              className="truncate underline ml-2 text-xs mb-1 py-1"
+          {!isVisualizer && (
+            <a
+              href={buildUrlWithParams('/architecture/docs/messages', {
+                serviceName: item.name,
+                serviceId: item.id,
+              })}
+              className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                window.location.href.includes(`serviceId=${item.id}`) ? 'bg-purple-100' : 'hover:bg-purple-100'
+              }`}
             >
-              Receives messages ({item.receives.length})
-            </button>
-          }
-        >
-          <MessageList messages={item.receives} decodedCurrentPath={decodedCurrentPath} />
-        </CollapsibleGroup>
+              <span className="truncate flex items-center gap-1">Architecture</span>
+            </a>
+          )}
 
-        <CollapsibleGroup
-          isCollapsed={collapsedGroups[`${item.href}-sends`]}
-          onToggle={() => toggleGroupCollapse(`${item.href}-sends`)}
-          title={
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleGroupCollapse(`${item.href}-sends`);
-              }}
-              className="truncate underline ml-2 text-xs mb-1 py-1"
+          {!isVisualizer && item.specifications && item.specifications.length > 0 && (
+            <CollapsibleGroup
+              isCollapsed={collapsedGroups[`${item.href}-specifications`]}
+              onToggle={() => toggleGroupCollapse(`${item.href}-specifications`)}
+              title={
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleGroupCollapse(`${item.href}-specifications`);
+                  }}
+                  className="truncate underline ml-2 text-xs mb-1 py-1"
+                >
+                  Specifications ({item.specifications?.length})
+                </button>
+              }
             >
-              Sends messages ({item.sends.length})
-            </button>
-          }
-        >
-          <MessageList messages={item.sends} decodedCurrentPath={decodedCurrentPath} />
-        </CollapsibleGroup>
-        {!isVisualizer && item.entities.length > 0 && (
+              <SpecificationsList specifications={item.specifications} id={item.id} version={item.version} />
+            </CollapsibleGroup>
+          )}
+
           <CollapsibleGroup
-            isCollapsed={collapsedGroups[`${item.href}-entities`]}
-            onToggle={() => toggleGroupCollapse(`${item.href}-entities`)}
+            isCollapsed={collapsedGroups[`${item.href}-receives`]}
+            onToggle={() => toggleGroupCollapse(`${item.href}-receives`)}
             title={
               <button
                 onClick={(e) => {
                   e.stopPropagation();
-                  toggleGroupCollapse(`${item.href}-entities`);
+                  toggleGroupCollapse(`${item.href}-receives`);
                 }}
                 className="truncate underline ml-2 text-xs mb-1 py-1"
               >
-                Entities ({item.entities.length})
+                Receives messages ({item.receives.length})
               </button>
             }
           >
-            <MessageList messages={item.entities} decodedCurrentPath={decodedCurrentPath} />
+            <MessageList messages={item.receives} decodedCurrentPath={decodedCurrentPath} />
           </CollapsibleGroup>
-        )}
-      </div>
-    </CollapsibleGroup>
-  )
+
+          <CollapsibleGroup
+            isCollapsed={collapsedGroups[`${item.href}-sends`]}
+            onToggle={() => toggleGroupCollapse(`${item.href}-sends`)}
+            title={
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleGroupCollapse(`${item.href}-sends`);
+                }}
+                className="truncate underline ml-2 text-xs mb-1 py-1"
+              >
+                Sends messages ({item.sends.length})
+              </button>
+            }
+          >
+            <MessageList messages={item.sends} decodedCurrentPath={decodedCurrentPath} />
+          </CollapsibleGroup>
+          {!isVisualizer && item.entities.length > 0 && (
+            <CollapsibleGroup
+              isCollapsed={collapsedGroups[`${item.href}-entities`]}
+              onToggle={() => toggleGroupCollapse(`${item.href}-entities`)}
+              title={
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleGroupCollapse(`${item.href}-entities`);
+                  }}
+                  className="truncate underline ml-2 text-xs mb-1 py-1"
+                >
+                  Entities ({item.entities.length})
+                </button>
+              }
+            >
+              <MessageList messages={item.entities} decodedCurrentPath={decodedCurrentPath} />
+            </CollapsibleGroup>
+          )}
+        </div>
+      </CollapsibleGroup>
+    );
+  }
 );
 
 const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPath }) => {
@@ -354,18 +353,20 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                           >
                             <span className="truncate">Overview</span>
                           </a>
-                          <a
-                            href={buildUrlWithParams('/architecture/docs/services', {
-                              serviceIds: item.services.map((service: any) => service.data.id).join(','),
-                              domainId: item.id,
-                              domainName: item.name,
-                            })}
-                            className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
-                              window.location.href.includes(`domainId=${item.id}`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
-                            }`}
-                          >
-                            <span className="truncate">Architecture</span>
-                          </a>
+                          {!isVisualizer && (
+                            <a
+                              href={buildUrlWithParams('/architecture/docs/services', {
+                                serviceIds: item.services.map((service: any) => service.data.id).join(','),
+                                domainId: item.id,
+                                domainName: item.name,
+                              })}
+                              className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                                window.location.href.includes(`domainId=${item.id}`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
+                              }`}
+                            >
+                              <span className="truncate">Architecture</span>
+                            </a>
+                          )}
                           {!isVisualizer && (
                             <a
                               href={buildUrl(`/docs/domains/${item.id}/language`)}

package/eventcatalog/src/components/SideNav/ListViewSideBar/types.ts

@@ -27,9 +27,12 @@ export interface ServiceItem {
   receives: MessageItem[];
   entities: EntityItem[];
   specifications?: {
-    asyncapiPath: string;
-    openapiPath: string;
-  };
+    type: string;
+    path: string;
+    name?: string;
+    filename?: string;
+    filenameWithoutExtension?: string;
+  }[];
 }
 
 interface DomainItem {

package/eventcatalog/src/components/SideNav/ListViewSideBar/utils.ts

@@ -3,7 +3,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getChannels } from '@utils/channels';
 import { getDomains } from '@utils/collections/domains';
 import { getFlows } from '@utils/collections/flows';
-import { getServices } from '@utils/collections/services';
+import { getServices, getSpecificationsForService } from '@utils/collections/services';
 import { getCommands } from '@utils/commands';
 import { getEvents } from '@utils/events';
 import { getQueries } from '@utils/queries';
@@ -76,7 +76,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
       sends: sendsWithHref,
       receives: receivesWithHref,
       entities: entitiesWithHref,
-      specifications: isCollectionService ? item.data.specifications : null,
+      specifications: isCollectionService ? getSpecificationsForService(item) : null,
       sidebar: item.data?.sidebar,
     };
 

package/eventcatalog/src/content.config.ts

@@ -89,10 +89,19 @@ const baseSchema = z.object({
     })
     .optional(),
   specifications: z
-    .object({
-      openapiPath: z.string().optional(),
-      asyncapiPath: z.string().optional(),
-    })
+    .union([
+      z.object({
+        openapiPath: z.string().optional(),
+        asyncapiPath: z.string().optional(),
+      }),
+      z.array(
+        z.object({
+          type: z.enum(['openapi', 'asyncapi']),
+          path: z.string(),
+          name: z.string().optional(),
+        })
+      ),
+    ])
     .optional(),
   hidden: z.boolean().optional(),
   resourceGroups: z

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/asyncapi/{index.astro → [filename].astro}

@@ -5,7 +5,7 @@ import { renderToString } from 'react-dom/server';
 import { Parser } from '@asyncapi/parser';
 import { AvroSchemaParser } from '@asyncapi/avro-schema-parser';
 import fs from 'fs';
-
+import { getSpecificationsForService } from '@utils/collections/services';
 import type { CollectionTypes, PageTypes } from '@types';
 
 import '@asyncapi/react-component/styles/default.min.css';
@@ -20,27 +20,39 @@ export async function getStaticPaths() {
   const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
   const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
-  const hasAsyncAPISpec = (item: CollectionEntry<CollectionTypes>) => item.data.specifications?.asyncapiPath !== undefined;
-  const filteredItems = allItems.map((items) => items.filter(hasAsyncAPISpec));
+  const hasSpecifications = (item: CollectionEntry<CollectionTypes>) => {
+    const specifications = getSpecificationsForService(item);
+    // Ensure there is at least one 'asyncapi' specification
+    return specifications && specifications.some((spec) => spec.type === 'asyncapi');
+  };
+
+  const filteredItems = allItems.map((items) => items.filter(hasSpecifications));
 
   return filteredItems.flatMap((items, index) =>
-    items.map((item) => ({
-      params: {
-        id: item.data.id,
-        type: itemTypes[index],
-        version: item.data.version,
-      },
-      props: {
-        type: itemTypes[index],
-        ...item,
-      },
-    }))
+    items.flatMap((item) => {
+      const asyncApiSpecifications = getSpecificationsForService(item).filter((spec) => spec.type === 'asyncapi');
+
+      return asyncApiSpecifications.map((spec) => ({
+        params: {
+          type: itemTypes[index],
+          id: item.data.id,
+          version: item.data.version,
+          filename: spec.filenameWithoutExtension || spec.type,
+        },
+        props: {
+          type: itemTypes[index],
+          filenameWithoutExtension: spec.filenameWithoutExtension || spec.type,
+          filename: spec.filename || spec.type,
+          ...item,
+        },
+      }));
+    })
   );
 }
 
 // @ts-ignore
-const { collection, catalog, data, filePath } = Astro.props;
-const fileName = data.specifications?.asyncapiPath || 'asyncapi.yaml';
+const { collection, catalog, data, filePath, filename } = Astro.props;
+const fileName = filename || 'asyncapi.yaml';
 const directory = path.dirname(filePath || '');
 const pathToSpec = path.join(directory, fileName);
 const fileExists = fs.existsSync(pathToSpec);

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/{index.astro → [filename].astro}

@@ -9,6 +9,7 @@ import { DocumentMinusIcon } from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { getSpecificationsForService } from '@utils/collections/services';
 import './_styles.css';
 
 export async function getStaticPaths() {
@@ -16,27 +17,40 @@ export async function getStaticPaths() {
 
   const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
-  const hasOpenAPISpec = (item: CollectionEntry<CollectionTypes>) => item.data.specifications?.openapiPath !== undefined;
-  const filteredItems = allItems.map((items) => items.filter(hasOpenAPISpec));
+  const hasSpecifications = (item: CollectionEntry<CollectionTypes>) => {
+    const specifications = getSpecificationsForService(item);
+    // Ensure there is at least one 'openapi' specification
+    return specifications && specifications.some((spec) => spec.type === 'openapi');
+  };
+
+  const filteredItems = allItems.map((items) => items.filter(hasSpecifications));
 
   return filteredItems.flatMap((items, index) =>
-    items.map((item) => ({
-      params: {
-        type: itemTypes[index],
-        id: item.data.id,
-        version: item.data.version,
-      },
-      props: {
-        type: itemTypes[index],
-        ...item,
-      },
-    }))
+    items.flatMap((item) => {
+      // Filter for openapi specifications only
+      const openApiSpecifications = getSpecificationsForService(item).filter((spec) => spec.type === 'openapi');
+
+      return openApiSpecifications.map((spec) => ({
+        params: {
+          type: itemTypes[index],
+          id: item.data.id,
+          version: item.data.version,
+          filename: spec.filenameWithoutExtension || spec.type,
+        },
+        props: {
+          type: itemTypes[index],
+          filenameWithoutExtension: spec.filenameWithoutExtension || spec.type,
+          filename: spec.filename || spec.type,
+          ...item,
+        },
+      }));
+    })
   );
 }
 
 // @ts-ignore
-const { collection, data, catalog, filePath } = Astro.props;
-const fileName = data.specifications?.openapiPath || 'openapi.yml';
+const { collection, data, catalog, filePath, filename } = Astro.props;
+const fileName = filename || 'openapi.yml';
 
 const directory = path.dirname(filePath || '');
 const pathToSpec = path.join(directory, fileName);

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

@@ -3,7 +3,7 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 import semver from 'semver';
-
+import type { CollectionTypes } from '@types';
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 export type Service = CollectionEntry<'services'>;
@@ -129,3 +129,31 @@ export const getConsumersOfMessage = (services: Service[], message: CollectionEn
     });
   });
 };
+
+export const getSpecificationsForService = (service: CollectionEntry<CollectionTypes>) => {
+  const specifications = Array.isArray(service.data.specifications) ? service.data.specifications : [];
+
+  if (service.data.specifications && !Array.isArray(service.data.specifications)) {
+    if (service.data.specifications.asyncapiPath) {
+      specifications.push({
+        type: 'asyncapi',
+        path: service.data.specifications.asyncapiPath,
+        name: 'AsyncAPI',
+      });
+    }
+    if (service.data.specifications.openapiPath) {
+      specifications.push({
+        type: 'openapi',
+        path: service.data.specifications.openapiPath,
+        name: 'OpenAPI',
+      });
+    }
+  }
+
+  return specifications.map((spec) => ({
+    ...spec,
+    name: spec.name || (spec.type === 'asyncapi' ? 'AsyncAPI' : 'OpenAPI'),
+    filename: path.basename(spec.path),
+    filenameWithoutExtension: path.basename(spec.path, path.extname(spec.path)),
+  }));
+};

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.38.0",
+  "version": "2.39.0",
   "publishConfig": {
     "access": "public"
   },