@eventcatalog/core 5.0.0-beta.1 → 5.0.0-beta.10

package/eventcatalog/src/features/studio/studio.css

@@ -0,0 +1,273 @@
+/*
+ * The visualiser hides node handles (it is read only), here they are the connection points,
+ * so show them on hover, on selection and while connecting.
+ */
+.studio-canvas .react-flow__handle {
+  opacity: 0 !important;
+  width: 11px;
+  height: 11px;
+  background: rgb(var(--ec-card-bg));
+  border: 2px solid rgb(var(--ec-accent));
+  transition: opacity 0.15s ease;
+  z-index: 30;
+}
+
+.studio-canvas .react-flow__node:hover .react-flow__handle,
+.studio-canvas .react-flow__node.selected .react-flow__handle,
+.studio-canvas .react-flow__pane.connecting ~ * .react-flow__handle,
+.studio-canvas .react-flow__handle.connectingto {
+  opacity: 1 !important;
+}
+
+.studio-canvas .react-flow__handle:hover,
+.studio-canvas .react-flow__handle.connectingto {
+  background: rgb(var(--ec-accent));
+}
+
+.studio-canvas .react-flow__handle.connectingto.valid {
+  background: rgb(var(--ec-badge-color-green-text));
+  border-color: rgb(var(--ec-badge-color-green-text));
+}
+
+.studio-canvas .react-flow__edge.selected .react-flow__edge-path,
+.studio-canvas .react-flow__edge:hover .react-flow__edge-path {
+  stroke: rgb(var(--ec-accent)) !important;
+  stroke-width: 2px !important;
+}
+
+/*
+ * A connection being dragged (a new one, or an end moved to another node): once it's on a node it can connect
+ * to, it turns the hover colour, so you know letting go will connect it
+ */
+.studio-canvas .react-flow__connection-path {
+  stroke-width: 2px;
+  transition: stroke 100ms ease;
+}
+/* Like a hovered edge in the visualiser: glowing, with the dashes flowing (ec-edge-dash, from its styles) */
+.studio-canvas .react-flow__connection.valid .react-flow__connection-path {
+  stroke: #2563eb;
+  stroke-width: 4px;
+  filter: drop-shadow(0 0 8px #2563eb);
+  stroke-dasharray: 5 5;
+  animation: ec-edge-dash 0.5s linear infinite;
+}
+[data-theme='dark'] .studio-canvas .react-flow__connection.valid .react-flow__connection-path {
+  stroke: #00d9ff;
+  filter: drop-shadow(0 0 8px #00d9ff);
+}
+
+/* Comment mode (C): click anywhere to drop a comment */
+.studio-canvas.comment-mode .react-flow__pane,
+.studio-canvas.comment-mode .react-flow__node {
+  cursor: crosshair !important;
+}
+
+/* After a layout or a level change, nodes glide to their new place */
+.studio-canvas.is-layout-transition .react-flow__node {
+  transition: transform 450ms ease;
+}
+
+/* Edges are drawn where the nodes end up, so they wait for the glide to finish */
+.studio-canvas .react-flow__edges {
+  transition: opacity 200ms ease;
+}
+.studio-canvas.is-layout-transition .react-flow__edges {
+  opacity: 0;
+  transition: none;
+}
+
+/* Containers grow smoothly when they're fitted to what's in them, or someone else resizes them */
+.studio-canvas.is-container-resize :is(.react-flow__node-domain-group, .react-flow__node-system-group) {
+  transition:
+    width 300ms ease,
+    height 300ms ease,
+    transform 300ms ease;
+}
+
+/* Nodes pop in when they're added (by anyone, people or agents) */
+@keyframes studio-node-in {
+  from {
+    opacity: 0;
+    scale: 0.85;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+.studio-canvas .react-flow__node {
+  animation: studio-node-in 220ms ease-out;
+}
+
+/* No React Flow attribution on the canvas */
+.studio-canvas .react-flow__attribution {
+  display: none;
+}
+
+/*
+ * Containers let the pointer through their body to the canvas (so dragging inside one draws a selection box),
+ * and are moved, selected and resized by their header and resize handles. React Flow sets pointer-events inline.
+ */
+.studio-canvas .react-flow__node-domain-group,
+.studio-canvas .react-flow__node-system-group {
+  pointer-events: none !important;
+}
+.studio-canvas .react-flow__node-domain-group :is(.ec-group-grip, .react-flow__resize-control),
+.studio-canvas .react-flow__node-system-group :is(.ec-group-grip, .react-flow__resize-control) {
+  pointer-events: auto;
+}
+
+/*
+ * Selected nodes get an accent outline and glow around them, and hovered ones a faint outline (like Figma and
+ * Miro). Drawn by the node's wrapper, so it fits every kind of node. Containers draw their own.
+ */
+.studio-canvas .react-flow__node:not(.react-flow__node-domain-group, .react-flow__node-system-group)::after {
+  content: '';
+  position: absolute;
+  inset: -6px;
+  border-radius: 12px;
+  border: 2px solid transparent;
+  pointer-events: none;
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+.studio-canvas .react-flow__node:not(.react-flow__node-domain-group, .react-flow__node-system-group):hover::after {
+  border-color: rgb(var(--ec-accent) / 0.35);
+}
+.studio-canvas .react-flow__node.selected:not(.react-flow__node-domain-group, .react-flow__node-system-group)::after {
+  border-color: rgb(var(--ec-accent));
+  box-shadow: 0 0 0 4px rgb(var(--ec-accent) / 0.15);
+}
+
+/* A selected or hovered connection shows the ends you can drag to another node */
+.studio-canvas .react-flow__edge .react-flow__edgeupdater {
+  cursor: grab;
+}
+.studio-canvas .react-flow__edge:is(.selected, :hover) .react-flow__edgeupdater {
+  fill: rgb(var(--ec-accent) / 0.2);
+  stroke: rgb(var(--ec-accent));
+  stroke-width: 1.5;
+}
+
+/* A selected container */
+.studio-canvas .ec-group-selected {
+  position: absolute;
+  inset: 0;
+  border-radius: 14px;
+  box-shadow: 0 0 0 2px rgb(var(--ec-accent) / 0.7);
+  pointer-events: none;
+}
+
+/* A container something's dragged over: it goes in it when it's dropped (in the theme's button colours, which stay
+   strong in light and dark themes) */
+.studio-canvas .ec-drop-target {
+  position: absolute;
+  inset: -5px;
+  border-radius: 17px;
+  border: 3px solid rgb(var(--ec-button-bg));
+  background: rgb(var(--ec-button-bg) / 0.1);
+  box-shadow: 0 0 0 6px rgb(var(--ec-button-bg) / 0.2);
+  pointer-events: none;
+  animation: ec-drop-target-in 150ms ease-out;
+}
+.studio-canvas .ec-drop-target-label {
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  translate: -50% 0;
+  white-space: nowrap;
+  border-radius: 9999px;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: rgb(var(--ec-button-text));
+  background: rgb(var(--ec-button-bg));
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
+}
+@keyframes ec-drop-target-in {
+  from {
+    opacity: 0;
+    scale: 0.98;
+  }
+}
+
+/*
+ * What's dragged from the left panel (DragGhost): just the node, on nothing. The visualiser's class gives it the page
+ * background, and its handles are hidden on the canvas only.
+ */
+.studio-drag-preview,
+.studio-drag-preview .react-flow,
+.studio-drag-preview .react-flow__renderer,
+.studio-drag-preview .react-flow__pane {
+  background: transparent !important;
+}
+.studio-drag-preview .react-flow__handle {
+  display: none !important;
+}
+
+/* Text written on the canvas: no card around it, in the page's text colour */
+.studio-canvas .studio-text,
+.studio-drag-preview .studio-text {
+  min-width: 80px;
+  padding: 2px 4px;
+}
+.studio-text .studio-text-body {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.4;
+  color: rgb(var(--ec-page-text));
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.studio-canvas .studio-width-handle {
+  border-color: rgb(var(--ec-accent)) !important;
+}
+
+/* A sticky note: about square like a post-it, taller if more is written on it (dark text: the paper is light in
+   every theme) */
+.studio-note {
+  position: relative;
+  min-height: 176px;
+  height: 100%;
+  padding: 12px 14px;
+  border: 1px solid;
+  border-radius: 6px;
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.06),
+    0 6px 16px -6px rgb(0 0 0 / 0.18);
+  color: #1f2937;
+}
+.studio-note .studio-note-body {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.45;
+  color: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.studio-note .studio-note-body::placeholder {
+  color: inherit;
+  opacity: 0.5;
+}
+/* Its colours, above it while it's selected */
+.studio-note .studio-note-colors {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 9999px;
+  border: 1px solid rgb(var(--ec-page-border));
+  background: rgb(var(--ec-card-bg));
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
+}
+.studio-note .studio-note-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  border: 2px solid;
+  cursor: pointer;
+}

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/VerticalSideBarLayout.astro

@@ -52,7 +52,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 +241,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 +292,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',
@@ -323,7 +328,6 @@ const isNavigationItemCurrent = (item: Pick<VerticalNavigationItem, 'href' | 'ma
     return (
       pathname === itemPath ||
       (pathname.includes('/docs') && !pathname.includes('/docs/custom')) ||
-      pathname.includes('/architecture/') ||
       pathname.includes('/visualiser') ||
       (pathname.includes('/schemas') && !pathname.includes('/schemas/explorer') && !pathname.includes('/schemas/fields'))
     );
@@ -372,6 +376,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;
 
@@ -889,7 +895,6 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
       return (
         pathname === targetPath ||
         (pathname.includes('/docs') && !pathname.includes('/docs/custom')) ||
-        pathname.includes('/architecture/') ||
         pathname.includes('/visualiser') ||
         (pathname.includes('/schemas') && !pathname.includes('/schemas/explorer') && !pathname.includes('/schemas/fields'))
       );

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

@@ -1,88 +1,77 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { loadArchitectureItems, Page } from './_index.data';
+import { Page } from './_index.data';
 
-const collectionMocks = vi.hoisted(() => ({
+const mocks = vi.hoisted(() => ({
+  isSSR: vi.fn(() => false),
   getDomains: vi.fn(),
   getServices: vi.fn(),
   getSystems: vi.fn(),
+  getOwnersWithResources: vi.fn(),
 }));
 
-vi.mock('@utils/feature', () => ({
-  isSSR: () => false,
-}));
+const loaders: Record<string, () => Promise<unknown>> = {
+  domains: () => mocks.getDomains(),
+  services: () => mocks.getServices(),
+  systems: () => mocks.getSystems(),
+};
 
-vi.mock('@utils/collections/domains', () => ({ getDomains: collectionMocks.getDomains }));
-vi.mock('@utils/collections/systems', () => ({ getSystems: collectionMocks.getSystems }));
-vi.mock('@utils/page-loaders/page-data-loader', () => ({
-  pageDataLoader: {
-    services: (...args: unknown[]) => collectionMocks.getServices(...args),
-    domains: (...args: unknown[]) => collectionMocks.getDomains(...args),
-    systems: (...args: unknown[]) => collectionMocks.getSystems(...args),
-  },
+vi.mock('@utils/feature', () => ({ isSSR: mocks.isSSR }));
+vi.mock('@utils/url-builder', () => ({ buildUrl: (path: string) => path }));
+vi.mock('@utils/collections/resource-owners', () => ({
+  createResourcesCatalog: () => ({}),
+  loadResourceOwners: (type: string) => loaders[type](),
+  getOwnersWithResources: mocks.getOwnersWithResources,
 }));
 
-const domain = {
-  collection: 'domains',
-  data: { id: 'ordering', name: 'Ordering', version: '1.0.0' },
-};
-
-const service = {
-  collection: 'services',
-  data: { id: 'order-service', name: 'Order Service', version: '1.0.0' },
-};
+const entry = (collection: string, id: string, version = '1.0.0') => ({ collection, data: { id, name: id, version } });
 
-const system = {
-  collection: 'systems',
-  data: { id: 'order-management-system', name: 'Order Management', version: '1.0.0' },
-};
+const ordering = entry('domains', 'ordering');
+const orderService = entry('services', 'order-service');
+const orderServiceV0 = entry('services', 'order-service', '0.1.0');
+const cartSystem = entry('systems', 'cart-system');
 
-describe('architecture page data', () => {
+describe('architecture page redirects', () => {
   beforeEach(() => {
-    collectionMocks.getDomains.mockReset().mockResolvedValue([domain]);
-    collectionMocks.getServices.mockReset().mockResolvedValue([service]);
-    collectionMocks.getSystems.mockReset().mockResolvedValue([system]);
+    mocks.isSSR.mockReturnValue(false);
+    mocks.getDomains.mockReset().mockResolvedValue([ordering]);
+    mocks.getServices.mockReset().mockResolvedValue([orderService, orderServiceV0]);
+    mocks.getSystems.mockReset().mockResolvedValue([cartSystem]);
+    // Only the latest order service and the cart system have a Resources page.
+    mocks.getOwnersWithResources.mockReset().mockImplementation(async (type: string) => {
+      if (type === 'services') return [orderService];
+      if (type === 'systems') return [cartSystem];
+      return [];
+    });
   });
 
-  it('hydrates domain and system services for static architecture paths', async () => {
+  it('redirects every architecture page to its Resources page, or the docs page when it has no Resources page', async () => {
     const paths = await Page.getStaticPaths();
 
-    expect(collectionMocks.getDomains).toHaveBeenCalledWith({ enrichServices: true });
-    expect(collectionMocks.getSystems).toHaveBeenCalledWith({ enrichServices: true });
-    expect(paths).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          params: { type: 'domains', id: 'ordering', version: '1.0.0' },
-        }),
-        expect.objectContaining({
-          params: { type: 'systems', id: 'order-management-system', version: '1.0.0' },
-        }),
-        expect.objectContaining({
-          params: { type: 'services', id: 'order-service', version: '1.0.0' },
-        }),
-      ])
-    );
+    expect(
+      paths.map(({ params, props }) => [`/architecture/${params.type}/${params.id}/${params.version}`, props.redirectPath])
+    ).toEqual([
+      ['/architecture/services/order-service/1.0.0', '/docs/services/order-service/1.0.0/resources'],
+      ['/architecture/services/order-service/0.1.0', '/docs/services/order-service/0.1.0'],
+      ['/architecture/domains/ordering/1.0.0', '/docs/domains/ordering/1.0.0'],
+      ['/architecture/systems/cart-system/1.0.0', '/docs/systems/cart-system/1.0.0/resources'],
+    ]);
   });
 
-  it('hydrates domain services when architecture pages are fetched in SSR', async () => {
-    await Page.getData({
-      props: {},
-      params: { type: 'domains', id: 'ordering', version: '1.0.0' },
-    } as any);
+  it('works out the redirect when the page is requested on a server', async () => {
+    mocks.isSSR.mockReturnValue(true);
 
-    expect(collectionMocks.getDomains).toHaveBeenCalledWith({ enrichServices: true });
+    await expect(
+      Page.getData({ params: { type: 'systems', id: 'cart-system', version: '1.0.0' }, props: {} } as any)
+    ).resolves.toMatchObject({ redirectPath: '/docs/systems/cart-system/1.0.0/resources' });
   });
 
-  it('hydrates system services when architecture pages are fetched in SSR', async () => {
-    await Page.getData({
-      props: {},
-      params: { type: 'systems', id: 'order-management-system', version: '1.0.0' },
-    } as any);
-
-    expect(collectionMocks.getSystems).toHaveBeenCalledWith({ enrichServices: true });
-  });
+  it('returns not found for resources without an architecture page', async () => {
+    mocks.isSSR.mockReturnValue(true);
 
-  it('loads domains with enrichServices so DomainGrid command links keep their collection', async () => {
-    await loadArchitectureItems('domains');
-    expect(collectionMocks.getDomains).toHaveBeenCalledWith({ enrichServices: true });
+    await expect(
+      Page.getData({ params: { type: 'events', id: 'order-created', version: '1.0.0' }, props: {} } as any)
+    ).rejects.toMatchObject({
+      status: 404,
+    });
   });
 });

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

@@ -1,53 +1,48 @@
 import { isSSR } from '@utils/feature';
 import { HybridPage } from '@utils/page-loaders/hybrid-page';
-import type { PageTypes } from '@types';
-import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
-import { getDomains } from '@utils/collections/domains';
-import { getSystems } from '@utils/collections/systems';
+import {
+  createResourcesCatalog,
+  getOwnersWithResources,
+  loadResourceOwners,
+  type ResourcesCatalog,
+} from '@utils/collections/resource-owners';
+import type { ResourceOwner } from '@utils/collections/resources';
 
-const architecturePageTypes: PageTypes[] = ['services', 'domains', 'systems'];
+// The architecture overview pages were replaced by the Resources pages. These routes stay so
+// old links keep working: each one redirects to the resource's Resources page, or to its docs
+// page when it has nothing to list.
+const architecturePageTypes = ['services', 'domains', 'systems'] as const;
+type ArchitecturePageType = (typeof architecturePageTypes)[number];
 
-/**
- * Architecture grids render service sends/receives as docs links, so domains and
- * systems must hydrate those messages (collection + name). `pageDataLoader`
- * uses the cheaper unenriched path used by docs/sidebar.
- */
-export const loadArchitectureItems = (type: PageTypes) => {
-  if (type === 'domains') {
-    return getDomains({ enrichServices: true });
-  }
+const isArchitecturePageType = (type: string): type is ArchitecturePageType =>
+  architecturePageTypes.includes(type as ArchitecturePageType);
 
-  if (type === 'systems') {
-    return getSystems({ enrichServices: true });
-  }
+const key = (item: ResourceOwner) => `${item.data.id}:${item.data.version}`;
+
+const getRedirectPaths = async (type: ArchitecturePageType, catalog: ResourcesCatalog = createResourcesCatalog()) => {
+  const [items, ownersWithResources] = await Promise.all([loadResourceOwners(type), getOwnersWithResources(type, catalog)]);
+  const hasResourcesPage = new Set(ownersWithResources.map(key));
 
-  return pageDataLoader[type as PageTypes]();
+  return items.map((item) => {
+    const docsPath = `/docs/${type}/${item.data.id}/${item.data.version}`;
+    return { item, redirectPath: hasResourcesPage.has(key(item)) ? `${docsPath}/resources` : docsPath };
+  });
 };
 
-/**
- * Documentation page class for all collection types with versioning
- */
 export class Page extends HybridPage {
   static async getStaticPaths() {
     if (isSSR()) {
       return [];
     }
 
-    const pageData = await Promise.all(architecturePageTypes.map((type) => loadArchitectureItems(type)));
+    const catalog = createResourcesCatalog();
+    const redirects: Awaited<ReturnType<typeof getRedirectPaths>>[] = [];
+    for (const type of architecturePageTypes) redirects.push(await getRedirectPaths(type, catalog));
 
-    return pageData.flatMap((items, index) =>
-      items.map((item) => ({
-        params: {
-          type: architecturePageTypes[index],
-          id: item.data.id,
-          version: item.data.version,
-        },
-        props: {
-          type: architecturePageTypes[index],
-          ...item,
-          // Not everything needs the body of the page itself.
-          body: undefined,
-        },
+    return architecturePageTypes.flatMap((type, index) =>
+      redirects[index].map(({ item, redirectPath }) => ({
+        params: { type, id: item.data.id, version: item.data.version },
+        props: { type, data: { id: item.data.id, name: item.data.name, version: item.data.version }, redirectPath },
       }))
     );
   }
@@ -55,23 +50,16 @@ export class Page extends HybridPage {
   protected static async fetchData(params: any) {
     const { type, id, version } = params;
 
-    if (!type || !id || !version || !architecturePageTypes.includes(type)) {
+    if (!type || !id || !version || !isArchitecturePageType(type)) {
       return null;
     }
 
-    const items = await loadArchitectureItems(type as PageTypes);
-
-    // Find the specific item by id and version
-    const item = items.find((i) => i.data.id === id && i.data.version === version);
-
-    if (!item) {
+    const match = (await getRedirectPaths(type)).find(({ item }) => item.data.id === id && item.data.version === version);
+    if (!match) {
       return null;
     }
 
-    return {
-      type,
-      ...item,
-    };
+    return { type, data: { id, name: match.item.data.name, version }, redirectPath: match.redirectPath };
   }
 
   protected static createNotFoundResponse(): Response {