@eventcatalog/core 3.0.0-beta.9 → 3.0.0

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

@@ -66,69 +66,77 @@ const pageTitle = `Team | ${props.data.name}`;
   <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
-        <div class="border-b border-gray-200 pb-4">
+        <div class="border-b border-gray-200 pb-6">
           <div class="flex justify-start">
-            <div class="flex flex-col justify-between space-y-2">
+            <div class="flex flex-col justify-between space-y-3">
               <div>
-                <h2 class="text-4xl font-bold">{props.data.name} <span class="text-gray-300">(Team)</span></h2>
+                <span
+                  class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-gray-100 text-gray-700 mb-2"
+                >
+                  Team
+                </span>
+                <h2 class="text-3xl font-bold text-gray-900">{props.data.name}</h2>
               </div>
-              <div class="space-y-2">
+              {props.data.summary && <p class="text-base text-gray-600 max-w-2xl">{props.data.summary}</p>}
+              <div class="flex flex-wrap gap-3 pt-1">
                 {
                   props.data.email && (
-                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                      <EnvelopeIcon className="w-4 h-4 text-purple-400" />
-                      <a href={`mailto:${props.data.email}`}>Email</a>
-                    </div>
+                    <a
+                      href={`mailto:${props.data.email}`}
+                      class="inline-flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                      <EnvelopeIcon className="w-4 h-4 text-gray-400" />
+                      <span>Email</span>
+                    </a>
                   )
                 }
                 {
                   props.data.slackDirectMessageUrl && (
-                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                      <img src={buildUrl('/slack-icon.svg', true)} class="w-4 h-3" />
-                      <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
-                    </div>
+                    <a
+                      href={props.data.slackDirectMessageUrl}
+                      class="inline-flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                      <img src={buildUrl('/slack-icon.svg', true)} class="w-4 h-4" alt="Slack" />
+                      <span>Slack</span>
+                    </a>
                   )
                 }
                 {
                   props.data.msTeamsDirectMessageUrl && (
-                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                      <img src={buildUrl('/icons/ms-teams.svg', true)} class="w-4 h-4" />
-                      <a href={`${props.data.msTeamsDirectMessageUrl}`} target="_blank" rel="noopener noreferrer">
-                        Send DM on Teams
-                      </a>
-                    </div>
+                    <a
+                      href={props.data.msTeamsDirectMessageUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                      <img src={buildUrl('/icons/ms-teams.svg', true)} class="w-4 h-4" alt="Teams" />
+                      <span>Teams</span>
+                    </a>
                   )
                 }
               </div>
             </div>
           </div>
-          <h2 class="text-xl py-2 text-gray-500">{props.data.summary}</h2>
         </div>
-        <div class="border-b border-gray-200" data-pagefind-ignore>
-          <div class="mx-auto max-w-7xl px-6 lg:px-8">
-            <div class="mx-auto max-w-2xl lg:max-w-none">
-              <dl
-                class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-4 lg:grid-cols-4"
-              >
-                <div class="flex flex-col p-8">
-                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
-                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedDomainsList.length}</dd>
-                </div>
-                <div class="flex flex-col p-8">
-                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
-                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
-                </div>
-                <div class="flex flex-col p-8">
-                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
-                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessagesList.length}</dd>
-                </div>
-                <div class="flex flex-col p-8">
-                  <dt class="text-sm font-semibold leading-6 text-gray-600"># team members</dt>
-                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{membersList.length}</dd>
-                </div>
-              </dl>
+        <div class="border-b border-gray-200 py-4" data-pagefind-ignore>
+          <dl class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <div class="flex flex-col p-4 bg-gray-50 rounded-lg">
+              <dt class="text-xs font-medium text-gray-500">Domains</dt>
+              <dd class="text-2xl font-semibold text-gray-900 mt-1">{ownedDomainsList.length}</dd>
             </div>
-          </div>
+            <div class="flex flex-col p-4 bg-gray-50 rounded-lg">
+              <dt class="text-xs font-medium text-gray-500">Services</dt>
+              <dd class="text-2xl font-semibold text-gray-900 mt-1">{ownedServicesList.length}</dd>
+            </div>
+            <div class="flex flex-col p-4 bg-gray-50 rounded-lg">
+              <dt class="text-xs font-medium text-gray-500">Messages</dt>
+              <dd class="text-2xl font-semibold text-gray-900 mt-1">{ownedMessagesList.length}</dd>
+            </div>
+            <div class="flex flex-col p-4 bg-gray-50 rounded-lg">
+              <dt class="text-xs font-medium text-gray-500">Members</dt>
+              <dd class="text-2xl font-semibold text-gray-900 mt-1">{membersList.length}</dd>
+            </div>
+          </dl>
         </div>
         <div class="prose prose-md py-4 w-full">
           <Content components={components(props)} />
@@ -136,33 +144,49 @@ const pageTitle = `Team | ${props.data.name}`;
       </div>
       <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2" data-pagefind-ignore>
         <div class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
-          <PillListFlat
-            color="pink"
-            title={`Owned domains (${ownedDomainsList.length})`}
-            pills={ownedDomainsList}
-            emptyMessage={`${props.data.name} does not own any domains.`}
-            client:load
-          />
-          <PillListFlat
-            color="blue"
-            title={`Owned services (${ownedServicesList.length})`}
-            pills={ownedServicesList}
-            emptyMessage={`This team does not own any services .`}
-            client:load
-          />
-          <PillListFlat
-            color="red"
-            title={`Owned messages (${ownedMessagesList.length})`}
-            pills={ownedMessagesList}
-            emptyMessage={`This team does not own any messages .`}
-            client:load
-          />
-          <OwnersList
-            title={`Team members (${membersList.length})`}
-            owners={membersList}
-            emptyMessage={`This team does not have any members.`}
-            client:load
-          />
+          {
+            ownedDomainsList.length > 0 && (
+              <PillListFlat
+                color="pink"
+                title={`Owned domains (${ownedDomainsList.length})`}
+                pills={ownedDomainsList}
+                emptyMessage={`${props.data.name} does not own any domains.`}
+                client:load
+              />
+            )
+          }
+          {
+            ownedServicesList.length > 0 && (
+              <PillListFlat
+                color="blue"
+                title={`Owned services (${ownedServicesList.length})`}
+                pills={ownedServicesList}
+                emptyMessage={`This team does not own any services.`}
+                client:load
+              />
+            )
+          }
+          {
+            ownedMessagesList.length > 0 && (
+              <PillListFlat
+                color="red"
+                title={`Owned messages (${ownedMessagesList.length})`}
+                pills={ownedMessagesList}
+                emptyMessage={`This team does not own any messages.`}
+                client:load
+              />
+            )
+          }
+          {
+            membersList.length > 0 && (
+              <OwnersList
+                title={`Team members (${membersList.length})`}
+                owners={membersList}
+                emptyMessage={`This team does not have any members.`}
+                client:load
+              />
+            )
+          }
         </div>
       </aside>
     </div>

package/eventcatalog/src/pages/docs/teams/[id].mdx.ts

@@ -0,0 +1,36 @@
+// This file exposes the markdown for EventCatalog in the Url
+// For example http://localhost:3000/docs/teams/full-stack loads the Page and http://localhost:3000/docs/teams/full-stack.mdx loads the markdown
+// This is used for the LLMs to load the markdown for the given item (llms.txt);
+
+import type { APIRoute } from 'astro';
+import { getCollection } from 'astro:content';
+import config from '@config';
+import fs from 'fs';
+
+const teams = await getCollection('teams');
+
+export async function getStaticPaths() {
+  // Just return empty array if LLMs are not enabled
+  if (!config.llmsTxt?.enabled) {
+    return [];
+  }
+
+  return teams.map((team) => ({
+    params: { type: 'teams', id: team.data.id },
+    props: { content: team },
+  }));
+}
+
+export const GET: APIRoute = async ({ params, props }) => {
+  // Just return empty array if LLMs are not enabled
+  if (!config.llmsTxt?.enabled) {
+    return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
+  }
+
+  if (props?.content?.filePath) {
+    const file = fs.readFileSync(props.content.filePath, 'utf8');
+    return new Response(file, { status: 200 });
+  }
+
+  return new Response('Not found', { status: 404 });
+};

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

@@ -63,70 +63,81 @@ const pageTitle = `User | ${props.data.name}`;
   <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
-        <div class="border-b border-gray-200 pb-4">
-          <div class="flex justify-start space-x-8">
-            <img src={props.data.avatarUrl} alt="Profile picture" class="shadow-md w-28 rounded-md" />
-            <div class="flex flex-col justify-between">
+        <div class="border-b border-gray-200 pb-6">
+          <div class="flex justify-start gap-6">
+            {
+              props.data.avatarUrl && (
+                <img
+                  src={props.data.avatarUrl}
+                  alt={`${props.data.name}'s profile picture`}
+                  class="w-20 h-20 rounded-full object-cover border-2 border-gray-100"
+                />
+              )
+            }
+            <div class="flex flex-col justify-center space-y-2">
               <div>
-                <h2 class="text-4xl font-bold">{props.data.name}</h2>
-                <span class="text-xl font-bold text-gray-500">{props.data.role}</span>
+                <h2 class="text-3xl font-bold text-gray-900">{props.data.name}</h2>
+                {props.data.role && <span class="text-base font-medium text-gray-500">{props.data.role}</span>}
               </div>
-              <div class="space-y-1">
+              <div class="flex flex-wrap gap-3">
                 {
                   props.data.email && (
-                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                      <EnvelopeIcon className="w-4 h-4 text-purple-400" />
-                      <a href={`mailto:${props.data.email}`}>Email</a>
-                    </div>
+                    <a
+                      href={`mailto:${props.data.email}`}
+                      class="inline-flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                      <EnvelopeIcon className="w-4 h-4 text-gray-400" />
+                      <span>Email</span>
+                    </a>
                   )
                 }
                 {
                   props.data.slackDirectMessageUrl && (
-                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                      <img src={buildUrl('/slack-icon.svg', true)} class="w-4 h-3" />
-                      <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
-                    </div>
+                    <a
+                      href={props.data.slackDirectMessageUrl}
+                      class="inline-flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                      <img src={buildUrl('/slack-icon.svg', true)} class="w-4 h-4" alt="Slack" />
+                      <span>Slack</span>
+                    </a>
                   )
                 }
                 {
                   props.data.msTeamsDirectMessageUrl && (
-                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                      <img src={buildUrl('/icons/ms-teams.svg', true)} class="w-4 h-4" />
-                      <a href={`${props.data.msTeamsDirectMessageUrl}`} target="_blank" rel="noopener noreferrer">
-                        Send DM on Teams
-                      </a>
-                    </div>
+                    <a
+                      href={props.data.msTeamsDirectMessageUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+                    >
+                      <img src={buildUrl('/icons/ms-teams.svg', true)} class="w-4 h-4" alt="Teams" />
+                      <span>Teams</span>
+                    </a>
                   )
                 }
               </div>
             </div>
           </div>
         </div>
-        <div class="border-b border-gray-200" data-pagefind-ignore>
-          <div class="mx-auto max-w-7xl px-6 lg:px-8">
-            <div class="mx-auto max-w-2xl lg:max-w-none">
-              <dl
-                class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-4 lg:grid-cols-4"
-              >
-                <div class="flex flex-col p-8">
-                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
-                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedDomainsList.length}</dd>
-                </div>
-                <div class="flex flex-col p-8">
-                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
-                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
-                </div>
-                <div class="flex flex-col p-8">
-                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
-                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessageList.length}</dd>
-                </div>
-                <div class="flex flex-col p-8">
-                  <dt class="text-sm font-semibold leading-6 text-gray-600"># teams joined</dt>
-                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{associatedTeams.length}</dd>
-                </div>
-              </dl>
+        <div class="border-b border-gray-200 py-4" data-pagefind-ignore>
+          <dl class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+            <div class="flex flex-col p-4 bg-gray-50 rounded-lg">
+              <dt class="text-xs font-medium text-gray-500">Domains</dt>
+              <dd class="text-2xl font-semibold text-gray-900 mt-1">{ownedDomainsList.length}</dd>
             </div>
-          </div>
+            <div class="flex flex-col p-4 bg-gray-50 rounded-lg">
+              <dt class="text-xs font-medium text-gray-500">Services</dt>
+              <dd class="text-2xl font-semibold text-gray-900 mt-1">{ownedServicesList.length}</dd>
+            </div>
+            <div class="flex flex-col p-4 bg-gray-50 rounded-lg">
+              <dt class="text-xs font-medium text-gray-500">Messages</dt>
+              <dd class="text-2xl font-semibold text-gray-900 mt-1">{ownedMessageList.length}</dd>
+            </div>
+            <div class="flex flex-col p-4 bg-gray-50 rounded-lg">
+              <dt class="text-xs font-medium text-gray-500">Teams</dt>
+              <dd class="text-2xl font-semibold text-gray-900 mt-1">{associatedTeams.length}</dd>
+            </div>
+          </dl>
         </div>
         <div class="prose prose-md py-4 w-full">
           <Content components={components(props)} />

package/eventcatalog/src/pages/docs/users/[id].mdx.ts

@@ -0,0 +1,36 @@
+// This file exposes the markdown for EventCatalog in the Url
+// For example http://localhost:3000/docs/users/dboyne loads the Page and http://localhost:3000/docs/users/dboyne.mdx loads the markdown
+// This is used for the LLMs to load the markdown for the given item (llms.txt);
+
+import type { APIRoute } from 'astro';
+import { getCollection } from 'astro:content';
+import config from '@config';
+import fs from 'fs';
+
+const users = await getCollection('users');
+
+export async function getStaticPaths() {
+  // Just return empty array if LLMs are not enabled
+  if (!config.llmsTxt?.enabled) {
+    return [];
+  }
+
+  return users.map((user) => ({
+    params: { type: 'users', id: user.data.id },
+    props: { content: user },
+  }));
+}
+
+export const GET: APIRoute = async ({ params, props }) => {
+  // Just return empty array if LLMs are not enabled
+  if (!config.llmsTxt?.enabled) {
+    return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
+  }
+
+  if (props?.content?.filePath) {
+    const file = fs.readFileSync(props.content?.filePath, 'utf8');
+    return new Response(file, { status: 200 });
+  }
+
+  return new Response('Not found', { status: 404 });
+};

package/eventcatalog/src/pages/schemas/explorer/_index.data.ts

@@ -0,0 +1,178 @@
+import { isSSR } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+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 { getOwner } from '@utils/collections/owners';
+import { buildUrl } from '@utils/url-builder';
+import { resourceFileExists, readResourceFile } from '@utils/resource-files';
+import path from 'path';
+
+// 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}`),
+  }));
+}
+
+async function fetchAllSchemas() {
+  // Fetch all messages
+  const events = await getEvents({ getAllVersions: true });
+  const commands = await getCommands({ getAllVersions: true });
+  const queries = await getQueries({ getAllVersions: true });
+
+  // Fetch all services
+  const services = await getServices({ getAllVersions: true });
+
+  // Combine all messages
+  const allMessages = [...events, ...commands, ...queries];
+
+  // Filter messages with schemas and read schema content - only keep essential data
+  const messagesWithSchemas = await Promise.all(
+    allMessages
+      .filter((message) => message.data.schemaPath)
+      .filter((message) => resourceFileExists(message, message.data.schemaPath ?? ''))
+      .map(async (message) => {
+        try {
+          const schemaPath = message.data.schemaPath ?? '';
+          const schemaContent = readResourceFile(message, schemaPath) ?? '';
+          const schemaExtension = path.extname(schemaPath).slice(1);
+          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,
+          };
+        } 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);
+
+        if (specifications.length === 0) {
+          return null;
+        }
+
+        return await Promise.all(
+          specifications.map(async (spec) => {
+            if (!resourceFileExists(service, spec.path)) {
+              return null;
+            }
+
+            const schemaContent = readResourceFile(service, spec.path) ?? '';
+            const schemaExtension = spec.type;
+            const enrichedOwners = await enrichOwners(service.data.owners || []);
+
+            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);
+
+  return [...messagesWithSchemas, ...flatServicesWithSpecs];
+}
+
+export class Page extends HybridPage {
+  static get prerender(): boolean {
+    return !isSSR();
+  }
+
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isSSR()) {
+      return [];
+    }
+
+    const allSchemas = await fetchAllSchemas();
+
+    return [
+      {
+        params: {},
+        props: {
+          schemas: allSchemas,
+        },
+      },
+    ];
+  }
+
+  protected static async fetchData(_params: any) {
+    const allSchemas = await fetchAllSchemas();
+    return {
+      schemas: allSchemas,
+    };
+  }
+
+  protected static hasValidProps(props: any): boolean {
+    return props && props.schemas !== undefined;
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Schema explorer not found',
+    });
+  }
+}