@eventcatalog/core 2.21.5 → 2.23.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.21.5";
+var version = "2.23.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-FZHOYLWJ.js";
-import "../chunk-XLSTKMWD.js";
+} from "../chunk-CLNIEHVG.js";
+import "../chunk-WNRZ5O5C.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.21.5";
+var version = "2.23.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-UYXIOPEC.js";
-import "../chunk-FZHOYLWJ.js";
-import "../chunk-XLSTKMWD.js";
+} from "../chunk-F55C3RGO.js";
+import "../chunk-CLNIEHVG.js";
+import "../chunk-WNRZ5O5C.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-FZHOYLWJ.js → chunk-CLNIEHVG.js}

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

package/dist/{chunk-UYXIOPEC.js → chunk-F55C3RGO.js}

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

package/dist/{chunk-XLSTKMWD.js → chunk-WNRZ5O5C.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.21.5";
+var version = "2.23.0";
 
 // 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.21.5";
+var version = "2.23.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

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

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.config.d.cts

@@ -19,6 +19,9 @@ interface Config {
         enabled: boolean;
         limit: number;
     };
+    llmsTxt?: {
+        enabled: boolean;
+    };
     logo?: {
         alt: string;
         src: string;
@@ -30,6 +33,10 @@ interface Config {
     mdxOptimize?: boolean;
     docs: {
         sidebar: {
+            /**
+             * @default 'FLAT_VIEW'
+             */
+            type?: 'FLAT_VIEW' | 'TREE_VIEW';
             showPageHeadings: true;
             services?: SideBarConfig;
             messages?: SideBarConfig;

package/dist/eventcatalog.config.d.ts

@@ -19,6 +19,9 @@ interface Config {
         enabled: boolean;
         limit: number;
     };
+    llmsTxt?: {
+        enabled: boolean;
+    };
     logo?: {
         alt: string;
         src: string;
@@ -30,6 +33,10 @@ interface Config {
     mdxOptimize?: boolean;
     docs: {
         sidebar: {
+            /**
+             * @default 'FLAT_VIEW'
+             */
+            type?: 'FLAT_VIEW' | 'TREE_VIEW';
             showPageHeadings: true;
             services?: SideBarConfig;
             messages?: SideBarConfig;

package/dist/eventcatalog.js

@@ -6,14 +6,14 @@ import {
 } from "./chunk-OW2FQPYP.js";
 import {
   log_build_default
-} from "./chunk-UYXIOPEC.js";
-import "./chunk-FZHOYLWJ.js";
+} from "./chunk-F55C3RGO.js";
+import "./chunk-CLNIEHVG.js";
 import {
   catalogToAstro
 } from "./chunk-CXKIF3EI.js";
 import {
   VERSION
-} from "./chunk-XLSTKMWD.js";
+} from "./chunk-WNRZ5O5C.js";
 import {
   isBackstagePluginEnabled
 } from "./chunk-XMDPVKIJ.js";

package/eventcatalog/src/components/SideNav/CatalogResourcesSideBar/getCatalogResources.ts

@@ -0,0 +1,65 @@
+import { isCollectionVisibleInCatalog } from '@eventcatalog';
+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 { getCommands } from '@utils/commands';
+import { getEvents } from '@utils/events';
+import { getQueries } from '@utils/queries';
+import { getTeams } from '@utils/teams';
+import { getUsers } from '@utils/users';
+
+export async function getCatalogResources({ currentPath }: { currentPath: string }) {
+  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 channels = await getChannels({ getAllVersions: false });
+  const flows = await getFlows({ getAllVersions: false });
+
+  const messages = [...events, ...commands, ...queries];
+
+  // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
+  const allData = [...domains, ...services, ...messages, ...channels, ...flows];
+
+  const allDataAsSideNav = allData.reduce((acc, item) => {
+    const title = item.collection;
+    const group = acc[title] || [];
+    const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
+
+    const navigationItem = {
+      label: item.data.name,
+      version: item.data.version,
+      // items: item.collection === 'users' ? [] : item.headings,
+      visible: isCollectionVisibleInCatalog(item.collection),
+      // @ts-ignore
+      href: item.data.version
+        ? // @ts-ignore
+          buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`)
+        : buildUrl(`/${route}/${item.collection}/${item.data.id}`),
+      collection: item.collection,
+    };
+
+    group.push(navigationItem);
+
+    return {
+      ...acc,
+      [title]: group,
+    };
+  }, {} as any);
+
+  const sideNav = {
+    ...(currentPath.includes('visualiser')
+      ? {
+          'bounded context map': [
+            { label: 'Domain map', href: buildUrl('/visualiser/context-map'), collection: 'bounded-context-map' },
+          ],
+        }
+      : {}),
+    ...allDataAsSideNav,
+  };
+
+  return sideNav;
+}

package/eventcatalog/src/components/{SideBars → SideNav}/CatalogResourcesSideBar/index.tsx

@@ -75,7 +75,7 @@ const CatalogResourcesSideBar: React.FC<CatalogResourcesSideBarProps> = ({ resou
   if (!isInitialized) return null;
 
   return (
-    <nav className="space-y-6 text-black ">
+    <nav className="space-y-6 text-black px-5 py-4 ">
       <div className="space-y-2">
         <div className="mb-4 px-1">
           <input

package/eventcatalog/src/components/SideNav/SideNav.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import config from '@config';
+
+// FlatView
+import CatalogResourcesSideBar from './CatalogResourcesSideBar';
+import { getCatalogResources } from './CatalogResourcesSideBar/getCatalogResources';
+
+// TreeView
+import { SideNavTreeView } from './TreeView';
+import { getTreeView } from './TreeView/getTreeView';
+
+interface Props extends Omit<HTMLAttributes<'div'>, 'children'> {}
+
+const currentPath = Astro.url.pathname;
+
+let props;
+
+const SIDENAV_TYPE = config?.docs?.sidebar?.type ?? 'FLAT_VIEW';
+
+if (SIDENAV_TYPE === 'FLAT_VIEW') {
+  props = await getCatalogResources({ currentPath });
+} else if (SIDENAV_TYPE === 'TREE_VIEW') {
+  props = getTreeView({ projectDir: process.env.PROJECT_DIR!, currentPath });
+}
+---
+
+<div {...Astro.props}>
+  {SIDENAV_TYPE === 'FLAT_VIEW' && <CatalogResourcesSideBar resources={props} currentPath={currentPath} client:load />}
+  {SIDENAV_TYPE === 'TREE_VIEW' && <SideNavTreeView client:only transition:persist tree={props} />}
+</div>

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

@@ -0,0 +1,189 @@
+import fs from 'fs';
+import path from 'path';
+import gm from 'gray-matter';
+import { globSync } from 'glob';
+import type { CollectionKey } from 'astro:content';
+import { buildUrl } from '@utils/url-builder';
+
+export type TreeNode = {
+  id: string;
+  name: string;
+  version: string;
+  href?: string;
+  type: CollectionKey | null;
+  children: TreeNode[];
+};
+
+/**
+ * Resource types that should be in the sidenav
+ */
+const RESOURCE_TYPES = ['domains', 'services', 'events', 'commands', 'queries', 'flows', 'channels'];
+// const RESOURCE_TYPES = ['domains', 'services', 'events', 'commands', 'queries', 'flows', 'channels'];
+
+/**
+ * Check if the path has a RESOURCE_TYPE on path
+ */
+function canBeResource(dirPath: string) {
+  const parts = dirPath.split(path.sep);
+  for (let i = parts.length - 1; i >= 0; i--) {
+    if (RESOURCE_TYPES.includes(parts[i])) return true;
+  }
+  return false;
+}
+
+function isNotVersioned(dirPath: string) {
+  const parts = dirPath.split(path.sep);
+  return parts.every((p) => p !== 'versioned');
+}
+
+function getResourceType(filePath: string): CollectionKey | null {
+  const parts = filePath.split(path.sep);
+  for (let i = parts.length - 1; i >= 0; i--) {
+    if (RESOURCE_TYPES.includes(parts[i])) return parts[i] as CollectionKey;
+  }
+  return null;
+}
+
+function buildTreeOfDir(directory: string, parentNode: TreeNode, options: { ignore?: CollectionKey[] }) {
+  let node: TreeNode | null = null;
+
+  const resourceType = getResourceType(directory);
+
+  const markdownFiles = globSync(path.join(directory, '/*.md'));
+  const isResourceIgnored = options?.ignore && resourceType && options.ignore.includes(resourceType);
+
+  if (markdownFiles.length > 0 && !isResourceIgnored) {
+    const resourceFilePath = markdownFiles.find((md) => md.endsWith('index.md'));
+    if (resourceFilePath) {
+      const resourceDef = gm.read(resourceFilePath);
+      node = {
+        id: resourceDef.data.id,
+        name: resourceDef.data.name,
+        type: resourceType,
+        version: resourceDef.data.version,
+        children: [],
+      };
+      parentNode.children.push(node);
+    }
+  }
+
+  const directories = fs.readdirSync(directory).filter((name) => {
+    const dirPath = path.join(directory, name);
+    return fs.statSync(dirPath).isDirectory() && isNotVersioned(dirPath) && canBeResource(dirPath);
+  });
+  for (const dir of directories) {
+    buildTreeOfDir(path.join(directory, dir), node || parentNode, options);
+  }
+}
+
+function forEachTreeNodeOf(node: TreeNode, ...callbacks: Array<(node: TreeNode) => void>) {
+  const next = node.children;
+
+  callbacks.forEach((cb) => cb(node));
+
+  // Go to next level
+  next.forEach((n) => {
+    forEachTreeNodeOf(n, ...callbacks);
+  });
+}
+
+function addHrefToNode(basePathname: 'docs' | 'visualiser') {
+  return (node: TreeNode) => {
+    node.href = encodeURI(
+      buildUrl(
+        `/${basePathname}/${node.type}/${node.id}${node.type === 'teams' || node.type === 'users' ? '' : `/${node.version}`}`
+      )
+    );
+  };
+}
+
+function orderChildrenByName(parentNode: TreeNode) {
+  parentNode.children.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+function groupChildrenByType(parentNode: TreeNode) {
+  if (parentNode.children.length === 0) return; // Only group if there are children
+
+  const acc: Record<string, TreeNode[]> = {};
+
+  // Flows and messages are collapsed by default
+
+  parentNode.children.forEach((n) => {
+    if (n.type === null) return; // TODO: Just ignore or remove the type null???
+    if (!(n.type in acc)) acc[n.type] = [];
+    acc[n.type].push(n);
+  });
+
+  // Collapse all messages
+  const AUTO_EXPANDED_TYPES = ['domains', 'services', 'channels'];
+
+  parentNode.children = Object.entries(acc)
+    // Order label nodes by RESOURCE_TYPES
+    .sort(([aType], [bType]) => RESOURCE_TYPES.indexOf(aType) - RESOURCE_TYPES.indexOf(bType))
+    // Construct the label nodes
+    .map(([type, nodes]) => {
+      return {
+        id: `${parentNode.id}/${type}`,
+        name: type,
+        type: type as CollectionKey,
+        version: '0',
+        children: nodes,
+        isExpanded: AUTO_EXPANDED_TYPES.includes(type),
+        isLabel: true,
+      };
+    });
+}
+
+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 cacheKey = `${projectDir}:${basePathname}`;
+  if (treeViewCache.has(cacheKey)) return treeViewCache.get(cacheKey)!;
+
+  const rootNode: TreeNode = {
+    id: '/',
+    name: 'root',
+    type: null,
+    version: '0',
+    children: [],
+  };
+
+  buildTreeOfDir(projectDir, rootNode, {
+    ignore: basePathname === 'visualiser' ? ['teams', 'users', 'channels'] : undefined,
+  });
+
+  // prettier-ignore
+  forEachTreeNodeOf(
+    rootNode,
+    addHrefToNode(basePathname),
+    orderChildrenByName,
+    groupChildrenByType,
+  );
+
+  if (basePathname === 'visualiser') {
+    rootNode.children.unshift({
+      id: '/bounded-context-map',
+      name: 'bounded context map',
+      type: 'bounded-context-map' as any,
+      version: '0',
+      isLabel: true,
+      children: [
+        {
+          id: '/domain-map',
+          name: 'Domain map',
+          href: buildUrl('/visualiser/context-map'),
+          type: 'bounded-context-map' as any,
+          version: '',
+          children: [],
+        },
+      ],
+    } as TreeNode);
+  }
+
+  // Store in cache before returning
+  treeViewCache.set(cacheKey, rootNode);
+
+  return rootNode;
+}

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

@@ -0,0 +1,94 @@
+import { gray } from 'tailwindcss/colors';
+import { TreeView } from '@components/TreeView';
+import { navigate } from 'astro:transitions/client';
+import type { TreeNode as RawTreeNode } from './getTreeView';
+import { getIconForCollection } from '@utils/collections/icons';
+import { useEffect, useState } from 'react';
+
+type TreeNode = RawTreeNode & { isLabel?: true; isDefaultExpanded?: boolean; isExpanded?: boolean };
+
+function isCurrentNode(node: TreeNode, currentPathname: string) {
+  return currentPathname === node.href;
+}
+
+function TreeNode({ node }: { node: TreeNode }) {
+  const Icon = getIconForCollection(node.type ?? '');
+  const [isCurrent, setIsCurrent] = useState(document.location.pathname === node.href);
+
+  useEffect(() => {
+    const abortCtrl = new AbortController();
+    // prettier-ignore
+    document.addEventListener(
+      'astro:page-load', 
+      () => setIsCurrent(document.location.pathname === node.href), 
+      { signal: abortCtrl.signal },
+    );
+    return () => abortCtrl.abort();
+  }, [document, node]);
+
+  return (
+    <TreeView.Item
+      key={node.id}
+      id={node.id}
+      current={isCurrent}
+      defaultExpanded={node?.isExpanded || node?.isDefaultExpanded}
+      onSelect={node?.isLabel || !node?.href ? undefined : () => navigate(node.href!)}
+    >
+      {!node?.isLabel && (
+        <TreeView.LeadingVisual>
+          <Icon className="w-3 -ml-1" />
+        </TreeView.LeadingVisual>
+      )}
+      <span
+        className={node?.isLabel ? ' capitalize  text-[13px]  text-purple-900 font-extrabold' : 'font-light text-[14px] -ml-0.5'}
+      >
+        {node.name} {node.isLabel ? `(${node.children.length})` : ''}
+      </span>
+      {(node.children || []).length > 0 && (
+        <TreeView.SubTree>
+          {node.children!.map((childNode) => (
+            <TreeNode key={childNode.id} node={childNode} />
+          ))}
+        </TreeView.SubTree>
+      )}
+    </TreeView.Item>
+  );
+}
+
+export function SideNavTreeView({ tree }: { tree: TreeNode }) {
+  function bubbleUpExpanded(parentNode: TreeNode) {
+    if (isCurrentNode(parentNode, document.location.pathname)) return true;
+    return (parentNode.isDefaultExpanded = parentNode.children.some(bubbleUpExpanded));
+  }
+  bubbleUpExpanded(tree);
+
+  return (
+    <nav id="resources-tree" className="px-2 py-2">
+      <TreeView
+        truncate={false}
+        style={{
+          // @ts-expect-error inline css var
+          '--base-size-8': '0.5rem',
+          '--base-size-12': '0.75rem',
+          '--borderColor-muted': '#fff',
+          '--borderRadius-medium': '0.375rem',
+          '--borderWidth-thick': '0.125rem',
+          '--borderWidth-thin': '0.0625rem',
+          '--boxShadow-thick': 'inset 0 0 0 var(--borderWidth-thick)',
+          '--control-transparent-bgColor-hover': '#656c7626',
+          '--control-transparent-bgColor-selected': '#656c761a',
+          // '--fgColor-accent': purple[700],
+          '--fgColor-default': gray[600],
+          '--fgColor-muted': gray[600],
+          '--text-body-size-medium': '0.875rem',
+          '--stack-gap-condensed': '0.5rem',
+          '--treeViewItem-leadingVisual-iconColor-rest': 'var(--fgColor-muted)',
+        }}
+      >
+        {tree.children.map((n) => (
+          <TreeNode key={n.id} node={n} />
+        ))}
+      </TreeView>
+    </nav>
+  );
+}