@eventcatalog/core 2.26.1 → 2.28.0

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

@@ -0,0 +1,14 @@
+---
+import Architecture from '../architecture.astro';
+
+export async function getStaticPaths() {
+  const VALID_TYPES = ['domains', 'services', 'messages'] as const;
+  return VALID_TYPES.map((type) => ({
+    params: { type },
+  }));
+}
+
+const { type } = Astro.params;
+---
+
+<Architecture type={type} />

package/eventcatalog/src/pages/architecture/architecture.astro

@@ -0,0 +1,81 @@
+---
+import { getDomains, getMessagesForDomain } from '@utils/collections/domains';
+import { getServices } from '@utils/collections/services';
+import { getMessages } from '@utils/messages';
+import type { ExtendedDomain } from '@components/Grids/DomainGrid';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import DomainGrid from '@components/Grids/DomainGrid';
+import ServiceGrid from '@components/Grids/ServiceGrid';
+import MessageGrid from '@components/Grids/MessageGrid';
+
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionMessageTypes } from '@types';
+
+import { ClientRouter, fade } from 'astro:transitions';
+// Define valid types and their corresponding data fetchers
+const VALID_TYPES = ['domains', 'services', 'messages'] as const;
+type ValidType = (typeof VALID_TYPES)[number];
+
+interface Service extends CollectionEntry<'services'> {
+  sends: CollectionEntry<'events' | 'commands' | 'queries'>[];
+  receives: CollectionEntry<'events' | 'commands' | 'queries'>[];
+}
+
+const { type } = Astro.props as { type: ValidType };
+
+// Get data based on type
+let items: ExtendedDomain[] | Service[] | CollectionEntry<'commands'>[] | CollectionEntry<CollectionMessageTypes>[] = [];
+
+if (type === 'domains') {
+  const domains = await getDomains({ getAllVersions: false });
+
+  // Get messages for each domain
+  items = await Promise.all(
+    domains.map(async (domain) => {
+      const messages = await getMessagesForDomain(domain);
+      // @ts-ignore we have to remove markdown information, as it's all send to the astro components. This reduced the page size.
+      return {
+        ...domain,
+        sends: messages.sends.map((s) => ({ ...s, body: undefined, catalog: undefined })),
+        receives: messages.receives.map((r) => ({ ...r, body: undefined, catalog: undefined })),
+        catalog: undefined,
+        body: undefined,
+      } as ExtendedDomain;
+    })
+  );
+} else if (type === 'services') {
+  const services = await getServices({ getAllVersions: false });
+  let filteredServices = services.map((s) => {
+    // @ts-ignore we have to remove markdown information, as it's all send to the astro components. This reduced the page size.
+    return {
+      ...s,
+      sends: (s.data.sends || []).map((s) => ({ ...s, body: undefined, catalog: undefined })),
+      receives: (s.data.receives || []).map((r) => ({ ...r, body: undefined, catalog: undefined })),
+      catalog: undefined,
+      body: undefined,
+    } as Service;
+  }) as unknown as Service[];
+  items = filteredServices;
+} else if (type === 'messages') {
+  const { events, commands, queries } = await getMessages({ getAllVersions: false });
+  const messages = [...events, ...commands, ...queries];
+  items = messages.map((m) => ({
+    ...m,
+    body: undefined,
+    catalog: undefined,
+  })) as unknown as CollectionEntry<CollectionMessageTypes>[];
+}
+---
+
+<VerticalSideBarLayout title={'EventCatalog'}>
+  <div class="bg-white min-h-screen">
+    <div class="max-w-[90em] mx-auto">
+      <div class="px-6 py-6" transition:animate={fade({ duration: '0.4s' })}>
+        {type === 'domains' && <DomainGrid domains={items as ExtendedDomain[]} client:load />}
+        {type === 'services' && <ServiceGrid services={items as unknown as Service[]} client:load />}
+        {type === 'messages' && <MessageGrid messages={items as CollectionEntry<CollectionMessageTypes>[]} client:load />}
+      </div>
+    </div>
+    <ClientRouter />
+  </div>
+</VerticalSideBarLayout>

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

@@ -0,0 +1,14 @@
+---
+import Architecture from '../../architecture.astro';
+
+export async function getStaticPaths() {
+  const VALID_TYPES = ['domains', 'services', 'messages'] as const;
+  return VALID_TYPES.map((type) => ({
+    params: { type },
+  }));
+}
+
+const { type } = Astro.params;
+---
+
+<Architecture type={type} />

package/eventcatalog/src/pages/index.astro

@@ -8,6 +8,7 @@ import {
   ServerIcon,
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline';
+import config from '@config';
 
 import { getMessages } from '@utils/messages';
 import { getDomains } from '@utils/collections/domains';
@@ -15,107 +16,271 @@ import { getServices } from '@utils/collections/services';
 import { getFlows } from '@utils/collections/flows';
 import DiscoverInsight from '@components/DiscoverInsight.astro';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { BookOpen, BookOpenText, TableProperties, Workflow } from 'lucide-react';
+import { BookOpenText, Workflow, TableProperties, House, BookUser, MessageSquare, BotMessageSquare, Users } from 'lucide-react';
 
 const { commands = [], events = [], queries = [] } = await getMessages({ getAllVersions: false });
+const messages = [...events, ...queries, ...commands];
 const domains = await getDomains({ getAllVersions: false });
 const services = await getServices({ getAllVersions: false });
 const flows = await getFlows({ getAllVersions: false });
 
+const gettingStartedItems = [
+  {
+    title: 'Add a New Message',
+    icon: ChatBubbleLeftIcon,
+    iconBg: 'blue',
+    description: 'Document a new message in your system with schemas, examples, and relationships.',
+    links: [
+      {
+        text: 'How to add a message',
+        href: 'https://www.eventcatalog.dev/docs/messages',
+      },
+      {
+        text: 'Versioning guide',
+        href: 'https://www.eventcatalog.dev/docs/development/guides/messages/events/versioning',
+      },
+      {
+        text: 'Adding schemas',
+        href: 'https://www.eventcatalog.dev/docs/development/guides/messages/events/adding-schemas',
+      },
+    ],
+  },
+  {
+    title: 'Document a Service',
+    icon: ServerIcon,
+    iconBg: 'green',
+    description: 'Add details about a service, including its events, APIs, and dependencies.',
+    links: [
+      {
+        text: 'How to add a service',
+        href: 'https://www.eventcatalog.dev/docs/services',
+      },
+      {
+        text: 'Service ownership',
+        href: 'https://www.eventcatalog.dev/docs/development/guides/services/owners',
+      },
+      {
+        text: 'Assign specifications to services',
+        href: 'https://www.eventcatalog.dev/docs/development/guides/services/adding-spec-files-to-services',
+      },
+    ],
+  },
+  {
+    title: 'Create a Domain',
+    icon: RectangleGroupIcon,
+    iconBg: 'purple',
+    description: 'Organize your services and events into logical business domains.',
+    links: [
+      {
+        text: 'How to add a domain',
+        href: 'https://www.eventcatalog.dev/docs/domains',
+      },
+      {
+        text: 'Adding services to domains',
+        href: 'https://www.eventcatalog.dev/docs/development/guides/domains/adding-services-to-domains',
+      },
+      {
+        text: 'Creating a ubiquitous language',
+        href: 'https://www.eventcatalog.dev/docs/development/guides/domains/adding-ubiquitous-language',
+      },
+    ],
+  },
+];
+
 const getDefaultUrl = (route: string, defaultValue: string) => {
   if (domains.length > 0) return buildUrl(`/${route}/domains/${domains[0].data.id}/${domains[0].data.latestVersion}`);
   if (services.length > 0) return buildUrl(`/${route}/services/${services[0].data.id}/${services[0].data.latestVersion}`);
   if (flows.length > 0) return buildUrl(`/${route}/flows/${flows[0].data.id}/${flows[0].data.latestVersion}`);
   return buildUrl(defaultValue);
 };
+
+const topTiles = [
+  {
+    title: 'Domains',
+    count: domains.length,
+    description: 'Business domains defined',
+    href: buildUrl('/architecture/domains'),
+    icon: RectangleGroupIcon,
+    bgColor: 'bg-yellow-100',
+    textColor: 'text-yellow-600',
+    arrowColor: 'text-yellow-600',
+  },
+  {
+    title: 'Services',
+    count: services.length,
+    description: 'Services documented in the catalog',
+    href: buildUrl('/architecture/services'),
+    icon: ServerIcon,
+    bgColor: 'bg-pink-100',
+    textColor: 'text-pink-600',
+    arrowColor: 'text-pink-600',
+  },
+  {
+    title: 'Messages',
+    count: messages.length,
+    description: 'Messages documented in the catalog',
+    href: buildUrl('/architecture/messages'),
+    icon: ChatBubbleLeftIcon,
+    bgColor: 'bg-blue-100',
+    textColor: 'text-blue-600',
+    arrowColor: 'text-blue-600',
+  },
+];
 ---
 
 <VerticalSideBarLayout title="EventCatalog">
-  <body class="min-h-screen">
-    <main class="">
-      <div class="container mx-auto px-6 py-20 max-w-[90em]">
-        <section class="text-center mb-8">
-          <h1 class="text-5xl font-bold mb-6 text-gray-800">Welcome to <span class="text-primary">EventCatalog</span></h1>
-          <p class="text-xl mb-8 text-gray-700 max-w-2xl mx-auto font-light">
-            Discover and document your event-driven architecture effortlessly. EventCatalog centralizes your events, services, and
-            schemas in one place.
-          </p>
-        </section>
-
-        <div class="hidden md:block">
-          <!-- <h2 class="text-center text-xl ">Architecture insights</h2> -->
-          <section class="mb-16 bg-white rounded-xl shadow-lg p-6">
-            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-              <DiscoverInsight color="text-yellow-600" dataTarget={domains.length} icon={RectangleGroupIcon} label="domains" />
-
-              <DiscoverInsight color="text-pink-500" dataTarget={services.length} icon={ServerIcon} label="services" />
-
-              <DiscoverInsight color="text-blue-500" dataTarget={commands.length} icon={ChatBubbleLeftIcon} label="commands" />
+  <body class="min-h-screen bg-gray-50 font-inter">
+    <main class="container px-8 lg:px-8 mx-auto py-8 max-w-[80em]">
+      <div class="mb-12">
+        <h1 class="text-4xl font-semibold mb-4 text-gray-900 font-inter">
+          {config?.organizationName || 'EventCatalog'}
+        </h1>
+        <p class="text-base mb-0 text-gray-600 max-w-3xl">
+          {config.tagline || 'Comprehensive event-driven architecture documentation covering events, services, domains.'}
+        </p>
+      </div>
 
-              <DiscoverInsight color="text-green-500" dataTarget={queries.length} icon={MagnifyingGlassIcon} label="queries" />
+      <h2 class="text-2xl font-semibold mb-8 text-gray-900">Architecture overview</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
+        {
+          topTiles.map((tile) => (
+            <a
+              href={tile.href}
+              class="bg-white p-5 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200"
+            >
+              <div class="flex items-center justify-between mb-2">
+                <div class="flex items-center gap-3">
+                  <div class={`p-1.5 ${tile.bgColor} rounded-lg`}>
+                    <tile.icon className={`w-4 h-4 ${tile.textColor}`} />
+                  </div>
+                  <h3 class="text-lg font-semibold text-gray-900">
+                    {tile.count} {tile.title}
+                  </h3>
+                </div>
+                <span class={`text-sm font-medium ${tile.arrowColor}`}>View all →</span>
+              </div>
+              <p class="text-sm text-gray-600">{tile.description}</p>
+            </a>
+          ))
+        }
+      </div>
 
-              <DiscoverInsight color="text-orange-400" dataTarget={events.length} icon={BoltIcon} label="events" />
+      <div class="mb-12">
+        <h2 class="text-2xl font-semibold mb-8 text-gray-900">Explore EventCatalog</h2>
+        <div class="grid grid-cols-12 gap-4">
+          <a
+            href={getDefaultUrl('docs', 'domains')}
+            class="col-span-6 row-span-2 group bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-200 overflow-hidden"
+          >
+            <div class="h-24 bg-gradient-to-br from-blue-50 to-blue-100 border-b border-gray-200"></div>
+            <div class="p-4">
+              <div class="flex items-center gap-3 mb-3">
+                <div class="p-2 bg-blue-100 rounded-lg group-hover:scale-105 transition-transform">
+                  <BookOpenText className="w-5 h-5 text-blue-600" />
+                </div>
+                <h3 class="text-lg font-semibold text-gray-900 group-hover:text-blue-600">Documentation</h3>
+              </div>
+              <p class="text-sm text-gray-600">
+                Read documentation for {config.organizationName || 'EventCatalog'} messages, services and domains.
+              </p>
+            </div>
+          </a>
 
-              <DiscoverInsight color="text-green-800" dataTarget={flows.length} icon={QueueListIcon} label="flows" />
+          <a
+            href={getDefaultUrl('visualiser', 'domains')}
+            class="col-span-6 row-span-2 group bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-200 overflow-hidden"
+          >
+            <div class="h-24 bg-gradient-to-br from-purple-50 to-purple-100 border-b border-gray-200"></div>
+            <div class="p-4">
+              <div class="flex items-center gap-3 mb-3">
+                <div class="p-2 bg-purple-100 rounded-lg group-hover:scale-105 transition-transform">
+                  <Workflow className="w-5 h-5 text-purple-600" />
+                </div>
+                <h3 class="text-base font-semibold text-gray-900 group-hover:text-purple-600">Visualizer</h3>
+              </div>
+              <p class="text-sm text-gray-600">Explore interactive visualizations of your architecture.</p>
             </div>
-          </section>
+          </a>
 
-          <section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
-            <div
-              class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-            >
-              <div class="h-2 bg-blue-400"></div>
-              <div class="p-6">
-                <h2 class="text-2xl font-semibold mb-4 text-blue-700 flex items-center">
-                  <BookOpenText size={24} className="inline-block mr-2" />
-                  <span class="block">Documentation</span>
-                </h2>
-                <p class="text-gray-600 mb-4">
-                  Create and maintain comprehensive documentation for your events, including schemas, examples, and versioning.
-                </p>
-                <a href={getDefaultUrl('docs', '/docs')} class="text-blue-600 hover:text-blue-800 font-semibold">Explore docs →</a
-                >
+          <a
+            href={buildUrl('/discover/events')}
+            class="col-span-4 row-span-2 group bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-200 overflow-hidden"
+          >
+            <div class="h-24 bg-gradient-to-br from-teal-50 to-teal-100 border-b border-gray-200"></div>
+            <div class="p-4">
+              <div class="flex items-center gap-3 mb-3">
+                <div class="p-2 bg-teal-100 rounded-lg group-hover:scale-105 transition-transform">
+                  <TableProperties className="w-5 h-5 text-teal-600" />
+                </div>
+                <h3 class="text-base font-semibold text-gray-900 group-hover:text-teal-600">Explore</h3>
               </div>
+              <p class="text-sm text-gray-600">Navigate through your events and services</p>
             </div>
-            <div
-              class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-            >
-              <div class="h-2 bg-teal-400"></div>
-              <div class="p-6">
-                <h2 class="text-2xl font-semibold mb-4 text-teal-700 flex items-center">
-                  <Workflow size={24} className="inline-block mr-2" />
-                  <span class="block">Visualiser</span>
-                </h2>
-                <p class="text-gray-600 mb-4">
-                  Transform complex event flows into clear, interactive diagrams. Gain insights at a glance and communicate
-                  effectively across teams.
-                </p>
-                <a href={getDefaultUrl('visualiser', '/visualiser')} class="text-teal-600 hover:text-teal-800 font-semibold"
-                  >Explore visualiser →</a
-                >
+          </a>
+
+          <a
+            href={buildUrl('/chat')}
+            class="col-span-4 row-span-2 group bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-200 overflow-hidden"
+          >
+            <div class="h-24 bg-gradient-to-br from-green-50 to-green-100 border-b border-gray-200"></div>
+            <div class="p-4">
+              <div class="flex items-center gap-3 mb-3">
+                <div class="p-2 bg-green-100 rounded-lg group-hover:scale-105 transition-transform">
+                  <BotMessageSquare className="w-5 h-5 text-green-600" />
+                </div>
+                <h3 class="text-base font-semibold text-gray-900 group-hover:text-green-600">Chat</h3>
               </div>
+              <p class="text-sm text-gray-600">Ask questions about your architecture</p>
             </div>
+          </a>
 
-            <div
-              class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-            >
-              <div class="h-2 bg-red-700"></div>
-              <div class="p-6">
-                <h2 class="text-2xl font-semibold mb-4 text-red-700 flex items-center">
-                  <TableProperties size={24} className="inline-block mr-2" />
-                  <span class="block">Discover</span>
-                </h2>
-                <p class="text-gray-600 mb-4">
-                  Dive deep into your event catalog. Search, filter, and analyze your events to gain insights and improve your
-                  architecture.
-                </p>
-                <a href={buildUrl('/discover/events')} class="text-red-600 hover:text-red-800 font-semibold">Start exploring →</a>
+          <a
+            href={buildUrl('/directory/users')}
+            class="col-span-4 row-span-2 group bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-200 overflow-hidden"
+          >
+            <div class="h-24 bg-gradient-to-br from-orange-50 to-orange-100 border-b border-gray-200"></div>
+            <div class="p-4">
+              <div class="flex items-center gap-3 mb-3">
+                <div class="p-2 bg-orange-100 rounded-lg group-hover:scale-105 transition-transform">
+                  <BookUser className="w-5 h-5 text-orange-600" />
+                </div>
+                <h3 class="text-base font-semibold text-gray-900 group-hover:text-orange-600">Users & Teams</h3>
               </div>
+              <p class="text-sm text-gray-600">Discover service and message ownership</p>
             </div>
-          </section>
+          </a>
         </div>
-        <!-- <Footer className="px-10" /> -->
       </div>
+
+      <section class="mb-12">
+        <h2 class="text-2xl font-semibold mb-8 text-gray-900">Getting Started</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {
+            gettingStartedItems.map((item) => (
+              <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+                <div class="flex items-center gap-3 mb-4">
+                  <div class={`p-2 bg-${item.iconBg}-100 rounded-lg`}>
+                    <item.icon className={`w-6 h-6 text-${item.iconBg}-600`} />
+                  </div>
+                  <h3 class="text-lg font-semibold text-gray-900">{item.title}</h3>
+                </div>
+                <p class="text-gray-600 text-sm mb-4">{item.description}</p>
+                <div class="space-y-2">
+                  {item.links.map((link) => (
+                    <a
+                      href={link.href}
+                      target="_blank"
+                      class={`block text-sm text-${item.iconBg}-600 hover:text-${item.iconBg}-700`}
+                    >
+                      → {link.text}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </section>
     </main>
   </body>
 </VerticalSideBarLayout>

package/eventcatalog/src/utils/url-builder.ts

@@ -22,3 +22,23 @@ export const buildUrl = (url: string, ignoreTrailingSlash = false) => {
 
   return cleanUrl(newUrl);
 };
+
+// Helper function to build URLs with query parameters
+export const buildUrlWithParams = (baseUrl: string, params: Record<string, string | undefined>) => {
+  // Filter out undefined values and empty strings
+  const validParams = Object.entries(params)
+    .filter(([_, value]) => value !== undefined && value !== '')
+    .reduce<Record<string, string>>((acc, [key, value]) => ({ ...acc, [key]: value as string }), {});
+
+  // If no valid params, just return the base URL
+  if (Object.keys(validParams).length === 0) {
+    return buildUrl(baseUrl);
+  }
+
+  // Build query string with encoded values
+  const queryString = Object.entries(validParams)
+    .map(([key, value]) => `${key}=${value}`)
+    .join('&');
+
+  return buildUrl(`${baseUrl}?${queryString}`);
+};

package/eventcatalog/tailwind.config.mjs

@@ -8,6 +8,9 @@ export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
       height: {
         header: HEADER_HEIGHT,
         content: `calc(100vh - ${HEADER_HEIGHT})`,
@@ -44,10 +47,18 @@ export default {
     'bg-orange-600',
     'bg-red-50',
     'bg-yellow-50',
+    'bg-pink-50',
+    'bg-green-50',
+    'bg-blue-50',
     'bg-indigo-50',
     'border-l-red-500',
     'border-l-yellow-500',
     'border-l-blue-500',
+    'bg-yellow-100',
+    'bg-pink-100',
+    'bg-green-100',
+    'bg-blue-100',
+    'bg-indigo-100',
   ],
 
   plugins: [require('@tailwindcss/typography')],

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.26.1",
+  "version": "2.28.0",
   "publishConfig": {
     "access": "public"
   },
@@ -30,6 +30,7 @@
     "@asyncapi/parser": "^3.4.0",
     "@asyncapi/react-component": "^2.4.3",
     "@eventcatalog/generator-ai": "^0.1.5",
+    "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@huggingface/transformers": "^3.3.3",

package/eventcatalog/src/components/SideNav/CatalogResourcesSideBar/getCatalogResources.ts

@@ -1,65 +0,0 @@
-import { isCollectionVisibleInCatalog } from '@eventcatalog';
-import { buildUrl } from '@utils/url-builder';
-import { getChannels } from '@utils/channels';
-import { getDomains } from '@utils/collections/domains';
-import { getFlows } from '@utils/collections/flows';
-import { getServices } from '@utils/collections/services';
-import { getCommands } from '@utils/commands';
-import { getEvents } from '@utils/events';
-import { getQueries } from '@utils/queries';
-import { getTeams } from '@utils/teams';
-import { getUsers } from '@utils/users';
-
-export async function getCatalogResources({ currentPath }: { currentPath: string }) {
-  const events = await getEvents({ getAllVersions: false });
-  const commands = await getCommands({ getAllVersions: false });
-  const queries = await getQueries({ getAllVersions: false });
-  const services = await getServices({ getAllVersions: false });
-  const domains = await getDomains({ getAllVersions: false });
-  const channels = await getChannels({ getAllVersions: false });
-  const flows = await getFlows({ getAllVersions: false });
-
-  const messages = [...events, ...commands, ...queries];
-
-  // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-  const allData = [...domains, ...services, ...messages, ...channels, ...flows];
-
-  const allDataAsSideNav = allData.reduce((acc, item) => {
-    const title = item.collection;
-    const group = acc[title] || [];
-    const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
-
-    const navigationItem = {
-      label: item.data.name,
-      version: item.data.version,
-      // items: item.collection === 'users' ? [] : item.headings,
-      visible: isCollectionVisibleInCatalog(item.collection),
-      // @ts-ignore
-      href: item.data.version
-        ? // @ts-ignore
-          buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`)
-        : buildUrl(`/${route}/${item.collection}/${item.data.id}`),
-      collection: item.collection,
-    };
-
-    group.push(navigationItem);
-
-    return {
-      ...acc,
-      [title]: group,
-    };
-  }, {} as any);
-
-  const sideNav = {
-    ...(currentPath.includes('visualiser')
-      ? {
-          'bounded context map': [
-            { label: 'Domain map', href: buildUrl('/visualiser/context-map'), collection: 'bounded-context-map' },
-          ],
-        }
-      : {}),
-    ...allDataAsSideNav,
-  };
-
-  return sideNav;
-}