@eventcatalog/core 2.24.3 → 2.25.0

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

@@ -1,7 +1,7 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
-
+import MessageContextMenu from './MessageContextMenu';
 interface Data {
   title: string;
   label: string;
@@ -22,53 +22,55 @@ export default function QueryNode({ data, sourcePosition, targetPosition }: any)
 
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
-  const renderTarget = true; //showTarget || (targetPosition && producers.length > 0);
-  const renderSource = true; // showSource || (sourcePosition && consumers.length > 0);
+  const renderTarget = true;
+  const renderSource = true;
 
   return (
-    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-green-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`
-        )}
-      >
-        <MagnifyingGlassIcon 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>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <span className="text-xs font-bold block pb-0.5">{name}</span>
-          <div className="flex justify-between">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Query</span>}
-          </div>
+    <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(
+            '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`
+          )}
+        >
+          <MagnifyingGlassIcon 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>
+          )}
         </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-3 py-1">
-              <span className="text-[8px] font-light">{summary}</span>
-            </div>
-            <div className="grid grid-cols-2 gap-x-4 py-1">
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Producers: {producers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Consumers: {consumers.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Owners: {owners.length}
-              </span>
+        <div className="p-1 min-w-60 max-w-[min-content]">
+          {renderTarget && <Handle type="target" position={targetPosition} />}
+          {renderSource && <Handle type="source" position={sourcePosition} />}
+          <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+            <span className="text-xs font-bold block pb-0.5">{name}</span>
+            <div className="flex justify-between">
+              <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+              {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Query</span>}
             </div>
           </div>
-        )}
+          {mode === 'full' && (
+            <div className="divide-y divide-gray-200 ">
+              <div className="leading-3 py-1">
+                <span className="text-[8px] font-light">{summary}</span>
+              </div>
+              <div className="grid grid-cols-2 gap-x-4 py-1">
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Producers: {producers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Consumers: {consumers.length}
+                </span>
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  Owners: {owners.length}
+                </span>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </MessageContextMenu>
   );
 }

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

@@ -1,6 +1,8 @@
 import { ServerIcon } from '@heroicons/react/16/solid';
 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';
 
 interface Data {
   label: string;
@@ -19,53 +21,121 @@ function classNames(...classes: any) {
 export default function ServiceNode({ data, sourcePosition, targetPosition }: any) {
   const { label, bgColor = 'bg-blue-500', mode, service } = data as Data;
 
-  const { version, owners = [], sends = [], receives = [], name } = service.data;
+  const { id, version, owners = [], sends = [], receives = [], name, specifications, repository } = service.data;
+  const asyncApiPath = specifications?.asyncapiPath;
+  const openApiPath = specifications?.openapiPath;
+  const repositoryUrl = repository?.url;
 
   return (
-    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-pink-500')}>
-      <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`
-        )}
-      >
-        <ServerIcon 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>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {targetPosition && <Handle type="target" position={targetPosition} />}
-        {sourcePosition && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
-          <div className="flex justify-between">
-            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Service</span>}
+    <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(
+              '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`
+            )}
+          >
+            <ServerIcon 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>
+            )}
           </div>
-        </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-3 py-1">
-              <span className="text-[8px] font-light">{service.data.summary}</span>
+          <div className="p-1 min-w-60 max-w-[min-content]">
+            {targetPosition && <Handle type="target" position={targetPosition} />}
+            {sourcePosition && <Handle type="source" position={sourcePosition} />}
+            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+              <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
+              <div className="flex justify-between">
+                <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+                {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Service</span>}
+              </div>
             </div>
+            {mode === 'full' && (
+              <div className="divide-y divide-gray-200 ">
+                <div className="leading-3 py-1">
+                  <span className="text-[8px] font-light">{service.data.summary}</span>
+                </div>
 
-            <div className="grid grid-cols-2 gap-x-4 py-1">
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Receives messages: {receives.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Publishes messages: {sends.length}
-              </span>
-              <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                Owners: {owners.length}
-              </span>
-            </div>
+                <div className="grid grid-cols-2 gap-x-4 py-1">
+                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                    Receives messages: {receives.length}
+                  </span>
+                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                    Publishes messages: {sends.length}
+                  </span>
+                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                    Owners: {owners.length}
+                  </span>
+                </div>
+              </div>
+            )}
           </div>
-        )}
-      </div>
-    </div>
+        </div>
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+          <ContextMenu.Item
+            asChild
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+          >
+            <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" />}
+          {repositoryUrl && (
+            <>
+              <ContextMenu.Item asChild>
+                <a
+                  href={repositoryUrl}
+                  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 code repository
+                </a>
+              </ContextMenu.Item>
+              <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
+            </>
+          )}
+          <ContextMenu.Item asChild>
+            <a
+              href={buildUrl(`/docs/services/${id}/${version}/changelog`)}
+              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"
+            >
+              Read changelog
+            </a>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
   );
 }

package/eventcatalog/src/components/SideNav/TreeView/getTreeView.ts

@@ -138,7 +138,7 @@ function groupChildrenByType(parentNode: TreeNode) {
 const treeViewCache = new Map<string, TreeNode>();
 
 export function getTreeView({ projectDir, currentPath }: { projectDir: string; currentPath: string }): TreeNode {
-  const basePathname = currentPath.split('/')[1] as 'docs' | 'visualiser';
+  const basePathname = currentPath.split('/').find((p) => p === 'docs' || p === 'visualiser') || 'docs';
 
   const cacheKey = `${projectDir}:${basePathname}`;
   if (treeViewCache.has(cacheKey)) return treeViewCache.get(cacheKey)!;

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

@@ -4,7 +4,6 @@ import * as path from 'path';
 import fs from 'node:fs';
 
 import type { CollectionTypes, PageTypes } from '@types';
-import PlainPage from '@layouts/PlainPage.astro';
 import { DocumentMinusIcon } from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';

package/eventcatalog/src/pages/docs/_default-docs.mdx

@@ -0,0 +1,24 @@
+# **EventCatalog**
+
+Welcome to [EventCatalog](https://www.eventcatalog.dev/).
+
+This open-source project is designed to help you and your teams bring discoverability and clarity to your event-driven architectures (EDA).
+
+To get started you can read the following guides:
+
+- [Getting started with EventCatalog](https://eventcatalog.dev/docs/development/getting-started/introduction)
+- [Creating domains](https://eventcatalog.dev/docs/development/guides/domains/adding-domains)
+- [Creating services](https://eventcatalog.dev/docs/development/guides/services/adding-services)
+- [Creating commands](https://eventcatalog.dev/docs/development/guides/messages/commands/introduction)
+- [Creating events](https://eventcatalog.dev/docs/development/guides/messages/events/introduction)
+- [Assigning owners to resources](https://eventcatalog.dev/docs/owners)
+- [Using components in your pages (Schemas, OpenAPI, etc)](https://eventcatalog.dev/docs/development/components/using-components)
+- [Deploying and hosting your EventCatalog](https://eventcatalog.dev/docs/development/deployment)
+
+### **Join the community**
+
+Got questions about EventCatalog? Feature requests or need support? [Join our community on Discord.](https://discord.gg/3rjaZMmrAm)
+
+### **Enterprise support**
+
+Using EventCatalog and needs enterprise support? Work with us, find out what we offer on our [enterprise page](https://eventcatalog.dev/enterprise).

package/eventcatalog/src/pages/docs/index.astro

@@ -1,6 +1,5 @@
 ---
 import Footer from '@layouts/Footer.astro';
-import DefaultDocsLandingPage from '@layouts/CustomDocsPageLayout.astro';
 import components from '@components/MDX/page-components';
 import { getIndexPage } from '@utils/pages';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
@@ -11,24 +10,20 @@ let CustomContent = null;
 if (page) {
   const { Content } = await page.render();
   CustomContent = Content;
+} else {
+  CustomContent = await import('./_default-docs.mdx').then((mod) => mod.default);
 }
 ---
 
-{
-  CustomContent && (
-    <VerticalSideBarLayout title="EventCatalog">
-      <main class="flex sm:px-8 docs-layout h-full">
-        <div class="flex docs-layout w-full">
-          <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
-            <div class="prose prose-md w-full !max-w-none">
-              <CustomContent components={components} />
-            </div>
-            <Footer />
-          </div>
+<VerticalSideBarLayout title="EventCatalog">
+  <main class="flex sm:px-8 docs-layout h-full">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+        <div class="prose prose-md w-full !max-w-none">
+          <CustomContent components={components} />
         </div>
-      </main>
-    </VerticalSideBarLayout>
-  )
-}
-
-{!CustomContent && <DefaultDocsLandingPage title="EventCatalog" />}
+        <Footer />
+      </div>
+    </div>
+  </main>
+</VerticalSideBarLayout>

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.24.3",
+  "version": "2.25.0",
   "publishConfig": {
     "access": "public"
   },
@@ -37,6 +37,7 @@
     "@langchain/community": "^0.3.32",
     "@mlc-ai/web-llm": "^0.2.78",
     "@parcel/watcher": "^2.4.1",
+    "@radix-ui/react-context-menu": "^2.2.6",
     "@radix-ui/react-dialog": "^1.1.6",
     "@stoplight/json-schema-viewer": "^4.16.4",
     "@tailwindcss/typography": "^0.5.13",

package/default-files-for-collections/pages.md

@@ -1,7 +0,0 @@
----
-id: index
-slug: index
-hidden: true
----
-
-<!-- Do not delete this file, required for EC, you an ignore this file -->

package/eventcatalog/src/components/DocsNavigation.astro

@@ -1,145 +0,0 @@
----
-import { getCommands } from '@utils/commands';
-import { getDomains } from '@utils/collections/domains';
-import { getEvents } from '@utils/events';
-import { getServices } from '@utils/collections/services';
-import { getFlows } from '@utils/collections/flows';
-import { getTeams } from '@utils/teams';
-import { getUsers } from '@utils/users';
-import config, { type CatalogConfig } from '@utils/eventcatalog-config/catalog';
-import { buildUrl } from '@utils/url-builder';
-import { getQueries } from '@utils/queries';
-
-const events = await getEvents({ getAllVersions: false });
-const commands = await getCommands({ getAllVersions: false });
-const queries = await getQueries({ getAllVersions: false });
-const services = await getServices({ getAllVersions: false });
-const domains = await getDomains({ getAllVersions: false });
-const flows = await getFlows({ getAllVersions: false });
-const teams = await getTeams();
-const users = await getUsers();
-
-const messages = [...events, ...commands, ...queries];
-
-// @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-const allData = [...domains, ...services, ...messages, ...flows, ...teams, ...users];
-
-const eventCatalogConfig = config as CatalogConfig;
-const {
-  services: servicesConfig,
-  domains: domainsConfig,
-  messages: messagesConfig,
-  flows: flowsConfig,
-  teams: teamsConfig,
-  users: usersConfig,
-  showPageHeadings = true,
-} = eventCatalogConfig?.docs?.sidebar || {};
-
-const getConfigValue = (obj: any, key: string, defaultValue: any) => {
-  return obj?.[key] ?? defaultValue;
-};
-
-const visibleCollections: { [key: string]: boolean } = {
-  events: getConfigValue(messagesConfig, 'visible', true),
-  commands: getConfigValue(messagesConfig, 'visible', true),
-  domains: getConfigValue(domainsConfig, 'visible', true),
-  flows: getConfigValue(flowsConfig, 'visible', true),
-  services: getConfigValue(servicesConfig, 'visible', true),
-  teams: getConfigValue(teamsConfig, 'visible', true),
-  users: getConfigValue(usersConfig, 'visible', true),
-};
-
-const fetchHeadings = allData.map(async (item) => {
-  const renderHeadings = showPageHeadings;
-  const headings = renderHeadings ? await item.render() : { headings: [] };
-  return {
-    ...item,
-    headings: headings.headings,
-  };
-});
-
-const withHeadings = await Promise.all(fetchHeadings);
-
-const sideNav = withHeadings.reduce((acc, item) => {
-  const title = item.collection === 'events' || item.collection === 'commands' ? 'Messages' : item.collection;
-
-  const group = acc[title] || [];
-
-  const navigationItem = {
-    label: item.data.name,
-    version: item.collection === 'teams' || item.collection === 'users' ? null : item.data.version,
-    items: item.collection === 'users' ? [] : item.headings,
-    visible: visibleCollections[item.collection],
-    // @ts-ignore
-    href: item.data.version
-      ? // @ts-ignore
-        buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)
-      : buildUrl(`/docs/${item.collection}/${item.data.id}`),
-  };
-
-  group.push(navigationItem);
-
-  return {
-    ...acc,
-    [title]: group,
-  };
-}, {} as any);
-
-const currentPath = Astro.url.pathname;
----
-
-<div class="font-light w-full xl:pr-10 pb-20">
-  {
-    Object.keys(sideNav).map((key) => {
-      const collection = sideNav[key];
-      if (collection[0] && collection[0].visible === false) return null;
-      return (
-        <ul class=" w-full space-y-2 pb-8">
-          <li class="font-semibold capitalize ">{key}</li>
-          {collection.map((item: any) => {
-            return (
-              <li class="px-2 w-full text-md xl:text-lg border-l border-gray-200 space-y-2 scroll-m-20" id={item.href}>
-                <a
-                  class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-primary/5 text-primary ' : 'font-thin'}`}
-                  href={`${item.href}`}
-                >
-                  <span class="block truncate !whitespace-normal">{item.label}</span>
-                  {item.version && (
-                    <span class="block text-sm bg-primary/10 p-0.5 px-1 text-gray-600  rounded-md font-light">
-                      v{item.version}
-                    </span>
-                  )}
-                </a>
-                <ul class="hidden xl:block px-4  text-gray-500 text-md space-y-2  ">
-                  {item.items.map((heading: any) => {
-                    return (
-                      <li class="text-xs">
-                        <a href={`${item.href}#${heading.slug}`}>{heading.text}</a>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </li>
-            );
-          })}
-        </ul>
-      );
-    })
-  }
-</div>
-
-<script>
-  // Scroll to the current page element
-  // document.addEventListener('DOMContentLoaded', () => {
-  //   const currentPath = document.location.pathname;
-  //   const currentElement = document.getElementById(currentPath);
-  //   if (currentElement) {
-  //     // scroll to the current element with padding
-  //     currentElement.scrollIntoView({
-  //       behavior: 'auto',
-  //       block: 'start',
-  //       inline: 'start',
-  //     });
-  //   }
-  // });
-</script>