@eventcatalog/core 2.57.1 → 2.58.0

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/components/SideNav/ListViewSideBar/components/SpecificationList.tsx

@@ -17,6 +17,7 @@ interface SpecificationListProps {
 const SpecificationList: React.FC<SpecificationListProps> = ({ specifications, id, version }) => {
   const asyncAPISpecifications = specifications.filter((spec) => spec.type === 'asyncapi');
   const openAPISpecifications = specifications.filter((spec) => spec.type === 'openapi');
+  const graphQLSpecifications = specifications.filter((spec) => spec.type === 'graphql');
 
   return (
     <ul className="space-y-0.5 border-l border-gray-200/80 ml-[9px] pl-4">
@@ -56,6 +57,25 @@ const SpecificationList: React.FC<SpecificationListProps> = ({ specifications, i
             </span>
           </a>
         ))}
+      {graphQLSpecifications &&
+        graphQLSpecifications.length > 0 &&
+        graphQLSpecifications.map((spec) => (
+          <a
+            key={`${spec.name}-openapi`}
+            href={buildUrl(`/docs/services/${id}/${version}/graphql/${spec.filenameWithoutExtension}`)}
+            data-active={window.location.href.includes(`docs/services/${id}/${version}/graphql/${spec.filenameWithoutExtension}`)}
+            className={`items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md flex justify-between ${
+              window.location.href.includes(`docs/services/${id}/${version}/graphql/${spec.filenameWithoutExtension}`)
+                ? 'bg-purple-100'
+                : 'hover:bg-purple-100'
+            }`}
+          >
+            <span className="truncate flex items-center gap-1">{spec.name}</span>
+            <span className="text-green-600 ml-2 text-[10px] uppercase font-medium bg-gray-50 px-4 py-0.5 rounded">
+              <img src={buildUrl('/icons/graphql.svg', true)} className="w-4 h-4" alt="GraphQL" />
+            </span>
+          </a>
+        ))}
     </ul>
   );
 };

package/eventcatalog/src/content.config.ts

@@ -103,10 +103,11 @@ const baseSchema = z.object({
       z.object({
         openapiPath: z.string().optional(),
         asyncapiPath: z.string().optional(),
+        graphqlPath: z.string().optional(),
       }),
       z.array(
         z.object({
-          type: z.enum(['openapi', 'asyncapi']),
+          type: z.enum(['openapi', 'asyncapi', 'graphql']),
           path: z.string(),
           name: z.string().optional(),
         })
@@ -147,6 +148,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 +274,7 @@ const messageDetailsPanelPropertySchema = z.object({
   repository: detailPanelPropertySchema.optional(),
   owners: detailPanelPropertySchema.optional(),
   changelog: detailPanelPropertySchema.optional(),
+  attachments: detailPanelPropertySchema.optional(),
 });
 
 const events = defineCollection({
@@ -411,6 +427,7 @@ const domains = defineCollection({
           versions: detailPanelPropertySchema.optional(),
           owners: detailPanelPropertySchema.optional(),
           changelog: detailPanelPropertySchema.optional(),
+          attachments: detailPanelPropertySchema.optional(),
         })
         .optional(),
     })
@@ -451,6 +468,7 @@ const channels = defineCollection({
           repository: detailPanelPropertySchema.optional(),
           owners: detailPanelPropertySchema.optional(),
           changelog: detailPanelPropertySchema.optional(),
+          attachments: detailPanelPropertySchema.optional(),
         })
         .optional(),
     })
@@ -522,6 +540,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]/graphql/[filename].astro

@@ -0,0 +1,177 @@
+---
+import { Code } from 'astro-expressive-code/components';
+import fs from 'fs';
+
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Footer from '@layouts/Footer.astro';
+import { Page } from './_[filename].data';
+import { getAbsoluteFilePathForAstroFile } from '@utils/files';
+import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
+import Admonition from '@components/MDX/Admonition';
+
+import { ServerIcon } from '@heroicons/react/24/outline';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+// Get data
+const { collection, data, filePath, filename } = await Page.getData(Astro);
+
+const fileName = filename || 'schema.graphql';
+const pathToSpec = getAbsoluteFilePathForAstroFile(filePath, fileName);
+const fileExists = fs.existsSync(pathToSpec);
+let content = '';
+
+if (fileExists) {
+  content = fs.readFileSync(pathToSpec, 'utf8');
+}
+
+// Create comprehensive page title
+const pageTitle = `${collection} | ${data.name} | GraphQL Schema`.replace(/^\w/, (c) => c.toUpperCase());
+
+const getServiceBadge = () => {
+  return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' }];
+};
+
+const getGraphQLBadge = () => {
+  return [
+    {
+      backgroundColor: 'white',
+      textColor: 'gray',
+      content: 'GraphQL Schema',
+      iconURL: buildUrl('/icons/graphql.svg', true),
+      class: 'text-black',
+      id: 'graphql-schema-badge',
+    },
+  ];
+};
+
+const badges = [...getServiceBadge(), ...getGraphQLBadge()];
+
+// Index only the latest version
+const pagefindAttributes =
+  data.version === data.latestVersion
+    ? {
+        'data-pagefind-body': '',
+        'data-pagefind-meta': `title:${pageTitle}`,
+      }
+    : {};
+---
+
+<VerticalSideBarLayout title={pageTitle} description={`GraphQL schema for ${data.name}`}>
+  <main class="flex sm:px-8 docs-layout h-full" {...pagefindAttributes}>
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+        <div class="border-b border-gray-200 md:pb-4">
+          <div>
+            <div class="flex justify-between items-start">
+              <div class="flex-1">
+                <h1 class="text-2xl md:text-4xl font-bold text-black mb-2">
+                  {data.name}
+                  <span class="text-gray-900">(v{data.version})</span>
+                </h1>
+                <h2 class="text-lg text-gray-600 font-medium mb-1">GraphQL Schema</h2>
+              </div>
+            </div>
+
+            {
+              badges && (
+                <div class="flex flex-wrap gap-3 py-4">
+                  {badges.map((badge: any) => (
+                    <span
+                      id={badge.id || ''}
+                      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
+                        transition-all duration-200 ease-out
+                        ${badge.class ? badge.class : ''}
+                      `}
+                    >
+                      {badge.icon && <badge.icon className={`w-4 h-4 flex-shrink-0 text-${badge.textColor || 'gray'}-600`} />}
+                      {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
+                      <span>{badge.content}</span>
+                    </span>
+                  ))}
+                </div>
+              )
+            }
+          </div>
+        </div>
+
+        <div data-pagefind-ignore>
+          {
+            data.version !== data.latestVersion && (
+              <div class="rounded-md bg-gradient-to-r from-purple-50 to-purple-100 p-4 not-prose my-4">
+                <div class="flex">
+                  <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-purple-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path
+                        fill-rule="evenodd"
+                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-purple-800">New version found</h3>
+                    <div class="mt-2 text-sm text-purple-700">
+                      <p>
+                        You are looking at a previous version of the service <strong>{data.name}</strong>.{' '}
+                        <a
+                          class="underline hover:text-primary block pt-2"
+                          href={buildUrl(`/docs/${collection}/${data.id}/${data.latestVersion}/graphql/${filename}`)}
+                        >
+                          The latest version of this GraphQL schema is
+                          <span>v{data.latestVersion}</span> &rarr;
+                        </a>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+          }
+        </div>
+
+        {
+          !fileExists && (
+            <Admonition type="warning" title="Schema not found">
+              <p>The GraphQL schema file could not be found at the expected location.</p>
+            </Admonition>
+          )
+        }
+
+        {
+          fileExists && content && (
+            <div class="mt-6">
+              <div class="bg-gray-50 rounded-lg p-4 mb-4">
+                <div class="flex items-center gap-2 mb-2">
+                  <img src={buildUrl('/icons/graphql.svg', true)} class="w-5 h-5" alt="GraphQL" />
+                  <h3 class="text-lg font-semibold text-gray-800">GraphQL Schema</h3>
+                </div>
+                <p class="text-sm text-gray-600">
+                  This schema defines the GraphQL API structure including types, queries, mutations, and subscriptions for{' '}
+                  {data.name}.
+                </p>
+              </div>
+
+              <div class="not-prose overflow-x-auto">
+                <Code code={content} title={`${data.name} v${data.version} - Schema`} lang="graphql" />
+              </div>
+            </div>
+          )
+        }
+
+        <Footer />
+      </div>
+    </div>
+  </main>
+
+  <style is:global>
+    .docs-layout .prose {
+      max-width: none;
+      overflow: auto;
+    }
+  </style>
+</VerticalSideBarLayout>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/graphql/_[filename].data.ts

@@ -0,0 +1,98 @@
+// pages/docs/[type]/[id]/[version]/asyncapi/[filename]/index.page.ts
+import { isSSR, isAuthEnabled } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionTypes, PageTypes } from '@types';
+
+export class Page extends HybridPage {
+  static get prerender(): boolean {
+    return !isSSR();
+  }
+
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isSSR()) {
+      return [];
+    }
+
+    const { pageDataLoader } = await import('@utils/page-loaders/page-data-loader');
+    const { getSpecificationsForService } = await import('@utils/collections/services');
+
+    const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
+    const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
+
+    const hasSpecifications = (item: CollectionEntry<CollectionTypes>) => {
+      const specifications = getSpecificationsForService(item);
+      // Ensure there is at least one 'asyncapi' specification
+      return specifications && specifications.some((spec) => spec.type === 'graphql');
+    };
+
+    const filteredItems = allItems.map((items) => items.filter(hasSpecifications));
+
+    return filteredItems.flatMap((items, index) =>
+      items.flatMap((item) => {
+        const asyncApiSpecifications = getSpecificationsForService(item).filter((spec) => spec.type === 'graphql');
+
+        return asyncApiSpecifications.map((spec) => ({
+          params: {
+            type: itemTypes[index],
+            id: item.data.id,
+            version: item.data.version,
+            filename: spec.filenameWithoutExtension || spec.type,
+          },
+          props: {
+            type: itemTypes[index],
+            filenameWithoutExtension: spec.filenameWithoutExtension || spec.type,
+            filename: spec.filename || spec.type,
+            ...item,
+          },
+        }));
+      })
+    );
+  }
+
+  protected static async fetchData(params: any) {
+    const { type, id, version, filename } = params;
+
+    if (!type || !id || !version || !filename) {
+      return null;
+    }
+
+    const { pageDataLoader } = await import('@utils/page-loaders/page-data-loader');
+    const { getSpecificationsForService } = await import('@utils/collections/services');
+
+    // Get all items of the specified type
+    const items = await pageDataLoader[type as PageTypes]();
+
+    // Find the specific item by id and version
+    const item = items.find((i) => i.data.id === id && i.data.version === version);
+
+    if (!item) {
+      return null;
+    }
+
+    // Check if this item has AsyncAPI specifications
+    const specifications = getSpecificationsForService(item);
+    const asyncApiSpecifications = specifications.filter((spec) => spec.type === 'graphql');
+
+    // Find the specific specification
+    const spec = asyncApiSpecifications.find((s) => (s.filenameWithoutExtension || s.type) === filename);
+
+    if (!spec) {
+      return null;
+    }
+
+    return {
+      type,
+      filenameWithoutExtension: spec.filenameWithoutExtension || spec.type,
+      filename: spec.filename || spec.type,
+      ...item,
+    };
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'GraphQL specification not found',
+    });
+  }
+}

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

@@ -125,6 +125,7 @@ const getSpecificationBadges = () => {
 
   const asyncapiSpecs = specifications.filter((spec) => spec.type === 'asyncapi');
   const openapiSpecs = specifications.filter((spec) => spec.type === 'openapi');
+  const graphQLSpecs = specifications.filter((spec) => spec.type === 'graphql');
 
   if (openapiSpecs.length > 0) {
     for (const spec of openapiSpecs) {
@@ -156,6 +157,22 @@ const getSpecificationBadges = () => {
     }
   }
 
+  if (graphQLSpecs.length > 0) {
+    for (const spec of graphQLSpecs) {
+      badges.push({
+        backgroundColor: 'white',
+        textColor: 'gray',
+        content: spec.name || 'GraphQL Spec',
+        iconURL: buildUrl('/icons/graphql.svg', true),
+        class: 'text-black hover:underline',
+        id: 'graphql-badge',
+        url: buildUrl(
+          `/docs/${props.collection}/${props.data.id}/${props.data.version}/graphql/${spec.filenameWithoutExtension}`
+        ),
+      });
+    }
+  }
+
   return badges;
 };
 
@@ -267,17 +284,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.1",
+  "version": "2.58.0",
   "publishConfig": {
     "access": "public"
   },
@@ -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"
   },