@eventcatalog/core 2.15.0 → 2.16.0

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

@@ -0,0 +1,7 @@
+---
+id: ubiquitous-language
+name: Ubiquitous Language
+summary: A shared language used by all team members to communicate about the system.
+description: A shared language used by all team members to communicate about the system.
+---
+<!-- Do not delete this file, required for EC, you an ignore this file -->

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-65VQIGAP.js";
-import "../chunk-TGOUSS6C.js";
+} from "../chunk-BT6ILNB3.js";
+import "../chunk-DMGFALQN.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.15.0";
+var version = "2.16.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-KI4KAUWW.js";
-import "../chunk-65VQIGAP.js";
-import "../chunk-TGOUSS6C.js";
+} from "../chunk-6VJTKPOS.js";
+import "../chunk-BT6ILNB3.js";
+import "../chunk-DMGFALQN.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -129,7 +129,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -139,7 +140,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => import_node_path2.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => import_node_path2.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -172,6 +177,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [import_node_path2.default.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path2.default.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [import_node_path2.default.join("src", "content")];
     }
@@ -241,7 +249,8 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "pages",
     "changelogs",
     "queries",
-    "channels"
+    "channels",
+    "ubiquitousLanguages"
   ];
   const emptyCollections = [];
   for (const collection of COLLECTIONS) {

package/dist/catalog-to-astro-content-directory.js

@@ -1,8 +1,8 @@
 import {
   catalogToAstro
-} from "./chunk-O6BGVVOW.js";
+} from "./chunk-55YPRY5U.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-PK2EQVPD.js";
+import "./chunk-5RNDOKYT.js";
 export {
   catalogToAstro
 };

package/dist/{chunk-O6BGVVOW.js → chunk-55YPRY5U.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E7TXTI7G.js";
 import {
   mapCatalogToAstro
-} from "./chunk-PK2EQVPD.js";
+} from "./chunk-5RNDOKYT.js";
 
 // src/catalog-to-astro-content-directory.js
 import { glob } from "glob";
@@ -50,7 +50,8 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "pages",
     "changelogs",
     "queries",
-    "channels"
+    "channels",
+    "ubiquitousLanguages"
   ];
   const emptyCollections = [];
   for (const collection of COLLECTIONS) {

package/dist/{chunk-PK2EQVPD.js → chunk-5RNDOKYT.js}

@@ -11,7 +11,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -21,7 +22,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => path.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => path.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -54,6 +59,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [path.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [path.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [path.join("src", "content")];
     }

package/dist/{chunk-KI4KAUWW.js → chunk-6VJTKPOS.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-65VQIGAP.js";
+} from "./chunk-BT6ILNB3.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-65VQIGAP.js → chunk-BT6ILNB3.js}

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

package/dist/{chunk-TGOUSS6C.js → chunk-DMGFALQN.js}

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

package/dist/{chunk-7HYM3M5I.js → chunk-NTCYOR4N.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-E7TXTI7G.js";
 import {
   mapCatalogToAstro
-} from "./chunk-PK2EQVPD.js";
+} from "./chunk-5RNDOKYT.js";
 
 // src/watcher.js
 import watcher from "@parcel/watcher";

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-TGOUSS6C.js";
+} from "./chunk-DMGFALQN.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.15.0";
+var version = "2.16.0";
 
 // src/constants.ts
 var VERSION = version;
@@ -226,7 +226,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -236,7 +237,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => import_node_path3.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => import_node_path3.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -269,6 +274,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [import_node_path3.default.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path3.default.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [import_node_path3.default.join("src", "content")];
     }
@@ -425,7 +433,8 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "pages",
     "changelogs",
     "queries",
-    "channels"
+    "channels",
+    "ubiquitousLanguages"
   ];
   const emptyCollections = [];
   for (const collection of COLLECTIONS) {

package/dist/eventcatalog.js

@@ -1,21 +1,21 @@
 import {
   log_build_default
-} from "./chunk-KI4KAUWW.js";
-import "./chunk-65VQIGAP.js";
+} from "./chunk-6VJTKPOS.js";
+import "./chunk-BT6ILNB3.js";
 import {
   catalogToAstro
-} from "./chunk-O6BGVVOW.js";
+} from "./chunk-55YPRY5U.js";
 import {
   VERSION
-} from "./chunk-TGOUSS6C.js";
+} from "./chunk-DMGFALQN.js";
 import {
   generate
 } from "./chunk-YEQVKHST.js";
 import {
   watch
-} from "./chunk-7HYM3M5I.js";
+} from "./chunk-NTCYOR4N.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-PK2EQVPD.js";
+import "./chunk-5RNDOKYT.js";
 
 // src/eventcatalog.ts
 import { Command } from "commander";

package/dist/map-catalog-to-astro.cjs

@@ -45,7 +45,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -55,7 +56,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => import_node_path.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => import_node_path.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -88,6 +93,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [import_node_path.default.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path.default.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [import_node_path.default.join("src", "content")];
     }

package/dist/map-catalog-to-astro.js

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-PK2EQVPD.js";
+} from "./chunk-5RNDOKYT.js";
 export {
   mapCatalogToAstro
 };

package/dist/watcher.cjs

@@ -49,7 +49,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -59,7 +60,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => import_node_path.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => import_node_path.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -92,6 +97,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [import_node_path.default.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path.default.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [import_node_path.default.join("src", "content")];
     }

package/dist/watcher.js

@@ -1,8 +1,8 @@
 import {
   watch
-} from "./chunk-7HYM3M5I.js";
+} from "./chunk-NTCYOR4N.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-PK2EQVPD.js";
+import "./chunk-5RNDOKYT.js";
 export {
   watch
 };

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

@@ -10,7 +10,7 @@ const AnimatedMessageEdge = ({
   sourcePosition,
   targetPosition,
   data,
-  label,
+  label = '',
   markerEnd,
 }: any) => {
   const [edgePath, labelX, labelY] = getBezierPath({

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

@@ -252,6 +252,7 @@ const NodeGraphBuilder = ({
     <ReactFlow
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
+      minZoom={0.07}
       nodes={nodes}
       edges={edges}
       fitView

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

@@ -2,6 +2,7 @@
 const { catalog, id } = Astro.props;
 import fs from 'node:fs/promises';
 import { existsSync } from 'fs';
+import yaml from 'js-yaml';
 import path from 'path';
 import SchemaViewerClient from './SchemaViewer';
 import Admonition from '../Admonition';
@@ -48,7 +49,11 @@ try {
     if (exists) {
       // Load the schema for the component
       schema = await fs.readFile(schemaPath, 'utf-8');
-      schema = JSON.parse(schema);
+      if (schemaPath.endsWith('.yml') || schemaPath.endsWith('.yaml')) {
+        schema = yaml.load(schema);
+      } else {
+        schema = JSON.parse(schema);
+      }
     }
 
     return {

package/eventcatalog/src/components/SideBars/CatalogResourcesSideBar/index.tsx

@@ -4,12 +4,28 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import './styles.css';
 import { getIconForCollection as getIconForCollectionOriginal } from '@utils/collections/icons';
 
+const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
+
 const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
   const [data, setData] = useState(resources);
   const [searchQuery, setSearchQuery] = useState('');
-  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>({});
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = window.localStorage.getItem(STORAGE_KEY);
+      setIsInitialized(true);
+      return saved ? JSON.parse(saved) : {};
+    }
+    return {};
+  });
   const decodedCurrentPath = decodeURIComponent(currentPath);
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedGroups));
+    }
+  }, [collapsedGroups]);
+
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
   };
@@ -47,6 +63,8 @@ const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
 
   const getIconForCollection = useMemo(() => getIconForCollectionOriginal, []);
 
+  if (!isInitialized) return null;
+
   return (
     <nav className="space-y-6 text-black ">
       <div className="space-y-2">

package/eventcatalog/src/components/SideBars/DomainSideBar.astro

@@ -3,6 +3,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import PillListFlat from '@components/Lists/PillListFlat';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
+import { getUbiquitousLanguage } from '@utils/collections/domains';
 import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
 import { ScrollText, Workflow } from 'lucide-react';
@@ -14,6 +15,9 @@ const { domain } = Astro.props;
 
 // @ts-ignore
 const services = (domain.data.services as CollectionEntry<'services'>[]) || [];
+const ubiquitousLanguage = await getUbiquitousLanguage(domain);
+const hasUbiquitousLanguage = ubiquitousLanguage.length > 0;
+const ubiquitousLanguageDictionary = hasUbiquitousLanguage ? ubiquitousLanguage[0].data.dictionary : [];
 
 const ownersRaw = domain.data?.owners || [];
 const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
@@ -26,6 +30,13 @@ const serviceList = services.map((p) => ({
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
+const ubiquitousLanguageList = ubiquitousLanguageDictionary?.map((l) => ({
+  label: l.name,
+  badge: 'Ubiquitous Language',
+  collection: 'ubiquitousLanguages',
+  href: buildUrl(`/docs/${domain.collection}/${domain.data.id}/language?id=${l.id}`),
+}));
+
 const ownersList = owners.map((o) => ({
   label: o.data.name,
   type: o.collection,
@@ -45,6 +56,17 @@ const ownersList = owners.map((o) => ({
       icon="ServerIcon"
       client:load
     />
+    {
+      ubiquitousLanguageList && hasUbiquitousLanguage && (
+        <PillListFlat
+          title={`Ubiquitous Language Dictionary (${ubiquitousLanguageDictionary?.length})`}
+          pills={ubiquitousLanguageList}
+          color="pink"
+          emptyMessage={`This domain does not have any documented ubiquitous language.`}
+          client:load
+        />
+      )
+    }
     {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
     {
       domain.data.repository && (
@@ -57,6 +79,7 @@ const ownersList = owners.map((o) => ({
       emptyMessage={`This domain does not have any documented owners.`}
       client:load
     />
+
     <div class="space-y-2">
       <a
         href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}

package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -1,7 +1,7 @@
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForMessageType } from './MessageTableColumns';
@@ -65,39 +65,59 @@ export const columns = () => [
       collectionFilterKey: 'receives',
     },
     cell: (info) => {
-      const receives = info.getValue();
+      const receives = info.getValue() || [];
+      const isExpandable = receives?.length > 10;
+      const isOpen = isExpandable ? receives?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      const receiversWithIcons = useMemo(
+        () =>
+          receives?.map((consumer: any) => {
+            const type = consumer.collection.slice(0, -1);
+            return {
+              ...consumer,
+              ...getColorAndIconForMessageType(type),
+            };
+          }) || [],
+        [receives]
+      );
+
       if (receives?.length === 0 || !receives)
         return <div className="text-sm text-gray-400/80 text-left italic">Service receives no messages.</div>;
 
       return (
-        <ul>
-          {receives.map((consumer: any, index: number) => {
-            const type = consumer.collection.slice(0, -1);
-            const { color, Icon } = useMemo(() => getColorAndIconForMessageType(type), [type]);
-            return (
-              <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
-                <a
-                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
-                  className="group-hover:text-primary flex space-x-1 items-center "
-                >
-                  <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
-                    <span className="flex items-center">
-                      <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
-                        <Icon className="h-4 w-4 text-white" />
-                      </span>
-                      <span className="leading-none px-2 group-hover:underline ">
-                        {consumer.data.name} (v{consumer.data.version})
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {receives.length} message{receives.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {receiversWithIcons.map((consumer: any, index: number) => (
+                <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
+                    className="group-hover:text-primary flex space-x-1 items-center "
+                  >
+                    <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                      <span className="flex items-center">
+                        <span className={`bg-${consumer.color}-500 h-full rounded-tl rounded-bl p-1`}>
+                          <consumer.Icon className="h-4 w-4 text-white" />
+                        </span>
+                        <span className="leading-none px-2 group-hover:underline ">
+                          {consumer.data.name} (v{consumer.data.version})
+                        </span>
                       </span>
-                    </span>
-                  </div>
-                </a>
-              </li>
-            );
-          })}
-        </ul>
+                    </div>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
       );
     },
-    // footer: (info) => info.column.id,
     filterFn: filterCollectionByName('receives'),
   }),
   columnHelper.accessor('data.sends', {
@@ -107,40 +127,52 @@ export const columns = () => [
       collectionFilterKey: 'sends',
     },
     cell: (info) => {
-      const sends = info.getValue();
+      const sends = info.getValue() || [];
+      const isExpandable = sends?.length > 10;
+      const isOpen = isExpandable ? sends?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
       if (sends?.length === 0 || !sends)
         return <div className="text-sm text-gray-400/80 text-left italic">Service sends no messages.</div>;
 
       return (
-        <ul>
-          {sends.map((consumer: any, index: number) => {
-            const type = consumer.collection.slice(0, -1);
-            const color = type === 'event' ? 'orange' : 'blue';
-            const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
-            return (
-              <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light">
-                <a
-                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
-                  className="group-hover:text-primary flex space-x-1 items-center "
-                >
-                  <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
-                    <span className="flex items-center">
-                      <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
-                        <Icon className="h-4 w-4 text-white" />
-                      </span>
-                      <span className="leading-none px-2 group-hover:underline ">
-                        {consumer.data.name} (v{consumer.data.version})
-                      </span>
-                    </span>
-                  </div>
-                </a>
-              </li>
-            );
-          })}
-        </ul>
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {sends.length} message{sends.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {sends.map((consumer: any, index: number) => {
+                const type = consumer.collection.slice(0, -1);
+                const color = type === 'event' ? 'orange' : 'blue';
+                const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
+                return (
+                  <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light">
+                    <a
+                      href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
+                      className="group-hover:text-primary flex space-x-1 items-center "
+                    >
+                      <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                        <span className="flex items-center">
+                          <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
+                            <Icon className="h-4 w-4 text-white" />
+                          </span>
+                          <span className="leading-none px-2 group-hover:underline ">
+                            {consumer.data.name} (v{consumer.data.version})
+                          </span>
+                        </span>
+                      </div>
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
       );
     },
-    // footer: (info) => info.column.id,
     filterFn: filterCollectionByName('sends'),
   }),
   columnHelper.accessor('data.name', {

package/eventcatalog/src/content/config.ts

@@ -221,6 +221,23 @@ const domains = defineCollection({
     .merge(baseSchema),
 });
 
+const ubiquitousLanguages = defineCollection({
+  type: 'content',
+  schema: z.object({
+    dictionary: z
+      .array(
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          summary: z.string().optional(),
+          description: z.string().optional(),
+          icon: z.string().optional(),
+        })
+      )
+      .optional(),
+  }),
+});
+
 const users = defineCollection({
   type: 'content',
   schema: z.object({
@@ -270,4 +287,5 @@ export const collections = {
   flows,
   pages,
   changelogs,
+  ubiquitousLanguages,
 };

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

@@ -0,0 +1,301 @@
+---
+import Footer from '@layouts/Footer.astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { getDomains, type Domain, getUbiquitousLanguage } from '@utils/collections/domains';
+import type { CollectionEntry } from 'astro:content';
+import { ViewTransitions } from 'astro:transitions';
+import * as LucideIcons from 'lucide-react';
+
+export async function getStaticPaths() {
+  const domains = await getDomains();
+
+  const buildPages = (collection: CollectionEntry<'domains'>[]) => {
+    return collection.map((item) => ({
+      params: {
+        type: item.collection,
+        id: item.data.id,
+      },
+      props: {
+        type: item.collection,
+        ...item,
+      },
+    }));
+  };
+
+  return [...buildPages(domains)];
+}
+
+const props = Astro.props;
+const pageTitle = `${props.collection} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
+const ubiquitousLanguages = await getUbiquitousLanguage(props);
+
+const ubiquitousLanguage = ubiquitousLanguages[0];
+---
+
+<VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
+  <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 min-h-[50em]">
+        <nav class="flex mb-4" aria-label="Breadcrumb">
+          <ol class="inline-flex items-center space-x-1 md:space-x-3">
+            <li class="inline-flex items-center">
+              <a
+                href={`/docs/${props.type}/${props.data.id}/${props.data.latestVersion}`}
+                class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-primary"
+              >
+                <svg
+                  class="w-3 h-3 mr-2.5"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
+                </svg>
+                Back to Documentation
+              </a>
+            </li>
+          </ol>
+        </nav>
+
+        <div class="border-b border-gray-200 flex justify-between items-start md:pb-2">
+          <div>
+            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-black">Domain Language Explorer</h2>
+            <h2 class="text-2xl pt-2 text-gray-500 font-light">{props.data.name} domain</h2>
+          </div>
+        </div>
+
+        {
+          !ubiquitousLanguage && (
+            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 my-4">
+              <p class="text-yellow-700">
+                This domain does not have any defined ubiquitous language terms yet. Consider adding some terms to help establish
+                a common vocabulary for your domain.
+              </p>
+            </div>
+          )
+        }
+
+        <div class="py-4 w-full min-h-[calc(100vh-10em)]">
+          {
+            ubiquitousLanguage && (
+              <>
+                <div class="mb-6">
+                  <input
+                    type="text"
+                    id="searchInput"
+                    placeholder="Search terms..."
+                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                {!ubiquitousLanguage ? (
+                  <div class="text-center py-12 bg-gray-50 rounded-lg">
+                    <h3 class="text-lg font-medium text-gray-900">No domain language terms</h3>
+                    <p class="mt-2 text-sm text-gray-500">There are no language terms defined for this domain yet.</p>
+                  </div>
+                ) : (
+                  <div id="termsGrid" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {ubiquitousLanguage?.data?.dictionary?.map((term) => (
+                      <div class="term-card block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white min-h-[12em] cursor-pointer">
+                        <div class="flex flex-col h-full space-y-8">
+                          {term.icon && (
+                            <>
+                              {(() => {
+                                const Icon = LucideIcons[term.icon as keyof typeof LucideIcons];
+                                //@ts-ignore
+                                return Icon ? <Icon className="w-6 h-6 text-primary" /> : null;
+                              })()}
+                            </>
+                          )}
+                          <div>
+                            <h3 class="text-gray-800 text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300">
+                              {term.name}
+                            </h3>
+                            <div class="term-content">
+                              <p class="summary-text text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm mb-4">
+                                {term.summary}
+                              </p>
+                              {term.description && (
+                                <>
+                                  <p class="description-text hidden text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm whitespace-pre-line">
+                                    {term.description}
+                                  </p>
+                                  <span class="show-more-text text-sm text-primary font-medium">Show more</span>
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                <div id="noSearchResults" class="hidden text-center py-12 bg-gray-50 rounded-lg">
+                  <h3 class="text-lg font-medium text-gray-900">No matching terms</h3>
+                  <p class="mt-2 text-sm text-gray-500">Try adjusting your search terms.</p>
+                </div>
+              </>
+            )
+          }
+        </div>
+
+        <Footer />
+      </div>
+    </div>
+    <ViewTransitions />
+  </main>
+
+  <script>
+    function initializeSearch() {
+      const searchInput = document.getElementById('searchInput');
+      const termCards = document.querySelectorAll('.term-card');
+      const noSearchResults = document.getElementById('noSearchResults');
+
+      searchInput?.addEventListener('input', (e) => {
+        const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+        let visibleCount = 0;
+
+        termCards.forEach((card) => {
+          const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
+          const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
+          const matches = title.includes(searchTerm) || description.includes(searchTerm);
+
+          card.classList.toggle('hidden', !matches);
+          if (matches) visibleCount++;
+        });
+
+        // Show/hide no results message
+        if (noSearchResults) {
+          noSearchResults.classList.toggle('hidden', visibleCount > 0);
+        }
+      });
+    }
+
+    function initializeShowMore() {
+      const cards = document.querySelectorAll('.term-card');
+
+      cards.forEach((card) => {
+        const newCard = card.cloneNode(true);
+        if (card.parentNode) {
+          card.parentNode.replaceChild(newCard, card);
+          // Initially show summary
+          const summary = (newCard as Element).querySelector('.summary-text');
+          summary?.classList.add('visible');
+        }
+        newCard.addEventListener('click', () => {
+          const description = (newCard as Element).querySelector('.description-text');
+          const summary = (newCard as Element).querySelector('.summary-text');
+          const showMoreText = (newCard as Element).querySelector('.show-more-text');
+
+          if (description && summary && showMoreText) {
+            (newCard as Element).classList.toggle('expanded');
+            description.classList.toggle('visible');
+            summary.classList.toggle('visible');
+            showMoreText.textContent = description.classList.contains('visible') ? 'Show less' : 'Show more';
+          }
+        });
+      });
+    }
+
+    function highlightMatchingTerm() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const termId = urlParams.get('id');
+
+      if (termId) {
+        const cards = document.querySelectorAll('.term-card');
+        cards.forEach((card) => {
+          const termName = card.querySelector('h3')?.textContent?.trim();
+          if (termName?.toLowerCase() === termId.toLowerCase()) {
+            // Add highlight class
+            card.classList.add('highlighted');
+            (card as HTMLElement).click();
+
+            setTimeout(() => {
+              // Scroll into view
+              card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }, 300);
+          }
+        });
+      }
+    }
+
+    document.addEventListener('astro:page-load', () => {
+      initializeShowMore();
+      initializeSearch();
+      highlightMatchingTerm();
+    });
+
+    initializeShowMore();
+    initializeSearch();
+    highlightMatchingTerm();
+  </script>
+
+  <style is:global>
+    .term-card {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      min-height: 12em;
+    }
+
+    .term-card.expanded {
+      min-height: 24em;
+      background-color: rgb(249 250 251);
+      z-index: 10;
+      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    }
+
+    .summary-text,
+    .description-text {
+      transition:
+        opacity 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+      display: none;
+    }
+
+    .summary-text.visible,
+    .description-text.visible {
+      opacity: 1;
+      max-height: 500px;
+      margin-bottom: 1rem;
+      display: block;
+    }
+
+    .description-text {
+      white-space: pre-line;
+      line-height: 1.5;
+    }
+
+    .show-more-text {
+      display: block;
+      margin-top: 0.5rem;
+    }
+
+    .term-card.expanded .show-more-text {
+      display: none;
+    }
+
+    .term-card.highlighted {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 2px var(--color-primary);
+      animation: pulse 1s;
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 2px var(--color-primary);
+      }
+      50% {
+        transform: scale(1.01);
+        box-shadow: 0 0 0 4px var(--color-primary);
+      }
+    }
+  </style>
+</VerticalSideBarLayout>

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

@@ -6,7 +6,7 @@ import path from 'path';
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 export type Domain = CollectionEntry<'domains'>;
-
+export type UbiquitousLanguage = CollectionEntry<'ubiquitousLanguages'>;
 interface Props {
   getAllVersions?: boolean;
 }
@@ -28,7 +28,9 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
     const servicesInDomain = domain.data.services || [];
 
     const services = servicesInDomain
-      .map((_service) => getItemsFromCollectionByIdAndSemverOrLatest(servicesCollection, _service.id, _service.version))
+      .map((_service: { id: string; version: string | undefined }) =>
+        getItemsFromCollectionByIdAndSemverOrLatest(servicesCollection, _service.id, _service.version)
+      )
       .flat();
 
     return {
@@ -50,3 +52,16 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
     };
   });
 };
+
+export const getUbiquitousLanguage = async (domain: Domain): Promise<UbiquitousLanguage[]> => {
+  const { collection, data, slug } = domain;
+
+  const allUbiquitousLanguages = await getCollection('ubiquitousLanguages');
+  console.log('allUbiquitousLanguages', allUbiquitousLanguages, collection, slug, data.name);
+
+  const ubiquitousLanguages = await getCollection('ubiquitousLanguages', (ubiquitousLanguage) => {
+    return ubiquitousLanguage.id.includes(`${collection}/${data.name}`);
+  });
+
+  return ubiquitousLanguages;
+};

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

@@ -10,6 +10,7 @@ import {
   ArrowsRightLeftIcon,
   VariableIcon,
 } from '@heroicons/react/24/outline';
+import { BookText } from 'lucide-react';
 
 export const getIconForCollection = (collection: string) => {
   switch (collection) {
@@ -33,6 +34,8 @@ export const getIconForCollection = (collection: string) => {
       return ArrowsRightLeftIcon;
     case 'channels-parameter':
       return VariableIcon;
+    case 'ubiquitousLanguages':
+      return BookText;
     default:
       return ServerIcon;
   }

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "publishConfig": {
     "access": "public"
   },
@@ -68,6 +68,7 @@
     "glob": "^10.4.1",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
+    "js-yaml": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "4.6.2",
     "lucide-react": "^0.453.0",
@@ -91,6 +92,7 @@
     "@playwright/test": "^1.48.1",
     "@types/dagre": "^0.7.52",
     "@types/diff": "^5.2.2",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.merge": "4.6.9",
     "@types/node": "^20.14.2",