@eventcatalog/core 3.39.4 → 3.39.6

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -64,6 +64,7 @@ import { isCollectionVisibleInCatalog } from '@eventcatalog';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/collections/queries';
 import { hasLandingPageForDocs } from '@utils/pages';
+import { filterSidebarItems } from '@utils/sidebar-visibility';
 
 import { isEmbedEnabled, isCustomStylesEnabled, isEventCatalogScaleEnabled, isCustomDocsEnabled, isSSR } from '@utils/feature';
 
@@ -128,66 +129,66 @@ const getDefaultUrl = (route: string, defaultValue: string) => {
 
 const userSideBarConfiguration = config.sidebar || [];
 
-const navigationItems = [
-  {
-    id: '/',
-    label: 'Catalog',
-    icon: BookOpen,
-    href: buildUrl(config.landingPage || '/'),
-    current:
-      currentPath === '/' ||
-      (currentPath.includes('/docs') && !currentPath.includes('/docs/custom')) ||
-      currentPath.includes('/architecture/') ||
-      currentPath.includes('/visualiser') ||
-      (currentPath.includes('/schemas') &&
-        !currentPath.includes('/schemas/explorer') &&
-        !currentPath.includes('/schemas/fields')),
-  },
-  {
-    id: '/docs/custom',
-    label: 'Documentation',
-    icon: FileText,
-    href: getDefaultUrl('docs/custom', '/docs/custom'),
-    current: currentPath.includes('/docs/custom'),
-    isPremium: true,
-    visible: isCustomDocsEnabled() && customDocs.length > 0,
-  },
-  {
-    id: '/schemas/explorer',
-    label: 'Schemas',
-    icon: FileCode,
-    href: buildUrl('/schemas/explorer'),
-    current: currentPath.includes('/schemas/explorer') && !currentPath.includes('/schemas/fields'),
-  },
-  ...(isSSR()
-    ? [
-        {
-          id: '/schemas/fields',
-          label: 'Schema Insights',
-          icon: Waypoints,
-          href: buildUrl('/schemas/fields'),
-          current: currentPath.includes('/schemas/fields'),
-        },
-      ]
-    : []),
-].filter((item) => {
-  const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
-  const defaultVisible = item.visible ?? true;
-  return userSideBarOption ? userSideBarOption.visible : defaultVisible;
-});
-
-const studioNavigationItem = [
-  {
-    id: '/studio',
-    label: 'EventCatalog Studio',
-    icon: SquareDashedMousePointerIcon,
-    href: buildUrl('/studio'),
-    current: currentPath.includes('/studio'),
-  },
-].filter((item) => {
-  const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
-  return userSideBarOption ? userSideBarOption.visible : true;
-});
+const navigationItems = filterSidebarItems(
+  [
+    {
+      id: '/',
+      label: 'Catalog',
+      icon: BookOpen,
+      href: buildUrl(config.landingPage || '/'),
+      current:
+        currentPath === '/' ||
+        (currentPath.includes('/docs') && !currentPath.includes('/docs/custom')) ||
+        currentPath.includes('/architecture/') ||
+        currentPath.includes('/visualiser') ||
+        (currentPath.includes('/schemas') &&
+          !currentPath.includes('/schemas/explorer') &&
+          !currentPath.includes('/schemas/fields')),
+    },
+    {
+      id: '/docs/custom',
+      aliases: ['/docs'],
+      label: 'Documentation',
+      icon: FileText,
+      href: getDefaultUrl('docs/custom', '/docs/custom'),
+      current: currentPath.includes('/docs/custom'),
+      isPremium: true,
+      visible: isCustomDocsEnabled() && customDocs.length > 0,
+    },
+    {
+      id: '/schemas/explorer',
+      label: 'Schemas',
+      icon: FileCode,
+      href: buildUrl('/schemas/explorer'),
+      current: currentPath.includes('/schemas/explorer') && !currentPath.includes('/schemas/fields'),
+    },
+    ...(isSSR()
+      ? [
+          {
+            id: '/schemas/fields',
+            label: 'Schema Insights',
+            icon: Waypoints,
+            href: buildUrl('/schemas/fields'),
+            current: currentPath.includes('/schemas/fields'),
+          },
+        ]
+      : []),
+  ],
+  userSideBarConfiguration
+);
+
+const studioNavigationItem = filterSidebarItems(
+  [
+    {
+      id: '/studio',
+      label: 'EventCatalog Studio',
+      icon: SquareDashedMousePointerIcon,
+      href: buildUrl('/studio'),
+      current: currentPath.includes('/studio'),
+    },
+  ],
+  userSideBarConfiguration
+);
 
 const premiumFeatures: Array<{
   id: string;
@@ -198,86 +199,119 @@ const premiumFeatures: Array<{
   isPremium?: boolean;
 }> = [];
 
-const browseItems = [
-  {
-    label: 'Domains',
-    icon: RectangleGroupIcon,
-    href: buildUrl('/discover/domains'),
-    current: currentPath === buildUrl('/discover/domains'),
-  },
-  {
-    label: 'Services',
-    icon: ServerIcon,
-    href: buildUrl('/discover/services'),
-    current: currentPath === buildUrl('/discover/services'),
-  },
-  {
-    label: 'External Systems',
-    icon: GlobeAltIcon,
-    href: buildUrl('/discover/external-systems'),
-    current: currentPath === buildUrl('/discover/external-systems'),
-  },
-  {
-    label: 'Events',
-    icon: BoltIcon,
-    href: buildUrl('/discover/events'),
-    current: currentPath === buildUrl('/discover/events'),
-  },
-  {
-    label: 'Commands',
-    icon: ChatBubbleLeftIcon,
-    href: buildUrl('/discover/commands'),
-    current: currentPath === buildUrl('/discover/commands'),
-  },
-  {
-    label: 'Queries',
-    icon: MagnifyingGlassIcon,
-    href: buildUrl('/discover/queries'),
-    current: currentPath === buildUrl('/discover/queries'),
-  },
-  {
-    label: 'Flows',
-    icon: QueueListIcon,
-    href: buildUrl('/discover/flows'),
-    current: currentPath === buildUrl('/discover/flows'),
-  },
-  {
-    label: 'Data Stores',
-    icon: Database,
-    href: buildUrl('/discover/containers'),
-    current: currentPath === buildUrl('/discover/containers'),
-  },
-  {
-    label: 'Data Products',
-    icon: CubeIcon,
-    href: buildUrl('/discover/data-products'),
-    current: currentPath === buildUrl('/discover/data-products'),
-  },
-];
-
-const organizationItems = [
-  {
-    label: 'Teams',
-    icon: UsersRound,
-    href: buildUrl('/directory/teams'),
-    current: currentPath === buildUrl('/directory/teams'),
-  },
-  {
-    label: 'Users',
-    icon: UserRound,
-    href: buildUrl('/directory/users'),
-    current: currentPath === buildUrl('/directory/users'),
-  },
-];
-
-const settingsItems = [
-  {
-    label: 'Settings',
-    icon: Settings,
-    href: buildUrl('/settings/general'),
-    current: currentPath.startsWith(buildUrl('/settings')),
-  },
-];
+const browseItems = filterSidebarItems(
+  [
+    {
+      id: '/discover/domains',
+      aliases: ['/discover'],
+      label: 'Domains',
+      icon: RectangleGroupIcon,
+      href: buildUrl('/discover/domains'),
+      current: currentPath === buildUrl('/discover/domains'),
+    },
+    {
+      id: '/discover/services',
+      aliases: ['/discover'],
+      label: 'Services',
+      icon: ServerIcon,
+      href: buildUrl('/discover/services'),
+      current: currentPath === buildUrl('/discover/services'),
+    },
+    {
+      id: '/discover/external-systems',
+      aliases: ['/discover'],
+      label: 'External Systems',
+      icon: GlobeAltIcon,
+      href: buildUrl('/discover/external-systems'),
+      current: currentPath === buildUrl('/discover/external-systems'),
+    },
+    {
+      id: '/discover/events',
+      aliases: ['/discover'],
+      label: 'Events',
+      icon: BoltIcon,
+      href: buildUrl('/discover/events'),
+      current: currentPath === buildUrl('/discover/events'),
+    },
+    {
+      id: '/discover/commands',
+      aliases: ['/discover'],
+      label: 'Commands',
+      icon: ChatBubbleLeftIcon,
+      href: buildUrl('/discover/commands'),
+      current: currentPath === buildUrl('/discover/commands'),
+    },
+    {
+      id: '/discover/queries',
+      aliases: ['/discover'],
+      label: 'Queries',
+      icon: MagnifyingGlassIcon,
+      href: buildUrl('/discover/queries'),
+      current: currentPath === buildUrl('/discover/queries'),
+    },
+    {
+      id: '/discover/flows',
+      aliases: ['/discover'],
+      label: 'Flows',
+      icon: QueueListIcon,
+      href: buildUrl('/discover/flows'),
+      current: currentPath === buildUrl('/discover/flows'),
+    },
+    {
+      id: '/discover/containers',
+      aliases: ['/discover'],
+      label: 'Data Stores',
+      icon: Database,
+      href: buildUrl('/discover/containers'),
+      current: currentPath === buildUrl('/discover/containers'),
+    },
+    {
+      id: '/discover/data-products',
+      aliases: ['/discover'],
+      label: 'Data Products',
+      icon: CubeIcon,
+      href: buildUrl('/discover/data-products'),
+      current: currentPath === buildUrl('/discover/data-products'),
+    },
+  ],
+  userSideBarConfiguration
+);
+
+const organizationItems = filterSidebarItems(
+  [
+    {
+      id: '/directory/teams',
+      aliases: ['/directory'],
+      label: 'Teams',
+      icon: UsersRound,
+      href: buildUrl('/directory/teams'),
+      current: currentPath === buildUrl('/directory/teams'),
+    },
+    {
+      id: '/directory/users',
+      aliases: ['/directory'],
+      label: 'Users',
+      icon: UserRound,
+      href: buildUrl('/directory/users'),
+      current: currentPath === buildUrl('/directory/users'),
+    },
+  ],
+  userSideBarConfiguration
+);
+
+const settingsItems = filterSidebarItems(
+  [
+    {
+      id: '/settings/general',
+      aliases: ['/settings'],
+      label: 'Settings',
+      icon: Settings,
+      href: buildUrl('/settings/general'),
+      current: currentPath.startsWith(buildUrl('/settings')),
+    },
+  ],
+  userSideBarConfiguration
+);
 
 const currentNavigationItem = [...navigationItems, ...studioNavigationItem, ...premiumFeatures].find((item) => item.current);
 const { title, description, showNestedSideBar = true, showHeader = true } = Astro.props;
@@ -521,58 +555,64 @@ const canPageBeEmbedded = isEmbedEnabled();
               })
             }
 
-            <hr class="rail-divider my-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
-
-            <div
-              class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold tracking-[0.18em] uppercase text-[rgb(var(--ec-sidebar-text)/0.5)]"
-            >
-              Browse
-            </div>
-
             {
-              browseItems.map((item) => (
-                <a
-                  href={item.href}
-                  data-role="secondary-nav-item"
-                  aria-label={item.label}
-                  class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
-                    item.current
-                      ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
-                      : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
-                  }`}
-                  title={item.label}
-                >
-                  <item.icon className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
-                  <span class="nav-item-label">{item.label}</span>
-                </a>
-              ))
+              browseItems.length > 0 && (
+                <Fragment>
+                  <hr class="rail-divider my-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
+
+                  <div class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold tracking-[0.18em] uppercase text-[rgb(var(--ec-sidebar-text)/0.5)]">
+                    Browse
+                  </div>
+
+                  {browseItems.map((item) => (
+                    <a
+                      id={item.id}
+                      href={item.href}
+                      data-role="secondary-nav-item"
+                      aria-label={item.label}
+                      class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
+                        item.current
+                          ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
+                          : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
+                      }`}
+                      title={item.label}
+                    >
+                      <item.icon className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
+                      <span class="nav-item-label">{item.label}</span>
+                    </a>
+                  ))}
+                </Fragment>
+              )
             }
 
-            <hr class="rail-divider my-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
-
-            <div
-              class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold tracking-[0.18em] uppercase text-[rgb(var(--ec-sidebar-text)/0.5)]"
-            >
-              Organization
-            </div>
-
             {
-              organizationItems.map((item) => (
-                <a
-                  href={item.href}
-                  data-role="secondary-nav-item"
-                  aria-label={item.label}
-                  class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
-                    item.current
-                      ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
-                      : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
-                  }`}
-                  title={item.label}
-                >
-                  <item.icon className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
-                  <span class="nav-item-label">{item.label}</span>
-                </a>
-              ))
+              organizationItems.length > 0 && (
+                <Fragment>
+                  <hr class="rail-divider my-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
+
+                  <div class="rail-section-label px-3 pb-1 text-[0.65rem] font-semibold tracking-[0.18em] uppercase text-[rgb(var(--ec-sidebar-text)/0.5)]">
+                    Organization
+                  </div>
+
+                  {organizationItems.map((item) => (
+                    <a
+                      id={item.id}
+                      href={item.href}
+                      data-role="secondary-nav-item"
+                      aria-label={item.label}
+                      class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
+                        item.current
+                          ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
+                          : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
+                      }`}
+                      title={item.label}
+                    >
+                      <item.icon className="h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
+                      <span class="nav-item-label">{item.label}</span>
+                    </a>
+                  ))}
+                </Fragment>
+              )
             }
 
             {premiumFeatures.length > 0 && <hr class="rail-divider my-2 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />}
@@ -598,24 +638,29 @@ const canPageBeEmbedded = isEmbedEnabled();
             }
 
             <div class="mt-auto pt-3">
-              <hr class="rail-divider mb-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
               {
-                settingsItems.map((item) => (
-                  <a
-                    href={item.href}
-                    data-role="secondary-nav-item"
-                    aria-label={item.label}
-                    class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
-                      item.current
-                        ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
-                        : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
-                    }`}
-                    title={item.label}
-                  >
-                    <item.icon className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
-                    <span class="nav-item-label">{item.label}</span>
-                  </a>
-                ))
+                settingsItems.length > 0 && (
+                  <Fragment>
+                    <hr class="rail-divider mb-3 border-t border-[rgb(var(--ec-sidebar-border)/0.7)]" />
+                    {settingsItems.map((item) => (
+                      <a
+                        id={item.id}
+                        href={item.href}
+                        data-role="secondary-nav-item"
+                        aria-label={item.label}
+                        class={`nav-secondary-item flex items-center gap-3 px-3 py-2.5 rounded-xl border text-[13px] font-medium transition-all duration-150 ${
+                          item.current
+                            ? 'border-[rgb(var(--ec-accent)/0.2)] bg-[rgb(var(--ec-page-bg)/0.88)] text-[rgb(var(--ec-accent))] shadow-sm'
+                            : 'border-transparent text-[rgb(var(--ec-sidebar-text))] hover:border-[rgb(var(--ec-sidebar-border)/0.65)] hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]'
+                        }`}
+                        title={item.label}
+                      >
+                        <item.icon className="h-4 w-4 flex-shrink-0" aria-hidden="true" />
+                        <span class="nav-item-label">{item.label}</span>
+                      </a>
+                    ))}
+                  </Fragment>
+                )
               }
             </div>
           </nav>

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>
               )