@eventcatalog/core 5.0.0-beta.3 → 5.0.0-beta.31

package/eventcatalog/src/features/studio/tool-sync.ts

@@ -0,0 +1,75 @@
+import * as Y from 'yjs';
+import { applyAwarenessUpdate, encodeAwarenessUpdate, type Awareness } from 'y-protocols/awareness';
+import type { Status } from './hooks/use-studio-flow';
+
+/**
+ * Syncing a canvas through MCP tool calls, for when a view can't open the collaboration WebSocket
+ * (e.g. an MCP App inside a chat whose sandbox blocks it). Each call sends the server what it doesn't have
+ * yet (by its state vector) and our presence, and gets back what we don't have and everyone's presence.
+ * Slower than the WebSocket (it polls), but works wherever the chat can call the MCP server's tools.
+ */
+
+export type SyncRequest = {
+  canvasId: string;
+  clientId: number;
+  /** What we have, so the server sends only what we're missing */
+  stateVector: string;
+  /** What we have that the server doesn't (as of its last state vector) */
+  update: string;
+  /** Our presence (name, pointer, selection...) */
+  awareness: string;
+};
+export type SyncResponse = { update: string; stateVector: string; awareness?: string };
+export type ToolSync = (request: SyncRequest) => Promise<SyncResponse>;
+
+// Binary Yjs updates travel as base64 in tool arguments and results (atob/btoa exist in browsers and Node)
+export const toBase64 = (bytes: Uint8Array) => {
+  let text = '';
+  for (let i = 0; i < bytes.length; i += 0x8000) text += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+  return btoa(text);
+};
+export const fromBase64 = (text: string) => Uint8Array.from(atob(text), (char) => char.charCodeAt(0));
+
+/** Applied with this origin, so undo (which tracks local changes) leaves other people's changes alone */
+const REMOTE = Symbol('tool-sync');
+
+export function startToolSync(
+  doc: Y.Doc,
+  awareness: Awareness,
+  {
+    canvasId,
+    sync,
+    onStatus,
+    intervalMs = 1000,
+  }: { canvasId: string; sync: ToolSync; onStatus: (status: Status) => void; intervalMs?: number }
+) {
+  let serverVector: Uint8Array | undefined;
+  let stopped = false;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const tick = async () => {
+    try {
+      const response = await sync({
+        canvasId,
+        clientId: doc.clientID,
+        stateVector: toBase64(Y.encodeStateVector(doc)),
+        update: toBase64(Y.encodeStateAsUpdate(doc, serverVector)),
+        awareness: toBase64(encodeAwarenessUpdate(awareness, [doc.clientID])),
+      });
+      if (stopped) return;
+      Y.applyUpdate(doc, fromBase64(response.update), REMOTE);
+      serverVector = fromBase64(response.stateVector);
+      if (response.awareness) applyAwarenessUpdate(awareness, fromBase64(response.awareness), REMOTE);
+      onStatus('connected');
+    } catch {
+      if (!stopped) onStatus('disconnected');
+    }
+    if (!stopped) timer = setTimeout(tick, intervalMs);
+  };
+  void tick();
+
+  return () => {
+    stopped = true;
+    clearTimeout(timer);
+  };
+}

package/eventcatalog/src/layouts/BaseLayout.astro

@@ -6,12 +6,12 @@ import NavigationProgress from '../components/NavigationProgress.astro';
 import config from '@config';
 
 interface Props {
-  title: string;
+  /** The page's own title; the catalog's title follows it (the homepage has none) */
+  title?: string;
   description?: string;
-  ogTitle?: string;
 }
 
-const { title, description, ogTitle } = Astro.props;
+const { title, description } = Astro.props;
 const catalogTheme = config.theme || 'default';
 ---
 
@@ -50,7 +50,7 @@ const catalogTheme = config.theme || 'default';
         document.addEventListener('astro:page-load', applyTheme);
       })();
     </script>
-    <SEO title={title} description={description} ogTitle={ogTitle} />
+    <SEO title={title} description={description} />
     <AnalyticsHead />
     <slot name="head" />
   </head>

package/eventcatalog/src/layouts/SettingsLayout.astro

@@ -1,7 +1,7 @@
 ---
 import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
 import { buildUrl } from '@utils/url-builder';
-import { Settings, Server, Bot, FileText, BadgeCheck } from 'lucide-react';
+import { Settings, Server, Bot, ScanText, BadgeCheck } from 'lucide-react';
 
 export type SettingsSection = 'general' | 'mcp' | 'assistant' | 'llm-access' | 'license';
 
@@ -55,7 +55,7 @@ const groups: SectionGroup[] = [
         id: 'llm-access',
         label: 'LLM Access',
         href: buildUrl('/settings/llm-access'),
-        icon: FileText,
+        icon: ScanText,
       },
     ],
   },

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -1,6 +1,7 @@
 ---
 interface Props {
-  title: string;
+  /** The page's own title; the catalog's title follows it (the homepage has none) */
+  title?: string;
   sidebar?: boolean;
   description?: string;
   showNestedSideBar?: boolean;
@@ -52,7 +53,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/collections/queries';
 import { getFirstNavigationPage } from '@features/custom-documentation/utils/custom-docs';
 
-import { isSSR } from '@utils/feature';
+import { isCanvasEnabled, isSSR } from '@utils/feature';
 
 const customDocs = await getCollection('customPages');
 const firstCustomDocsPage = customDocs.length > 0 ? await getFirstNavigationPage() : null;
@@ -241,7 +242,7 @@ const builtinNavigationItems: Record<string, Omit<VerticalNavigationItem, 'curre
   '/studio': {
     id: '/studio',
     matchId: '/studio',
-    label: 'EventCatalog Studio',
+    label: 'Studio',
     icon: 'SquareDashedMousePointer',
     href: buildUrl('/studio'),
   },
@@ -292,7 +293,12 @@ const builtinNavigationItems: Record<string, Omit<VerticalNavigationItem, 'curre
 const defaultNavigationGroups: NavigationGroupConfig[] = [
   {
     id: 'main',
-    items: [{ id: '/' }, { id: '/docs/custom', visible: customDocs.length > 0 }],
+    items: [
+      { id: '/' },
+      { id: '/docs/custom', visible: customDocs.length > 0 },
+      // Collaborative canvases, where they're on
+      { id: '/studio', visible: isCanvasEnabled() },
+    ],
   },
   {
     id: 'browse',
@@ -371,6 +377,8 @@ const resolveNavigationItem = (item: NavigationItemConfig): VerticalNavigationIt
   if (item.visible === false) return null;
 
   const builtinId = navigationBuiltinAliases[item.id] || item.id;
+  // Studio is only there where canvases are on
+  if (builtinId === '/studio' && !item.href && !isCanvasEnabled()) return null;
   const builtin = builtinNavigationItems[builtinId];
   const href = item.href ? normalizeNavigationHref(item.href) : builtin?.href;
 
@@ -423,7 +431,7 @@ const { title, description, showNestedSideBar = true, showHeader = true, reduced
 const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/docs', true)];
 ---
 
-<BaseLayout title={`EventCatalog | ${title}`} description={description} ogTitle={title}>
+<BaseLayout title={title} description={description}>
   <Fragment slot="head">
     <script is:inline define:vars={{ verticalNavAutoCollapsePaths }}>
       (() => {

package/eventcatalog/src/pages/_index.astro

@@ -1,358 +1,21 @@
 ---
-import { buildUrl } from '@utils/url-builder';
-import config from '@config';
-
-import { getCollection } from 'astro:content';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { BookOpenText, Workflow, TableProperties, BookUser, Code2, FileJson, ArrowUpRight, ArrowRight, Plus } from 'lucide-react';
+import CatalogDashboard from '@components/Homepage/CatalogDashboard.astro';
 
 const { showNestedSideBar = true } = Astro.props;
-
-// Lightweight data fetch: only raw collections, no hydration.
-const [allDomains, allServices, allEvents, allCommands, allQueries, allFlows] = await Promise.all([
-  getCollection('domains'),
-  getCollection('services'),
-  getCollection('events'),
-  getCollection('commands'),
-  getCollection('queries'),
-  getCollection('flows'),
-]);
-
-const isCurrentVersion = (item: { data: { hidden?: boolean }; filePath?: string }) =>
-  item.data.hidden !== true && !item.filePath?.includes('versioned');
-
-const domains = allDomains.filter(isCurrentVersion);
-const services = allServices.filter(isCurrentVersion);
-const events = allEvents.filter(isCurrentVersion);
-const commands = allCommands.filter(isCurrentVersion);
-const queries = allQueries.filter(isCurrentVersion);
-const messages = [...events, ...commands, ...queries];
-const flows = allFlows.filter(isCurrentVersion);
-
-const getDefaultUrl = (route: string, defaultValue: string) => {
-  if (domains.length > 0) return buildUrl(`/${route}/domains/${domains[0].data.id}/${domains[0].data.version}`);
-  if (services.length > 0) return buildUrl(`/${route}/services/${services[0].data.id}/${services[0].data.version}`);
-  if (flows.length > 0) return buildUrl(`/${route}/flows/${flows[0].data.id}/${flows[0].data.version}`);
-  return buildUrl(defaultValue);
-};
-
-interface StatTile {
-  label: string;
-  count: number;
-  href: string;
-  emptyHref: string;
-  tone: string; // CSS color expression — drives accent rail + count gradient
-}
-
-const statTiles: StatTile[] = [
-  {
-    label: 'Domains',
-    count: domains.length,
-    href: buildUrl('/discover/domains'),
-    emptyHref: 'https://www.eventcatalog.dev/docs/domains',
-    tone: '250 204 21', // amber-400
-  },
-  {
-    label: 'Services',
-    count: services.length,
-    href: buildUrl('/discover/services'),
-    emptyHref: 'https://www.eventcatalog.dev/docs/services',
-    tone: '244 114 182', // pink-400
-  },
-  {
-    label: 'Messages',
-    count: messages.length,
-    href: buildUrl('/discover/events'),
-    emptyHref: 'https://www.eventcatalog.dev/docs/messages',
-    tone: '167 139 250', // violet-400
-  },
-  {
-    label: 'Flows',
-    count: flows.length,
-    href: buildUrl('/discover/flows'),
-    emptyHref: 'https://www.eventcatalog.dev/docs/flows',
-    tone: '94 234 212', // teal-300
-  },
-];
-
-interface ExploreCard {
-  title: string;
-  description: string;
-  icon: any;
-  href: string;
-  external?: boolean;
-  /** When true, renders as the lead "feature" card with extra width and CTA styling. */
-  feature?: boolean;
-  tone: string; // RGB triple for the icon tile
-}
-
-const exploreCards: ExploreCard[] = [
-  {
-    title: 'Documentation',
-    description: 'Browse every domain, service, message, and flow your teams have published.',
-    icon: BookOpenText,
-    href: getDefaultUrl('docs', 'domains'),
-    feature: true,
-    tone: '96 165 250', // blue-400
-  },
-  {
-    title: 'Visualizer',
-    description: 'See how services connect — message flows across your architecture.',
-    icon: Workflow,
-    href: getDefaultUrl('visualiser', 'domains'),
-    tone: '167 139 250', // violet-400
-  },
-  {
-    title: 'Discover',
-    description: 'Search every event, service, agent, and team across the catalog.',
-    icon: TableProperties,
-    href: buildUrl('/discover/events'),
-    tone: '94 234 212', // teal-300
-  },
-  {
-    title: 'Schema Explorer',
-    description: 'Track schema evolution, compare versions, and catch breaking changes.',
-    icon: FileJson,
-    href: buildUrl('/schemas/explorer'),
-    tone: '250 204 21', // amber-400
-  },
-  {
-    title: 'Team Directory',
-    description: 'Find owners, on-call contacts, and the team behind every service.',
-    icon: BookUser,
-    href: buildUrl('/directory/users'),
-    tone: '251 146 60', // orange-400
-  },
-  {
-    title: 'API & SDK',
-    description: 'Programmatic access — query and manage your catalog with a typed SDK.',
-    icon: Code2,
-    href: 'https://www.eventcatalog.dev/docs/sdk',
-    external: true,
-    tone: '129 140 248', // indigo-400
-  },
-];
 ---
 
-<VerticalSideBarLayout title="EventCatalog" showNestedSideBar={showNestedSideBar}>
-  <div class="ec-home min-h-screen">
-    <!-- Hero -->
-    <header class="ec-hero">
-      <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-accent))]">Catalog</div>
-      <div class="mt-3 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
-        <div>
-          <h1 class="text-[28px] font-semibold leading-[1.1] tracking-tight text-[rgb(var(--ec-page-text))] md:text-[32px]">
-            {config?.organizationName || 'EventCatalog'}
-          </h1>
-          <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
-            {config.tagline || 'Explore and understand your event-driven architecture.'}
-          </p>
-        </div>
-        <div class="flex items-center gap-2">
-          <a
-            href={getDefaultUrl('docs', 'domains')}
-            class="ec-btn-primary inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-bg))] border border-[rgb(var(--ec-page-border))] px-3.5 py-2 text-[12.5px] font-semibold text-[rgb(var(--ec-page-text-muted))] transition-colors hover:border-[rgb(var(--ec-accent)/0.5)] hover:text-[rgb(var(--ec-accent))]"
-          >
-            Explore Catalog
-            <ArrowRight className="h-3.5 w-3.5" />
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <div class="ec-divider"></div>
-
-    <!-- Stat strip -->
-    <section class="ec-stats">
-      {
-        statTiles.map((tile) => (
-          <a
-            href={tile.count > 0 ? tile.href : tile.emptyHref}
-            target={tile.count === 0 ? '_blank' : undefined}
-            rel={tile.count === 0 ? 'noreferrer' : undefined}
-            class="ec-stat group"
-            style={`--tone: ${tile.tone};`}
-          >
-            <div class="flex items-baseline justify-between gap-2">
-              <span class="text-[11px] font-medium uppercase tracking-[0.14em] text-[rgb(var(--tone))]">{tile.label}</span>
-              {tile.count > 0 ? (
-                <ArrowUpRight className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))] transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-[rgb(var(--ec-accent))]" />
-              ) : (
-                <Plus className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))] transition-colors group-hover:text-[rgb(var(--ec-accent))]" />
-              )}
-            </div>
-            <div class="mt-3 flex items-baseline gap-2">
-              <span class="font-mono text-[34px] font-semibold leading-none tracking-tight text-[rgb(var(--ec-page-text))]">
-                {tile.count}
-              </span>
-              {tile.count === 0 && <span class="text-[12px] text-[rgb(var(--ec-page-text-muted))]">— add some</span>}
-            </div>
-          </a>
-        ))
-      }
-    </section>
-
-    <!-- Eyebrow + Explore grid -->
-    <section class="mt-12">
-      <div class="ec-section-eyebrow">
-        <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-accent))]">Explore</span>
-        <span class="ec-section-rule"></span>
-        <span class="font-mono text-[11px] text-[rgb(var(--ec-page-text-muted)/0.7)]">{exploreCards.length} sections</span>
-      </div>
-
-      <div class="ec-explore-grid mt-4">
-        {
-          exploreCards.map((card) => (
-            <a
-              href={card.href}
-              target={card.external ? '_blank' : undefined}
-              rel={card.external ? 'noreferrer' : undefined}
-              class:list={['ec-card group', card.feature ? 'ec-card--feature' : '']}
-              style={`--tone: ${card.tone};`}
-            >
-              <div class="flex items-start justify-between gap-3">
-                <div class="ec-card-icon">
-                  <card.icon className="h-4 w-4" />
-                </div>
-                <ArrowUpRight className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))] transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-[rgb(var(--ec-accent))]" />
-              </div>
-              <h3 class="mt-4 text-[15px] font-semibold tracking-tight text-[rgb(var(--ec-page-text))]">{card.title}</h3>
-              <p class="mt-1.5 text-[13px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]">{card.description}</p>
-            </a>
-          ))
-        }
-      </div>
-    </section>
+<VerticalSideBarLayout showNestedSideBar={showNestedSideBar}>
+  <div class="ec-home">
+    <CatalogDashboard />
   </div>
 </VerticalSideBarLayout>
 
 <style is:global>
   .ec-home {
-    /* Negate the layout wrapper's horizontal padding so the homepage controls its own. */
+    /* The layout pads its content: the homepage sets its own, wider spacing */
     margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1);
     margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);
     padding: 2rem 2rem 0;
   }
-  .ec-hero {
-    padding-bottom: 1.5rem;
-  }
-  .ec-divider {
-    height: 1px;
-    background: linear-gradient(
-      to right,
-      transparent,
-      rgb(var(--ec-page-border)) 12%,
-      rgb(var(--ec-page-border)) 88%,
-      transparent
-    );
-    margin: 0.25rem 0 1.5rem;
-  }
-  .ec-stats {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.75rem;
-  }
-  @media (min-width: 768px) {
-    .ec-stats {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .ec-stat {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    border: 1px solid rgb(var(--ec-page-border));
-    border-radius: 0.75rem;
-    background:
-      radial-gradient(80% 100% at 0% 0%, rgb(var(--tone) / 0.05), transparent 60%), rgb(var(--ec-card-bg, var(--ec-page-bg)));
-    padding: 1rem 1.1rem 1.1rem;
-    transition:
-      border-color 200ms,
-      transform 200ms,
-      box-shadow 200ms;
-    text-decoration: none;
-  }
-  .ec-stat:hover {
-    border-color: rgb(var(--ec-accent) / 0.5);
-    transform: translateY(-1px);
-  }
-
-  .ec-section-eyebrow {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-  .ec-section-rule {
-    flex: 1;
-    height: 1px;
-    background: linear-gradient(to right, rgb(var(--ec-accent) / 0.4), rgb(var(--ec-page-border)) 30%);
-  }
-
-  /* Explore grid: bordered cells with breathing room between them. */
-  .ec-explore-grid {
-    display: grid;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    gap: 1rem;
-  }
-  @media (min-width: 640px) {
-    .ec-explore-grid {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  @media (min-width: 1024px) {
-    .ec-explore-grid {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
-  .ec-card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    padding: 1.5rem 1.5rem 1.4rem;
-    text-decoration: none;
-    border: 1px solid rgb(var(--ec-page-border));
-    border-radius: 0.875rem;
-    background: rgb(var(--ec-card-bg, var(--ec-page-bg)));
-    transition:
-      background 200ms,
-      border-color 200ms;
-    min-height: 9.5rem;
-  }
-  .ec-card:hover {
-    background: rgb(var(--ec-page-bg) / 0.4);
-    border-color: rgb(var(--ec-accent) / 0.5);
-  }
-
-  .ec-card--feature {
-    background:
-      radial-gradient(60% 90% at 0% 0%, rgb(var(--tone) / 0.07), transparent 60%), rgb(var(--ec-card-bg, var(--ec-page-bg)));
-  }
-  .ec-card--feature:hover {
-    background: radial-gradient(60% 90% at 0% 0%, rgb(var(--ec-accent) / 0.12), transparent 60%), rgb(var(--ec-page-bg) / 0.4);
-  }
-
-  .ec-card-icon {
-    display: inline-flex;
-    height: 2.25rem;
-    width: 2.25rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.5rem;
-    background: rgb(var(--tone) / 0.12);
-    color: rgb(var(--tone));
-    transition:
-      background 200ms,
-      color 200ms;
-  }
-  .ec-card:hover .ec-card-icon {
-    background: rgb(var(--ec-accent) / 0.2);
-    color: rgb(var(--ec-accent));
-  }
-  .ec-card--feature .ec-card-icon {
-    height: 2.5rem;
-    width: 2.5rem;
-    border-radius: 0.625rem;
-  }
 </style>

package/eventcatalog/src/pages/architecture/[type]/[id]/[version]/_index.data.spec.ts

@@ -68,10 +68,9 @@ describe('architecture page redirects', () => {
   it('returns not found for resources without an architecture page', async () => {
     mocks.isSSR.mockReturnValue(true);
 
+    // Nothing found: the page answers with the 404 page
     await expect(
       Page.getData({ params: { type: 'events', id: 'order-created', version: '1.0.0' }, props: {} } as any)
-    ).rejects.toMatchObject({
-      status: 404,
-    });
+    ).resolves.toBeUndefined();
   });
 });

package/eventcatalog/src/pages/architecture/[type]/[id]/[version]/_index.data.ts

@@ -61,11 +61,4 @@ export class Page extends HybridPage {
 
     return { type, data: { id, name: match.item.data.name, version }, redirectPath: match.redirectPath };
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Documentation not found',
-    });
-  }
 }

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

@@ -9,7 +9,9 @@ import { Page } from './_index.data';
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-const { data, redirectPath } = await Page.getData(Astro);
+const pageData = await Page.getData(Astro);
+if (!pageData) return Astro.rewrite('/404');
+const { data, redirectPath } = pageData;
 const redirectUrl = buildUrl(redirectPath);
 
 if (isSSR()) {

package/eventcatalog/src/pages/diagrams/[id]/[version]/_index.data.ts

@@ -47,11 +47,4 @@ export class Page extends HybridPage {
       allVersions,
     };
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Diagram not found',
-    });
-  }
 }

package/eventcatalog/src/pages/diagrams/[id]/[version]/embed.astro

@@ -10,6 +10,7 @@ export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 const { Content } = await render(props);
 
 const currentVersion = props.data.version;

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

@@ -15,6 +15,7 @@ export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 const { Content, headings } = await render(props);
 
 const pageTitle = `Diagram | ${props.data.name}`;

package/eventcatalog/src/pages/directory/[type]/_index.data.ts

@@ -45,6 +45,11 @@ export class Page extends HybridPage {
       teams: getTeams,
     };
 
+    // An unknown type (e.g. a mistyped URL) has no directory page
+    if (!Object.hasOwn(loaders, type)) {
+      return null;
+    }
+
     // Get all items of the specified type
     const items = await loaders[type as keyof typeof loaders]();
 
@@ -53,11 +58,4 @@ export class Page extends HybridPage {
       data: items,
     };
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Directory type not found',
-    });
-  }
 }

package/eventcatalog/src/pages/directory/[type]/index.astro

@@ -7,7 +7,9 @@ import { Page } from './_index.data';
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-const { type, data } = await Page.getData(Astro);
+const pageData = await Page.getData(Astro);
+if (!pageData) return Astro.rewrite('/404');
+const { type, data } = pageData;
 
 function mapToItem(i: any) {
   return {

package/eventcatalog/src/pages/discover/[type]/_index.data.ts

@@ -81,6 +81,11 @@ export class Page extends HybridPage {
       'data-products': getDataProducts,
     };
 
+    // An unknown type (e.g. a mistyped URL) has no discover page
+    if (!Object.hasOwn(loaders, type)) {
+      return null;
+    }
+
     // @ts-ignore
     const items = await loaders[type]();
 
@@ -89,11 +94,4 @@ export class Page extends HybridPage {
       data: items,
     };
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Collection type not found',
-    });
-  }
 }

package/eventcatalog/src/pages/discover/[type]/index.astro

@@ -27,7 +27,9 @@ import { Page } from './_index.data';
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-const { type, data } = await Page.getData(Astro);
+const pageData = await Page.getData(Astro);
+if (!pageData) return Astro.rewrite('/404');
+const { type, data } = pageData;
 
 const events = await getEvents();
 const queries = await getQueries();