@eventcatalog/core 3.15.3 → 3.15.5

package/dist/analytics/analytics.cjs

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-J4ZZS52N.js";
-import "../chunk-RT62GNSH.js";
+} from "../chunk-POPPIA45.js";
+import "../chunk-UEW5NL62.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

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

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-UMQ25VGC.js";
-import "../chunk-J4ZZS52N.js";
+} from "../chunk-FQ6YAAP5.js";
+import "../chunk-POPPIA45.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-RT62GNSH.js";
+import "../chunk-UEW5NL62.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-7QZA7SNX.js → chunk-5UYAVUK5.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-6OV5C75V.js";
+} from "./chunk-V4O7URWJ.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-UMQ25VGC.js → chunk-FQ6YAAP5.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-J4ZZS52N.js";
+} from "./chunk-POPPIA45.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-J4ZZS52N.js → chunk-POPPIA45.js}

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

package/dist/{chunk-RT62GNSH.js → chunk-UEW5NL62.js}

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

package/dist/{chunk-6OV5C75V.js → chunk-V4O7URWJ.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-RT62GNSH.js";
+} from "./chunk-UEW5NL62.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-RT62GNSH.js";
+} from "./chunk-UEW5NL62.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-UMQ25VGC.js";
-import "./chunk-J4ZZS52N.js";
+} from "./chunk-FQ6YAAP5.js";
+import "./chunk-POPPIA45.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-3KXCGYET.js";
 import {
   generate
-} from "./chunk-7QZA7SNX.js";
+} from "./chunk-5UYAVUK5.js";
 import {
   logger
-} from "./chunk-6OV5C75V.js";
+} from "./chunk-V4O7URWJ.js";
 import {
   VERSION
-} from "./chunk-RT62GNSH.js";
+} from "./chunk-UEW5NL62.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.15.3";
+var version = "3.15.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-7QZA7SNX.js";
-import "./chunk-6OV5C75V.js";
-import "./chunk-RT62GNSH.js";
+} from "./chunk-5UYAVUK5.js";
+import "./chunk-V4O7URWJ.js";
+import "./chunk-UEW5NL62.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.15.3";
+var version = "3.15.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-6OV5C75V.js";
-import "../chunk-RT62GNSH.js";
+} from "../chunk-V4O7URWJ.js";
+import "../chunk-UEW5NL62.js";
 export {
   logger
 };

package/eventcatalog/src/components/MDX/ResourceRef/ResourceRef.astro

@@ -28,7 +28,8 @@ interface Props {
     | 'diagram'
     | 'container'
     | 'user'
-    | 'team';
+    | 'team'
+    | 'doc';
   version?: string;
 }
 
@@ -38,6 +39,20 @@ const { type = 'entity', version } = Astro.props;
 const slotContent = await Astro.slots.render('default');
 const resourceId = slotContent.trim();
 
+const normalizeCustomDocPath = (value: string): string => {
+  const normalized = value
+    .trim()
+    .replace(/^https?:\/\/[^/]+/i, '')
+    .replace(/\\/g, '/');
+  return normalized
+    .replace(/^\/+/, '')
+    .replace(/^docs\/custom\//i, '')
+    .replace(/^docs\//i, '')
+    .replace(/\/+$/, '');
+};
+
+const normalizedResourceId = normalizeCustomDocPath(resourceId).toLowerCase();
+
 // Map type to collection name
 const collection = resourceToCollectionMap[type as keyof typeof resourceToCollectionMap];
 
@@ -56,6 +71,7 @@ const typeStyles: Record<string, { borderColor: string; label: string }> = {
   container: { borderColor: 'var(--ec-badge-default-text)', label: 'Container' }, // gray
   user: { borderColor: 'var(--ec-badge-default-text)', label: 'User' }, // gray
   team: { borderColor: 'var(--ec-badge-default-text)', label: 'Team' }, // gray
+  doc: { borderColor: 'var(--ec-badge-default-text)', label: 'Doc' }, // gray
 };
 
 // SVG icons for each type (from heroicons outline)
@@ -81,6 +97,7 @@ const typeIcons: Record<string, string> = {
     '<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />', // Database
   user: '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />', // User
   team: '<path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />', // UserGroup
+  doc: '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-8.25a2.25 2.25 0 00-2.25-2.25h-10.5A2.25 2.25 0 004.5 6v12a2.25 2.25 0 002.25 2.25h5.25M16.5 18.75h6m-3-3v6" />', // Document with plus
 };
 
 const style = typeStyles[type] || typeStyles.entity;
@@ -92,23 +109,51 @@ let hasError = false;
 let errorMessage = '';
 
 try {
-  if (!collection) {
-    throw new Error(`Unknown resource type: ${type}`);
-  }
+  if (type === 'doc') {
+    const docs = (await getCollection('customPages')) as {
+      id: string;
+      data: { title?: string; summary?: string; slug?: string; owners?: any[] };
+    }[];
 
-  const resourcesCollection = (await getCollection(collection as any)) as { data: { id: string; version: string } }[];
-  const resources = getItemsFromCollectionByIdAndSemverOrLatest(resourcesCollection, resourceId, version);
+    const doc = docs.find((entry) => {
+      const normalizedId = normalizeCustomDocPath(entry.id).toLowerCase();
+      const normalizedSlug = normalizeCustomDocPath(entry.data.slug || '').toLowerCase();
 
-  if (resources.length === 0) {
-    throw new Error(`Resource not found: ${resourceId}`);
-  }
+      return normalizedId === normalizedResourceId || normalizedSlug === normalizedResourceId;
+    });
+
+    if (!doc) {
+      throw new Error(`Document not found: ${resourceId}`);
+    }
+
+    const docSlug = normalizeCustomDocPath(doc.data.slug || doc.id);
+    href = buildUrl(`/docs/custom/${docSlug}`);
+    resource = {
+      ...doc,
+      data: {
+        ...doc.data,
+        name: doc.data.title || docSlug,
+      },
+    };
+  } else {
+    if (!collection) {
+      throw new Error(`Unknown resource type: ${type}`);
+    }
+
+    const resourcesCollection = (await getCollection(collection as any)) as { data: { id: string; version: string } }[];
+    const resources = getItemsFromCollectionByIdAndSemverOrLatest(resourcesCollection, resourceId, version);
 
-  resource = resources[0];
-  // Diagrams use /diagrams/ path, other resources use /docs/{collection}/
-  href =
-    type === 'diagram'
-      ? buildUrl(`/diagrams/${resourceId}/${resource.data.version}`)
-      : buildUrl(`/docs/${collection}/${resourceId}/${resource.data.version}`);
+    if (resources.length === 0) {
+      throw new Error(`Resource not found: ${resourceId}`);
+    }
+
+    resource = resources[0];
+    // Diagrams use /diagrams/ path, other resources use /docs/{collection}/
+    href =
+      type === 'diagram'
+        ? buildUrl(`/diagrams/${resourceId}/${resource.data.version}`)
+        : buildUrl(`/docs/${collection}/${resourceId}/${resource.data.version}`);
+  }
 } catch (error) {
   hasError = true;
   errorMessage = error instanceof Error ? error.message : 'Unknown error';
@@ -119,6 +164,8 @@ const maxSummaryLength = 120;
 const summary = resource?.data?.summary || '';
 const truncatedSummary = summary.length > maxSummaryLength ? summary.slice(0, maxSummaryLength) + '...' : summary;
 
+const isVersionedResource = type !== 'doc';
+
 // Only these types have visualizers
 const hasVisualizer = ['domain', 'service', 'event', 'query', 'command', 'container'].includes(type);
 
@@ -192,7 +239,7 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
     hasError ? (
       <span
         class="text-[rgb(var(--ec-page-text-muted))] underline decoration-wavy decoration-red-400/50 underline-offset-2 cursor-help"
-        title={`Resource not found: ${resourceId}`}
+        title={`Reference not found: ${resourceId}`}
       >
         {resourceId}
       </span>
@@ -240,9 +287,11 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
                   </span>
                   <span class="text-[0.65rem] text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wide">{style.label}</span>
                 </span>
-                <span class="text-[0.7rem] font-mono text-[rgb(var(--ec-page-text-muted))] mt-0.5">
-                  v{resource?.data?.version}
-                </span>
+                {isVersionedResource && (
+                  <span class="text-[0.7rem] font-mono text-[rgb(var(--ec-page-text-muted))] mt-0.5">
+                    v{resource?.data?.version}
+                  </span>
+                )}
               </span>
               <svg
                 class="w-5 h-5 flex-shrink-0"
@@ -392,7 +441,7 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
                 )}
               </span>
               <a href={href} class="text-[rgb(var(--ec-accent))] hover:underline font-medium">
-                {type === 'diagram' ? 'View diagram' : 'View docs'}
+                {type === 'diagram' ? 'View diagram' : type === 'doc' ? 'View doc' : 'View docs'}
               </a>
             </span>
           </span>

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/components/NestedItem.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { buildUrl } from '@utils/url-builder';
 import type { SidebarItem } from '../types';
 import { ExternalLinkIcon } from 'lucide-react';
+import { getCustomDocsSidebarBadgeClasses } from '@enterprise/custom-documentation/utils/badge-styles';
 
 interface NestedItemProps {
   item: SidebarItem;
@@ -29,6 +30,8 @@ const NestedItem: React.FC<NestedItemProps> = ({
     const folderPath = folderHasLink ? buildUrl(`/docs/custom/${item.slug}`) : undefined;
     const isFolderActive = folderPath && (currentPath === folderPath || currentPath.endsWith(`/${item.slug}`));
 
+    const badgeClassName = getCustomDocsSidebarBadgeClasses(item.badge?.color);
+
     return (
       <div className="py-1">
         <div className="flex items-center">
@@ -66,17 +69,7 @@ const NestedItem: React.FC<NestedItemProps> = ({
               data-active={isFolderActive}
             >
               <span className="truncate">{item.label}</span>
-              {item.badge && item?.badge?.text && (
-                <span
-                  className={
-                    item.badge.color
-                      ? `text-${item.badge.color}-600 dark:text-${item.badge.color}-400 ml-2 text-[10px] font-medium bg-${item.badge.color}-50 dark:bg-${item.badge.color}-500/20 px-2 py-0.5 rounded uppercase`
-                      : `text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase`
-                  }
-                >
-                  {item.badge.text}
-                </span>
-              )}
+              {item.badge && item?.badge?.text && <span className={badgeClassName}>{item.badge.text}</span>}
             </a>
           ) : (
             // Folder without index file - render as toggle button
@@ -88,17 +81,7 @@ const NestedItem: React.FC<NestedItemProps> = ({
               }}
             >
               <span className="truncate">{item.label}</span>
-              {item.badge && item?.badge?.text && (
-                <span
-                  className={
-                    item.badge.color
-                      ? `text-${item.badge.color}-600 dark:text-${item.badge.color}-400 ml-2 text-[10px] font-medium bg-${item.badge.color}-50 dark:bg-${item.badge.color}-500/20 px-2 py-0.5 rounded uppercase`
-                      : `text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase`
-                  }
-                >
-                  {item.badge.text}
-                </span>
-              )}
+              {item.badge && item?.badge?.text && <span className={badgeClassName}>{item.badge.text}</span>}
             </button>
           )}
         </div>
@@ -153,6 +136,8 @@ const NestedItem: React.FC<NestedItemProps> = ({
     itemPath = item.slug;
   }
 
+  const badgeClassName = getCustomDocsSidebarBadgeClasses(item.badge?.color);
+
   return (
     <a
       href={itemPath}
@@ -165,17 +150,7 @@ const NestedItem: React.FC<NestedItemProps> = ({
         {item.label}
         {isExternalLink && <ExternalLinkIcon className="w-3 -mt-0.5 h-3" />}
       </span>
-      {item.badge && item?.badge?.text && (
-        <span
-          className={
-            item.badge.color
-              ? `text-${item.badge.color}-600 dark:text-${item.badge.color}-400 ml-2 text-[10px] font-medium bg-${item.badge.color}-50 dark:bg-${item.badge.color}-500/20 px-2 py-0.5 rounded uppercase`
-              : `text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase`
-          }
-        >
-          {item.badge.text}
-        </span>
-      )}
+      {item.badge && item?.badge?.text && <span className={badgeClassName}>{item.badge.text}</span>}
     </a>
   );
 };

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/index.tsx

@@ -4,6 +4,7 @@ import { buildUrl } from '@utils/url-builder';
 import type { CustomDocsNavProps, SidebarSection, SidebarItem } from './types';
 import NestedItem from './components/NestedItem';
 import NoResultsFound from './components/NoResultsFound';
+import { getCustomDocsSidebarBadgeClasses } from '@enterprise/custom-documentation/utils/badge-styles';
 
 const STORAGE_KEY = 'EventCatalog:customDocsSidebarCollapsedGroups';
 const DEBOUNCE_DELAY = 300; // 300ms debounce delay
@@ -225,105 +226,98 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
         {hasNoResults ? (
           <NoResultsFound searchTerm={debouncedSearchTerm} />
         ) : (
-          filteredSidebarItems.map((section: SidebarSection, index: number) => (
-            <div className="pt-2 pb-2 px-3" key={`section-${index}`}>
-              <div className="space-y-0" data-section={`section-${index}`}>
-                {section.items ? (
-                  <div className="flex items-center">
-                    <button
-                      className="p-1 hover:bg-[rgb(var(--ec-content-hover))] rounded-md flex-shrink-0"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        toggleGroupCollapse(`section-${index}`);
-                      }}
-                    >
-                      <div
-                        className={`transition-transform duration-150 ${collapsedGroups[`section-${index}`] ? '' : 'rotate-180'}`}
+          filteredSidebarItems.map((section: SidebarSection, index: number) => {
+            const sectionBadgeClassName = getCustomDocsSidebarBadgeClasses(section.badge?.color);
+            return (
+              <div className="pt-2 pb-2 px-3" key={`section-${index}`}>
+                <div className="space-y-0" data-section={`section-${index}`}>
+                  {section.items ? (
+                    <div className="flex items-center">
+                      <button
+                        className="p-1 hover:bg-[rgb(var(--ec-content-hover))] rounded-md flex-shrink-0"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleGroupCollapse(`section-${index}`);
+                        }}
                       >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          strokeWidth="1.5"
-                          stroke="currentColor"
-                          aria-hidden="true"
-                          data-slot="icon"
-                          className="h-3 w-3 text-[rgb(var(--ec-icon-color))]"
+                        <div
+                          className={`transition-transform duration-150 ${collapsedGroups[`section-${index}`] ? '' : 'rotate-180'}`}
                         >
-                          <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
-                        </svg>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            strokeWidth="1.5"
+                            stroke="currentColor"
+                            aria-hidden="true"
+                            data-slot="icon"
+                            className="h-3 w-3 text-[rgb(var(--ec-icon-color))]"
+                          >
+                            <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        className="flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-[rgb(var(--ec-content-hover))] min-w-0 flex-1"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleGroupCollapse(`section-${index}`);
+                        }}
+                      >
+                        <span className="truncate">{section.label}</span>
+                        {section.badge && section?.badge?.text && (
+                          <span className={sectionBadgeClassName}>{section.badge.text}</span>
+                        )}
+                      </button>
+                    </div>
+                  ) : (
+                    <div className="flex items-center">
+                      <span className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md">
+                        <span className="truncate">{section.label}</span>
+                        <span className={sectionBadgeClassName}>Section</span>
+                      </span>
+                    </div>
+                  )}
+
+                  {section.items && (
+                    <div
+                      className={`overflow-hidden transition-[height] duration-150 ease-out ${
+                        collapsedGroups[`section-${index}`] ? 'h-0' : 'h-auto'
+                      }`}
+                    >
+                      <div className="space-y-0.5 border-[rgb(var(--ec-page-border))] border-l pl-4 ml-[9px] mt-1">
+                        {section.items.map((item: SidebarItem, itemIndex: number) => (
+                          <NestedItem
+                            key={`item-${index}-${itemIndex}`}
+                            item={item}
+                            currentPath={currentPath}
+                            parentId={`${index}`}
+                            itemIndex={itemIndex}
+                            collapsedGroups={collapsedGroups}
+                            toggleGroupCollapse={toggleGroupCollapse}
+                          />
+                        ))}
                       </div>
-                    </button>
-                    <button
-                      className="flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-[rgb(var(--ec-content-hover))] min-w-0 flex-1"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        toggleGroupCollapse(`section-${index}`);
-                      }}
+                    </div>
+                  )}
+
+                  {section.slug && !section.items && (
+                    <a
+                      href={buildUrl(`/docs/custom/${section.slug}`)}
+                      className={`flex items-center px-2 py-1.5 text-xs ${
+                        currentPath.endsWith(`/${section.slug}`)
+                          ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-page-text))] font-semibold'
+                          : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))]'
+                      } rounded-md ml-6`}
+                      data-active={currentPath.endsWith(`/${section.slug}`)}
                     >
                       <span className="truncate">{section.label}</span>
-                      {section.badge && section?.badge?.text && (
-                        <span
-                          className={
-                            section.badge.color
-                              ? `text-${section.badge.color}-600 dark:text-${section.badge.color}-400 ml-2 text-[10px] font-medium bg-${section.badge.color}-50 dark:bg-${section.badge.color}-500/20 px-2 py-0.5 rounded uppercase`
-                              : `text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase`
-                          }
-                        >
-                          {section.badge.text}
-                        </span>
-                      )}
-                    </button>
-                  </div>
-                ) : (
-                  <div className="flex items-center">
-                    <span className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md">
-                      <span className="truncate">{section.label}</span>
-                      <span className="text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase">
-                        Section
-                      </span>
-                    </span>
-                  </div>
-                )}
-
-                {section.items && (
-                  <div
-                    className={`overflow-hidden transition-[height] duration-150 ease-out ${
-                      collapsedGroups[`section-${index}`] ? 'h-0' : 'h-auto'
-                    }`}
-                  >
-                    <div className="space-y-0.5 border-[rgb(var(--ec-page-border))] border-l pl-4 ml-[9px] mt-1">
-                      {section.items.map((item: SidebarItem, itemIndex: number) => (
-                        <NestedItem
-                          key={`item-${index}-${itemIndex}`}
-                          item={item}
-                          currentPath={currentPath}
-                          parentId={`${index}`}
-                          itemIndex={itemIndex}
-                          collapsedGroups={collapsedGroups}
-                          toggleGroupCollapse={toggleGroupCollapse}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {section.slug && !section.items && (
-                  <a
-                    href={buildUrl(`/docs/custom/${section.slug}`)}
-                    className={`flex items-center px-2 py-1.5 text-xs ${
-                      currentPath.endsWith(`/${section.slug}`)
-                        ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-page-text))] font-semibold'
-                        : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))]'
-                    } rounded-md ml-6`}
-                    data-active={currentPath.endsWith(`/${section.slug}`)}
-                  >
-                    <span className="truncate">{section.label}</span>
-                  </a>
-                )}
+                    </a>
+                  )}
+                </div>
               </div>
-            </div>
-          ))
+            );
+          })
         )}
       </div>
     </nav>

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

@@ -12,6 +12,7 @@ import { buildUrl } from '@utils/url-builder';
 import { resourceToCollectionMap } from '@utils/collections/util';
 import { getMDXComponentsByName } from '@utils/markdown';
 import { getAdjacentPages } from '@enterprise/custom-documentation/utils/custom-docs';
+import { getCustomDocsContentBadgeClasses } from '@enterprise/custom-documentation/utils/badge-styles';
 
 import CustomDocsNav from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
@@ -78,6 +79,11 @@ const ownersList = filteredOwners.map((o) => ({
 }));
 
 const badges = doc?.badges || [];
+
+const getCustomDocBadgeClasses = (badge: any) => {
+  const color = badge?.backgroundColor || badge?.textColor;
+  return `${getCustomDocsContentBadgeClasses(color)} ${badge?.class ? badge.class : ''}`;
+};
 ---
 
 <VerticalSideBarLayout title={doc.title || 'Documentation'} showNestedSideBar={false}>
@@ -104,12 +110,9 @@ const badges = doc?.badges || [];
                   {badges.map((badge: any) => {
                     return (
                       <a href={badge.url || '#'} class="pb-2">
-                        <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 : ''} `}
-                        >
-                          {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 id={badge.id || ''} class={`${getCustomDocBadgeClasses(badge)} mr-2`}>
+                          {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>

package/eventcatalog/src/enterprise/custom-documentation/utils/badge-styles.ts

@@ -0,0 +1,51 @@
+type ThemeBadgeType = 'domain' | 'service' | 'event' | 'command' | 'query' | 'design' | 'channel' | 'default';
+
+const THEME_BADGE_CLASSES: Record<ThemeBadgeType, string> = {
+  domain: 'bg-[rgb(var(--ec-badge-domain-bg))] text-[rgb(var(--ec-badge-domain-text))]',
+  service: 'bg-[rgb(var(--ec-badge-service-bg))] text-[rgb(var(--ec-badge-service-text))]',
+  event: 'bg-[rgb(var(--ec-badge-event-bg))] text-[rgb(var(--ec-badge-event-text))]',
+  command: 'bg-[rgb(var(--ec-badge-command-bg))] text-[rgb(var(--ec-badge-command-text))]',
+  query: 'bg-[rgb(var(--ec-badge-query-bg))] text-[rgb(var(--ec-badge-query-text))]',
+  design: 'bg-[rgb(var(--ec-badge-design-bg))] text-[rgb(var(--ec-badge-design-text))]',
+  channel: 'bg-[rgb(var(--ec-badge-channel-bg))] text-[rgb(var(--ec-badge-channel-text))]',
+  default: 'bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]',
+};
+
+const COLOR_TO_THEME_BADGE: Record<string, ThemeBadgeType> = {
+  yellow: 'domain',
+  amber: 'event',
+  orange: 'event',
+  red: 'event',
+  rose: 'event',
+  pink: 'service',
+  fuchsia: 'service',
+  blue: 'command',
+  sky: 'command',
+  purple: 'query',
+  violet: 'query',
+  cyan: 'query',
+  teal: 'design',
+  green: 'design',
+  emerald: 'design',
+  lime: 'design',
+  indigo: 'channel',
+  slate: 'default',
+  gray: 'default',
+  zinc: 'default',
+  neutral: 'default',
+  stone: 'default',
+};
+
+const getThemeBadgeClasses = (color?: string) => {
+  if (!color) return THEME_BADGE_CLASSES.default;
+  const key = color.trim().toLowerCase();
+  return THEME_BADGE_CLASSES[COLOR_TO_THEME_BADGE[key] || 'default'];
+};
+
+export const getCustomDocsSidebarBadgeClasses = (color?: string) => {
+  return `ml-2 text-[10px] font-medium px-2 py-0.5 rounded uppercase border border-[rgb(var(--ec-page-border))] ${getThemeBadgeClasses(color)}`;
+};
+
+export const getCustomDocsContentBadgeClasses = (color?: string) => {
+  return `inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium border border-[rgb(var(--ec-page-border))] ${getThemeBadgeClasses(color)}`;
+};

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -225,6 +225,22 @@ const canPageBeEmbedded = isEmbedEnabled();
     </script>
     <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
     <style is:global>
+      html,
+      body {
+        background-color: rgb(var(--ec-page-bg));
+      }
+
+      body {
+        min-height: 100vh;
+        min-height: 100dvh;
+      }
+
+      #eventcatalog-application {
+        min-height: 100vh;
+        min-height: 100dvh;
+        background-color: rgb(var(--ec-page-bg));
+      }
+
       .sidebar-transition {
         transition-property: width, transform;
         transition-duration: 300ms;

package/eventcatalog/src/pages/docs/custom/feature.astro

@@ -10,7 +10,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
         <div>
           <div
-            class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 font-medium text-sm mb-6"
+            class="inline-flex items-center px-4 py-2 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] font-medium text-sm mb-6"
           >
             <FileText className="w-4 h-4 mr-2" />
             New: Bring your documentation into EventCatalog
@@ -26,7 +26,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
             <a
               href="https://demo.eventcatalog.dev/docs/custom/guides/creating-new-microservices/01-index"
               target="_blank"
-              class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-150"
+              class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-[rgb(var(--ec-button-text))] bg-[rgb(var(--ec-button-bg))] hover:opacity-90 transition-colors duration-150"
             >
               View the demo
               <svg class="ml-2 w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
@@ -46,7 +46,7 @@ import { BookOpenIcon, FileText } from 'lucide-react';
           </div>
           <p class="text-sm text-[rgb(var(--ec-page-text-muted))]">
             Available with EventCatalog Starter or Scale plans
-            <a href="https://www.eventcatalog.dev/pricing" class="text-blue-600 dark:text-blue-400 font-medium block"
+            <a href="https://www.eventcatalog.dev/pricing" class="text-[rgb(var(--ec-accent))] font-medium block"
               >Try free for 14 days, no credit card required</a
             >
           </p>
@@ -73,8 +73,8 @@ import { BookOpenIcon, FileText } from 'lucide-react';
       {/* Features Section */}
       <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
         <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
-          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+          <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"></path>
             </svg>
           </div>
@@ -85,8 +85,8 @@ import { BookOpenIcon, FileText } from 'lucide-react';
         </div>
 
         <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
-          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+          <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path
                 d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
               ></path>
@@ -99,8 +99,8 @@ import { BookOpenIcon, FileText } from 'lucide-react';
         </div>
 
         <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
-          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+          <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"
               ></path>
             </svg>
@@ -112,8 +112,8 @@ import { BookOpenIcon, FileText } from 'lucide-react';
         </div>
 
         <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
-          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+          <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path
                 d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
               ></path>
@@ -126,8 +126,8 @@ import { BookOpenIcon, FileText } from 'lucide-react';
         </div>
 
         <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
-          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+          <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"></path>
             </svg>
           </div>
@@ -138,8 +138,8 @@ import { BookOpenIcon, FileText } from 'lucide-react';
         </div>
 
         <div class="bg-[rgb(var(--ec-card-bg))] rounded-xl p-6 shadow-sm border border-[rgb(var(--ec-page-border))]">
-          <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
-            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+          <div class="w-12 h-12 bg-[rgb(var(--ec-accent-subtle))] rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-[rgb(var(--ec-accent))]" viewBox="0 0 24 24" fill="currentColor">
               <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path>
             </svg>
           </div>

package/eventcatalog/src/pages/visualiser/domain-integrations/index.astro

@@ -1,7 +1,6 @@
 ---
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
 import VisualiserLayout from '@layouts/VisualiserLayout.astro';
-import { buildUrl } from '@utils/url-builder';
 import { ClientRouter } from 'astro:transitions';
 ---
 
@@ -21,10 +20,6 @@ import { ClientRouter } from 'astro:transitions';
       linkTo="visualiser"
       version="1.0.0"
       linksToVisualiser={false}
-      href={{
-        label: 'View Documentation',
-        url: buildUrl('/docs'),
-      }}
     />
   </div>
   <ClientRouter />

package/eventcatalog/src/remark-plugins/resource-ref.ts

@@ -7,17 +7,31 @@ import { findAndReplace } from 'mdast-util-find-and-replace';
  * - [[entity|Order]] -> <ResourceRef type="entity">Order</ResourceRef>
  * - [[service|OrderService@1.0.0]] -> <ResourceRef type="service" version="1.0.0">OrderService</ResourceRef>
  * - [[diagram|target-architecture]] -> <ResourceRef type="diagram">target-architecture</ResourceRef>
+ * - [[doc|runbooks/oncall]] -> <ResourceRef type="doc">runbooks/oncall</ResourceRef>
  * - [[Order]] -> <ResourceRef type="entity">Order</ResourceRef> (defaults to entity)
  * - [[Order@0.0.1]] -> <ResourceRef type="entity" version="0.0.1">Order</ResourceRef>
  */
 export function remarkResourceRef() {
   return function (tree: any) {
-    // First pass: match [[type|Name]] or [[type|Name@version]] pattern
+    // First pass: match [[type|Name]], [[type|Name@version]], or nested ids like [[doc|guides/getting-started]]
     findAndReplace(tree, [
-      /\[\[([a-z]+)\|([\w-]+)(?:@([\d.]+))?\]\]/g,
+      /\[\[([a-z-]+)\|([^[\]]+?)\]\]/g,
       // @ts-ignore: Types are complex but it works
-      function (_match: string, type: string, resourceId: string, version?: string) {
-        const attributes: any[] = [{ type: 'mdxJsxAttribute', name: 'type', value: type }];
+      function (_match: string, type: string, target: string) {
+        const normalizedType = type.trim().toLowerCase();
+        let resourceId = target.trim();
+        let version: string | undefined;
+
+        // Preserve existing @version behavior for resource refs, but keep doc targets as-is.
+        if (normalizedType !== 'doc') {
+          const versionMatch = resourceId.match(/^(.*)@([\d.]+)$/);
+          if (versionMatch) {
+            resourceId = versionMatch[1].trim();
+            version = versionMatch[2];
+          }
+        }
+
+        const attributes: any[] = [{ type: 'mdxJsxAttribute', name: 'type', value: normalizedType }];
         if (version) {
           attributes.push({ type: 'mdxJsxAttribute', name: 'version', value: version });
         }

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.15.3",
+  "version": "3.15.5",
   "publishConfig": {
     "access": "public"
   },
@@ -101,8 +101,8 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^3.25.0",
-    "@eventcatalog/linter": "1.0.5",
-    "@eventcatalog/sdk": "2.14.1",
+    "@eventcatalog/linter": "1.0.6",
+    "@eventcatalog/sdk": "2.14.2",
     "@eventcatalog/visualiser": "^3.14.0"
   },
   "devDependencies": {