@eventcatalog/core 5.5.2 → 5.6.0

package/eventcatalog/src/features/tools/catalog-tools.ts

@@ -5,7 +5,12 @@
 import { getCollection } from 'astro:content';
 import { z } from 'zod';
 import { getSchemaFormatFromURL } from '@utils/collections/schemas';
-import { getItemsFromCollectionByIdAndSemverOrLatest, processSpecifications, versionMatches } from '@utils/collections/util';
+import {
+  getItemsFromCollectionByIdAndSemverOrLatest,
+  getSpecificationCodeLanguage,
+  processSpecifications,
+  versionMatches,
+} from '@utils/collections/util';
 import { getUbiquitousLanguageWithSubdomains } from '@utils/collections/domains';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import fs from 'node:fs';
@@ -464,7 +469,7 @@ export async function getSchemaForResource(params: { resourceId: string; resourc
     ...processSpecifications(resource.data.specifications).map((spec) => ({
       name: spec.name,
       path: spec.path,
-      format: spec.type,
+      format: spec.type === 'generic' ? getSpecificationCodeLanguage(spec.path) : spec.type,
     })),
   ];
 
@@ -1332,7 +1337,7 @@ export const toolDescriptions = {
   getMessagesProducedOrConsumedByResource:
     'Use this tool to get the messages (events, commands, queries) a service, agent, domain or system sends and receives. Each message is resolved to its catalog id, version, name and summary; messages that are referenced but not documented in the catalog are marked notFound. For a domain or system, this includes what the services, agents, systems and subdomains inside it send and receive, and each message lists `by`: the resources that send or receive it (e.g. services/order-service). Omit the version to use the latest version of the resource.',
   getSchemaForResource:
-    'Use this tool to get the schema or specifications (openapi or asyncapi or graphql) for a resource by its id and version',
+    'Use this tool to get the schema or specifications (openapi, asyncapi, graphql or generic specifications such as XML, JSON or YAML files) for a resource by its id and version',
   findResourcesByOwner:
     'Use this tool to find all resources (agents, services, events, commands, etc.) owned by a specific team or user',
   getProducersOfMessage:

package/eventcatalog/src/pages/.well-known/api-catalog.ts

@@ -2,7 +2,7 @@ import type { APIRoute } from 'astro';
 import yaml from 'js-yaml';
 import { getServices, getSpecificationsForService } from '@utils/collections/services';
 import { getDomains, getSpecificationsForDomain } from '@utils/collections/domains';
-import type { ProcessedSpecification } from '@utils/collections/util';
+import { getSpecificationMediaType, type ProcessedSpecification } from '@utils/collections/util';
 import { buildUrl } from '@utils/url-builder';
 import { readResourceFile } from '@utils/resource-files';
 import { isEventCatalogMCPEnabled } from '@utils/feature';
@@ -26,16 +26,6 @@ type ApiCatalogResource = Awaited<ReturnType<typeof getServices>>[number] | Awai
 
 const absoluteUrl = (request: Request, pathOrUrl: string) => new URL(pathOrUrl, request.url).toString();
 
-const getSpecificationMediaType = (specification: ProcessedSpecification) => {
-  const extension = specification.filename.split('.').pop()?.toLowerCase();
-
-  if (specification.type === 'graphql') return 'application/graphql';
-  if (extension === 'json') return 'application/json';
-  if (extension === 'yaml' || extension === 'yml') return 'application/yaml';
-
-  return 'text/plain';
-};
-
 const getSpecificationIdentifier = (specification: ProcessedSpecification) => {
   return `${specification.type}-${Buffer.from(specification.path).toString('base64url')}`;
 };

package/eventcatalog/src/pages/api-catalog/specifications/[collection]/[id]/[version]/[specification].ts

@@ -2,7 +2,7 @@ import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
 import { getSpecificationsForDomain } from '@utils/collections/domains';
 import { getSpecificationsForService } from '@utils/collections/services';
-import type { ProcessedSpecification } from '@utils/collections/util';
+import { getSpecificationMediaType, type ProcessedSpecification } from '@utils/collections/util';
 import { readResourceFile } from '@utils/resource-files';
 
 type SupportedCollection = 'domains' | 'services';
@@ -11,16 +11,6 @@ const isSupportedCollection = (collection: string | undefined): collection is Su
   return collection === 'domains' || collection === 'services';
 };
 
-const getSpecificationMediaType = (specification: ProcessedSpecification) => {
-  const extension = specification.filename.split('.').pop()?.toLowerCase();
-
-  if (specification.type === 'graphql') return 'application/graphql';
-  if (extension === 'json') return 'application/json';
-  if (extension === 'yaml' || extension === 'yml') return 'application/yaml';
-
-  return 'text/plain';
-};
-
 const getSpecificationIdentifier = (specification: ProcessedSpecification) => {
   return `${specification.type}-${Buffer.from(specification.path).toString('base64url')}`;
 };

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/generic/[filename].astro

@@ -0,0 +1,137 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Footer from '@layouts/Footer.astro';
+import { Page } from './_[filename].data';
+import SpecificationSource from './_SpecificationSource';
+import { buildUrl } from '@utils/url-builder';
+import { getGenericSpecificationIcon, resolveIconUrl } from '@utils/icon';
+import { readResourceFile, resourceFileExists } from '@utils/resource-files';
+import { resolveHeaders } from '@utils/remote-spec';
+import Admonition from '@components/MDX/Admonition';
+import NewVersionBanner from '@components/NewVersionBanner.astro';
+import Badge from '@components/Badge.astro';
+import { getResourceTypeBadge } from '@utils/collections/resource-type-badge';
+import { getResourceNoun, getSpecificationCodeLanguage } from '@utils/collections/util';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+// Get data
+const pageData = await Page.getData(Astro);
+if (!pageData) return Astro.rewrite('/404');
+const {
+  collection,
+  data,
+  filename,
+  filenameWithoutExtension,
+  path: relativeSpecPath,
+  specificationName,
+  icon,
+  headers = {},
+} = pageData;
+
+// Generic specifications are shown as source, without parsing them
+const isRemote = /^https?:\/\//i.test(relativeSpecPath);
+let fileExists = isRemote || resourceFileExists(pageData, relativeSpecPath);
+let content = '';
+
+if (isRemote) {
+  // A remote file that can't be fetched is shown as not found, like a missing local file, so it doesn't fail the build
+  const response = await fetch(relativeSpecPath, { headers: resolveHeaders(headers) }).catch(() => null);
+
+  if (response?.ok) {
+    content = await response.text();
+  } else {
+    fileExists = false;
+    console.warn(`Failed to fetch specification ${relativeSpecPath}: ${response ? response.status : 'network error'}`);
+  }
+} else if (fileExists) {
+  content = readResourceFile(pageData, relativeSpecPath) ?? '';
+}
+
+const iconURL = resolveIconUrl(getGenericSpecificationIcon(icon));
+
+// Create comprehensive page title
+const pageTitle = `${collection} | ${data.name} | ${specificationName}`.replace(/^\w/, (c) => c.toUpperCase());
+
+const badges = [
+  getResourceTypeBadge(collection),
+  {
+    textColor: 'gray',
+    content: specificationName,
+    iconURL,
+    id: 'generic-specification-badge',
+  },
+];
+
+// Index only the latest version
+const pagefindAttributes =
+  data.version === data.latestVersion
+    ? {
+        'data-pagefind-body': '',
+        'data-pagefind-meta': `title:${pageTitle}`,
+      }
+    : {};
+---
+
+<VerticalSideBarLayout title={pageTitle} description={`${specificationName} for ${data.name}`}>
+  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
+    <div class="flex docs-layout w-full">
+      <div class="w-full min-w-0 lg:mr-2 xl:pr-12 py-8 bg-[rgb(var(--ec-page-bg))]">
+        <!-- Title and subtitle sized like the resource's overview page, kept compact so the source starts high up -->
+        <div class="border-b border-[rgb(var(--ec-page-border))] pb-4">
+          <h1 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{data.name}</h1>
+          <p class="text-base pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{specificationName}</p>
+          <div class="flex flex-wrap gap-1.5 pt-3">
+            {badges.map((badge: any) => <Badge badge={badge} />)}
+          </div>
+        </div>
+
+        <div data-pagefind-ignore>
+          {
+            data.version !== data.latestVersion && (
+              <NewVersionBanner
+                subject={getResourceNoun(collection)}
+                name={data.name}
+                latestOf={specificationName}
+                latestVersion={data.latestVersion}
+                href={buildUrl(`/docs/${collection}/${data.id}/${data.latestVersion}/generic/${filenameWithoutExtension}`)}
+              />
+            )
+          }
+        </div>
+
+        {
+          !fileExists && (
+            <Admonition type="warning" title="Specification not found">
+              <p>The specification file could not be found at {relativeSpecPath}.</p>
+            </Admonition>
+          )
+        }
+
+        {
+          fileExists && (
+            <div class="mt-4 not-prose">
+              <SpecificationSource
+                client:load
+                name={`${data.name} - ${specificationName}`}
+                version={data.version}
+                code={content}
+                language={getSpecificationCodeLanguage(filename)}
+              />
+            </div>
+          )
+        }
+
+        <Footer />
+      </div>
+    </div>
+  </main>
+
+  <style is:global>
+    .docs-layout .prose {
+      max-width: none;
+      overflow: auto;
+    }
+  </style>
+</VerticalSideBarLayout>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/generic/_SpecificationSource.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import SchemaCodeBlock from '@components/SchemaExplorer/SchemaCodeBlock';
+import SchemaCodeModal from '@components/SchemaExplorer/SchemaCodeModal';
+import { copyToClipboard } from '@components/SchemaExplorer/utils';
+
+interface Props {
+  /** The specification's name, shown in fullscreen */
+  name: string;
+  version: string;
+  code: string;
+  /** The syntax to highlight: json, yaml, xml or text */
+  language: string;
+}
+
+/** A generic specification's source, in the same code box as the Schema Explorer */
+export default function SpecificationSource({ name, version, code, language }: Props) {
+  const [isCopied, setIsCopied] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const onCopy = async () => {
+    if (!(await copyToClipboard(code))) return;
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+  };
+
+  return (
+    <>
+      <SchemaCodeBlock
+        code={code}
+        extension={language}
+        onCopy={onCopy}
+        isCopied={isCopied}
+        onOpenFullscreen={() => setIsFullscreen(true)}
+      />
+      <SchemaCodeModal
+        isOpen={isFullscreen}
+        onOpenChange={setIsFullscreen}
+        message={{ data: { name, version }, schemaExtension: language, schemaContent: code }}
+        onCopy={onCopy}
+        isCopied={isCopied}
+      />
+    </>
+  );
+}

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/generic/_[filename].data.ts

@@ -0,0 +1,75 @@
+// pages/docs/[type]/[id]/[version]/generic/[filename].astro
+import { isSSR } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionTypes, PageTypes } from '@types';
+import type { ProcessedSpecification } from '@utils/collections/util';
+
+const toPageProps = (type: PageTypes, spec: ProcessedSpecification, item: CollectionEntry<CollectionTypes>) => ({
+  type,
+  filenameWithoutExtension: spec.filenameWithoutExtension || spec.type,
+  filename: spec.filename || spec.type,
+  path: spec.path,
+  specificationName: spec.name,
+  icon: spec.icon,
+  headers: spec.headers,
+  ...item,
+});
+
+export class Page extends HybridPage {
+  static get prerender(): boolean {
+    return !isSSR();
+  }
+
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isSSR()) {
+      return [];
+    }
+
+    const { pageDataLoader } = await import('@utils/page-loaders/page-data-loader');
+    const { getSpecificationsForService } = await import('@utils/collections/services');
+
+    const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
+    const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
+
+    return allItems.flatMap((items, index) =>
+      items.flatMap((item) =>
+        getSpecificationsForService(item)
+          .filter((spec) => spec.type === 'generic')
+          .map((spec) => ({
+            params: {
+              type: itemTypes[index],
+              id: item.data.id,
+              version: item.data.version,
+              filename: spec.filenameWithoutExtension || spec.type,
+            },
+            props: toPageProps(itemTypes[index], spec, item),
+          }))
+      )
+    );
+  }
+
+  protected static async fetchData(params: any) {
+    const { type, id, version, filename } = params;
+
+    if (!type || !id || !version || !filename) {
+      return null;
+    }
+
+    const { pageDataLoader } = await import('@utils/page-loaders/page-data-loader');
+    const { getSpecificationsForService } = await import('@utils/collections/services');
+
+    const items = await pageDataLoader[type as PageTypes]();
+    const item = items.find((i) => i.data.id === id && i.data.version === version);
+
+    if (!item) {
+      return null;
+    }
+
+    const spec = getSpecificationsForService(item).find(
+      (s) => s.type === 'generic' && (s.filenameWithoutExtension || s.type) === filename
+    );
+
+    return spec ? toPageProps(type, spec, item) : null;
+  }
+}

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

@@ -65,7 +65,7 @@ import {
 import { getSchemasFromResource } from '@utils/collections/schemas';
 import { getIcon } from '@utils/badges';
 import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
-import { isIconPath, resolveIconUrl } from '@utils/icon';
+import { getGenericSpecificationIcon, isIconPath, resolveIconUrl } from '@utils/icon';
 import {
   isEventCatalogChatVisible,
   isMarkdownDownloadEnabled,
@@ -249,6 +249,7 @@ const getSpecificationBadges = () => {
   const asyncapiSpecs = specifications.filter((spec) => spec.type === 'asyncapi');
   const openapiSpecs = specifications.filter((spec) => spec.type === 'openapi');
   const graphQLSpecs = specifications.filter((spec) => spec.type === 'graphql');
+  const genericSpecs = specifications.filter((spec) => spec.type === 'generic');
 
   if (openapiSpecs.length > 0) {
     for (const spec of openapiSpecs) {
@@ -290,6 +291,18 @@ const getSpecificationBadges = () => {
     }
   }
 
+  for (const spec of genericSpecs) {
+    badges.push({
+      content: spec.name,
+      iconURL: resolveIconUrl(getGenericSpecificationIcon(spec.icon)),
+      class: 'text-[rgb(var(--ec-page-text))] hover:underline',
+      id: 'generic-specification-badge',
+      url: buildUrl(
+        `/docs/${props.collection}/${props.data.id}/${props.data.version}/generic/${spec.filenameWithoutExtension}`
+      ),
+    });
+  }
+
   return badges;
 };
 

package/eventcatalog/src/stores/sidebar-store/builders/domain.ts

@@ -16,7 +16,7 @@ import {
 import { isVisualiserEnabled, isChangelogEnabled } from '@utils/feature';
 import { pluralizeMessageType } from '@utils/collections/messages';
 import { getSpecificationsForDomain, hasUbiquitousLanguageTermsWithSubdomainsInCollection } from '@utils/collections/domains';
-import { customIconFieldsForResource } from '@utils/icon';
+import { customIconFieldsForResource, getGenericSpecificationIcon } from '@utils/icon';
 import { resolveSidebarPages, toCustomSidebarContext, type SidebarSpec } from '../custom-sidebar';
 
 // Sort resolved collection entries A-Z by their display name (falling back to id).
@@ -143,6 +143,7 @@ export const buildDomainSections = (
   const openAPISpecifications = specifications.filter((specification) => specification.type === 'openapi');
   const asyncAPISpecifications = specifications.filter((specification) => specification.type === 'asyncapi');
   const graphQLSpecifications = specifications.filter((specification) => specification.type === 'graphql');
+  const genericSpecifications = specifications.filter((specification) => specification.type === 'generic');
   const renderSpecifications = hasSpecifications && shouldRenderSideBarSection(domain, 'specifications');
 
   // Resource subsections. These are built once and shared between the "Resources"
@@ -284,6 +285,14 @@ export const buildDomainSections = (
                 `/docs/domains/${domain.data.id}/${domain.data.version}/graphql/${specification.filenameWithoutExtension}`
               ),
             })),
+            ...genericSpecifications.map((specification) => ({
+              type: 'item',
+              title: specification.name,
+              leftIcon: getGenericSpecificationIcon(specification.icon),
+              href: buildUrl(
+                `/docs/domains/${domain.data.id}/${domain.data.version}/generic/${specification.filenameWithoutExtension}`
+              ),
+            })),
           ] as ChildRef[],
         }
       : null,

package/eventcatalog/src/stores/sidebar-store/builders/service.ts

@@ -17,7 +17,7 @@ import {
 } from './shared';
 import { isVisualiserEnabled, isChangelogEnabled } from '@utils/feature';
 import { pluralizeMessageType } from '@utils/collections/messages';
-import { iconFieldsForResource } from '@utils/icon';
+import { getGenericSpecificationIcon, iconFieldsForResource } from '@utils/icon';
 import { resolveSidebarPages, toCustomSidebarContext, type SidebarSpec } from '../custom-sidebar';
 
 const uniqueRefs = (refs: string[]) => [...new Set(refs)];
@@ -86,6 +86,7 @@ export const buildServiceSections = (
   const openAPISpecifications = specifications.filter((specification) => specification.type === 'openapi');
   const asyncAPISpecifications = specifications.filter((specification) => specification.type === 'asyncapi');
   const graphQLSpecifications = specifications.filter((specification) => specification.type === 'graphql');
+  const genericSpecifications = specifications.filter((specification) => specification.type === 'generic');
 
   const dataStoresInService = uniqueBy([...(service.data.writesTo || []), ...(service.data.readsFrom || [])], 'id');
 
@@ -189,6 +190,12 @@ export const buildServiceSections = (
               leftIcon: '/icons/graphql-black.svg',
               href: buildUrl(`${docsBasePath}/graphql/${specification.filenameWithoutExtension}`),
             })),
+            ...genericSpecifications.map((specification) => ({
+              type: 'item',
+              title: `${specification.name}`,
+              leftIcon: getGenericSpecificationIcon(specification.icon),
+              href: buildUrl(`${docsBasePath}/generic/${specification.filenameWithoutExtension}`),
+            })),
           ] as ChildRef[],
         }
       : null,

package/eventcatalog/src/stores/sidebar-store/custom-sidebar.ts

@@ -1,6 +1,7 @@
 import path from 'node:path';
 import type { CollectionEntry } from 'astro:content';
 import { buildUrl } from '@utils/url-builder';
+import { isIconPath } from '@utils/icon';
 import { processSpecifications } from '@utils/collections/util';
 import type { ResourceCollection, ResourceDocEntry } from '@utils/collections/resource-docs';
 import type { NavNode, ChildRef } from './builders/shared';
@@ -119,6 +120,7 @@ const SPEC_ROUTES: Record<string, { segment: string; icon: string }> = {
   openapi: { segment: 'spec', icon: '/icons/openapi-black.svg' },
   asyncapi: { segment: 'asyncapi', icon: '/icons/asyncapi-black.svg' },
   graphql: { segment: 'graphql', icon: '/icons/graphql-black.svg' },
+  generic: { segment: 'generic', icon: '/icons/specification.svg' },
 };
 
 const MESSAGE_COLLECTIONS: Record<string, keyof CustomSidebarContext> = {
@@ -335,7 +337,7 @@ const resolveSpecPage = (
   return {
     type: 'item',
     title: specification.name,
-    leftIcon: route.icon,
+    leftIcon: specification.type === 'generic' && isIconPath(specification.icon) ? specification.icon : route.icon,
     href: buildUrl(
       `/docs/${owner.collection}/${owner.id}/${owner.version}/${route.segment}/${specification.filenameWithoutExtension}`
     ),

package/eventcatalog/src/utils/collections/util.ts

@@ -18,12 +18,13 @@ export const getFolderNameFromFilePath = (filePath: string): string => {
 
 // --- SPECIFICATION HELPERS ---
 
-export type SpecificationType = 'asyncapi' | 'openapi' | 'graphql';
+export type SpecificationType = 'asyncapi' | 'openapi' | 'graphql' | 'generic';
 
 export interface SpecificationInput {
   type: SpecificationType;
   path: string;
   name?: string;
+  icon?: string;
   headers?: Record<string, string>;
 }
 
@@ -33,6 +34,7 @@ export interface ProcessedSpecification {
   name: string;
   filename: string;
   filenameWithoutExtension: string;
+  icon?: string;
   headers?: Record<string, string>;
 }
 
@@ -49,6 +51,41 @@ export const getDefaultSpecificationName = (type: string): string => {
   }
 };
 
+export type SpecificationCodeLanguage = 'json' | 'yaml' | 'xml' | 'text';
+
+const CODE_LANGUAGE_BY_EXTENSION: Record<string, SpecificationCodeLanguage> = {
+  json: 'json',
+  yaml: 'yaml',
+  yml: 'yaml',
+  xml: 'xml',
+  xsd: 'xml',
+  wsdl: 'xml',
+  xsl: 'xml',
+  xslt: 'xml',
+};
+
+const MEDIA_TYPE_BY_CODE_LANGUAGE: Record<SpecificationCodeLanguage, string> = {
+  json: 'application/json',
+  yaml: 'application/yaml',
+  xml: 'application/xml',
+  text: 'text/plain',
+};
+
+/** The syntax of a specification file, from its extension (query strings on remote URLs are ignored) */
+export const getSpecificationCodeLanguage = (filename: string): SpecificationCodeLanguage => {
+  const extension =
+    getBasename(filename.split(/[?#]/, 1)[0])
+      .match(/\.([^.]+)$/)?.[1]
+      .toLowerCase() ?? '';
+  return CODE_LANGUAGE_BY_EXTENSION[extension] ?? 'text';
+};
+
+/** The media type a specification file is served with */
+export const getSpecificationMediaType = (specification: Pick<ProcessedSpecification, 'type' | 'filename'>): string =>
+  specification.type === 'graphql'
+    ? 'application/graphql'
+    : MEDIA_TYPE_BY_CODE_LANGUAGE[getSpecificationCodeLanguage(specification.filename)];
+
 interface LegacySpecificationFormat {
   asyncapiPath?: string;
   openapiPath?: string;

package/eventcatalog/src/utils/icon.ts

@@ -28,3 +28,11 @@ export function customIconFieldsForResource(data: { styles?: { icon?: string } }
   const styleIcon = data?.styles?.icon;
   return isIconPath(styleIcon) ? { leftIcon: styleIcon } : {};
 }
+
+/**
+ * The icon for a generic specification: its custom `icon` when one is set, otherwise the default
+ * specification icon. Unlike the black logos of the other specification types, it reads in both themes.
+ */
+export function getGenericSpecificationIcon(icon: string | undefined): string {
+  return isIconPath(icon) ? icon : '/icons/specification.svg';
+}

package/eventcatalog/src/utils/node-graphs/utils/utils.ts

@@ -173,7 +173,7 @@ const getSpecMenuItems = (
 ): { label: string; href: string; separator?: boolean }[] => {
   const items: { label: string; href: string; separator?: boolean }[] = [];
 
-  const addSpec = (type: string, filePath: string, isFirst: boolean) => {
+  const addSpec = (type: string, filePath: string, isFirst: boolean, name?: string) => {
     const filename = filePath.split('/').pop() || filePath;
     const filenameNoExt = filename.replace(/\.[^/.]+$/, '');
     const typeLower = type.toLowerCase();
@@ -189,6 +189,9 @@ const getSpecMenuItems = (
     } else if (typeLower === 'graphql') {
       label = 'View GraphQL spec';
       urlSegment = 'graphql';
+    } else if (typeLower === 'generic') {
+      label = name ? `View ${name}` : label;
+      urlSegment = 'generic';
     }
 
     items.push({
@@ -200,7 +203,7 @@ const getSpecMenuItems = (
 
   if (Array.isArray(specs)) {
     specs.forEach((spec: any, i: number) => {
-      if (spec?.type && spec?.path) addSpec(spec.type, spec.path, i === 0);
+      if (spec?.type && spec?.path) addSpec(spec.type, spec.path, i === 0, spec.name);
     });
   } else if (specs && typeof specs === 'object') {
     const legacy = specs as Record<string, string>;

package/eventcatalog/src/utils/schema-explorer.ts

@@ -11,6 +11,7 @@ import { getFlowsForMessages } from '@utils/collections/flows';
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl } from '@utils/url-builder';
 import { getSchemaExtensionForFormat } from '@utils/collections/schemas';
+import { getSpecificationCodeLanguage } from '@utils/collections/util';
 import { resourceFileExists, readResourceFile } from '@utils/resource-files';
 import { getExamplesForResource } from '@utils/collections/examples';
 import { attachFlowGraphs, getMessageUsageGraph } from '@utils/schema-usage-graph';
@@ -172,7 +173,8 @@ async function buildRegistry() {
               return null;
             }
 
-            const schemaExtension = spec.type;
+            // Generic specifications are shown as source, so their extension is the syntax to highlight
+            const schemaExtension = spec.type === 'generic' ? getSpecificationCodeLanguage(spec.path) : spec.type;
             const enrichedOwners = await enrichOwners(service.data.owners || []);
 
             return {
@@ -189,6 +191,7 @@ async function buildRegistry() {
               schemaExtension,
               specType: spec.type,
               specName: spec.name,
+              specIcon: spec.icon,
               specFilenameWithoutExtension: spec.filenameWithoutExtension,
             };
           })
@@ -222,7 +225,8 @@ async function buildRegistry() {
               return null;
             }
 
-            const schemaExtension = spec.type;
+            // Generic specifications are shown as source, so their extension is the syntax to highlight
+            const schemaExtension = spec.type === 'generic' ? getSpecificationCodeLanguage(spec.path) : spec.type;
             const enrichedOwners = await enrichOwners(domain.data.owners || []);
 
             return {
@@ -239,6 +243,7 @@ async function buildRegistry() {
               schemaExtension,
               specType: spec.type,
               specName: spec.name,
+              specIcon: spec.icon,
               specFilenameWithoutExtension: spec.filenameWithoutExtension,
             };
           })

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "BUSL-1.1",
   "type": "module",
-  "version": "5.5.2",
+  "version": "5.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -141,11 +141,11 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.6.6",
-    "@eventcatalog/exporters": "0.1.2",
-    "@eventcatalog/fitness": "0.1.0",
-    "@eventcatalog/linter": "1.2.4",
-    "@eventcatalog/sdk": "2.31.2",
-    "@eventcatalog/visualiser": "^5.1.1"
+    "@eventcatalog/fitness": "0.1.1",
+    "@eventcatalog/linter": "1.3.0",
+    "@eventcatalog/visualiser": "^5.1.2",
+    "@eventcatalog/sdk": "2.32.0",
+    "@eventcatalog/exporters": "0.1.3"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",

package/dist/{chunk-QJ7KKN2D.js → chunk-NCEZDQSW.js}

@@ -1,3 +1,10 @@
+import {
+  createFederationContentCache
+} from "./chunk-R7Z5ALYI.js";
+import {
+  getFederationDiagnostics,
+  resolveFederationRules
+} from "./chunk-JJPB6EOZ.js";
 import {
   withFederationOutputTransaction
 } from "./chunk-WRNH5C3U.js";
@@ -7,13 +14,6 @@ import {
 import {
   createFederationSourceProvider
 } from "./chunk-A2RZR3U4.js";
-import {
-  createFederationContentCache
-} from "./chunk-R7Z5ALYI.js";
-import {
-  getFederationDiagnostics,
-  resolveFederationRules
-} from "./chunk-JJPB6EOZ.js";
 import {
   getEventCatalogConfigFile
 } from "./chunk-4G7FSRPN.js";