@eventcatalog/core 2.3.4 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @eventcatalog/core
 
+## 2.5.0
+
+### Minor Changes
+
+- 067fd89: feat(core): added flows to eventcatalog
+- c336807: feat(core): only latest versions are now shown in visualizer
+- 20c2cba: fix(core): fixing search not working after builds
+- 7476fa6: fix(core): nodegraphs for domains now work with semver versions
+- 737380a: feat(core): added ability to see how many domains a team and users own
+- a1490d3: chore(core): updated astro versions
+  feat(core): visuzlier arrows stroke width increased
+- 58d6a2d: chore(core): fixing default for flows
+
+## 2.4.0
+
+### Minor Changes
+
+- 3a4b8ec: feat(c0re): add semantic version support, referencing services or messages can now be done with semver
+
 ## 2.3.4
 
 ### Patch Changes

package/README.md

@@ -129,6 +129,13 @@ If you have any questions, features or issues please raise any issue or pull req
 
 You can find the [contributing guidelines here](https://eventcatalog.dev/docs/contributing/overview).
 
+## Running the project locally
+
+1. Clone the repo
+1. Install required dependencies `npm run i`
+1. Run the command `npm run start:catalog`
+    - This will start the catalog found in `/examples` repo, locally on your machine
+
 [license-badge]: https://img.shields.io/github/license/event-catalog/eventcatalog.svg?color=yellow
 [license]: https://github.com/event-catalog/eventcatalog/blob/main/LICENSE
 [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

package/bin/dist/eventcatalog.cjs

@@ -3095,9 +3095,6 @@ var ensureDir = (dir2) => {
   }
 };
 var copyCore = () => {
-  if (import_fs.default.existsSync(core)) {
-    import_fs.default.rmSync(core, { recursive: true });
-  }
   ensureDir(core);
   import_fs.default.cpSync(eventCatalogDir, core, {
     recursive: true,
@@ -3106,13 +3103,17 @@ var copyCore = () => {
     }
   });
 };
-program2.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").action((options) => {
+var clearCore = () => {
+  if (import_fs.default.existsSync(core)) import_fs.default.rmSync(core, { recursive: true });
+};
+program2.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).action((options) => {
   console.log("Setting up EventCatalog....");
   if (options.debug) {
     console.log("Debug mode enabled");
     console.log("PROJECT_DIR", dir);
     console.log("CATALOG_DIR", core);
   }
+  if (options.forceRecreate) clearCore();
   copyCore();
   copyFolder((0, import_node_path.join)(dir, "public"), (0, import_node_path.join)(core, "public"));
   copyFile((0, import_node_path.join)(dir, "eventcatalog.config.js"), (0, import_node_path.join)(core, "eventcatalog.config.js"));

package/bin/dist/eventcatalog.js

@@ -3062,9 +3062,6 @@ var ensureDir = (dir2) => {
   }
 };
 var copyCore = () => {
-  if (fs.existsSync(core)) {
-    fs.rmSync(core, { recursive: true });
-  }
   ensureDir(core);
   fs.cpSync(eventCatalogDir, core, {
     recursive: true,
@@ -3073,13 +3070,17 @@ var copyCore = () => {
     }
   });
 };
-program2.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").action((options) => {
+var clearCore = () => {
+  if (fs.existsSync(core)) fs.rmSync(core, { recursive: true });
+};
+program2.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).action((options) => {
   console.log("Setting up EventCatalog....");
   if (options.debug) {
     console.log("Debug mode enabled");
     console.log("PROJECT_DIR", dir);
     console.log("CATALOG_DIR", core);
   }
+  if (options.forceRecreate) clearCore();
   copyCore();
   copyFolder(join(dir, "public"), join(core, "public"));
   copyFile(join(dir, "eventcatalog.config.js"), join(core, "eventcatalog.config.js"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.3.4",
+  "version": "2.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -30,10 +30,10 @@
     "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,json,astro}\""
   },
   "dependencies": {
-    "@astrojs/check": "^0.7.0",
-    "@astrojs/markdown-remark": "^5.1.0",
-    "@astrojs/mdx": "^3.1.0",
-    "@astrojs/react": "^3.5.0",
+    "@astrojs/check": "^0.9.2",
+    "@astrojs/markdown-remark": "^5.2.0",
+    "@astrojs/mdx": "^3.1.3",
+    "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.0",
     "@changesets/cli": "^2.27.5",
     "@headlessui/react": "^2.0.3",
@@ -44,13 +44,14 @@
     "@tanstack/react-table": "^8.17.3",
     "@types/dagre": "^0.7.52",
     "@types/node": "^20.14.2",
-    "astro": "^4.10.1",
+    "astro": "^4.14.2",
     "astro-expressive-code": "^0.35.2",
     "astro-pagefind": "^1.5.0",
     "astro-seo": "^0.8.4",
     "dagre": "^0.8.5",
     "glob": "^10.4.1",
     "html-to-image": "^1.11.11",
+    "lodash.merge": "4.6.2",
     "mermaid": "^10.9.1",
     "rapidoc": "^9.3.4",
     "react": "^18.3.1",
@@ -58,12 +59,14 @@
     "reactflow": "^11.11.4",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
+    "semver": "7.6.3",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@parcel/watcher": "^2.4.1",
+    "@types/lodash.merge": "4.6.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "commander": "^12.1.0",

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

@@ -22,11 +22,12 @@ const ensureDirSync = async (filePath) => {
   }
 };
 
-const copyFiles = async ({ source, target, catalogFilesDir, pathToMarkdownFiles, pathToAllFiles, type }) => {
+const copyFiles = async ({ source, target, catalogFilesDir, pathToMarkdownFiles, pathToAllFiles, type, ignore = null }) => {
   // Find all the event files
   const markdownFiles = await glob(pathToMarkdownFiles, {
     nodir: true,
     windowsPathsNoEscape: os.platform() == 'win32',
+    ignore: ignore,
   });
   const files = await glob(pathToAllFiles, {
     ignore: {
@@ -186,6 +187,11 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
       path.join(source, 'services/**/**/changelog.md'),
     ],
     pathToAllFiles: [path.join(source, 'services/**'), path.join(source, 'domains/**/services/**')],
+    ignore: [
+      path.join(source, 'services/**/events/**'),
+      path.join(source, 'services/**/commands/**'),
+      path.join(source, 'services/**/flows/**'),
+    ],
     type: 'services',
   });
 
@@ -196,9 +202,34 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
     catalogFilesDir,
     pathToMarkdownFiles: [path.join(source, 'domains/**/**/index.md'), path.join(source, 'domains/**/**/changelog.md')],
     pathToAllFiles: [path.join(source, 'domains/**')],
+    ignore: [
+      path.join(source, 'domains/**/services/**'),
+      path.join(source, 'domains/**/commands/**'),
+      path.join(source, 'domains/**/events/**'),
+      path.join(source, 'domains/**/flows/**'),
+    ],
     type: 'domains',
   });
 
+  // // Copy all the flow files over
+  await copyFiles({
+    source,
+    target: astroContentDir,
+    catalogFilesDir,
+    pathToMarkdownFiles: [
+      path.join(source, 'flows/**/**/index.md'),
+      path.join(source, 'flows/**/**/changelog.md'),
+      path.join(source, 'services/**/flows/**/index.md'),
+      path.join(source, 'domains/**/flows/**/index.md'),
+    ],
+    pathToAllFiles: [
+      path.join(source, 'flows/**'),
+      path.join(source, 'services/**/flows/**'),
+      path.join(source, 'domains/**/flows/**'),
+    ],
+    type: 'flows',
+  });
+
   // // Copy all the users
   await copyFiles({
     source,

package/scripts/default-files-for-collections/flows.md

@@ -0,0 +1,11 @@
+---
+id: empty
+steps:
+    - id: "empty"
+      title: "empty"
+name: empty
+version: 0.0.1
+hidden: true
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

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

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

package/scripts/watcher.js

@@ -11,7 +11,7 @@ const catalogDirectory = process.env.CATALOG_DIR;
 
 const contentPath = path.join(catalogDirectory, 'src', 'content');
 
-const watchList = ['domains', 'commands', 'events', 'services', 'teams', 'users', 'pages', 'components'];
+const watchList = ['domains', 'commands', 'events', 'services', 'teams', 'users', 'pages', 'components', 'flows'];
 // const absoluteWatchList = watchList.map((item) => path.join(projectDirectory, item));
 
 // confirm folders exist before watching them
@@ -62,7 +62,6 @@ for (let item of [...verifiedWatchList]) {
 
       // IF directory remove it
       if (type === 'delete') {
-        console.log('eventPath', eventPath);
         fs.rmSync(newPath);
       }
     }

package/src/components/DocsNavigation.astro

@@ -3,6 +3,7 @@ import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/services/services';
+import { getFlows } from '@utils/flows/flows';
 import { getTeams } from '@utils/teams';
 import { getUsers } from '@utils/users';
 import config, { type CatalogConfig } from '@eventcatalog';
@@ -12,19 +13,21 @@ const events = await getEvents({ getAllVersions: false });
 const commands = await getCommands({ 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];
 
 // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-const allData = [...domains, ...services, ...messages, ...teams, ...users];
+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,
@@ -38,6 +41,7 @@ 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),

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

@@ -4,6 +4,7 @@ import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/services/
 import { getNodesAndEdges as getNodesAndEdgesForEvent } from '@utils/events/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForCommand } from '@utils/commands/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/domains/node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/flows/node-graph';
 
 interface Props {
   id: string;
@@ -65,6 +66,17 @@ if (collection === 'domains') {
   nodes = eventNodes;
   edges = eventEdges;
 }
+
+if (collection === 'flows') {
+  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForFlows({
+    id: id,
+    version,
+    mode,
+  });
+
+  nodes = eventNodes;
+  edges = eventEdges;
+}
 ---
 
 <div>

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

@@ -13,7 +13,10 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import ServiceNode from './Nodes/Service';
 import EventNode from './Nodes/Event';
+import UserNode from './Nodes/User';
+import StepNode from './Nodes/Step';
 import CommandNode from './Nodes/Command';
+import ExternalSystemNode from './Nodes/ExternalSystem';
 import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
@@ -39,9 +42,19 @@ const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<Collectio
 
 // const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {
 const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground = true, linkTo = 'docs' }: Props) => {
-  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
-
-  const nodeTypes = useMemo(() => ({ services: ServiceNode, events: EventNode, commands: CommandNode }), []);
+  const nodeTypes = useMemo(
+    () => ({
+      services: ServiceNode,
+      events: EventNode,
+      commands: CommandNode,
+      step: StepNode,
+      user: UserNode,
+      actor: UserNode,
+      externalSystem: ExternalSystemNode,
+    }),
+    []
+  );
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const nodeOrigin = [0.5, 0.5];
 
   const handleNodeClick = (_: any, node: Node) => {
@@ -60,7 +73,6 @@ const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground
       nodes={nodes}
       edges={edges}
       fitView
-      nodesDraggable
       onNodesChange={onNodesChange}
       connectionLineType={ConnectionLineType.SmoothStep}
       // @ts-ignore

package/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx

@@ -0,0 +1,79 @@
+import { ServerIcon } from '@heroicons/react/16/solid';
+import { GlobeAmericasIcon } from '@heroicons/react/20/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  step: { id: string; title: string; summary: string; externalSystem: { name: string; summary?: string; url?: string } };
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function ExternalSystemNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, step, showTarget = true, showSource = true } = data as Data;
+  const { externalSystem } = step;
+  const { name, summary, url } = externalSystem;
+
+  return (
+    <div
+      className={classNames(
+        `w-full rounded-md border flex justify-start  bg-white text-black border-pink-500`,
+        mode === 'full' ? 'min-h-[7em]' : 'min-h-[2em]'
+      )}
+    >
+      <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`
+        )}
+      >
+        <GlobeAmericasIcon 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] ">
+            External
+          </span>
+        )}
+      </div>
+      <div className="p-1 min-w-60 max-w-[min-content]">
+        {showTarget && <Handle type="target" position={targetPosition} />}
+        {showSource && <Handle type="source" position={sourcePosition} />}
+        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+          <div className="h-full ">
+            <span className="text-sm font-bold pb-0.5 block w-full">{name}</span>
+            {mode === 'simple' && (
+              <div className="w-full text-right">
+                <span className=" w-full text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">External System</span>
+              </div>
+            )}
+          </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>
+
+            {url && (
+              <div className="grid grid-cols-2 gap-x-4 py-1">
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  URL:{' '}
+                  <a href={url} target="_blank" className="text-purple-500 underline">
+                    {url}
+                  </a>
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -21,9 +21,6 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
 
   const { version, owners = [], sends = [], receives = [], name } = service.data;
 
-  const renderTarget = showTarget;
-  const renderSource = showSource;
-
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-pink-500')}>
       <div
@@ -42,21 +39,12 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
       <div className="p-1 min-w-60 max-w-[min-content]">
         {showTarget && <Handle type="target" position={targetPosition} />}
         {showSource && <Handle type="source" position={sourcePosition} />}
-        {/* {mode === 'full' && (
-        <div className="flex justify-end font-thin space-x-1 border-b border-orange-200  pb-0.5 " style={{ fontSize: '0.2em' }}>
-          <span>Service</span>
-          <ServerIcon className="w-2 h-2 opacity-90" />
-        </div>
-      )} */}
         <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 className="flex justify-end">
-            <span className="text-[8px] text-gray-500 font-light block pt-0.5 pb-0.5 ">View service</span>
-          </div> */}
         </div>
         {mode === 'full' && (
           <div className="divide-y divide-gray-200 ">

package/src/components/MDX/NodeGraph/Nodes/Step.tsx

@@ -0,0 +1,69 @@
+import { EnvelopeIcon } from '@heroicons/react/16/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  step: { id: string; title: string; summary: string };
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function StepNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, step, showTarget = true, showSource = true } = data as Data;
+
+  const { title, summary } = step;
+
+  const renderTarget = showTarget || true;
+  const renderSource = showSource || true;
+
+  return (
+    <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400 min-h-[3em]')}>
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-gray-700 to-gray-700 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500',
+          `border-r-[1px] border-gray-500`
+        )}
+      >
+        {mode === 'full' && (
+          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+            Step
+          </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} />}
+
+        {!summary && (
+          <div className="h-full flex items-center">
+            <span className="text-sm font-bold block pb-0.5">{title}</span>
+          </div>
+        )}
+
+        {summary && (
+          <>
+            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+              <span className="text-xs font-bold block pb-0.5">{title}</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>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MDX/NodeGraph/Nodes/User.tsx

@@ -0,0 +1,79 @@
+import { UserIcon } from '@heroicons/react/20/solid';
+import { Handle } from 'reactflow';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  step: { id: string; title: string; summary: string; name: string; actor: { name: string } };
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function UserNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, step, showTarget = true, showSource = true } = data as Data;
+
+  const { summary, actor: { name } = {} } = step;
+
+  const renderTarget = showTarget || true;
+  const renderSource = showSource || true;
+
+  return (
+    <div
+      className={classNames(
+        `w-full rounded-md border flex justify-start  bg-white text-black border-yellow-400`,
+        mode === 'full' ? 'min-h-[5em]' : 'min-h-[2em]'
+      )}
+    >
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-yellow-400 to-yellow-600 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500',
+          `border-r-[1px] border-yellow-500`
+        )}
+      >
+        <UserIcon 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] ">
+            ACTOR
+          </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} />}
+
+        {(!summary || mode !== 'full') && (
+          <div className="h-full ">
+            <span className="text-sm font-bold block pb-0.5 block w-full">{name}</span>
+            {mode === 'simple' && (
+              <div className="w-full text-right">
+                <span className=" w-full text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Event</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {summary && mode === 'full' && (
+          <>
+            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+              <span className="text-xs font-bold block pb-0.5">{name}</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>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/SideBars/DomainSideBar.astro

@@ -42,7 +42,7 @@ const ownersList = owners.map((o) => ({
       client:load
     />
     <OwnersList
-      title={`Service owners (${ownersList.length})`}
+      title={`Domain owners (${ownersList.length})`}
       owners={ownersList}
       emptyMessage={`This domain does not have any documented owners.`}
       client:load