@eventcatalog/core 3.39.2 → 3.39.4

package/dist/docs/development/license-keys/license-validation.md

@@ -0,0 +1,34 @@
+---
+sidebar_position: 4
+keywords:
+- licenses
+- validation
+- offline
+sidebar_label: License Validation
+title: How license validation works
+description: How EventCatalog validates your license keys online and offline.
+---
+
+Once you have a license key from [EventCatalog Cloud](https://eventcatalog.cloud) (see [Overview](/docs/development/license-keys/overview) if you don't yet), EventCatalog validates it every time you build or serve your catalog. There are two modes: online and offline.
+
+## Online validation (default)
+
+By default, EventCatalog validates license keys online. Your keys are read from your `.env` file (or environment variables) and verified against the EventCatalog API.
+
+This is the recommended mode — it requires no extra setup and your keys stay in sync with your account automatically.
+
+## Offline validation
+
+If you're behind a firewall or otherwise can't reach the EventCatalog API at build time, you can validate your keys offline.
+
+To set up offline validation:
+
+1. Email us at `hello@eventcatalog.dev` to request an offline license file (`license.jwt`).
+2. Place the `license.jwt` file in the root of your catalog directory.
+3. EventCatalog will validate against the local file instead of calling our API.
+
+Offline license files expire one year from purchase. You'll need to request a new file each year.
+
+## Managing your keys
+
+You can view, rotate, and revoke license keys at any time from your [API keys dashboard](https://eventcatalog.cloud/dashboard/api-keys).

package/dist/docs/development/license-keys/overview.md

@@ -0,0 +1,52 @@
+---
+sidebar_position: 1
+keywords:
+- licenses
+- license keys
+- trial
+sidebar_label: Overview
+title: License Keys Overview
+description: Learn how license keys work in EventCatalog, how to get a free trial, and where to find your keys.
+---
+
+EventCatalog is open source with a [community edition and a commercial edition](/pricing). The commercial editions (Starter, Scale, Enterprise) and the [integrations](/integrations) (OpenAPI, AsyncAPI, Backstage, and others) are unlocked using **license keys**.
+
+If you are using the community edition, you don't need a license key and can skip this section.
+
+## Where license keys come from
+
+All license keys are managed in [EventCatalog Cloud](https://eventcatalog.cloud). You sign up for an account, activate the plan or integration you want to use, and your license keys appear on your dashboard.
+
+You can then add those keys to your `.env` file (or set them as environment variables) and EventCatalog will unlock the corresponding features.
+
+## Free trials
+
+:::tip 14 day free trials
+Every plan and every integration comes with a **14 day free trial**. No payment is required to start one — just sign in to [EventCatalog Cloud](https://eventcatalog.cloud) and activate what you want to try.
+
+Need longer to evaluate? Email us at `hello@eventcatalog.dev` and we'll happily extend your trial.
+:::
+
+## Quick start
+
+1. Create an account at [eventcatalog.cloud](https://eventcatalog.cloud).
+2. From your [dashboard](https://eventcatalog.cloud/dashboard), pick what you need:
+   - [Pick your plan](https://eventcatalog.cloud/dashboard) (Starter or Scale) — see [Starting a plan](/docs/development/license-keys/plans).
+
+     ![Pick your plan in EventCatalog Cloud](./images/pick-your-plan.png)
+
+   - [Pick your integrations](https://eventcatalog.cloud/dashboard/integrations) (OpenAPI, AsyncAPI, etc.) — see [Getting integration keys](/docs/development/license-keys/integrations).
+
+     ![Pick your integrations in EventCatalog Cloud](./images/pick-your-integraions.png)
+
+3. Copy your license keys from the [API keys page](https://eventcatalog.cloud/dashboard/api-keys) into your `.env` file.
+
+   ![Your license keys in the EventCatalog Cloud API keys dashboard](./images/api-keys-dashboard.png)
+
+4. Run your catalog — your commercial features are now unlocked.
+
+## Next steps
+
+- [Starting a Starter or Scale plan](/docs/development/license-keys/plans)
+- [Getting license keys for integrations](/docs/development/license-keys/integrations)
+- [How license validation works (online and offline)](/docs/development/license-keys/license-validation)

package/dist/docs/development/license-keys/plans.md

@@ -0,0 +1,50 @@
+---
+sidebar_position: 2
+keywords:
+- licenses
+- starter
+- scale
+- plans
+sidebar_label: Starter & Scale Plans
+title: Getting a license key for Starter or Scale
+description: How to start a Starter or Scale plan in EventCatalog Cloud and get your license key.
+---
+
+EventCatalog offers two commercial plans you can self-serve from [EventCatalog Cloud](https://eventcatalog.cloud):
+
+- **Starter** — for small teams getting started with commercial features.
+- **Scale** — for larger teams that need the full set of advanced capabilities.
+
+See the [pricing page](/pricing) for a full breakdown of what each plan includes.
+
+## Starting a plan
+
+1. Sign in to [EventCatalog Cloud](https://eventcatalog.cloud). If you don't have an account yet, sign up — it's free.
+2. Go to your [dashboard](https://eventcatalog.cloud/dashboard).
+3. Choose **Starter** or **Scale** and start your plan. Every plan comes with a **14 day free trial**, so you can try it before you commit.
+
+   ![Pick your plan in EventCatalog Cloud](./images/pick-your-plan.png)
+
+4. Once the plan is active, head to your [API keys page](https://eventcatalog.cloud/dashboard/api-keys) to find your license key.
+
+   ![Your license keys in the EventCatalog Cloud API keys dashboard](./images/api-keys-dashboard.png)
+
+## Adding your license key to your catalog
+
+Copy the license key from your dashboard into your `.env` file:
+
+```bash title=".env"
+EVENTCATALOG_STARTER_LICENSE_KEY=your-license-key-here
+# or for Scale
+EVENTCATALOG_SCALE_LICENSE_KEY=your-license-key-here
+```
+
+Then start EventCatalog as normal. The commercial features for your plan will be unlocked automatically.
+
+## Need more time?
+
+The default trial is 14 days. If you need longer to evaluate, email us at `hello@eventcatalog.dev` and we'll extend it for you.
+
+## Enterprise
+
+If you need features beyond Scale — SSO, dedicated support, custom contracts, or on-premise/offline deployment — get in touch at `hello@eventcatalog.dev`.

package/dist/eventcatalog.cjs

@@ -114,7 +114,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.39.2";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -13,8 +13,8 @@ import {
 } from "./chunk-K3ZVEX2Y.js";
 import {
   log_build_default
-} from "./chunk-2VUYMTYY.js";
-import "./chunk-EC633RFS.js";
+} from "./chunk-O2CZERUN.js";
+import "./chunk-ONQOIF2X.js";
 import "./chunk-4UVFXLPI.js";
 import {
   catalogToAstro
@@ -28,13 +28,13 @@ import {
 } from "./chunk-ULZYHF3V.js";
 import {
   generate
-} from "./chunk-Z3G6IPPF.js";
+} from "./chunk-PVOVC2UV.js";
 import {
   logger
-} from "./chunk-K2IR7X4Z.js";
+} from "./chunk-NSR4DZXS.js";
 import {
   VERSION
-} from "./chunk-4NHSANWO.js";
+} from "./chunk-WLUQZCIH.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -78,7 +78,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.39.2";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-Z3G6IPPF.js";
-import "./chunk-K2IR7X4Z.js";
-import "./chunk-4NHSANWO.js";
+} from "./chunk-PVOVC2UV.js";
+import "./chunk-NSR4DZXS.js";
+import "./chunk-WLUQZCIH.js";
 import "./chunk-5T63CXKU.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.39.2";
+var version = "3.39.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-K2IR7X4Z.js";
-import "../chunk-4NHSANWO.js";
+} from "../chunk-NSR4DZXS.js";
+import "../chunk-WLUQZCIH.js";
 export {
   logger
 };

package/eventcatalog/src/components/Grids/DomainGrid.tsx

@@ -49,10 +49,11 @@ const getMessageIcon = (collection: string) => {
 const EntityBadge = memo(({ entity }: { entity: any }) => {
   const id = entity?.data?.id || entity?.id;
   const name = entity?.data?.name || entity?.name || id;
+  const version = entity?.data?.version || entity?.version || 'latest';
 
   return (
     <a
-      href={buildUrl(`/docs/entities/${id}`)}
+      href={buildUrl(`/docs/entities/${id}/${version}`)}
       className="inline-flex items-center gap-2 px-3 py-2 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg text-sm font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] hover:border-[rgb(var(--ec-accent)/0.5)] transition-all shadow-xs"
     >
       <BoxIcon className="h-4 w-4 text-[rgb(var(--ec-accent))]" />

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

@@ -5,6 +5,7 @@ import { ArrowDownIcon, ArrowUpIcon, EllipsisVerticalIcon, StarIcon } from '@her
 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 { isIconPath, resolveIconUrl } from '@utils/icon';
 import { useStore } from '@nanostores/react';
 import { favoritesStore, toggleFavorite, type FavoriteItem } from '../../../stores/favorites-store';
@@ -28,6 +29,7 @@ const BadgesCell = ({ badges }: { badges: Array<{ content: string; backgroundCol
         <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}

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

@@ -1,5 +1,6 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { useState } from 'react';
+import { getBadgeReactStyle } from '@utils/badge-styles';
 import { filterByBadge } from '../filters/custom-filters';
 import type { TCollectionTypes, TData } from '../Table';
 import type { TableConfiguration } from '@types';
@@ -27,6 +28,7 @@ export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'bad
             <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}

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

@@ -9,6 +9,7 @@ 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';
@@ -83,13 +84,12 @@ const pagefindAttributes =
                   <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))]
+                      ${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 text-[rgb(var(--ec-icon-color))]" />
-                    )}
+                    {badge.iconComponent && <badge.iconComponent className="w-4 h-4 flex-shrink-0" />}
                     <span>{badge.content}</span>
                   </span>
                 ))}

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

@@ -9,6 +9,7 @@ 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';
@@ -76,13 +77,12 @@ const pagefindAttributes =
                     <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))]
+                        ${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 text-[rgb(var(--ec-icon-color))]" />
-                      )}
+                      {badge.iconComponent && <badge.iconComponent className="w-4 h-4 flex-shrink-0" />}
                       <span>{badge.content}</span>
                     </span>
                   ))}

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

@@ -15,6 +15,7 @@ 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';
@@ -71,27 +72,29 @@ const logListPromise = logsToRender.map(async (log, index) => {
 
 const logList = await Promise.all(logListPromise);
 
+const createResourceBadge = (content: string, icon: any) => ({ content, icon, textColor: 'gray' });
+
 const getBadge = () => {
   if (props.collection === 'services') {
-    return { badgeType: 'service', content: 'Service', icon: ServerIcon };
+    return createResourceBadge('Service', ServerIcon);
   }
   if (props.collection === 'events') {
-    return { badgeType: 'event', content: 'Event', icon: BoltIcon };
+    return createResourceBadge('Event', BoltIcon);
   }
   if (props.collection === 'commands') {
-    return { badgeType: 'command', content: 'Command', icon: ChatBubbleLeftIcon };
+    return createResourceBadge('Command', ChatBubbleLeftIcon);
   }
   if (props.collection === 'queries') {
-    return { badgeType: 'query', content: 'Query', icon: MagnifyingGlassIcon };
+    return createResourceBadge('Query', MagnifyingGlassIcon);
   }
   if (props.collection === 'domains') {
-    return { badgeType: 'domain', content: 'Domain', icon: RectangleGroupIcon };
+    return createResourceBadge('Domain', RectangleGroupIcon);
   }
   if (props.collection === 'containers') {
-    return { badgeType: 'default', content: 'Container', icon: DatabaseIcon };
+    return createResourceBadge('Container', DatabaseIcon);
   }
   if (props.collection === 'flows') {
-    return { badgeType: 'design', content: 'Flow', icon: QueueListIcon };
+    return createResourceBadge('Flow', QueueListIcon);
   }
 };
 
@@ -141,8 +144,8 @@ const badges = [getBadge()];
             <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"
-                  style={`background-color: rgb(var(--ec-badge-${badge.badgeType}-bg)); color: rgb(var(--ec-badge-${badge.badgeType}-text));`}
+                  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>
@@ -192,7 +195,10 @@ 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))]">
+                        <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>

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

@@ -7,6 +7,7 @@ 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 { ServerIcon } from '@heroicons/react/24/outline';
@@ -36,14 +37,13 @@ if (isRemote) {
 const pageTitle = `${collection} | ${data.name} | GraphQL Schema`.replace(/^\w/, (c) => c.toUpperCase());
 
 const getServiceBadge = () => {
-  return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon }];
+  return [{ textColor: 'gray', content: 'Service', icon: ServerIcon }];
 };
 
 const getGraphQLBadge = () => {
   return [
     {
-      backgroundColor: 'purple',
-      textColor: 'purple',
+      textColor: 'gray',
       content: 'GraphQL Schema',
       iconURL: buildUrl('/icons/graphql.svg', true),
       id: 'graphql-schema-badge',
@@ -88,13 +88,14 @@ const pagefindAttributes =
                         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))]
+                          ${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 text-[rgb(var(--ec-icon-color))]" />}
+                        {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>

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

@@ -34,6 +34,7 @@ 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 {
@@ -72,102 +73,71 @@ const getContentBadges = () =>
     icon: badge.icon ? getIcon(badge.icon) : null,
   }));
 
+const createResourceBadge = (content: string, icon: any) => ({ content, icon, textColor: 'gray' });
+
 const getBadge = () => {
   if (props.collection === 'services') {
-    return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon }];
+    return [createResourceBadge('Service', ServerIcon)];
   }
   if (props.collection === 'events') {
-    return [{ backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon }];
+    return [createResourceBadge('Event', BoltIcon)];
   }
   if (props.collection === 'commands') {
-    return [{ backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon }];
+    return [createResourceBadge('Command', ChatBubbleLeftIcon)];
   }
   if (props.collection === 'queries') {
-    return [{ backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon }];
+    return [createResourceBadge('Query', MagnifyingGlassIcon)];
   }
   if (props.collection === 'domains') {
-    return [
-      {
-        backgroundColor: 'yellow',
-        textColor: 'yellow',
-        content: 'Domain',
-        icon: RectangleGroupIcon,
-      },
-    ];
+    return [createResourceBadge('Domain', RectangleGroupIcon)];
   }
 
   if (props.collection === 'flows') {
-    return [{ backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon }];
+    return [createResourceBadge('Flow', QueueListIcon)];
   }
 
   if (props.collection === 'channels') {
-    return [{ backgroundColor: 'teal', textColor: 'teal', content: 'Channel', icon: ArrowsRightLeftIcon }];
+    return [createResourceBadge('Channel', ArrowsRightLeftIcon)];
   }
 
   if (props.collection === 'containers') {
     const badges = [];
     const content = props.data.container_type?.charAt(0).toUpperCase() + props.data.container_type?.slice(1) || 'Database';
 
-    badges.push({ backgroundColor: 'blue', textColor: 'blue', content: content, icon: DatabaseIcon });
+    badges.push(createResourceBadge(content, DatabaseIcon));
 
     if (props.data?.technology) {
-      badges.push({
-        backgroundColor: 'indigo',
-        textColor: 'indigo',
-        content: `${props.data.technology}`,
-        icon: DatabaseZapIcon,
-      });
+      badges.push(createResourceBadge(`${props.data.technology}`, DatabaseZapIcon));
     }
 
     if (props.data?.residency) {
-      badges.push({
-        backgroundColor: 'red',
-        textColor: 'red',
-        content: `Residency: ${props.data.residency}`,
-        icon: MapIcon,
-      });
+      badges.push(createResourceBadge(`Residency: ${props.data.residency}`, MapIcon));
     }
 
     if (props.data?.retention) {
-      badges.push({
-        backgroundColor: 'green',
-        textColor: 'green',
-        content: `Retention: ${props.data.retention}`,
-        icon: ClockIcon,
-      });
+      badges.push(createResourceBadge(`Retention: ${props.data.retention}`, ClockIcon));
     }
 
     if (props.data?.access_mode) {
-      badges.push({
-        backgroundColor: 'green',
-        textColor: 'green',
-        content: `Access Mode: ${props.data.access_mode}`,
-        icon: ShieldCheckIcon,
-      });
+      badges.push(createResourceBadge(`Access Mode: ${props.data.access_mode}`, ShieldCheckIcon));
     }
 
     return badges;
   }
 
   if (props.collection === 'entities') {
-    const entityBadges = [{ backgroundColor: 'purple', textColor: 'purple', content: 'Entity', icon: Box, class: 'text-gray' }];
+    const entityBadges = [createResourceBadge('Entity', Box)];
     if (props.data.aggregateRoot) {
-      entityBadges.push({
-        backgroundColor: 'purple',
-        textColor: 'purple',
-        content: '(Aggregate Root)',
-        icon: Boxes,
-        class: 'text-gray',
-      });
+      entityBadges.push(createResourceBadge('(Aggregate Root)', Boxes));
     }
     return entityBadges;
   }
 
   if (props.collection === 'data-products') {
-    return [{ backgroundColor: 'indigo', textColor: 'indigo', content: 'Data Product', icon: Package }];
+    return [createResourceBadge('Data Product', Package)];
   }
 
-  return [{ backgroundColor: 'teal', textColor: 'teal', content: '', icon: QueueListIcon, class: 'text-gray' }];
+  return [createResourceBadge('', QueueListIcon)];
 };
 
 const getSpecificationBadges = () => {
@@ -412,13 +382,14 @@ if (!hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                         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))]
+                          ${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 text-[rgb(var(--ec-icon-color))]" />}
+                        {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>

package/eventcatalog/src/pages/docs/[type]/[id]/_index.data.ts

@@ -0,0 +1,67 @@
+import type { CollectionTypes, PageTypes } from '@types';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+import { isSSR } from '@utils/feature';
+
+const itemTypes: PageTypes[] = [
+  'events',
+  'commands',
+  'queries',
+  'services',
+  'domains',
+  'flows',
+  'channels',
+  'entities',
+  'containers',
+  'data-products',
+];
+
+export class Page extends HybridPage {
+  static async getStaticPaths() {
+    if (isSSR()) {
+      return [];
+    }
+
+    const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]({ getAllVersions: false })));
+
+    return allItems.flatMap((items, index) =>
+      items.map((item) => ({
+        params: {
+          type: itemTypes[index],
+          id: item.data.id,
+        },
+        props: {
+          type: itemTypes[index],
+          ...item,
+        },
+      }))
+    );
+  }
+
+  protected static async fetchData(params: any) {
+    const { type, id } = params;
+
+    if (!type || !id || !(type in pageDataLoader)) {
+      return null;
+    }
+
+    const items = await pageDataLoader[type as PageTypes]({ getAllVersions: false });
+    const item = items.find((entry) => entry.data.id === id);
+
+    if (!item) {
+      return null;
+    }
+
+    return {
+      type: type as CollectionTypes,
+      ...item,
+    };
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Documentation not found',
+    });
+  }
+}