@eventcatalog/core 2.65.0 → 3.0.0-beta.0

package/eventcatalog/src/components/Header.astro

@@ -23,20 +23,27 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
 
 <nav
   id="eventcatalog-header"
-  class="fixed top-0 left-0 right-0 h-header bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-20 backdrop-blur-sm z-10"
+  class="fixed top-0 left-0 right-0 h-header bg-white/95 border-b border-gray-200 py-3 font-bold text-xl backdrop-blur-md z-10"
 >
   <div class="px-4 sm:px-4 lg:px-4">
     <div class="flex justify-between items-center">
       <div class="flex-shrink-0 flex items-center w-3/12">
-        <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center">
-          {logo.src && <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8 h-8" />}
-          {logo.text && <span class="hidden sm:inline-block text-[1em]">{logo.text}</span>}
+        <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center group">
+          {
+            logo.src && (
+              <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8 h-8 transition-transform group-hover:scale-105" />
+            )
+          }
+          {
+            logo.text && (
+              <span class="hidden sm:inline-block text-[1em] transition-colors group-hover:text-gray-600">{logo.text}</span>
+            )
+          }
         </a>
       </div>
 
       <div class="hidden lg:block flex-grow w-6/12 px-10">
-        <!-- Page find only works on static builds, disable for SSR builds for now -->
-        {!isSSR() && <Search />}
+        <Search />
       </div>
 
       <div class="hidden md:block w-3/12">
@@ -50,7 +57,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 <button
                   id="profile-menu-button"
                   type="button"
-                  class="flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-full"
+                  class="flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-full"
                   aria-expanded="false"
                   aria-haspopup="true"
                 >
@@ -58,10 +65,10 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                     <img
                       src={session.user.image}
                       alt={session.user?.name || 'User'}
-                      class="h-8 w-8 rounded-full border-2 border-gray-200 hover:border-gray-300 transition-colors"
+                      class="h-9 w-9 rounded-full border-2 border-gray-200 hover:border-gray-400 transition-all shadow-sm"
                     />
                   ) : (
-                    <div class="h-8 w-8 rounded-full border-2 border-gray-200 hover:border-gray-300 transition-colors bg-gray-100 flex items-center justify-center text-sm font-medium text-gray-600">
+                    <div class="h-9 w-9 rounded-full border-2 border-gray-200 hover:border-gray-400 transition-all bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-sm font-medium text-gray-600 shadow-sm">
                       {session.user?.name
                         ? session.user.name
                             .split(' ')
@@ -75,15 +82,15 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 </button>
                 <div
                   id="profile-dropdown"
-                  class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-100 overflow-hidden"
+                  class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-md py-1 z-50 border-2 border-gray-200 overflow-hidden"
                 >
-                  <div class="px-4 py-2 text-sm text-gray-700 border-b border-gray-100">
-                    <div class="font-medium">{session.user?.name || 'User'}</div>
-                    {session.user?.email && <div class="text-gray-500">{session.user.email}</div>}
+                  <div class="px-4 py-2 text-sm text-gray-700 border-b border-gray-200">
+                    <div class="font-semibold">{session.user?.name || 'User'}</div>
+                    {session.user?.email && <div class="text-gray-500 text-xs mt-0.5">{session.user.email}</div>}
                   </div>
                   <button
                     id="signout-btn"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors font-medium"
                   >
                     Sign out
                   </button>
@@ -99,30 +106,48 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 {isAuthEnabled() && (
                   <button
                     id="okta-signin-btn"
-                    class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                    class="bg-gray-900 hover:bg-gray-800 text-white text-sm font-medium px-4 py-2 rounded-lg transition-all shadow-sm hover:shadow focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                   >
                     Sign In
                   </button>
                 )}
                 {showEventCatalogBranding() && (
-                  <ul class="flex space-x-8">
+                  <ul class="flex space-x-4">
                     <li>
-                      <a href="https://discord.com/invite/3rjaZMmrAm">
-                        <img src={buildUrl('/icons/discord.svg', true)} class="h-7 w-7" />
+                      <a
+                        href="https://discord.com/invite/3rjaZMmrAm"
+                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+                      >
+                        <img
+                          src={buildUrl('/icons/discord.svg', true)}
+                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
+                        />
                       </a>
                     </li>
                     <li>
-                      <a href="https://github.com/event-catalog/eventcatalog">
-                        <img src={buildUrl('/icons/github.svg', true)} class="h-7 w-7" />
+                      <a
+                        href="https://github.com/event-catalog/eventcatalog"
+                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+                      >
+                        <img
+                          src={buildUrl('/icons/github.svg', true)}
+                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
+                        />
                       </a>
                     </li>
                   </ul>
                 )}
                 {showCustomBranding() && !showEventCatalogBranding() && (
-                  <ul class="flex space-x-8">
+                  <ul class="flex space-x-4">
                     <li>
-                      <a href={repositoryUrl} class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600">
-                        <img src={buildUrl('/icons/github.svg', true)} class="h-7 w-7" />
+                      <a
+                        href={repositoryUrl}
+                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors focus:outline-none"
+                      >
+                        <img
+                          src={buildUrl('/icons/github.svg', true)}
+                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
+                        />
                       </a>
                     </li>
                   </ul>

package/eventcatalog/src/components/Lists/VersionList.astro

@@ -15,7 +15,7 @@ const currentPath = Astro.url.pathname;
 ---
 
 <div class="space-y-2 pb-4">
-  <span class="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize">
+  <span class="text-xs text-black font-semibold group-data-[hover]:text-black/80 capitalize">
     {title || `Versions (${collectionItem.data.versions?.length})`}
   </span>
   <ul role="list" class="space-y-2">
@@ -30,7 +30,7 @@ const currentPath = Astro.url.pathname;
             >
               {/* {Icon && <Icon class={`h-4 w-4`} />} */}
               <HistoryIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
-              <span class={`font-light text-sm ${isCurrent ? 'underline ' : ''}`}>
+              <span class={`font-light text-xs ${isCurrent ? 'underline ' : ''}`}>
                 {version === collectionItem.data.latestVersion ? `v${version} (latest)` : `v${version}`}
               </span>
             </a>

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

@@ -5,6 +5,8 @@ import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 
+import { isVisualiserEnabled } from '@utils/feature';
+
 let design: any;
 let id = 'design';
 let maxHeight = 30;
@@ -49,7 +51,8 @@ try {
           title={title ?? design.name}
           nodes={design.nodes || []}
           edges={design.edges || []}
-          hrefLabel={'View in visualizer'}
+          hrefLabel={isVisualiserEnabled() ? 'View in visualizer' : undefined}
+          href={isVisualiserEnabled() ? `/visualiser/designs/${design.id}` : undefined}
           linkTo={'visualiser'}
           designId={design.id || id}
           client:only="react"

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

@@ -4,6 +4,7 @@ import { getNodesAndEdges } from '@utils/node-graphs/flows-node-graph';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
+import { isVisualiserEnabled } from '@utils/feature';
 
 const { id, version = 'latest', maxHeight, includeKey = true, mode = 'simple', walkthrough = true, search = true } = Astro.props;
 
@@ -49,7 +50,7 @@ const { nodes, edges } = await getNodesAndEdges({
     nodes={nodes}
     edges={edges}
     hrefLabel={'View in visualizer'}
-    href={`/visualiser/flows/${id}/${version}`}
+    href={isVisualiserEnabled() ? `/visualiser/flows/${id}/${version}` : undefined}
     linkTo={'visualiser'}
     includeKey={includeKey}
     footerLabel=`Flow diagram - ${flow.data.name} - v(${flow.data.version})`

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

@@ -26,7 +26,7 @@ interface Props {
   version: string;
   mode: 'full' | 'simple';
   linkTo?: 'docs' | 'visualiser';
-  href: {
+  href?: {
     label: string;
     url: string;
   };
@@ -142,8 +142,8 @@ if (collection === 'services-containers') {
     nodes={nodes}
     edges={edges}
     title={title}
-    hrefLabel={href.label}
-    href={href.url}
+    hrefLabel={href?.label}
+    href={href?.url}
     linkTo={linkTo}
     client:only="react"
     linksToVisualiser={linksToVisualiser}

package/eventcatalog/src/components/SchemaExplorer/SchemaDetailsPanel.tsx

@@ -20,6 +20,8 @@ interface SchemaDetailsPanelProps {
   selectedVersion: string | null;
   onVersionChange: (version: string) => void;
   apiAccessEnabled?: boolean;
+  showOwners?: boolean;
+  showProducersConsumers?: boolean;
 }
 
 export default function SchemaDetailsPanel({
@@ -28,6 +30,8 @@ export default function SchemaDetailsPanel({
   selectedVersion,
   onVersionChange,
   apiAccessEnabled = false,
+  showOwners = true,
+  showProducersConsumers = true,
 }: SchemaDetailsPanelProps) {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [schemaViewMode, setSchemaViewMode] = useState<'code' | 'schema' | 'diff'>('code');
@@ -167,7 +171,7 @@ export default function SchemaDetailsPanel({
       />
 
       {/* Producers and Consumers Section - Only show for messages (not services) */}
-      {message.collection !== 'services' && (
+      {message.collection !== 'services' && showProducersConsumers && (
         <ProducersConsumersSection
           message={message}
           isExpanded={producersConsumersExpanded}
@@ -176,7 +180,9 @@ export default function SchemaDetailsPanel({
       )}
 
       {/* Owners Section */}
-      <OwnersSection message={message} isExpanded={ownersExpanded} onToggle={() => setOwnersExpanded(!ownersExpanded)} />
+      {showOwners && (
+        <OwnersSection message={message} isExpanded={ownersExpanded} onToggle={() => setOwnersExpanded(!ownersExpanded)} />
+      )}
 
       {/* Schema Content - Takes full remaining height */}
       <div className="flex-1 overflow-hidden">

package/eventcatalog/src/components/SchemaExplorer/SchemaPageViewer.tsx

@@ -0,0 +1,37 @@
+import SchemaDetailsPanel from './SchemaDetailsPanel';
+import type { SchemaItem } from './types';
+
+interface SchemaPageViewerProps {
+  message: SchemaItem;
+  availableVersions: SchemaItem[];
+  apiAccessEnabled?: boolean;
+  showOwners?: boolean;
+  showProducersConsumers?: boolean;
+}
+
+export default function SchemaPageViewer({
+  message,
+  availableVersions,
+  apiAccessEnabled = false,
+  showOwners = true,
+  showProducersConsumers = true,
+}: SchemaPageViewerProps) {
+  const handleVersionChange = (version: string) => {
+    // Construct new URL
+    // URL: /schemas/[collection]/[id]/[version]
+    const url = `/schemas/${message.collection}/${message.data.id}/${version}`;
+    window.location.href = url;
+  };
+
+  return (
+    <SchemaDetailsPanel
+      message={message}
+      availableVersions={availableVersions}
+      selectedVersion={message.data.version}
+      onVersionChange={handleVersionChange}
+      apiAccessEnabled={apiAccessEnabled}
+      showOwners={showOwners}
+      showProducersConsumers={showProducersConsumers}
+    />
+  );
+}

package/eventcatalog/src/components/Search/Search.astro

@@ -1,24 +1,8 @@
 ---
 import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
 import SearchModal from './SearchModal.tsx';
-import { buildUrl } from '@utils/url-builder.ts';
-
-const pagefindJsUrl = buildUrl('/pagefind/pagefind.js', true);
-const pagefindCssUrl = buildUrl('/pagefind/pagefind-ui.css', true);
 ---
 
-<link href={pagefindCssUrl} rel="stylesheet" />
-<script type="module" define:vars={{ pagefindJsUrl }}>
-  // Load Pagefind and expose it globally
-  try {
-    const pagefind = await import(pagefindJsUrl);
-    window.pagefind = pagefind;
-    window.dispatchEvent(new CustomEvent('pagefindLoaded'));
-  } catch (error) {
-    console.error('Failed to load pagefind:', error);
-  }
-</script>
-
 <div>
   <div class="relative flex items-center">
     <input
@@ -26,6 +10,7 @@ const pagefindCssUrl = buildUrl('/pagefind/pagefind-ui.css', true);
       type="text"
       name="search"
       placeholder="Search EventCatalog"
+      autocomplete="off"
       class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
     />
     <MagnifyingGlassIcon className="absolute inset-y-0 -left-1 h-9 w-8 flex items-center pl-4 text-gray-400" />
@@ -35,19 +20,32 @@ const pagefindCssUrl = buildUrl('/pagefind/pagefind-ui.css', true);
   </div>
 </div>
 
-<SearchModal client:only />
+<SearchModal client:only="react" />
 
 <script>
   // Create a global state for the search modal
   (window as any).searchModalState = {
     isOpen: false,
+    isClosing: false,
+    open: function () {
+      if (this.isClosing) return;
+      this.isOpen = true;
+      this.render();
+    },
     toggle: function () {
+      if (this.isClosing) return;
       this.isOpen = !this.isOpen;
       this.render();
     },
     close: function () {
       this.isOpen = false;
+      this.isClosing = true;
       this.render();
+      // Reset isClosing after a short delay to prevent immediate reopening by focus restoration
+      // waiting for transition (200ms) + buffer
+      setTimeout(() => {
+        this.isClosing = false;
+      }, 500);
     },
     render: function () {
       // This will be handled by React component
@@ -58,26 +56,42 @@ const pagefindCssUrl = buildUrl('/pagefind/pagefind-ui.css', true);
     },
   };
 
-  const dummyInput = document.getElementById('search-dummy-input');
-  const header = document.getElementById('eventcatalog-header');
-  const verticalNav = document.getElementById('eventcatalog-vertical-nav');
+  // Setup function to initialize event listeners
+  function setupSearchListeners() {
+    const dummyInput = document.getElementById('search-dummy-input');
+
+    // Remove existing listeners if any to prevent duplicates
+    if (dummyInput) {
+      const newInput = dummyInput.cloneNode(true) as HTMLElement;
+      dummyInput.parentNode?.replaceChild(newInput, dummyInput);
+      const refreshedInput = document.getElementById('search-dummy-input');
+
+      refreshedInput?.addEventListener('click', function (e) {
+        e.preventDefault();
+        this.blur();
+        (window as any).searchModalState.open();
+      });
 
-  // Event listeners
+      refreshedInput?.addEventListener('focus', function (e) {
+        e.preventDefault();
+        this.blur();
+        (window as any).searchModalState.open();
+      });
+    }
+  }
+
+  // Setup keyboard shortcut (only needs to be done once)
   window.addEventListener('keydown', (event) => {
     if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
       event.preventDefault();
-      dummyInput?.click();
+      (window as any).searchModalState.open();
     }
   });
 
-  dummyInput?.addEventListener('click', function (e) {
-    e.preventDefault();
-    this.blur();
-    (window as any).searchModalState.toggle();
-  });
-
   // Listen for modal state changes to update page elements
   window.addEventListener('searchModalToggle', (event) => {
+    const header = document.getElementById('eventcatalog-header');
+    const verticalNav = document.getElementById('eventcatalog-vertical-nav');
     // Handle custom docs sidebars
     const customDocsSidebars = document.querySelectorAll('aside[class*="fixed"][class*="z-10"]');
 
@@ -97,6 +111,12 @@ const pagefindCssUrl = buildUrl('/pagefind/pagefind-ui.css', true);
       });
     }
   });
+
+  // Setup listeners on initial load
+  setupSearchListeners();
+
+  // Re-setup listeners after client-side navigation
+  document.addEventListener('astro:page-load', setupSearchListeners);
 </script>
 
 <style>