@eventcatalog/core 3.39.5 → 3.39.6

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

@@ -1,11 +1,17 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { DocumentTextIcon, MapIcon } from '@heroicons/react/24/solid';
-import { ArrowDownIcon, ArrowUpIcon, EllipsisVerticalIcon, StarIcon } from '@heroicons/react/24/outline';
+import {
+  ArrowDownIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowUpIcon,
+  EllipsisVerticalIcon,
+  StarIcon,
+} from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForCollection } from '@utils/collections/icons';
 import { getCollectionTextColorClass } from '@utils/collection-colors';
-import { getBadgeReactStyle } from '@utils/badge-styles';
+import { getBadgeHref, getBadgeReactStyle } from '@utils/badge-styles';
 import { isIconPath, resolveIconUrl } from '@utils/icon';
 import { useStore } from '@nanostores/react';
 import { favoritesStore, toggleFavorite, type FavoriteItem } from '../../../stores/favorites-store';
@@ -15,7 +21,11 @@ import type { TableConfiguration } from '@types';
 const columnHelper = createColumnHelper<DiscoverTableData>();
 
 // Badge cell component (proper React component to use hooks)
-const BadgesCell = ({ badges }: { badges: Array<{ content: string; backgroundColor?: string; textColor?: string }> }) => {
+const BadgesCell = ({
+  badges,
+}: {
+  badges: Array<{ content: string; backgroundColor?: string; textColor?: string; url?: string }>;
+}) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
   if (!badges || badges.length === 0) return <span className="text-xs text-[rgb(var(--ec-icon-color))]">-</span>;
@@ -25,16 +35,28 @@ const BadgesCell = ({ badges }: { badges: Array<{ content: string; backgroundCol
 
   return (
     <div className="flex flex-col gap-1 items-start">
-      {visibleItems.map((badge, index) => (
-        <span
-          key={`${badge.content}-${index}`}
-          className="inline-flex items-center px-2 py-0.5 text-[11px] font-normal rounded-md max-w-[140px] truncate border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] bg-transparent"
-          style={getBadgeReactStyle(badge)}
-          title={badge.content}
-        >
-          {badge.content}
-        </span>
-      ))}
+      {visibleItems.map((badge, index) => {
+        const href = getBadgeHref(badge);
+        const className =
+          'inline-flex items-center px-2 py-0.5 text-[11px] font-normal rounded-md max-w-[140px] truncate border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] bg-transparent';
+
+        return href ? (
+          <a
+            key={`${badge.content}-${index}`}
+            href={href}
+            className={className}
+            style={getBadgeReactStyle(badge)}
+            title={badge.content}
+          >
+            <span className="truncate">{badge.content}</span>
+            <ArrowTopRightOnSquareIcon className="ml-1 h-3 w-3 shrink-0 opacity-70" aria-hidden="true" />
+          </a>
+        ) : (
+          <span key={`${badge.content}-${index}`} className={className} style={getBadgeReactStyle(badge)} title={badge.content}>
+            {badge.content}
+          </span>
+        );
+      })}
       {hiddenCount > 0 && (
         <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-[rgb(var(--ec-accent))] hover:underline">
           {isExpanded ? 'less' : `+${hiddenCount}`}

package/eventcatalog/src/components/Tables/Table.tsx

@@ -58,6 +58,7 @@ export type TData<T extends TCollectionTypes> = {
       backgroundColor: string;
       textColor: string;
       icon: any; // Where is it defined?
+      url?: string;
     }>;
     // ---------------------------------------------------------------------------
     // Domains

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

@@ -1,6 +1,7 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { useState } from 'react';
-import { getBadgeReactStyle } from '@utils/badge-styles';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
+import { getBadgeHref, getBadgeReactStyle } from '@utils/badge-styles';
 import { filterByBadge } from '../filters/custom-filters';
 import type { TCollectionTypes, TData } from '../Table';
 import type { TableConfiguration } from '@types';
@@ -24,16 +25,28 @@ export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'bad
 
       return (
         <div className="flex flex-wrap gap-1 items-center">
-          {visibleItems.map((badge, index) => (
-            <span
-              key={`${badge.id}-${index}`}
-              className="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md border border-[rgb(var(--ec-accent)/0.5)] text-[rgb(var(--ec-page-text))] bg-transparent"
-              style={getBadgeReactStyle(badge)}
-              title={badge.content}
-            >
-              {badge.content}
-            </span>
-          ))}
+          {visibleItems.map((badge, index) => {
+            const href = getBadgeHref(badge);
+            const className =
+              'inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md border border-[rgb(var(--ec-accent)/0.5)] text-[rgb(var(--ec-page-text))] bg-transparent';
+
+            return href ? (
+              <a
+                key={`${badge.id}-${index}`}
+                href={href}
+                className={className}
+                style={getBadgeReactStyle(badge)}
+                title={badge.content}
+              >
+                <span>{badge.content}</span>
+                <ArrowTopRightOnSquareIcon className="ml-1 h-3 w-3 shrink-0 opacity-70" aria-hidden="true" />
+              </a>
+            ) : (
+              <span key={`${badge.id}-${index}`} className={className} style={getBadgeReactStyle(badge)} title={badge.content}>
+                {badge.content}
+              </span>
+            );
+          })}
           {hiddenCount > 0 && (
             <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-[rgb(var(--ec-accent))] hover:underline">
               {isExpanded ? 'less' : `+${hiddenCount}`}

package/eventcatalog/src/content.config-shared-collections.ts

@@ -6,6 +6,7 @@ export const badge = z.object({
   backgroundColor: z.string(),
   textColor: z.string(),
   icon: z.string().optional(),
+  url: z.string().optional(),
 });
 
 // Create a union type for owners

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -5,6 +5,7 @@ import config from '@config';
 import { AlignLeftIcon, UserIcon, UsersIcon } from 'lucide-react';
 
 import mdxComponents from '@components/MDX/components';
+import Badge from '@components/Badge.astro';
 
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
@@ -117,24 +118,7 @@ const editUrl =
                 badges && badges.length > 0 && (
                   <div class="flex flex-wrap gap-3 py-2">
                     {badges.map((badge: any) => {
-                      return (
-                        <a href={badge.url || '#'}>
-                          <span
-                            id={badge.id || ''}
-                            class={`
-                              inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                              bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
-                              text-[rgb(var(--ec-page-text))]
-                              shadow-xs
-                              ${badge.class ? badge.class : ''}
-                            `}
-                          >
-                            {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
-                            {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
-                            <span>{badge.content}</span>
-                          </span>
-                        </a>
-                      );
+                      return <Badge badge={badge} />;
                     })}
                   </div>
                 )

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

@@ -5,11 +5,11 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import Admonition from '@components/MDX/Admonition';
 import components from '@components/MDX/components';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
+import Badge from '@components/Badge.astro';
 import { buildUrl } from '@utils/url-builder';
 import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
 import { isEventCatalogChatEnabled, isResourceDocsEnabled } from '@utils/feature';
 import { getIcon } from '@utils/badges';
-import { getBadgeStyle } from '@utils/badge-styles';
 import { collectionToResourceMap } from '@utils/collections/util';
 
 import { Page } from './_index.data';
@@ -80,19 +80,7 @@ const pagefindAttributes =
           {
             badges.length > 0 && (
               <div class="flex flex-wrap gap-3 py-4">
-                {badges.map((badge: any) => (
-                  <span
-                    class={`
-                      inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                      ${badge.backgroundColor ? 'bg-[rgb(var(--ec-content-hover))]' : 'bg-transparent'} border border-[rgb(var(--ec-page-border))]
-                      text-[rgb(var(--ec-page-text))]
-                    `}
-                    style={getBadgeStyle(badge)}
-                  >
-                    {badge.iconComponent && <badge.iconComponent className="w-4 h-4 flex-shrink-0" />}
-                    <span>{badge.content}</span>
-                  </span>
-                ))}
+                {badges.map((badge: any) => <Badge badge={badge} />)}
               </div>
             )
           }

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

@@ -5,11 +5,11 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import Admonition from '@components/MDX/Admonition';
 import components from '@components/MDX/components';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
+import Badge from '@components/Badge.astro';
 import { buildUrl } from '@utils/url-builder';
 import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
 import { isEventCatalogChatEnabled, isResourceDocsEnabled } from '@utils/feature';
 import { getIcon } from '@utils/badges';
-import { getBadgeStyle } from '@utils/badge-styles';
 import { collectionToResourceMap } from '@utils/collections/util';
 
 import { Page } from './_index.data';
@@ -73,19 +73,7 @@ const pagefindAttributes =
             {
               badges.length > 0 && (
                 <div class="flex flex-wrap gap-3 py-4">
-                  {badges.map((badge: any) => (
-                    <span
-                      class={`
-                        inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                        ${badge.backgroundColor ? 'bg-[rgb(var(--ec-content-hover))]' : 'bg-transparent'} border border-[rgb(var(--ec-page-border))]
-                        text-[rgb(var(--ec-page-text))]
-                      `}
-                      style={getBadgeStyle(badge)}
-                    >
-                      {badge.iconComponent && <badge.iconComponent className="w-4 h-4 flex-shrink-0" />}
-                      <span>{badge.content}</span>
-                    </span>
-                  ))}
+                  {badges.map((badge: any) => <Badge badge={badge} />)}
                 </div>
               )
             }

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

@@ -15,10 +15,10 @@ import mdxComponents from '@components/MDX/components';
 import 'diff2html/bundles/css/diff2html.min.css';
 
 import { buildUrl } from '@utils/url-builder';
-import { getBadgeStyle } from '@utils/badge-styles';
 import { getPreviousVersion } from '@utils/collections/util';
 import { getDiffsForCurrentAndPreviousVersion } from '@utils/file-diffs';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Badge from '@components/Badge.astro';
 import { ClientRouter } from 'astro:transitions';
 import { isChangelogEnabled } from '@utils/feature';
 
@@ -143,13 +143,7 @@ const badges = [getBadge()];
           badges && (
             <div class="flex flex-wrap py-2 pt-4">
               {badges.map((badge: any) => (
-                <span
-                  class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center bg-transparent border border-[rgb(var(--ec-page-border))]"
-                  style={getBadgeStyle(badge)}
-                >
-                  {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1" />}
-                  <span>{badge.content}</span>
-                </span>
+                <Badge badge={badge} className="mr-2 px-2 py-1 rounded-md" />
               ))}
             </div>
           )
@@ -195,13 +189,7 @@ const badges = [getBadge()];
                   {log.badges && (
                     <div class="flex flex-wrap">
                       {log.badges.map((badge: any) => (
-                        <span
-                          class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]"
-                          style={getBadgeStyle(badge)}
-                        >
-                          {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1" />}
-                          <span>{badge.content}</span>
-                        </span>
+                        <Badge badge={badge} className="mr-2 px-2 py-1 rounded-md" />
                       ))}
                     </div>
                   )}

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

@@ -7,8 +7,8 @@ import Footer from '@layouts/Footer.astro';
 import { Page } from './_[filename].data';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
-import { getBadgeStyle } from '@utils/badge-styles';
 import Admonition from '@components/MDX/Admonition';
+import Badge from '@components/Badge.astro';
 
 import { ServerIcon } from '@heroicons/react/24/outline';
 
@@ -83,23 +83,7 @@ const pagefindAttributes =
               badges && badges.length > 0 && (
                 <div class="flex flex-wrap gap-3 py-4">
                   {badges.map((badge: any) => {
-                    return (
-                      <span
-                        id={badge.id || ''}
-                        class={`
-                          inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                          ${badge.backgroundColor ? 'bg-[rgb(var(--ec-content-hover))]' : 'bg-transparent'} border border-[rgb(var(--ec-page-border))]
-                          text-[rgb(var(--ec-page-text))]
-                          shadow-xs
-                          ${badge.class ? badge.class : ''}
-                        `}
-                        style={getBadgeStyle(badge)}
-                      >
-                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0" />}
-                        {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
-                        <span>{badge.content}</span>
-                      </span>
-                    );
+                    return <Badge badge={badge} />;
                   })}
                 </div>
               )

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

@@ -15,6 +15,7 @@ import Admonition from '@components/MDX/Admonition';
 import VersionList from '@components/Lists/VersionList.astro';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import FavoriteButton from '@components/FavoriteButton';
+import Badge from '@components/Badge.astro';
 import { shouldRenderSideBarSection } from '@stores/sidebar-store/builders/shared';
 
 import {
@@ -34,7 +35,6 @@ import { getSpecificationsForService } from '@utils/collections/services';
 import { resourceToCollectionMap, collectionToResourceMap, getDeprecatedDetails } from '@utils/collections/util';
 import { getSchemasFromResource } from '@utils/collections/schemas';
 import { getIcon } from '@utils/badges';
-import { getBadgeStyle } from '@utils/badge-styles';
 import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
 import { isIconPath, resolveIconUrl } from '@utils/icon';
 import {
@@ -377,23 +377,7 @@ if (!hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
               badges && (
                 <div class="flex flex-wrap gap-3 pt-6 pb-2">
                   {badges.map((badge: any) => {
-                    return (
-                      <span
-                        id={badge.id || ''}
-                        class={`
-                          inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                          ${badge.backgroundColor ? 'bg-[rgb(var(--ec-content-hover))]' : 'bg-transparent'} border border-[rgb(var(--ec-page-border))]
-                          text-[rgb(var(--ec-page-text))]
-                          shadow-xs
-                          ${badge.class ? badge.class : ''}
-                        `}
-                        style={getBadgeStyle(badge)}
-                      >
-                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0" />}
-                        {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
-                        <span>{badge.content}</span>
-                      </span>
-                    );
+                    return <Badge badge={badge} />;
                   })}
                 </div>
               )

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

@@ -1,5 +1,6 @@
 ---
 import RectangleGroupIcon from '@heroicons/react/24/outline/RectangleGroupIcon';
+import Badge from '@components/Badge.astro';
 import Footer from '@layouts/Footer.astro';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { buildUrl } from '@utils/url-builder';
@@ -80,17 +81,7 @@ const badges = [
               badges && badges.length > 0 && (
                 <div class="flex flex-wrap gap-3 py-4">
                   {badges.map((badge: any) => {
-                    return (
-                      <span
-                        class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                          bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
-                          text-[rgb(var(--ec-page-text))] shadow-xs"
-                      >
-                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
-                        {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
-                        <span>{badge.content}</span>
-                      </span>
-                    );
+                    return <Badge badge={badge} />;
                   })}
                 </div>
               )

package/eventcatalog/src/utils/badge-styles.ts

@@ -1,8 +1,23 @@
+import { buildUrl } from './url-builder';
+
 type BadgeColorKind = 'background' | 'text';
 
 type Badge = {
   backgroundColor?: string;
   textColor?: string;
+  url?: string;
+};
+
+const URL_SCHEME_PATTERN = /^[a-z][a-z\d+\-.]*:/i;
+const PROTOCOL_RELATIVE_URL_PATTERN = /^\/\//;
+const SAFE_BADGE_URL_SCHEMES = new Set(['http:', 'https:', 'mailto:', 'tel:']);
+
+const isAlreadyBasePrefixed = (url: string) => {
+  const baseUrl = import.meta.env.BASE_URL;
+  if (!baseUrl || baseUrl === '/') return false;
+
+  const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+  return url === normalizedBaseUrl || url.startsWith(`${normalizedBaseUrl}/`);
 };
 
 const NAMED_BADGE_COLOR_KEYS = new Set([
@@ -204,3 +219,19 @@ export const getBadgeReactStyle = (badge: Badge) => {
     ...(color ? { color } : {}),
   };
 };
+
+export const getBadgeHref = (badge: Badge) => {
+  if (!badge.url) return undefined;
+
+  const url = badge.url.trim();
+  if (!url) return undefined;
+  if (url.startsWith('#') || url.startsWith('?') || PROTOCOL_RELATIVE_URL_PATTERN.test(url)) return url;
+
+  const scheme = URL_SCHEME_PATTERN.exec(url)?.[0].toLowerCase();
+  if (scheme) return SAFE_BADGE_URL_SCHEMES.has(scheme) ? url : undefined;
+
+  if (isAlreadyBasePrefixed(url)) return url;
+  if (url.startsWith('/')) return buildUrl(url);
+
+  return url;
+};

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "3.39.5",
+  "version": "3.39.6",
   "publishConfig": {
     "access": "public"
   },
@@ -106,9 +106,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
-    "@eventcatalog/linter": "1.0.23",
-    "@eventcatalog/visualiser": "^3.21.0",
-    "@eventcatalog/sdk": "2.21.1"
+    "@eventcatalog/sdk": "2.21.2",
+    "@eventcatalog/linter": "1.0.24",
+    "@eventcatalog/visualiser": "^3.21.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",