@eventcatalog/core 2.57.0 → 2.57.2

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-24JFJA4V.js";
-import "../chunk-6ILF3VK6.js";
+} from "../chunk-IZVKIJ4Q.js";
+import "../chunk-C2EHTPRH.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.57.0";
+var version = "2.57.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-NVY3KN4D.js";
-import "../chunk-24JFJA4V.js";
-import "../chunk-6ILF3VK6.js";
+} from "../chunk-A7SEN2P6.js";
+import "../chunk-IZVKIJ4Q.js";
+import "../chunk-C2EHTPRH.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-NVY3KN4D.js → chunk-A7SEN2P6.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-24JFJA4V.js";
+} from "./chunk-IZVKIJ4Q.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-6ILF3VK6.js → chunk-C2EHTPRH.js}

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

package/dist/{chunk-24JFJA4V.js → chunk-IZVKIJ4Q.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-NVY3KN4D.js";
-import "./chunk-24JFJA4V.js";
+} from "./chunk-A7SEN2P6.js";
+import "./chunk-IZVKIJ4Q.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-6ILF3VK6.js";
+} from "./chunk-C2EHTPRH.js";
 import {
   getProjectOutDir,
   isAuthEnabled,

package/eventcatalog/astro.config.mjs

@@ -2,6 +2,7 @@ import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import mdx from '@astrojs/mdx';
 import react from '@astrojs/react';
+import { searchForWorkspaceRoot } from 'vite';
 import { mermaid } from "./src/remark-plugins/mermaid"
 import { plantuml } from "./src/remark-plugins/plantuml"
 import { join } from 'node:path';
@@ -94,7 +95,11 @@ export default defineConfig({
     },
     server: {
       fs: {
-        allow: ['..', './node_modules/@fontsource']
+        allow: [
+          '..', 
+          './node_modules/@fontsource',
+          searchForWorkspaceRoot(process.cwd()),
+        ]
       }
     },
     worker: {

package/eventcatalog/src/components/Lists/PillListFlat.tsx

@@ -1,7 +1,8 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { getIconForCollection as getIconForCollectionOriginal } from '@utils/collections/icons';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import * as icons from 'lucide-react'; // Import all icons
 
 import './PillListFlat.styles.css';
 
@@ -14,17 +15,80 @@ interface Props {
     label: string;
     badge?: string;
     href?: string;
+    target?: '_blank' | '_self';
     tag?: string;
     color?: string;
     collection?: string;
     description?: string;
     icon?: string;
+    subgroup?: string | undefined;
   }[];
   emptyMessage?: string;
 }
 
 const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...props }: Props) => {
   const getIconForCollection = useMemo(() => getIconForCollectionOriginal, []);
+  const [collapsedSubgroups, setCollapsedSubgroups] = useState<Set<string>>(new Set());
+
+  const groupedPills = useMemo(() => {
+    const grouped = new Map<string, typeof pills>();
+    const ungrouped: typeof pills = [];
+
+    pills.forEach((pill) => {
+      if (pill.subgroup) {
+        if (!grouped.has(pill.subgroup)) {
+          grouped.set(pill.subgroup, []);
+        }
+        grouped.get(pill.subgroup)!.push(pill);
+      } else {
+        ungrouped.push(pill);
+      }
+    });
+
+    return { grouped, ungrouped };
+  }, [pills]);
+
+  const toggleSubgroup = (subgroupName: string) => {
+    setCollapsedSubgroups((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(subgroupName)) {
+        newSet.delete(subgroupName);
+      } else {
+        newSet.add(subgroupName);
+      }
+      return newSet;
+    });
+  };
+
+  const renderPillItem = (item: (typeof pills)[0]) => {
+    const href = item.href ?? '#';
+    const Icon = item.collection ? getIconForCollection(item.collection) : null;
+    const PillIcon = item.icon ? (icons as any)[item.icon] : null;
+
+    return (
+      <li
+        className=" has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
+        key={item.href}
+      >
+        <a className={`leading-3`} href={href} target={item.target ?? '_self'}>
+          <span className="space-x-2 flex items-center">
+            {Icon && !PillIcon && <Icon className="h-4 w-4 shrink-0" />}
+            {PillIcon && <PillIcon className="h-4 w-4 shrink-0" />}
+            <span className="font-light text-sm truncate">
+              {item.label} {item.tag && <>({item.tag})</>}
+            </span>
+            {item.label.length > 24 && (
+              <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+                {item.label} {item.tag && <>({item.tag})</>}
+              </span>
+            )}
+          </span>
+          {item.description && <span className="text-[9px] block ml-6 mt-1 leading-0">{item.description}</span>}
+        </a>
+      </li>
+    );
+  };
+
   return (
     <div className="">
       <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
@@ -34,39 +98,56 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
             <ChevronDownIcon className="size-5 ml-2 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
           </DisclosureButton>
           <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
-            <ul role="list" className="space-y-2">
-              {pills.map((item) => {
-                const href = item.href ?? '#';
-                const Icon = item.collection ? getIconForCollection(item.collection) : null;
+            <div className="space-y-2">
+              {groupedPills.ungrouped.length > 0 && (
+                <ul role="list" className="space-y-2">
+                  {groupedPills.ungrouped.map(renderPillItem)}
+                </ul>
+              )}
 
+              {Array.from(groupedPills.grouped.entries()).map(([subgroupName, subgroupPills]) => {
+                const isCollapsed = collapsedSubgroups.has(subgroupName);
                 return (
-                  <li
-                    className=" has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
-                    key={item.href}
-                  >
-                    <a className={`leading-3`} href={href}>
-                      <span className="space-x-2 flex items-center">
-                        {Icon && <Icon className="h-4 w-4 shrink-0" />}
-                        <span className="font-light text-sm truncate">
-                          {item.label} {item.tag && <>({item.tag})</>}
-                        </span>
-                        {item.label.length > 24 && (
-                          <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
-                            {item.label} ({item.tag})
-                          </span>
-                        )}
-                      </span>
-                      {item.description && <span className="text-[9px] block ml-6 mt-1 leading-0">{item.description}</span>}
-                    </a>
-                  </li>
+                  <div key={subgroupName} className="space-y-">
+                    <div className="flex items-center">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleSubgroup(subgroupName);
+                        }}
+                        className="p-1 hover:bg-gray-100 rounded-md"
+                      >
+                        <div className={`transition-transform duration-150 ${isCollapsed ? '' : 'rotate-180'}`}>
+                          <ChevronDownIcon className="h-3 w-3 text-gray-500" />
+                        </div>
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleSubgroup(subgroupName);
+                        }}
+                        className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md text-gray-900 uppercase"
+                      >
+                        {subgroupName} ({subgroupPills.length})
+                      </button>
+                    </div>
+                    <div
+                      className={`overflow-hidden transition-[height] duration-150 ease-out ${isCollapsed ? 'h-0' : 'h-auto'}`}
+                    >
+                      <ul role="list" className="space-y-2 border-l border-gray-200/80 ml-[9px] pl-4 pt-2">
+                        {subgroupPills.map(renderPillItem)}
+                      </ul>
+                    </div>
+                  </div>
                 );
               })}
+
               {pills.length === 0 && emptyMessage && (
-                <li className="inline mr-2 leading-tight text-xs">
+                <div className="inline mr-2 leading-tight text-xs">
                   <span className="text-gray-400">{emptyMessage}</span>
-                </li>
+                </div>
               )}
-            </ul>
+            </div>
           </DisclosurePanel>
         </Disclosure>
       </div>

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

@@ -0,0 +1,158 @@
+---
+import type { ComponentType } from 'react';
+import * as Icons from '@heroicons/react/24/outline';
+import * as SolidIcons from '@heroicons/react/24/solid';
+import * as LucideIcons from 'lucide-react';
+
+interface AttachmentObject {
+  url: string;
+  title?: string;
+  type?: string;
+  description?: string;
+  summary?: string;
+  icon?: string;
+}
+
+type Attachment = string | AttachmentObject;
+
+interface Props {
+  title?: string;
+  description?: string;
+  columns?: number;
+  data: {
+    attachments: Attachment[];
+  };
+}
+
+const { title = 'Attachments', description, columns = 2, ...props } = Astro.props;
+const { attachments } = props.data;
+
+function getIconForAttachment(attachment: AttachmentObject): ComponentType<{ className?: string }> | null {
+  // If custom icon is provided, try to find it
+  if (attachment.icon) {
+    const customIcon =
+      (LucideIcons as any)[attachment.icon] || (Icons as any)[attachment.icon] || (SolidIcons as any)[attachment.icon];
+    if (customIcon) return customIcon;
+  }
+
+  // Default to link icon for all attachments
+  return Icons.LinkIcon;
+}
+
+function normalizeAttachment(attachment: Attachment): AttachmentObject {
+  if (typeof attachment === 'string') {
+    // Extract filename from URL for title
+    const urlParts = attachment.split('/');
+    const filename = urlParts[urlParts.length - 1];
+    const title = filename.includes('.') ? filename.split('.')[0] : filename || 'Link';
+
+    return {
+      url: attachment,
+      title: title.replace(/[-_]/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()),
+    };
+  }
+  return attachment;
+}
+
+function isExternalUrl(url: string): boolean {
+  return url.startsWith('http://') || url.startsWith('https://');
+}
+
+const normalizedAttachments = attachments.map(normalizeAttachment);
+
+// Group attachments by type
+const groupedAttachments = normalizedAttachments.reduce(
+  (groups, attachment) => {
+    const type = attachment.type || 'Other';
+    if (!groups[type]) {
+      groups[type] = [];
+    }
+    groups[type].push(attachment);
+    return groups;
+  },
+  {} as Record<string, AttachmentObject[]>
+);
+
+const sortedGroups = Object.entries(groupedAttachments).sort(([a], [b]) => {
+  if (a === 'Other') return 1;
+  if (b === 'Other') return -1;
+  return a.localeCompare(b);
+});
+---
+
+<section class="not-prose my-8">
+  {title && <h3 class="flex items-center gap-2 text-3xl font-bold mb-4">{title}</h3>}
+
+  {description && <p class="text-gray-600 mb-6 prose prose-md">{description}</p>}
+
+  {
+    normalizedAttachments.length === 0 ? (
+      <div class="text-gray-500 text-sm italic">No attachments available.</div>
+    ) : (
+      <div class="space-y-6">
+        {sortedGroups.map(([groupType, groupAttachments], index) => (
+          <div key={groupType + index}>
+            <h4 class="text-sm font-medium text-gray-900 mb-3 uppercase tracking-wider">
+              {groupType} ({groupAttachments.length})
+            </h4>
+            <div class={`grid grid-cols-1 ${columns === 1 ? '' : `md:grid-cols-${Math.min(columns, 3)}`} gap-4`}>
+              {groupAttachments.map((attachment) => {
+                const IconComponent = getIconForAttachment(attachment);
+                const isExternal = isExternalUrl(attachment.url);
+
+                return (
+                  <a
+                    href={attachment.url}
+                    target={isExternal ? '_blank' : '_self'}
+                    rel={isExternal ? 'noopener noreferrer' : undefined}
+                    class="group block bg-white border border-gray-200 rounded-lg p-4 transition-all duration-200 hover:shadow-md hover:border-purple-300 hover:bg-purple-50/30 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                  >
+                    <div class="flex items-start gap-3">
+                      <div class="flex-shrink-0 p-2 bg-gray-100 rounded-lg group-hover:bg-purple-100 transition-colors duration-200">
+                        {IconComponent && <IconComponent className="w-5 h-5 text-gray-600 group-hover:text-purple-600" />}
+                      </div>
+
+                      <div class="flex-grow min-w-0">
+                        <div class="flex items-center gap-2">
+                          <h5 class="text-sm font-medium text-gray-900 group-hover:text-purple-900 truncate">
+                            {attachment.title || 'Attachment'}
+                          </h5>
+                          {isExternal && (
+                            <Icons.ArrowTopRightOnSquareIcon className="w-3 h-3 text-gray-400 group-hover:text-purple-500 flex-shrink-0" />
+                          )}
+                        </div>
+
+                        {attachment.summary && (
+                          <p class="mt-1 text-xs text-gray-600 group-hover:text-purple-700 line-clamp-2">{attachment.summary}</p>
+                        )}
+
+                        {attachment.description && (
+                          <p class="mt-1 text-xs text-gray-600 group-hover:text-purple-700 line-clamp-2">
+                            {attachment.description}
+                          </p>
+                        )}
+
+                        <div class="mt-2 text-xs text-gray-400 group-hover:text-purple-500 truncate">
+                          {attachment.url.replace(/^https?:\/\//, '')}
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+</section>
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/eventcatalog/src/components/MDX/Tiles/Tile.astro

@@ -23,20 +23,36 @@ function startsWithProtocol(str: string) {
 }
 ---
 
-<a
-  href={startsWithProtocol(href) ? href : buildUrl(href)}
-  target={openWindow ? '_blank' : '_self'}
-  class="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"
->
-  <div class="flex flex-col h-full space-y-8">
-    {IconComponent && <IconComponent className={`w-6 h-6 ${iconColor}`} />}
-    <div>
-      <h2 class="text-gray-800 text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300">
-        {title}
-      </h2>
-      <p class="text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm">
-        {description}
-      </p>
+<div class="group">
+  <!-- Card with just the icon -->
+  <a
+    href={startsWithProtocol(href) ? href : buildUrl(href)}
+    target={openWindow ? '_blank' : '_self'}
+    class="block relative bg-white border border-gray-200 rounded-xl p-8 h-48 transition-all duration-300 ease-out hover:border-purple-300 hover:shadow-lg hover:shadow-purple-500/10 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 overflow-hidden"
+  >
+    <!-- Icon centered in card with grid background -->
+    <div class="relative h-full flex items-center justify-center">
+      <!-- Squared paper grid behind icon -->
+      <div
+        class="absolute inset-0 opacity-15"
+        style="background-image:
+        linear-gradient(rgba(147, 51, 234, 0.2) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(147, 51, 234, 0.2) 1px, transparent 1px);
+        background-size: 16px 16px;"
+      >
+      </div>
+
+      {IconComponent && <IconComponent className="relative w-16 h-16 text-purple-600 stroke-1" />}
     </div>
+  </a>
+
+  <!-- Title and description outside card -->
+  <div class="mt-4 space-y-0">
+    <h2 class="text-gray-900 text-lg font-semibold">
+      {title}
+    </h2>
+    <p class="text-gray-600 text-sm leading-relaxed">
+      {description}
+    </p>
   </div>
-</a>
+</div>

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

@@ -2,9 +2,9 @@
 const { title, columns = 2 } = Astro.props;
 ---
 
-<section class="not-prose">
-  {title && <h2 class="text-2xl font-bold text-gray-800 mb-4">{title}</h2>}
-  <div class={`grid grid-cols-1 md:grid-cols-${columns} gap-4 w-full not-prose`}>
+<section class="not-prose my-8">
+  {title && <h2 class="text-2xl font-bold text-gray-800 mb-6">{title}</h2>}
+  <div class={`grid grid-cols-1 md:grid-cols-${columns} gap-6 w-full not-prose`}>
     <slot />
   </div>
 </section>

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

@@ -13,6 +13,7 @@ import Admonition from '@components/MDX/Admonition';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI.astro';
 import AsyncAPI from '@components/MDX/AsyncAPI/AsyncAPI.astro';
 import ChannelInformation from '@components/MDX/ChannelInformation/ChannelInformation';
+import Attachments from '@components/MDX/Attachments.astro';
 import MessageTable from '@components/MDX/MessageTable/MessageTable.astro';
 import ResourceGroupTable from '@components/MDX/ResourceGroupTable/ResourceGroupTable.astro';
 import EntityPropertiesTable from '@components/MDX/EntityPropertiesTable/EntityPropertiesTable.astro';
@@ -34,6 +35,7 @@ import RemoteSchema from '@components/MDX/RemoteSchema.astro';
 
 const components = (props: any) => {
   return {
+    Attachments: (mdxProp: any) => jsx(Attachments, { ...props, ...mdxProp }),
     Accordion,
     AccordionGroup,
     Admonition,

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

@@ -27,6 +27,19 @@ const parameters = Object.keys(channelParameters).map((key) => ({
   ...channelParameters[key],
 }));
 
+const attachments = channel.data.attachments || [];
+
+const attachmentsList = attachments.map((a) => {
+  const attachmentIsURL = typeof a === 'string';
+  return {
+    label: attachmentIsURL ? a : (a.title ?? a.url),
+    href: attachmentIsURL ? a : a.url,
+    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
+    target: '_blank' as const,
+    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
+  };
+});
+
 const paramsList = parameters.map((param) => ({
   label: param.key,
   description: param?.description,
@@ -139,6 +152,18 @@ const shouldRenderSideBarSection = (section: string) => {
       )
     }
 
+    {
+      channel.data.attachments && shouldRenderSideBarSection('attachments') && (
+        <PillListFlat
+          title={`Attachments (${attachmentsList.length})`}
+          pills={attachmentsList}
+          emptyMessage={`This channel does not have any attachments.`}
+          color="pink"
+          client:load
+        />
+      )
+    }
+
     {
       ownersList.length > 0 && shouldRenderSideBarSection('owners') && (
         <OwnersList

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

@@ -25,6 +25,8 @@ const subDomains = (domain.data.domains as CollectionEntry<'domains'>[]) || [];
 // @ts-ignore
 const entities = (domain.data.entities as CollectionEntry<'entities'>[]) || [];
 
+const attachments = domain.data.attachments || [];
+
 const ubiquitousLanguage = await getUbiquitousLanguage(domain);
 const hasUbiquitousLanguage = ubiquitousLanguage.length > 0;
 const ubiquitousLanguageDictionary = hasUbiquitousLanguage ? ubiquitousLanguage[0].data.dictionary : [];
@@ -106,6 +108,18 @@ const ownersList = filteredOwners.map((o) => ({
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
+const attachmentsList = attachments.map((a) => {
+  const attachmentIsURL = typeof a === 'string';
+
+  return {
+    label: attachmentIsURL ? a : (a.title ?? a.url),
+    href: attachmentIsURL ? a : a.url,
+    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
+    target: '_blank' as const,
+    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
+  };
+});
+
 const shouldRenderSideBarSection = (section: string) => {
   if (!domain.data.detailsPanel) {
     return true;
@@ -208,6 +222,17 @@ const shouldRenderSideBarSection = (section: string) => {
         <VersionList versions={domain.data.versions} collectionItem={domain} />
       )
     }
+    {
+      domain.data.attachments && shouldRenderSideBarSection('attachments') && (
+        <PillListFlat
+          title={`Attachments (${attachmentsList.length})`}
+          pills={attachmentsList}
+          emptyMessage={`This domain does not have any attachments.`}
+          color="pink"
+          client:load
+        />
+      )
+    }
     {
       domain.data.repository && shouldRenderSideBarSection('repository') && (
         <RepositoryList repository={domain.data.repository?.url} language={domain.data.repository?.language} />

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

@@ -23,6 +23,19 @@ const services = (entity.data.services as CollectionEntry<'services'>[]) || [];
 // @ts-ignore
 const domains = (entity.data.domains as CollectionEntry<'domains'>[]) || [];
 
+const attachments = entity.data.attachments || [];
+
+const attachmentsList = attachments.map((a) => {
+  const attachmentIsURL = typeof a === 'string';
+  return {
+    label: attachmentIsURL ? a : (a.title ?? a.url),
+    href: attachmentIsURL ? a : a.url,
+    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
+    target: '_blank' as const,
+    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
+  };
+});
+
 const ownersList = filteredOwners.map((o) => ({
   label: o.data.name,
   type: o.collection,
@@ -87,6 +100,17 @@ const shouldRenderSideBarSection = (section: string) => {
         <VersionList versions={entity.data.versions} collectionItem={entity} />
       )
     }
+    {
+      entity.data.attachments && shouldRenderSideBarSection('attachments') && (
+        <PillListFlat
+          title={`Attachments (${attachmentsList.length})`}
+          pills={attachmentsList}
+          emptyMessage={`This entity does not have any attachments.`}
+          color="pink"
+          client:load
+        />
+      )
+    }
     {
       filteredOwners.length > 0 && shouldRenderSideBarSection('owners') && (
         <OwnersList

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

@@ -1,6 +1,7 @@
 ---
 import OwnersList from '@components/Lists/OwnersList';
 import VersionList from '@components/Lists/VersionList.astro';
+import PillListFlat from '@components/Lists/PillListFlat';
 import { buildUrl } from '@utils/url-builder';
 import { getOwner } from '@utils/collections/owners';
 import type { CollectionEntry } from 'astro:content';
@@ -30,6 +31,19 @@ const ownersList = filteredOwners.map((o) => ({
 
 const isRSSEnabled = config.rss?.enabled;
 
+const attachments = flow.data.attachments || [];
+
+const attachmentsList = attachments.map((a) => {
+  const attachmentIsURL = typeof a === 'string';
+  return {
+    label: attachmentIsURL ? a : (a.title ?? a.url),
+    href: attachmentIsURL ? a : a.url,
+    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
+    target: '_blank' as const,
+    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
+  };
+});
+
 const shouldRenderSideBarSection = (section: string) => {
   if (!flow.data.detailsPanel) {
     return true;
@@ -51,6 +65,17 @@ const shouldRenderSideBarSection = (section: string) => {
         <VersionList versions={flow.data.versions} collectionItem={flow} />
       )
     }
+    {
+      flow.data.attachments && shouldRenderSideBarSection('attachments') && (
+        <PillListFlat
+          title={`Attachments (${attachmentsList.length})`}
+          pills={attachmentsList}
+          emptyMessage={`This flow does not have any attachments.`}
+          color="pink"
+          client:load
+        />
+      )
+    }
 
     {
       shouldRenderSideBarSection('owners') && (

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

@@ -29,6 +29,19 @@ const filteredOwners = owners.filter((o) => o !== undefined);
 
 const resourceGroups = message.data?.resourceGroups || [];
 
+const attachments = message.data.attachments || [];
+
+const attachmentsList = attachments.map((a) => {
+  const attachmentIsURL = typeof a === 'string';
+  return {
+    label: attachmentIsURL ? a : (a.title ?? a.url),
+    href: attachmentIsURL ? a : a.url,
+    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
+    target: '_blank' as const,
+    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
+  };
+});
+
 const producerList = producers.map((p) => ({
   label: `${p.data.name}`,
   tag: `v${p.data.version}`,
@@ -153,6 +166,18 @@ const shouldRenderSideBarSection = (section: string) => {
       )
     }
 
+    {
+      message.data.attachments && shouldRenderSideBarSection('attachments') && (
+        <PillListFlat
+          title={`Attachments (${attachmentsList.length})`}
+          pills={attachmentsList}
+          emptyMessage={`This ${type} does not have any attachments.`}
+          color="pink"
+          client:load
+        />
+      )
+    }
+
     {
       ownersList.length > 0 && shouldRenderSideBarSection('owners') && (
         <OwnersList

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

@@ -35,6 +35,19 @@ const resourceGroups = service.data?.resourceGroups || [];
 
 const domainsServiceBelongsTo = await getDomainsForService(service);
 
+const attachments = service.data.attachments || [];
+
+const attachmentsList = attachments.map((a) => {
+  const attachmentIsURL = typeof a === 'string';
+  return {
+    label: attachmentIsURL ? a : (a.title ?? a.url),
+    href: attachmentIsURL ? a : a.url,
+    icon: attachmentIsURL ? 'ExternalLinkIcon' : (a.icon ?? 'ExternalLinkIcon'),
+    target: '_blank' as const,
+    subgroup: attachmentIsURL ? undefined : (a.type ?? ''),
+  };
+});
+
 const sendsList = sends
   .sort((a, b) => a.collection.localeCompare(b.collection))
   .map((p) => ({
@@ -141,6 +154,18 @@ const shouldRenderSideBarSection = (section: string) => {
       )
     }
 
+    {
+      service.data.attachments && shouldRenderSideBarSection('attachments') && (
+        <PillListFlat
+          title={`Attachments (${attachmentsList.length})`}
+          pills={attachmentsList}
+          emptyMessage={`This service does not have any attachments.`}
+          color="pink"
+          client:load
+        />
+      )
+    }
+
     {
       service.data.specifications && shouldRenderSideBarSection('specifications') && (
         <SpecificationsList collectionItem={service} />

package/eventcatalog/src/content.config.ts

@@ -147,6 +147,20 @@ const baseSchema = z.object({
     ])
     .optional(),
   visualiser: z.boolean().optional(),
+  attachments: z
+    .array(
+      z.union([
+        z.string().url(), // simple case
+        z.object({
+          url: z.string().url(),
+          title: z.string().optional(),
+          type: z.string().optional(), // e.g. "architecture-record", "diagram"
+          description: z.string().optional(),
+          icon: z.string().optional(),
+        }),
+      ])
+    )
+    .optional(),
   // Used by eventcatalog
   versions: z.array(z.string()).optional(),
   latestVersion: z.string().optional(),
@@ -259,6 +273,7 @@ const messageDetailsPanelPropertySchema = z.object({
   repository: detailPanelPropertySchema.optional(),
   owners: detailPanelPropertySchema.optional(),
   changelog: detailPanelPropertySchema.optional(),
+  attachments: detailPanelPropertySchema.optional(),
 });
 
 const events = defineCollection({
@@ -411,6 +426,7 @@ const domains = defineCollection({
           versions: detailPanelPropertySchema.optional(),
           owners: detailPanelPropertySchema.optional(),
           changelog: detailPanelPropertySchema.optional(),
+          attachments: detailPanelPropertySchema.optional(),
         })
         .optional(),
     })
@@ -451,6 +467,7 @@ const channels = defineCollection({
           repository: detailPanelPropertySchema.optional(),
           owners: detailPanelPropertySchema.optional(),
           changelog: detailPanelPropertySchema.optional(),
+          attachments: detailPanelPropertySchema.optional(),
         })
         .optional(),
     })
@@ -522,6 +539,7 @@ const entities = defineCollection({
           versions: detailPanelPropertySchema.optional(),
           owners: detailPanelPropertySchema.optional(),
           changelog: detailPanelPropertySchema.optional(),
+          attachments: detailPanelPropertySchema.optional(),
         })
         .optional(),
     })

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

@@ -267,17 +267,37 @@ nodeGraphs.push({
             <h2 class="text-lg pt-2 text-gray-500 font-light">{props.data.summary}</h2>
             {
               badges && (
-                <div class="flex flex-wrap py-2 pt-4">
+                <div class="flex flex-wrap gap-3 py-4">
                   {badges.map((badge: any) => {
                     return (
-                      <a href={badge.url || '#'} class="pb-2">
+                      <a href={badge.url || '#'} class="group transition-all duration-200 hover:scale-105">
                         <span
                           id={badge.id || ''}
-                          class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2  bg-gradient-to-b  from-${badge.backgroundColor}-100 to-${badge.backgroundColor}-200 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
+                          class={`
+                            inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
+                            bg-${badge.backgroundColor || 'white'}-50 border border-${badge.backgroundColor || 'gray'}-200
+                            text-${badge.textColor || 'gray'}-700 shadow-sm
+                            hover:bg-${badge.backgroundColor || 'purple'}-100 hover:border-${badge.backgroundColor || 'purple'}-300
+                            hover:shadow-md hover:text-${badge.textColor || 'purple'}-800
+                            transition-all duration-200 ease-out
+                            ${badge.class ? badge.class : ''}
+                          `}
                         >
-                          {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
-                          {badge.iconURL && <img src={badge.iconURL} class="w-5 h-5 inline-block " />}
-                          <span>{badge.content}</span>
+                          {badge.icon && (
+                            <badge.icon
+                              className={`w-4 h-4 flex-shrink-0 text-${badge.textColor || 'gray'}-600 group-hover:text-${badge.textColor || 'purple'}-700 transition-colors duration-200`}
+                            />
+                          )}
+                          {badge.iconURL && (
+                            <img
+                              src={badge.iconURL}
+                              class="w-4 h-4 flex-shrink-0 opacity-80 group-hover:opacity-100 transition-opacity duration-200"
+                              alt=""
+                            />
+                          )}
+                          <span class={`group-hover:text-${badge.textColor || 'purple'}-800 transition-colors duration-200`}>
+                            {badge.content}
+                          </span>
                         </span>
                       </a>
                     );

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.57.0",
+  "version": "2.57.2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,7 +38,7 @@
     "@eventcatalog/license": "^0.0.6",
     "@eventcatalog/linter": "^0.0.2",
     "@eventcatalog/sdk": "^2.2.7",
-    "@eventcatalog/visualizer": "^0.0.5",
+    "@eventcatalog/visualizer": "^0.0.6",
     "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
@@ -129,6 +129,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "tsup": "^8.1.0",
+    "vite": "^7.1.7",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "2.1.6"
   },