@eventcatalog/core 2.57.1 → 2.58.0

package/dist/analytics/analytics.cjs

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-6PT76NQN.js";
-import "../chunk-76HGJTBT.js";
+} from "../chunk-GKUPYLJL.js";
+import "../chunk-PAKFTVIV.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.1";
+var version = "2.58.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-7BNIEBLU.js";
-import "../chunk-6PT76NQN.js";
-import "../chunk-76HGJTBT.js";
+} from "../chunk-TIETK4WY.js";
+import "../chunk-GKUPYLJL.js";
+import "../chunk-PAKFTVIV.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-6PT76NQN.js → chunk-GKUPYLJL.js}

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

package/dist/{chunk-76HGJTBT.js → chunk-PAKFTVIV.js}

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

package/dist/{chunk-7BNIEBLU.js → chunk-TIETK4WY.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-76HGJTBT.js";
+} from "./chunk-PAKFTVIV.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.1";
+var version = "2.58.0";
 
 // 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-7BNIEBLU.js";
-import "./chunk-6PT76NQN.js";
+} from "./chunk-TIETK4WY.js";
+import "./chunk-GKUPYLJL.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-76HGJTBT.js";
+} from "./chunk-PAKFTVIV.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/public/icons/graphql.svg

@@ -0,0 +1 @@
+<svg viewBox="-16 0 288 288" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill-rule="evenodd"> <path d="M152.575995,32.9634453 L211.722058,67.1124427 C213.387503,65.348329 215.332859,63.7907081 217.539734,62.5088708 C229.806457,55.4573413 245.452038,59.6441869 252.577021,71.9109101 C259.62855,84.1776333 255.441705,99.8232143 243.174982,106.948197 C240.984974,108.207124 238.684929,109.10784 236.343812,109.66832 L236.343812,177.99302 C238.659582,178.554683 240.934429,179.449686 243.101528,180.695443 C255.441705,187.820426 259.62855,203.466007 252.503568,215.73273 C245.452038,227.999453 229.733004,232.186299 217.46628,225.13477 C215.024105,223.730884 212.902189,221.983449 211.125456,219.988103 L152.340162,253.928803 C153.180519,256.46808 153.635248,259.18431 153.635248,262.008393 C153.635248,276.111452 142.176512,287.64364 128,287.64364 C113.823488,287.64364 102.364752,276.184905 102.364752,262.008393 C102.364752,259.488481 102.726802,257.054441 103.40181,254.755362 L44.2714887,220.615454 C42.6238257,222.34493 40.705394,223.873378 38.5337196,225.13477 C26.193543,232.186299 10.547962,227.999453 3.49643248,215.73273 C-3.55509701,203.466007 0.631748621,187.820426 12.8984718,180.695443 C15.0673397,179.448669 17.3418356,178.553222 19.6561876,177.991646 L19.6561876,109.66832 C17.3150714,109.10784 15.0150257,108.207124 12.8250184,106.948197 C0.558295189,99.8966677 -3.62855044,84.1776333 3.42297904,71.9109101 C10.4745085,59.6441869 26.193543,55.4573413 38.4602662,62.5088708 C40.6551374,63.7837361 42.5913269,65.3313931 44.2507413,67.0836756 L103.41276,32.9254664 C102.730718,30.6154532 102.364752,28.1687503 102.364752,25.6352478 C102.364752,11.4587354 113.823488,0 128,0 C142.176512,0 153.635248,11.4587354 153.635248,25.6352478 C153.635248,28.1826393 153.265258,30.6422768 152.575995,32.9634453 Z M146.413638,43.4848713 L205.700555,77.715193 C203.867899,84.1516888 204.540515,91.2885638 208.137694,97.5461579 C211.746601,103.824151 217.625783,107.985785 224.150543,109.607654 L224.150543,178.017842 C223.818032,178.099463 223.48718,178.187674 223.158201,178.282419 L145.72529,44.1686182 C145.959017,43.9450469 146.18851,43.7170876 146.413638,43.4848713 Z M110.29093,44.1841203 L32.8593279,178.295656 C32.524559,178.19844 32.1878611,178.108015 31.8494573,178.024438 L31.8494573,109.607654 C38.3742168,107.985785 44.2533992,103.824151 47.8623055,97.5461579 C51.466599,91.276189 52.1347497,84.1234583 50.2885426,77.6770157 L109.558747,43.4563434 C109.797913,43.7038019 110.042027,43.9464469 110.29093,44.1841203 Z M135.162749,50.259763 L212.576817,184.340928 C210.844241,185.99279 209.317376,187.91755 208.064241,190.097482 C206.818484,192.264581 205.923481,194.539429 205.361818,196.855198 L50.6395564,196.855198 C50.0779798,194.540846 49.1825333,192.26635 47.9357589,190.097482 C46.6776713,187.931497 45.1539248,186.017428 43.4300297,184.372667 L120.858821,50.2659993 C123.124941,50.9200822 125.520915,51.2704957 128,51.2704957 C130.486952,51.2704957 132.890265,50.9178547 135.162749,50.259763 Z M146.958084,244.737995 L205.860107,210.729899 C205.683398,210.174924 205.525483,209.614096 205.38664,209.048468 L50.6067643,209.048468 C50.5246888,209.380792 50.4360084,209.711472 50.3407792,210.040295 L109.531782,244.215239 C114.192298,239.378545 120.739739,236.373145 128,236.373145 C135.518379,236.373145 142.272352,239.596041 146.958084,244.737995 Z" fill="#E535AB"> </path> </g> </g></svg>

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/Lists/SpecificationsList.astro

@@ -17,6 +17,7 @@ const specs = getSpecificationsForService(collectionItem as Service);
 
 const openAPISpecifications = specs.filter((spec) => spec.type === 'openapi');
 const asyncAPISpecifications = specs.filter((spec) => spec.type === 'asyncapi');
+const graphQLSpecifications = specs.filter((spec) => spec.type === 'graphql');
 ---
 
 <div class="space-y-2 mb-8">
@@ -49,4 +50,18 @@ const asyncAPISpecifications = specs.filter((spec) => spec.type === 'asyncapi');
         </a>
       ))
   }
+  {
+    graphQLSpecifications.length > 0 &&
+      graphQLSpecifications.map((spec) => (
+        <a
+          href={buildUrl(
+            `/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/graphql/${spec.filenameWithoutExtension}`
+          )}
+          class="px-1 text-sm font-light flex items-center space-x-1 hover:underline rounded-md hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white"
+        >
+          <img src={buildUrl('/icons/graphql.svg', true)} class="h-4 w-4" />
+          <span>{spec.name}</span>
+        </a>
+      ))
+  }
 </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