@eventcatalog/core 3.0.0-beta.9 → 3.1.0

package/eventcatalog/src/pages/schemas/explorer/index.astro

@@ -1,173 +1,23 @@
 ---
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { getEvents } from '@utils/collections/events';
-import { getCommands } from '@utils/collections/commands';
-import { getQueries } from '@utils/collections/queries';
-import { getServices, getSpecificationsForService } from '@utils/collections/services';
 import SchemaExplorer from '@components/SchemaExplorer/SchemaExplorer';
 import { isEventCatalogScaleEnabled } from '@utils/feature';
-import { getOwner } from '@utils/collections/owners';
-import { buildUrl } from '@utils/url-builder';
-import fs from 'fs';
-import path from 'path';
+import { Page } from './_index.data';
 
-// Fetch all messages
-const events = await getEvents({ getAllVersions: true });
-const commands = await getCommands({ getAllVersions: true });
-const queries = await getQueries({ getAllVersions: true });
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
 
-// Fetch all services
-const services = await getServices({ getAllVersions: true });
-
-// Combine all messages
-const allMessages = [...events, ...commands, ...queries];
-
-// Helper function to enrich owners with full details
-async function enrichOwners(ownersRaw: any[]) {
-  if (!ownersRaw || ownersRaw.length === 0) return [];
-
-  const owners = await Promise.all(ownersRaw.map(getOwner));
-  const filteredOwners = owners.filter((o) => o !== undefined);
-
-  return filteredOwners.map((o) => ({
-    id: o.data.id,
-    name: o.data.name,
-    type: o.collection,
-    href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
-  }));
-}
-
-// Filter messages with schemas and read schema content - only keep essential data
-const messagesWithSchemas = await Promise.all(
-  allMessages
-    .filter((message) => message.data.schemaPath)
-    // Make sure the file exists
-    .filter((message) => fs.existsSync(path.join(path.dirname(message.filePath ?? ''), message.data.schemaPath ?? '')))
-    .map(async (message) => {
-      try {
-        // Get the schema file path
-        const schemaPath = message.data.schemaPath;
-        const fullSchemaPath = path.join(path.dirname(message.filePath ?? ''), schemaPath ?? '');
-
-        // Read the schema content
-        let schemaContent = '';
-        if (fs.existsSync(fullSchemaPath)) {
-          schemaContent = fs.readFileSync(fullSchemaPath, 'utf-8');
-        }
-
-        // Get schema file extension
-        const schemaExtension = path.extname(schemaPath ?? '').slice(1);
-
-        // Enrich owners with full details
-        const enrichedOwners = await enrichOwners(message.data.owners || []);
-
-        // Only return essential data - strip out markdown, full data objects, etc.
-        return {
-          collection: message.collection,
-          data: {
-            id: message.data.id,
-            name: message.data.name,
-            version: message.data.version,
-            summary: message.data.summary,
-            schemaPath: message.data.schemaPath,
-            producers: message.data.producers || [],
-            consumers: message.data.consumers || [],
-            owners: enrichedOwners,
-          },
-          schemaContent,
-          schemaExtension,
-        };
-      } catch (error) {
-        console.error(`Error reading schema for ${message.data.id}:`, error);
-        const enrichedOwners = await enrichOwners(message.data.owners || []);
-        return {
-          collection: message.collection,
-          data: {
-            id: message.data.id,
-            name: message.data.name,
-            version: message.data.version,
-            summary: message.data.summary,
-            schemaPath: message.data.schemaPath,
-            producers: message.data.producers || [],
-            consumers: message.data.consumers || [],
-            owners: enrichedOwners,
-          },
-          schemaContent: '',
-          schemaExtension: 'json',
-        };
-      }
-    })
-);
-
-// Filter services with specifications and read spec content - only keep essential data
-const servicesWithSpecs = await Promise.all(
-  services.map(async (service) => {
-    try {
-      const specifications = getSpecificationsForService(service);
-
-      // Only include services that have specifications
-      if (specifications.length === 0) {
-        return null;
-      }
-
-      // Process each specification file for this service
-      return await Promise.all(
-        specifications.map(async (spec) => {
-          const specPath = path.join(path.dirname(service.filePath ?? ''), spec.path);
-
-          // Only include if the spec file exists
-          if (!fs.existsSync(specPath)) {
-            return null;
-          }
-
-          const schemaContent = fs.readFileSync(specPath, 'utf-8');
-          // Use spec type (openapi, asyncapi) as the extension for proper labeling
-          const schemaExtension = spec.type;
-
-          // Enrich owners with full details
-          const enrichedOwners = await enrichOwners(service.data.owners || []);
-
-          // Only return essential data - strip out markdown, sends/receives, entities, etc.
-          return {
-            collection: 'services',
-            data: {
-              id: `${service.data.id}`,
-              name: `${service.data.name} - ${spec.name}`,
-              version: service.data.version,
-              summary: service.data.summary,
-              schemaPath: spec.path,
-              owners: enrichedOwners,
-            },
-            schemaContent,
-            schemaExtension,
-            specType: spec.type,
-            specName: spec.name,
-            specFilenameWithoutExtension: spec.filenameWithoutExtension,
-          };
-        })
-      );
-    } catch (error) {
-      console.error(`Error reading specifications for service ${service.data.id}:`, error);
-      return null;
-    }
-  })
-);
-
-// Flatten and filter out null values
-const flatServicesWithSpecs = servicesWithSpecs.flat().filter((service) => service !== null);
-
-// Combine messages and services
-const allSchemas = [...messagesWithSchemas, ...flatServicesWithSpecs];
+const { schemas } = await Page.getData(Astro);
 
 const apiAccessEnabled = isEventCatalogScaleEnabled();
 ---
 
 <VerticalSideBarLayout title="Schema Explorer - EventCatalog" showNestedSideBar={false}>
-  <main class="flex sm:px-8 docs-layout h-[calc(100vh-var(--header-height,0px)-64px)]">
+  <main class="flex sm:pl-8 pr-4 docs-layout h-[calc(100vh-var(--header-height,0px)-64px)] bg-[rgb(var(--ec-page-bg))]">
     <div class="flex docs-layout w-full h-full">
-      <div class="w-full lg:mr-2 pr-8 py-6 flex flex-col h-full">
+      <div class="w-full lg:mr-2 py-6 flex flex-col h-full">
         <div class="w-full !max-w-none h-full flex flex-col overflow-hidden">
-          <SchemaExplorer client:load schemas={allSchemas as any} apiAccessEnabled={apiAccessEnabled} />
+          <SchemaExplorer client:load schemas={schemas as any} apiAccessEnabled={apiAccessEnabled} />
         </div>
       </div>
     </div>

package/eventcatalog/src/pages/studio.astro

@@ -3,8 +3,8 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { getEvents } from '@utils/collections/events';
 import { getCommands } from '@utils/collections/commands';
 import { getServices } from '@utils/collections/services';
-import { BoltIcon, ServerIcon, RectangleGroupIcon } from '@heroicons/react/24/outline';
-import { SquareDashedMousePointerIcon, ArrowLeftRightIcon } from 'lucide-react';
+import { BoltIcon, ServerIcon } from '@heroicons/react/24/outline';
+import { SquareDashedMousePointerIcon, ArrowLeftRightIcon, ExternalLink } from 'lucide-react';
 import StudioPageModal from '@components/Studio/StudioPageModal';
 import { getChannels } from '@utils/collections/channels';
 
@@ -20,6 +20,7 @@ const eventCount = events.length;
 const serviceCount = services.length;
 const commandCount = commands.length;
 const channelCount = channels.length;
+const totalResources = eventCount + serviceCount + channelCount + commandCount;
 
 // Get a few sample resources to display
 const sampleEvents = events.slice(0, 2);
@@ -32,6 +33,8 @@ const resourcesToShow = [
   ...sampleServices.map((service, index) => ({ type: 'service', data: service, index: index + 2 })),
   ...sampleChannels.map((channel, index) => ({ type: 'channel', data: channel, index: index + 4 })),
 ].slice(0, 5); // Max 5 resources
+
+const hasResources = resourcesToShow.length > 0;
 ---
 
 <!doctype html>
@@ -45,136 +48,213 @@ const resourcesToShow = [
   </head>
   <body>
     <VerticalSideBarLayout title="EventCatalog Studio" showNestedSideBar={false}>
-      <div class="min-h-[calc(100vh-60px)] bg-white">
+      <div class="min-h-[calc(100vh-60px)] bg-[rgb(var(--ec-page-bg))]">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
           {/* Hero Section */}
           <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-gray-100 text-gray-900 font-medium text-sm mb-6">
-                <SquareDashedMousePointerIcon className="w-4 h-4 mr-2" />
-                EventCatalog Studio
+              <div
+                class="inline-flex items-center px-3 py-1.5 rounded-full bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text))] font-medium text-xs mb-6"
+              >
+                Visual Design Tool
               </div>
-              <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Turn your resources into designs</h1>
-              <p class="text-xl text-gray-600 mb-8">
+              <h1 class="text-4xl font-bold text-[rgb(var(--ec-page-text))] tracking-tight mb-4">
+                Turn your resources into designs
+              </h1>
+              <p class="text-lg text-[rgb(var(--ec-page-text-muted))] mb-8">
                 Transform your documented messages, services, and domains into architecture diagrams. Drag, drop, and design with
                 what you already have.
               </p>
-              <div class="flex flex-col sm:flex-row gap-4 mb-2">
+              <div class="flex flex-col sm:flex-row gap-3 mb-4">
                 <button
                   id="design-button"
-                  class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-gray-900 hover:bg-gray-800 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:bg-[rgb(var(--ec-button-bg-hover))] transition-colors duration-150"
                 >
                   <SquareDashedMousePointerIcon className="w-4 h-4 mr-2" />
-                  Open EventCatalog Studio
+                  Open Studio
                 </button>
+                <a
+                  href="https://www.eventcatalog.dev/docs/development/components/designs"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex items-center justify-center px-6 py-3 border border-[rgb(var(--ec-page-border))] text-base font-medium rounded-lg text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors duration-150"
+                >
+                  Learn more
+                  <ExternalLink className="w-4 h-4 ml-2" />
+                </a>
               </div>
 
-              <p class="text-sm text-gray-500 italic mb-6">
-                {eventCount + serviceCount + channelCount + commandCount} resources ready to design with
-              </p>
+              {
+                totalResources > 0 && (
+                  <p class="text-sm text-[rgb(var(--ec-page-text-muted))]">
+                    <span class="font-medium text-[rgb(var(--ec-page-text))]">{totalResources}</span> resources available to
+                    design with
+                  </p>
+                )
+              }
             </div>
 
-            <div class="relative">
-              <div class="relative">
-                {/* Animation container */}
-                <div class="relative h-[400px] flex items-center justify-center">
-                  {/* Resource cards that animate in */}
-                  <div class="absolute left-0 top-1/2 -translate-y-1/2 space-y-3">
-                    {
-                      resourcesToShow.map((resource) => {
+            <div class="relative hidden lg:block">
+              {/* Animation container */}
+              <div class="relative h-[350px] flex items-center justify-center">
+                {/* Resource cards that animate in */}
+                {
+                  hasResources ? (
+                    <div class="absolute left-0 top-1/2 -translate-y-1/2 space-y-2.5">
+                      {resourcesToShow.map((resource) => {
                         if (resource.type === 'event') {
                           return (
                             <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-3 bg-orange-50 rounded-lg border border-orange-200 shadow-sm"
-                              style={`animation-delay: ${resource.index * 0.4}s;`}
+                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-orange-50 dark:bg-orange-500/10 rounded-lg border border-orange-200 dark:border-orange-500/30 shadow-sm"
+                              style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
-                              <BoltIcon className="w-4 h-4 text-orange-600" />
-                              {resource.data.data.name}
+                              <BoltIcon className="w-4 h-4 text-orange-500" />
+                              <span class="truncate max-w-[140px]">{resource.data.data.name}</span>
                             </div>
                           );
                         } else if (resource.type === 'service') {
                           return (
                             <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-3 bg-pink-50 rounded-lg border border-pink-200 shadow-sm"
-                              style={`animation-delay: ${resource.index * 0.4}s;`}
+                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-pink-50 dark:bg-pink-500/10 rounded-lg border border-pink-200 dark:border-pink-500/30 shadow-sm"
+                              style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
-                              <ServerIcon className="w-4 h-4 text-gray-600" />
-                              {resource.data.data.name}
+                              <ServerIcon className="w-4 h-4 text-pink-500" />
+                              <span class="truncate max-w-[140px]">{resource.data.data.name}</span>
                             </div>
                           );
                         } else if (resource.type === 'channel') {
                           return (
                             <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-3 bg-gray-50 rounded-lg border border-gray-200 shadow-sm"
-                              style={`animation-delay: ${resource.index * 0.4}s;`}
+                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-indigo-50 dark:bg-indigo-500/10 rounded-lg border border-indigo-200 dark:border-indigo-500/30 shadow-sm"
+                              style={`animation-delay: ${resource.index * 0.3}s;`}
                             >
-                              <ArrowLeftRightIcon className="w-4 h-4 text-gray-600" />
-                              {resource.data.data.name}
+                              <ArrowLeftRightIcon className="w-4 h-4 text-indigo-500" />
+                              <span class="truncate max-w-[140px]">{resource.data.data.name}</span>
                             </div>
                           );
                         }
-                      })
-                    }
-                  </div>
-
-                  {/* Arrow indicator */}
-                  <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse">
-                    <svg class="w-12 h-12 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                    </svg>
-                  </div>
-
-                  {/* Design preview */}
-                  <div class="absolute right-0 top-1/2 -translate-y-1/2 animate-fade-in-scale" style="animation-delay: 2s;">
-                    <img
-                      src="/studio-bg.png"
-                      alt="Studio Design Preview"
-                      class="rounded-xl shadow-xl border border-gray-200 w-64 h-auto"
-                    />
-                  </div>
+                      })}
+                    </div>
+                  ) : (
+                    <div class="absolute left-0 top-1/2 -translate-y-1/2 space-y-2.5">
+                      <div
+                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
+                        style="animation-delay: 0s;"
+                      >
+                        <BoltIcon className="w-4 h-4" />
+                        <span>Your events</span>
+                      </div>
+                      <div
+                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
+                        style="animation-delay: 0.3s;"
+                      >
+                        <ServerIcon className="w-4 h-4" />
+                        <span>Your services</span>
+                      </div>
+                      <div
+                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
+                        style="animation-delay: 0.6s;"
+                      >
+                        <ArrowLeftRightIcon className="w-4 h-4" />
+                        <span>Your channels</span>
+                      </div>
+                    </div>
+                  )
+                }
+
+                {/* Arrow indicator */}
+                <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+                  <svg
+                    class="w-10 h-10 text-[rgb(var(--ec-icon-color))] animate-pulse"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                  </svg>
+                </div>
+
+                {/* Design preview */}
+                <div class="absolute right-0 top-1/2 -translate-y-1/2 animate-fade-in-scale" style="animation-delay: 1.5s;">
+                  <img
+                    src="/studio-bg.png"
+                    alt="Studio Design Preview"
+                    class="rounded-xl shadow-lg border border-[rgb(var(--ec-page-border))] w-56 h-auto"
+                  />
                 </div>
               </div>
             </div>
           </div>
 
           {/* Features Section */}
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-              <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
-                <svg class="w-6 h-6 text-gray-900" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div
+              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
+            >
+              <div
+                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+              >
+                <svg
+                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
                   <rect width="8" height="8" x="3" y="3" rx="2"></rect>
                   <path d="M7 11v4a2 2 0 0 0 2 2h4"></path>
                   <rect width="8" height="8" x="13" y="13" rx="2"></rect>
                 </svg>
               </div>
-              <h3 class="text-lg font-semibold text-gray-900 mb-2">Real Resources</h3>
-              <p class="text-gray-600">
-                Drag and drop messages, services, and domains from your catalog. No more copying names or keeping things manually
-                in sync.
+              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Real Resources</h3>
+              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
+                Drag and drop messages, services, and domains from your catalog. No more copying names or keeping things in sync.
               </p>
             </div>
 
-            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-              <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
-                <svg class="w-6 h-6 text-gray-900" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <div
+              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
+            >
+              <div
+                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+              >
+                <svg
+                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
                   <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                   <polyline points="17 21 17 13 7 13 7 21"></polyline>
                   <polyline points="7 3 7 8 15 8"></polyline>
                 </svg>
               </div>
-              <h3 class="text-lg font-semibold text-gray-900 mb-2">Save & Version</h3>
-              <p class="text-gray-600">Save designs locally and store in Git. All designs and data is owned by you.</p>
+              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Save & Version</h3>
+              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
+                Save designs locally and store in Git. All designs and data is owned by you.
+              </p>
             </div>
 
-            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
-              <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
-                <svg class="w-6 h-6 text-gray-900" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <div
+              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
+            >
+              <div
+                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
+              >
+                <svg
+                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
                   <polyline points="16 18 22 12 16 6"></polyline>
                   <polyline points="8 6 2 12 8 18"></polyline>
                 </svg>
               </div>
-              <h3 class="text-lg font-semibold text-gray-900 mb-2">Embed Anywhere</h3>
-              <p class="text-gray-600">
+              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Embed Anywhere</h3>
+              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
                 Drop diagrams directly into documentation pages. One source of truth for your architecture.
               </p>
             </div>
@@ -201,7 +281,7 @@ const resourcesToShow = [
       @keyframes float-in {
         0% {
           opacity: 0;
-          transform: translateX(-30px);
+          transform: translateX(-20px);
         }
         100% {
           opacity: 1;
@@ -212,7 +292,7 @@ const resourcesToShow = [
       @keyframes fade-in-scale {
         0% {
           opacity: 0;
-          transform: translateY(-50%) scale(0.9);
+          transform: translateY(-50%) scale(0.95);
         }
         100% {
           opacity: 1;
@@ -221,12 +301,12 @@ const resourcesToShow = [
       }
 
       .animate-float-in {
-        animation: float-in 0.6s ease-out forwards;
+        animation: float-in 0.5s ease-out forwards;
         opacity: 0;
       }
 
       .animate-fade-in-scale {
-        animation: fade-in-scale 0.8s ease-out forwards;
+        animation: fade-in-scale 0.6s ease-out forwards;
         opacity: 0;
       }
     </style>

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

@@ -6,11 +6,11 @@ export function remarkDirectives() {
     visit(tree, (node) => {
       if (node.type === 'containerDirective') {
         const blockTypes = {
-          info: 'bg-blue-50 border-l-4 border-blue-500',
-          warning: 'bg-yellow-50 border-l-4 border-yellow-500',
-          danger: 'bg-red-50 border-l-4 border-red-500',
-          tip: 'bg-green-50 border-l-4 border-green-500',
-          note: 'bg-gray-50 border-l-4 border-gray-500',
+          info: 'bg-blue-50 dark:bg-blue-950/50 border-l-4 border-blue-500 text-blue-700 dark:text-blue-200',
+          warning: 'bg-yellow-50 dark:bg-yellow-950/50 border-l-4 border-yellow-500 text-yellow-700 dark:text-yellow-200',
+          danger: 'bg-red-50 dark:bg-red-950/50 border-l-4 border-red-500 text-red-700 dark:text-red-200',
+          tip: 'bg-green-50 dark:bg-green-950/50 border-l-4 border-green-500 text-green-700 dark:text-green-200',
+          note: 'bg-gray-50 dark:bg-gray-950/50 border-l-4 border-gray-500 text-gray-700 dark:text-gray-200',
         };
 
         // Lucide icon paths
@@ -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,
             },
           ],
         };
@@ -95,10 +116,10 @@ export function remarkDirectives() {
           data: {
             hName: 'div',
             hProperties: {
-              class: 'prose prose-md w-full !max-w-none ',
+              class: 'prose prose-md dark:prose-invert w-full !max-w-none prose-p:my-1 prose-p:text-inherit',
             },
           },
-          children: node.children,
+          children: contentChildren,
         };
 
         // Replace node's children with header and content

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

@@ -19,8 +19,8 @@ export const mermaid: RemarkPlugin<[]> = () => (tree) => {
     node.type = 'html';
     node.value = `
     <div class="mermaid-block pb-4">
-      <div class="mermaid border border-gray-200 rounded-lg p-1" data-content="${escapeHtml(node.value)}">
-        <p>Loading graph...</p>
+      <div class="mermaid border border-[rgb(var(--ec-page-border))] rounded-lg p-1" data-content="${escapeHtml(node.value)}">
+        <p class="text-[rgb(var(--ec-page-text-muted))]">Loading graph...</p>
       </div>
     </div>
     `;