@eventcatalog/core 3.0.0-beta.1 → 3.0.0-beta.11

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

@@ -41,9 +41,9 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
   );
 
   return (
-    <div className={`rounded-xl overflow-hidden bg-pink-50 p-8 border-2 border-dashed border-pink-300`}>
+    <div className={`rounded-xl overflow-hidden bg-white p-8 border-2 border-dashed border-pink-300`}>
       {/* Service Title */}
-      <div className="flex items-center gap-2 mb-8">
+      {/* <div className="flex items-center gap-2 mb-8">
         <ServerIcon className="h-6 w-6 text-pink-500" />
         <h2 className="text-2xl font-semibold text-gray-900">{service.data.name}</h2>
         <div className="flex gap-2 ml-auto">
@@ -60,7 +60,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             Read documentation
           </a>
         </div>
-      </div>
+      </div> */}
 
       <div className="grid grid-cols-3 gap-8 relative">
         {/* Left Column - Receives Messages & Reads From Containers */}
@@ -70,7 +70,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="mb-6">
               <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
                 <ServerIcon className="h-5 w-5 text-blue-500" />
-                Receives ({receives.length})
+                Inbound Messages ({receives.length})
               </h2>
             </div>
             {receives.length > 0 ? (
@@ -124,7 +124,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
         </div>
 
         {/* Service Information (Center) */}
-        <div className="bg-white border-2 border-pink-100 rounded-lg p-6 flex flex-col justify-center">
+        <div className="bg-pink-50 border-2 border-pink-100 rounded-lg p-6 flex flex-col justify-center">
           <div className="flex flex-col items-center gap-4">
             <ServerIcon className="h-12 w-12 text-pink-500" />
             <p className="text-xl font-semibold text-gray-900 text-center">{service.data.name}</p>
@@ -133,11 +133,11 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="w-full grid grid-cols-2 gap-3 mt-2">
               <div className="text-center p-3 bg-blue-50 rounded-lg border border-blue-200">
                 <div className="text-2xl font-bold text-blue-600">{receives.length}</div>
-                <div className="text-xs text-gray-600 mt-1">Receives</div>
+                <div className="text-xs text-gray-600 mt-1">Inbound Messages</div>
               </div>
               <div className="text-center p-3 bg-green-50 rounded-lg border border-green-200">
                 <div className="text-2xl font-bold text-green-600">{sends.length}</div>
-                <div className="text-xs text-gray-600 mt-1">Sends</div>
+                <div className="text-xs text-gray-600 mt-1">Outbound Messages</div>
               </div>
               {readsFrom.length > 0 && (
                 <div className="text-center p-3 bg-orange-50 rounded-lg border border-orange-200">
@@ -168,7 +168,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="mb-6">
               <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
                 <ServerIcon className="h-5 w-5 text-emerald-500" />
-                Sends ({sends.length})
+                Outbound Messages ({sends.length})
               </h2>
             </div>
             {sends.length > 0 ? (

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -19,7 +19,7 @@ import {
 import '@xyflow/react/dist/style.css';
 import { ExternalLink, HistoryIcon } from 'lucide-react';
 import { toPng } from 'html-to-image';
-import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+import { DocumentArrowDownIcon, PresentationChartLineIcon } from '@heroicons/react/24/outline';
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
 import FlowNode from './Nodes/Flow';
@@ -135,6 +135,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const [activeStepIndex, setActiveStepIndex] = useState<number | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   // const [isStudioModalOpen, setIsStudioModalOpen] = useState(false);
 
   // Check if there are channels to determine if we need the visualizer functionality
@@ -349,6 +350,30 @@ const NodeGraphBuilder = ({
     setIsStudioModalOpen(true);
   };
 
+  const toggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement) {
+      reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
+        console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+      });
+    } else {
+      document.exitFullscreen();
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+      setTimeout(() => {
+        fitView({ duration: 800 });
+      }, 100);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [fitView]);
+
   const handleExportVisual = useCallback(() => {
     const imageWidth = 1024;
     const imageHeight = 768;
@@ -563,7 +588,7 @@ const NodeGraphBuilder = ({
   const isFlowVisualization = edges.some((edge: Edge) => edge.type === 'flow-edge');
 
   return (
-    <div ref={reactFlowWrapperRef} className="w-full h-full">
+    <div ref={reactFlowWrapperRef} className="w-full h-full bg-gray-50">
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
@@ -583,7 +608,7 @@ const NodeGraphBuilder = ({
         <Panel position="top-center" className="w-full pr-6 ">
           <div className="flex space-x-2 justify-between items-center">
             <div className="flex space-x-2 ml-4">
-              <div>
+              <div className="relative group">
                 <button
                   onClick={() => setIsSettingsOpen(!isSettingsOpen)}
                   className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
@@ -591,6 +616,23 @@ const NodeGraphBuilder = ({
                 >
                   <CogIcon className="h-5 w-5 text-gray-600" />
                 </button>
+                <div className="absolute top-full left-0 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                  Settings
+                </div>
+              </div>
+              <div className="relative group">
+                <button
+                  onClick={toggleFullScreen}
+                  className={`py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 ${
+                    isFullscreen ? 'bg-purple-50 text-purple-600' : ''
+                  }`}
+                  aria-label={isFullscreen ? 'Exit presentation mode' : 'Enter presentation mode'}
+                >
+                  <PresentationChartLineIcon className={`h-5 w-5 ${isFullscreen ? 'text-purple-600' : 'text-gray-600'}`} />
+                </button>
+                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                  {isFullscreen ? 'Exit Presentation Mode' : 'Presentation Mode'}
+                </div>
               </div>
 
               {title && (

package/eventcatalog/src/components/Search/SearchModal.tsx

@@ -20,6 +20,7 @@ import {
   ArrowUturnLeftIcon,
   StarIcon,
   Square2StackIcon,
+  ArrowsRightLeftIcon,
 } from '@heroicons/react/24/outline';
 import { StarIcon as StarIconSolid, CircleStackIcon } from '@heroicons/react/24/solid';
 import { useStore } from '@nanostores/react';
@@ -33,7 +34,7 @@ const typeIcons: any = {
   Command: ChatBubbleLeftIcon,
   Query: QueryIcon,
   Entity: CubeIcon,
-  Channel: QueueListIcon,
+  Channel: ArrowsRightLeftIcon,
   Team: UserGroupIcon,
   User: UserIcon,
   Language: BookOpenIcon,
@@ -68,8 +69,6 @@ function classNames(...classes: (string | boolean | undefined)[]) {
 
 // Helper to construct URL from key if href is missing
 const getUrlForItem = (node: any, key: string) => {
-  if (node.href) return node.href;
-
   const parts = key.split(':');
   if (parts.length < 2) return null; // Need at least type:id
 
@@ -83,8 +82,16 @@ const getUrlForItem = (node: any, key: string) => {
   // Only show items that have a version to avoid duplicates
   if (!version) return null;
 
+  // If node has href, use it, otherwise construct from key
+  if (node.href) return node.href;
+
   // Pluralize type for URL if needed
-  const pluralType = ['event', 'command', 'query', 'domain', 'service', 'flow', 'container'].includes(type) ? type + 's' : type; // users/teams already have href usually, but safe fallback
+  let pluralType = type;
+  if (['event', 'command', 'domain', 'service', 'flow', 'container', 'channel'].includes(type)) {
+    pluralType = type + 's';
+  } else if (type === 'query') {
+    pluralType = 'queries';
+  }
 
   return `/docs/${pluralType}/${id}/${version}`;
 };
@@ -171,6 +178,7 @@ export default function SearchModal() {
       Team: 0,
       Container: 0,
       Design: 0,
+      Channel: 0,
     };
 
     itemsToCount.forEach((item) => {
@@ -195,6 +203,7 @@ export default function SearchModal() {
     if (counts.Service > 0) dynamicFilters.push({ id: 'Service', name: `Services (${counts.Service})` });
     if (counts.Message > 0) dynamicFilters.push({ id: 'Message', name: `Messages (${counts.Message})` });
     if (counts.Container > 0) dynamicFilters.push({ id: 'Container', name: `Containers (${counts.Container})` });
+    if (counts.Channel > 0) dynamicFilters.push({ id: 'Channel', name: `Channels (${counts.Channel})` });
     if (counts.Design > 0) dynamicFilters.push({ id: 'Design', name: `Designs (${counts.Design})` });
     if (counts.Team > 0) dynamicFilters.push({ id: 'Team', name: `Teams & Users (${counts.Team})` });
 
@@ -224,7 +233,7 @@ export default function SearchModal() {
   const filteredItems = useMemo(() => {
     if (query === '') {
       // Show favorites when search is empty
-      if (favorites.length > 0) {
+      if (favorites.length > 0 && activeFilter === 'all') {
         return favorites
           .slice(0, 5)
           .map((fav) => {
@@ -375,14 +384,14 @@ export default function SearchModal() {
                                   <p className={classNames('text-sm font-medium', active ? 'text-gray-900' : 'text-gray-700')}>
                                     {item.name}
                                   </p>
-                                  <div className="flex items-start gap-2">
+                                  <div className="flex items-center gap-2">
                                     <p
                                       className={classNames('text-sm flex-shrink-0', active ? 'text-gray-700' : 'text-gray-500')}
                                     >
                                       {item.type}
                                     </p>
                                     {item.rawNode.summary && (
-                                      <p className={classNames('text-xs truncate', active ? 'text-gray-600' : 'text-gray-400')}>
+                                      <p className={classNames('text-sm truncate', active ? 'text-gray-600' : 'text-gray-400')}>
                                         • {item.rawNode.summary}
                                       </p>
                                     )}

package/eventcatalog/src/components/SideNav/NestedSideBar/SearchBar.tsx

@@ -14,6 +14,8 @@ import {
   Database,
   Waypoints,
   SquareMousePointer,
+  ListOrdered,
+  ArrowLeftRight,
 } from 'lucide-react';
 import type { NavNode } from './sidebar-builder';
 
@@ -28,6 +30,7 @@ const getBadgeClasses = (badge: string): string => {
     query: 'bg-purple-100 text-purple-700',
     message: 'bg-indigo-100 text-indigo-700',
     design: 'bg-teal-100 text-teal-700',
+    channel: 'bg-indigo-100 text-indigo-700',
   };
   return badgeColors[badge.toLowerCase()] || 'bg-gray-100 text-gray-600';
 };
@@ -77,6 +80,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
   };
 
   const filterTypes = [
+    { key: 'channel', label: 'Channels', badge: 'Channel', icon: ArrowLeftRight },
     { key: 'command', label: 'Commands', badge: 'Command', icon: MessageSquare },
     { key: 'container', label: 'Data Stores', badge: 'Container', icon: Database },
     { key: 'design', label: 'Designs', badge: 'Design', icon: SquareMousePointer },

package/eventcatalog/src/components/SideNav/NestedSideBar/builders/domain.ts

@@ -65,6 +65,12 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
           },
         ].filter(Boolean) as ChildRef[],
       },
+      renderSubDomains && {
+        type: 'group',
+        title: 'Subdomains',
+        icon: 'Boxes',
+        pages: subDomains.map((domain) => `domain:${(domain as any).data.id}:${(domain as any).data.version}`),
+      },
       hasFlows && {
         type: 'group',
         title: 'Flows',
@@ -81,12 +87,7 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
           href: buildUrl(`/docs/entities/${(entity as any).data.id}/${(entity as any).data.version}`),
         })),
       },
-      renderSubDomains && {
-        type: 'group',
-        title: 'Subdomains',
-        icon: 'Boxes',
-        pages: subDomains.map((domain) => `domain:${(domain as any).data.id}:${(domain as any).data.version}`),
-      },
+
       ...(hasResourceGroups ? buildResourceGroupSections(resourceGroups, context) : []),
       renderServices && {
         type: 'group',

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import * as LucideIcons from 'lucide-react';
-import { ChevronRight, ChevronLeft, ChevronDown, Home, Star } from 'lucide-react';
+import { ChevronRight, ChevronLeft, ChevronDown, Home, Star, FileQuestion } from 'lucide-react';
 import type { NavigationData, NavNode, ChildRef } from './sidebar-builder';
 import SearchBar from './SearchBar';
 import { saveState, loadState, saveCollapsedSections, loadCollapsedSections } from './storage';
@@ -25,6 +25,7 @@ const getBadgeClasses = (badge: string): string => {
     query: 'bg-purple-100 text-purple-700',
     message: 'bg-indigo-100 text-indigo-700',
     design: 'bg-teal-100 text-teal-700',
+    channel: 'bg-indigo-100 text-indigo-700',
   };
   return badgeColors[badge.toLowerCase()] || 'bg-gray-100 text-gray-600';
 };
@@ -786,17 +787,17 @@ export default function NestedSideBar() {
         </div>
         <div className="flex items-center gap-1 flex-shrink-0">
           {canFavorite && (
-            <button
+            <div
               onClick={handleStarClick}
               className={cn(
-                'flex items-center justify-center w-5 h-5 rounded transition-colors',
+                'flex items-center justify-center w-5 h-5 rounded transition-colors cursor-pointer',
                 isFav
                   ? 'text-amber-400 hover:text-amber-500'
                   : 'text-gray-300 opacity-0 group-hover:opacity-100 hover:text-amber-400'
               )}
             >
               <Star className={cn('w-3.5 h-3.5', isFav && 'fill-current')} />
-            </button>
+            </div>
           )}
           {itemHasChildren && (
             <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black group-hover:translate-x-0.5 transition-transform">
@@ -1038,15 +1039,15 @@ export default function NestedSideBar() {
                               {fav.badge}
                             </span>
                           )}
-                          <button
+                          <div
                             onClick={(e) => {
                               e.stopPropagation();
                               if (node) toggleFavorite(fav.nodeKey, node);
                             }}
-                            className="flex items-center justify-center w-5 h-5 text-amber-400 hover:text-amber-500 rounded transition-colors"
+                            className="flex items-center justify-center w-5 h-5 text-amber-400 hover:text-amber-500 rounded transition-colors cursor-pointer"
                           >
                             <Star className="w-3.5 h-3.5 fill-current" />
-                          </button>
+                          </div>
                           {node?.pages && node.pages.length > 0 && (
                             <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black">
                               <ChevronRight className="w-4 h-4" />
@@ -1060,7 +1061,20 @@ export default function NestedSideBar() {
               </div>
             )}
 
-            {renderEntries(currentLevel.entries)}
+            {/* Empty State */}
+            {currentLevel.entries.length === 0 && favorites.length === 0 && (
+              <div className="flex flex-col items-center justify-center px-6 py-12 text-center">
+                <div className="mb-4 p-3 rounded-full bg-gray-100">
+                  <FileQuestion className="w-8 h-8 text-gray-400" />
+                </div>
+                <h3 className="text-sm font-semibold text-gray-900 mb-2">Your catalog is empty</h3>
+                <p className="text-xs text-gray-500 leading-relaxed max-w-[240px]">
+                  Navigation will appear here when you add resources to your EventCatalog.
+                </p>
+              </div>
+            )}
+
+            {currentLevel.entries.length > 0 && renderEntries(currentLevel.entries)}
           </nav>
         </>
       )}

package/eventcatalog/src/components/SideNav/NestedSideBar/sidebar-builder.ts

@@ -15,6 +15,7 @@ import { buildContainerNode } from './builders/container';
 import { buildFlowNode } from './builders/flow';
 import config from '@config';
 import { getDesigns } from '@utils/collections/designs';
+import { getChannels } from '@utils/collections/channels';
 
 export type { NavigationData, NavNode, ChildRef };
 
@@ -29,16 +30,18 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     return memoryCache;
   }
 
-  const [domains, services, { events, commands, queries }, containers, flows, users, teams, designs] = await Promise.all([
-    getDomains({ getAllVersions: false, includeServicesInSubdomains: false }),
-    getServices({ getAllVersions: false }),
-    getMessages({ getAllVersions: false }),
-    getContainers({ getAllVersions: false }),
-    getFlows({ getAllVersions: false }),
-    getUsers(),
-    getTeams(),
-    getDesigns(),
-  ]);
+  const [domains, services, { events, commands, queries }, containers, flows, users, teams, designs, channels] =
+    await Promise.all([
+      getDomains({ getAllVersions: false, includeServicesInSubdomains: false }),
+      getServices({ getAllVersions: false }),
+      getMessages({ getAllVersions: false }),
+      getContainers({ getAllVersions: false }),
+      getFlows({ getAllVersions: false }),
+      getUsers(),
+      getTeams(),
+      getDesigns(),
+      getChannels({ getAllVersions: false }),
+    ]);
 
   // Calculate derived lists to avoid extra fetches
   const allSubDomainIds = new Set(domains.flatMap((d) => (d.data.domains || []).map((sd: any) => sd.data.id)));
@@ -178,6 +181,30 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     {} as Record<string, NavNode>
   );
 
+  const channelNodes = channels.reduce(
+    (acc, channel) => {
+      acc[`channel:${channel.data.id}:${channel.data.version}`] = {
+        type: 'item',
+        title: channel.data.name,
+        badge: 'Channel',
+        summary: channel.data.summary,
+        href: buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.version}`),
+      };
+
+      if (channel.data.latestVersion === channel.data.version) {
+        acc[`channel:${channel.data.id}`] = {
+          type: 'item',
+          title: channel.data.name,
+          badge: 'Channel',
+          summary: channel.data.summary,
+          href: buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.version}`),
+        };
+      }
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
   const teamNodes = teams.reduce(
     (acc, team) => {
       acc[`team:${team.data.id}`] = {
@@ -273,6 +300,13 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     pages: users.map((user) => `user:${user.data.id}`),
   });
 
+  const channelList = createLeaf(channels, {
+    type: 'item',
+    title: 'Channels',
+    icon: 'ArrowRightLeft',
+    pages: channels.map((channel) => `channel:${channel.data.id}:${channel.data.version}`),
+  });
+
   const messagesChildren = ['list:events', 'list:commands', 'list:queries'].filter(
     (key, index) => [eventsList, commandsList, queriesList][index] !== undefined
   );
@@ -303,12 +337,22 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     'list:domains',
     'list:services',
     'list:messages',
+    'list:channels',
     'list:flows',
     'list:containers',
     'list:designs',
     'list:people',
   ];
-  const allChildrenNodes = [domainsList, servicesList, messagesList, flowsList, containersList, designsList, peopleList];
+  const allChildrenNodes = [
+    domainsList,
+    servicesList,
+    messagesList,
+    channelList,
+    flowsList,
+    containersList,
+    designsList,
+    peopleList,
+  ];
 
   const validAllChildren = allChildrenKeys.filter((_, idx) => allChildrenNodes[idx] !== undefined);
 
@@ -334,6 +378,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     ...(designsList ? { 'list:designs': designsList } : {}),
     ...(teamsList ? { 'list:teams': teamsList } : {}),
     ...(usersList ? { 'list:users': usersList } : {}),
+    ...(channelList ? { 'list:channels': channelList as NavNode } : {}),
     ...(peopleList ? { 'list:people': peopleList as NavNode } : {}),
     ...(allList ? { 'list:all': allList as NavNode } : {}),
   };
@@ -343,6 +388,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     ...domainNodes,
     ...serviceNodes,
     ...messageNodes,
+    ...channelNodes,
     ...containerNodes,
     ...flowNodes,
     ...userNodes,

package/eventcatalog/src/pages/_index.astro

@@ -174,7 +174,7 @@ const topTiles = [
     description: 'Business domains defined',
     href: buildUrl('/discover/domains'),
     icon: RectangleGroupIcon,
-    bgColor: 'bg-yellow-100',
+    bgColor: 'bg-yellow-500',
     textColor: 'text-yellow-600',
     arrowColor: 'text-yellow-600',
   },
@@ -184,7 +184,7 @@ const topTiles = [
     description: 'Services documented in the catalog',
     href: buildUrl('/discover/services'),
     icon: ServerIcon,
-    bgColor: 'bg-pink-100',
+    bgColor: 'bg-pink-500',
     textColor: 'text-pink-600',
     arrowColor: 'text-pink-600',
   },
@@ -194,7 +194,7 @@ const topTiles = [
     description: 'Messages documented in the catalog',
     href: buildUrl('/discover/events'),
     icon: ChatBubbleLeftIcon,
-    bgColor: 'bg-blue-100',
+    bgColor: 'bg-blue-500',
     textColor: 'text-blue-600',
     arrowColor: 'text-blue-600',
   },
@@ -204,7 +204,7 @@ const topTiles = [
     description: 'Business flows documented',
     href: buildUrl('/discover/flows'),
     icon: Workflow,
-    bgColor: 'bg-purple-100',
+    bgColor: 'bg-purple-500',
     textColor: 'text-purple-600',
     arrowColor: 'text-purple-600',
   },
@@ -347,9 +347,7 @@ const quickActions = [
                 <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
 
                 {/* Colored left border accent */}
-                <div
-                  class={`absolute left-0 top-0 bottom-0 w-1 ${tile.bgColor} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
-                />
+                <div class={`absolute left-0 top-0 bottom-0 w-1 ${tile.bgColor} transition-opacity duration-300`} />
 
                 <div class="relative">
                   <div class="flex items-center justify-between mb-4">

package/eventcatalog/src/pages/auth/login.astro

@@ -167,7 +167,7 @@ const providerConfig = {
 
               <div class="text-center">
                 <a
-                  href="#"
+                  href="https://www.eventcatalog.dev/docs/development/authentication/introduction"
                   class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200"
                 >
                   Read Authentication Documentation
@@ -237,7 +237,7 @@ const providerConfig = {
 
               <div class="text-center">
                 <a
-                  href="#"
+                  href="https://www.eventcatalog.dev/docs/development/authentication/introduction"
                   class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200"
                 >
                   Read Authentication Documentation

package/eventcatalog/src/remark-plugins/directives.ts

@@ -30,7 +30,33 @@ export function remarkDirectives() {
           class: `rounded-lg p-4 my-4 ${blockTypes[node.name as keyof typeof blockTypes] || ''}`,
         };
 
-        // Create header div that will contain icon and type
+        // Check if there's a custom title (label) provided via :::note[Custom Title]
+        // In remark-directive, the label is stored in node.children as a paragraph node
+        // with data.directiveLabel = true
+        let titleChildren;
+        let contentChildren;
+
+        const firstChild = node.children && node.children.length > 0 ? node.children[0] : null;
+        const hasCustomTitle = firstChild && firstChild.data?.directiveLabel === true;
+
+        if (hasCustomTitle && firstChild) {
+          // Custom title was provided in the label - it contains markdown parsed as inline content
+          titleChildren = firstChild.children || [
+            { type: 'text', value: node.name.charAt(0).toUpperCase() + node.name.slice(1) },
+          ];
+          contentChildren = node.children.slice(1);
+        } else {
+          // No custom title, use default based on directive name
+          titleChildren = [
+            {
+              type: 'text',
+              value: node.name.charAt(0).toUpperCase() + node.name.slice(1),
+            },
+          ];
+          contentChildren = node.children;
+        }
+
+        // Create header div that will contain icon and title
         const headerNode = {
           type: 'element',
           data: {
@@ -70,7 +96,7 @@ export function remarkDirectives() {
                 },
               ],
             },
-            // Type label
+            // Title (with support for markdown)
             {
               type: 'element',
               data: {
@@ -79,12 +105,7 @@ export function remarkDirectives() {
                   class: '',
                 },
               },
-              children: [
-                {
-                  type: 'text',
-                  value: node.name.charAt(0).toUpperCase() + node.name.slice(1),
-                },
-              ],
+              children: titleChildren,
             },
           ],
         };
@@ -98,7 +119,7 @@ export function remarkDirectives() {
               class: 'prose prose-md w-full !max-w-none ',
             },
           },
-          children: node.children,
+          children: contentChildren,
         };
 
         // Replace node's children with header and content

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.11",
   "publishConfig": {
     "access": "public"
   },
@@ -87,10 +87,11 @@
     "nanostores": "^1.1.0",
     "pagefind": "^1.3.0",
     "pako": "^2.1.0",
+    "picocolors": "^1.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-syntax-highlighter": "^16.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-expressive-code": "^0.41.3",
     "rehype-slug": "^6.0.0",