@eventcatalog/core 2.18.7 → 2.19.1

package/eventcatalog/package.json

@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "@astrojs/markdown-remark": "^6.0.1",
-    "@astrojs/mdx": "^4.0.2",
-    "@astrojs/react": "^4.1.0",
-    "@astrojs/tailwind": "^5.1.3",
+    "@astrojs/mdx": "^4.0.5",
+    "@astrojs/react": "^4.1.3",
+    "@astrojs/tailwind": "^5.1.4",
     "@asyncapi/avro-schema-parser": "^3.0.24",
     "@asyncapi/parser": "^3.4.0",
     "@asyncapi/react-component": "^2.4.3",
@@ -32,7 +32,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
-    "astro": "^5.0.5",
+    "astro": "^5.1.5",
     "astro-expressive-code": "^0.38.3",
     "astro-pagefind": "^1.7.0",
     "astro-seo": "^0.8.4",
@@ -44,6 +44,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "4.6.2",
     "lucide-react": "^0.453.0",
+    "marked": "^15.0.6",
     "mermaid": "^11.4.1",
     "prismjs": "^1.29.0",
     "rapidoc": "^9.3.4",

package/eventcatalog/src/components/MDX/Tabs/Tabs.astro

@@ -93,8 +93,12 @@ const tabsId = Math.random().toString(36).substring(2, 9);
     });
   }
 
-  // Initialize all tab containers
-  document.querySelectorAll('[data-tabs-container]').forEach((container: Element) => {
-    initTabs(container as HTMLElement);
+  // We use `ViewTransitions`
+  // Whenever happens a navigation, from view transitions or native to the browser, init the tabs.
+  document.addEventListener('astro:page-load', () => {
+    // Initialize all tab containers
+    document.querySelectorAll('[data-tabs-container]').forEach((container: Element) => {
+      initTabs(container as HTMLElement);
+    });
   });
 </script>

package/eventcatalog/src/components/SideBars/ChannelSideBar.astro

@@ -1,5 +1,5 @@
 ---
-import { getEntry, type CollectionEntry } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
 import PillListFlat from '@components/Lists/PillListFlat';
 import ProtocolList from '@components/Lists/ProtocolList';
 import OwnersList from '@components/Lists/OwnersList';
@@ -7,6 +7,7 @@ import VersionList from '@components/Lists/VersionList.astro';
 import { buildUrl } from '@utils/url-builder';
 import { ScrollText } from 'lucide-react';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
+import { getOwner } from '@utils/collections/owners';
 
 interface Props {
   channel: CollectionEntry<'channels'>;
@@ -15,7 +16,7 @@ interface Props {
 const { channel } = Astro.props;
 
 const ownersRaw = channel.data?.owners || [];
-const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
+const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
 const channelParameters: Record<string, { enum?: string[]; description?: string }> = channel.data.parameters || {};

package/eventcatalog/src/components/SideBars/DomainSideBar.astro

@@ -4,9 +4,11 @@ import PillListFlat from '@components/Lists/PillListFlat';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
 import { getUbiquitousLanguage } from '@utils/collections/domains';
+import { getOwner } from '@utils/collections/owners';
 import { buildUrl } from '@utils/url-builder';
-import { getEntry, type CollectionEntry } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
 import { ScrollText, Workflow } from 'lucide-react';
+
 interface Props {
   domain: CollectionEntry<'domains'>;
 }
@@ -20,7 +22,7 @@ const hasUbiquitousLanguage = ubiquitousLanguage.length > 0;
 const ubiquitousLanguageDictionary = hasUbiquitousLanguage ? ubiquitousLanguage[0].data.dictionary : [];
 
 const ownersRaw = domain.data?.owners || [];
-const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
+const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
 const serviceList = services.map((p) => ({

package/eventcatalog/src/components/SideBars/MessageSideBar.astro

@@ -1,5 +1,5 @@
 ---
-import { getEntry, type CollectionEntry } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
 import PillListFlat from '@components/Lists/PillListFlat';
 import OwnersList from '@components/Lists/OwnersList';
 import type { CollectionMessageTypes } from '@types';
@@ -8,6 +8,8 @@ import VersionList from '@components/Lists/VersionList.astro';
 import { buildUrl } from '@utils/url-builder';
 import { FileDownIcon, ScrollText, Workflow } from 'lucide-react';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
+import { getOwner } from '@utils/collections/owners';
+
 interface Props {
   message: CollectionEntry<CollectionMessageTypes>;
 }
@@ -19,7 +21,7 @@ const consumers = (message.data.consumers as CollectionEntry<'services'>[]) || [
 const channels = (message.data.messageChannels as CollectionEntry<'channels'>[]) || [];
 
 const ownersRaw = message.data?.owners || [];
-const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
+const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
 const producerList = producers.map((p) => ({

package/eventcatalog/src/components/SideBars/ServiceSideBar.astro

@@ -5,9 +5,11 @@ import RepositoryList from '@components/Lists/RepositoryList.astro';
 import SpecificationsList from '@components/Lists/SpecificationsList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
 import { buildUrl } from '@utils/url-builder';
-import { getEntry, type CollectionEntry } from 'astro:content';
+import { getOwner } from '@utils/collections/owners';
+import type { CollectionEntry } from 'astro:content';
 import { ScrollText, Workflow, FileDownIcon, Code, Link } from 'lucide-react';
 import { join } from 'node:path';
+
 interface Props {
   service: CollectionEntry<'services'>;
 }
@@ -20,7 +22,7 @@ const sends = (service.data.sends as CollectionEntry<'events'>[]) || [];
 const receives = (service.data.receives as CollectionEntry<'events'>[]) || [];
 
 const ownersRaw = service.data?.owners || [];
-const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
+const owners = await Promise.all<ReturnType<typeof getOwner>>(ownersRaw.map(getOwner));
 const filteredOwners = owners.filter((o) => o !== undefined);
 
 const sendsList = sends.map((p) => ({

package/eventcatalog/src/content/config.ts

@@ -47,7 +47,21 @@ const changelogs = defineCollection({
 });
 
 // Create a union type for owners
-const ownerReference = z.union([reference('users'), reference('teams')]);
+const ownerReference = z
+  .union([
+    // The ID of the user or team
+    z.string(),
+    // The full object with the ID and collection (keep compatibility with `reference`)
+    z.object({
+      id: z.string(),
+      collection: z.enum(['users', 'teams']),
+    }),
+  ])
+  .transform(
+    // This transformation is needed to keep compatibility with `reference`.
+    // The utilities `getTeams` and `getUsers` rely on this transformation.
+    (lookup) => ({ id: typeof lookup === 'string' ? lookup : lookup.id })
+  );
 
 const baseSchema = z.object({
   id: z.string(),

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

@@ -11,7 +11,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getVersions, getPreviousVersion } from '@utils/collections/util';
 import { getDiffsForCurrentAndPreviousVersion } from '@utils/collections/file-diffs';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 
 export async function getStaticPaths() {
   const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
@@ -222,5 +222,5 @@ const pages = [
     </div>
     <Footer />
   </main>
-  <ViewTransitions />
+  <ClientRouter />
 </VerticalSideBarLayout>

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

@@ -18,7 +18,7 @@ import type { PageTypes } from '@types';
 import { buildUrl } from '@utils/url-builder';
 import { getFlows } from '@utils/collections/flows';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 
 import config from '@config';
@@ -225,7 +225,7 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
         {props?.collection === 'channels' && <ChannelSideBar channel={props} />}
       </aside>
     </div>
-    <ViewTransitions />
+    <ClientRouter />
   </main>
 
   <style is:global>

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

@@ -0,0 +1,232 @@
+---
+import RectangleGroupIcon from '@heroicons/react/24/outline/RectangleGroupIcon';
+import Footer from '@layouts/Footer.astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { getDomains, getUbiquitousLanguage } from '@utils/collections/domains';
+import { buildUrl } from '@utils/url-builder';
+import { ClientRouter } from 'astro:transitions';
+import { marked } from 'marked';
+
+export async function getStaticPaths() {
+  const domains = await getDomains({ getAllVersions: false });
+
+  const pages = await domains.reduce<Promise<any[]>>(async (acc, domain) => {
+    const accumulator = await acc;
+    const ubiquitousLanguages = await getUbiquitousLanguage(domain);
+
+    if (ubiquitousLanguages.length === 0) {
+      return accumulator;
+    }
+
+    const dictionary = ubiquitousLanguages[0].data.dictionary;
+
+    if (!dictionary) {
+      return accumulator;
+    }
+
+    return [
+      ...accumulator,
+      ...dictionary.map((item) => ({
+        params: {
+          type: domain.collection,
+          id: domain.data.id,
+          dictionaryId: item.id,
+        },
+        props: {
+          type: domain.collection,
+          domainId: domain.data.id,
+          domain: domain.data,
+          ubiquitousLanguage: item,
+          ...item,
+        },
+      })),
+    ];
+  }, Promise.resolve([]));
+
+  return pages;
+}
+
+const props = Astro.props;
+const { ubiquitousLanguage } = props;
+const pageTitle = `${props.type} | ${ubiquitousLanguage.name}`.replace(/^\w/, (c) => c.toUpperCase());
+
+marked.setOptions({
+  breaks: true,
+  gfm: true,
+});
+
+const badges = [
+  {
+    backgroundColor: 'yellow',
+    textColor: 'yellow',
+    content: props.domain.name,
+    icon: RectangleGroupIcon,
+    class: 'text-yellow-400',
+    href: buildUrl(`/docs/${props.type}/${props.domainId}`),
+  },
+];
+---
+
+<VerticalSideBarLayout title={pageTitle} description={ubiquitousLanguage.summary}>
+  <main class="flex sm:px-8 docs-layout h-full max-w-7xl">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 min-h-[50em]">
+        <nav class="flex mb-4" aria-label="Breadcrumb">
+          <ol class="inline-flex items-center space-x-1 md:space-x-3">
+            <li class="inline-flex items-center">
+              <a
+                href={buildUrl(`/docs/${props.type}/${props.domainId}/language`)}
+                class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-primary"
+              >
+                <svg
+                  class="w-3 h-3 mr-2.5"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
+                </svg>
+                Back to ubiquitous language List
+              </a>
+            </li>
+          </ol>
+        </nav>
+
+        <div class="border-b border-gray-200 flex justify-between items-start md:pb-2">
+          <div>
+            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-black">
+              {ubiquitousLanguage.name}
+            </h2>
+            <p class="text-lg pt-2 text-gray-500 font-light">{ubiquitousLanguage.summary}</p>
+            <!-- Add bage -->
+            {
+              badges && (
+                <div class="flex flex-wrap py-2 pt-4">
+                  {badges.map((badge: any) => {
+                    return (
+                      <a href={badge.href || '#'} class="pb-2">
+                        <span
+                          id={badge.id || ''}
+                          class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2  bg-gradient-to-b  from-${badge.backgroundColor}-100 to-${badge.backgroundColor}-200 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
+                        >
+                          {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
+                          {badge.iconURL && <img src={badge.iconURL} class="w-5 h-5 inline-block " />}
+                          <span>{badge.content}</span>
+                        </span>
+                      </a>
+                    );
+                  })}
+                </div>
+              )
+            }
+          </div>
+        </div>
+
+        {
+          ubiquitousLanguage.description && (
+            <div class="prose prose-md py-4 max-w-none" set:html={marked.parse(ubiquitousLanguage.description)} />
+          )
+        }
+
+        {
+          !ubiquitousLanguage.description && (
+            <div class="prose prose-md py-4 max-w-none">
+              <p>No description for {ubiquitousLanguage.name} available.</p>
+            </div>
+          )
+        }
+
+        <Footer />
+      </div>
+    </div>
+    <ClientRouter />
+  </main>
+
+  <script>
+    function initializeSearch() {
+      const searchInput = document.getElementById('searchInput');
+      const termCards = document.querySelectorAll('.term-card');
+      const noSearchResults = document.getElementById('noSearchResults');
+
+      searchInput?.addEventListener('input', (e) => {
+        const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+        let visibleCount = 0;
+
+        termCards.forEach((card) => {
+          const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
+          const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
+          const matches = title.includes(searchTerm) || description.includes(searchTerm);
+
+          card.classList.toggle('hidden', !matches);
+          if (matches) visibleCount++;
+        });
+
+        // Show/hide no results message
+        if (noSearchResults) {
+          noSearchResults.classList.toggle('hidden', visibleCount > 0);
+        }
+      });
+    }
+
+    function initializeShowMore() {
+      const cards = document.querySelectorAll('.term-card');
+
+      cards.forEach((card) => {
+        const newCard = card.cloneNode(true);
+        if (card.parentNode) {
+          card.parentNode.replaceChild(newCard, card);
+          // Initially show summary
+          const summary = (newCard as Element).querySelector('.summary-text');
+          summary?.classList.add('visible');
+        }
+        newCard.addEventListener('click', () => {
+          const description = (newCard as Element).querySelector('.description-text');
+          const summary = (newCard as Element).querySelector('.summary-text');
+          const showMoreText = (newCard as Element).querySelector('.show-more-text');
+
+          if (description && summary && showMoreText) {
+            (newCard as Element).classList.toggle('expanded');
+            description.classList.toggle('visible');
+            summary.classList.toggle('visible');
+            showMoreText.textContent = description.classList.contains('visible') ? 'Show less' : 'Show more';
+          }
+        });
+      });
+    }
+
+    function highlightMatchingTerm() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const termId = urlParams.get('id');
+
+      if (termId) {
+        const cards = document.querySelectorAll('.term-card');
+        cards.forEach((card) => {
+          const termName = card.querySelector('h3')?.textContent?.trim();
+          if (termName?.toLowerCase() === termId.toLowerCase()) {
+            // Add highlight class
+            card.classList.add('highlighted');
+            (card as HTMLElement).click();
+
+            setTimeout(() => {
+              // Scroll into view
+              card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }, 300);
+          }
+        });
+      }
+    }
+
+    document.addEventListener('astro:page-load', () => {
+      initializeShowMore();
+      initializeSearch();
+      highlightMatchingTerm();
+    });
+
+    initializeShowMore();
+    initializeSearch();
+    highlightMatchingTerm();
+  </script>
+</VerticalSideBarLayout>

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

@@ -2,8 +2,9 @@
 import Footer from '@layouts/Footer.astro';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { getDomains, type Domain, getUbiquitousLanguage } from '@utils/collections/domains';
+import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import * as LucideIcons from 'lucide-react';
 
 export async function getStaticPaths() {
@@ -40,7 +41,7 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
           <ol class="inline-flex items-center space-x-1 md:space-x-3">
             <li class="inline-flex items-center">
               <a
-                href={`/docs/${props.type}/${props.data.id}/${props.data.latestVersion}`}
+                href={buildUrl(`/docs/${props.type}/${props.data.id}/${props.data.latestVersion}`)}
                 class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-primary"
               >
                 <svg
@@ -99,7 +100,7 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
                 ) : (
                   <div id="termsGrid" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                     {ubiquitousLanguage?.data?.dictionary?.map((term) => (
-                      <div class="term-card block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white min-h-[12em] cursor-pointer">
+                      <div class="term-card block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white min-h-[12em]">
                         <div class="flex flex-col h-full space-y-8">
                           {term.icon && (
                             <div>
@@ -119,11 +120,13 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
                                 {term.summary}
                               </p>
                               {term.description && (
-                                <div>
-                                  <p class="description-text hidden text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm whitespace-pre-line">
-                                    {term.description}
-                                  </p>
-                                  <span class="show-more-text text-sm text-primary font-medium">Show more</span>
+                                <div class="prose prose-sm prose-p:my-3">
+                                  <a
+                                    href={buildUrl(`/docs/${props.type}/${props.data.id}/language/${term.id}`)}
+                                    class="show-more-text text-sm text-primary font-medium hover:underline"
+                                  >
+                                    Read more
+                                  </a>
                                 </div>
                               )}
                             </div>
@@ -146,7 +149,7 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
         <Footer />
       </div>
     </div>
-    <ViewTransitions />
+    <ClientRouter />
   </main>
 
   <script>
@@ -177,27 +180,11 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
 
     function initializeShowMore() {
       const cards = document.querySelectorAll('.term-card');
-
       cards.forEach((card) => {
-        const newCard = card.cloneNode(true);
-        if (card.parentNode) {
-          card.parentNode.replaceChild(newCard, card);
-          // Initially show summary
-          const summary = (newCard as Element).querySelector('.summary-text');
-          summary?.classList.add('visible');
+        const summary = card.querySelector('.summary-text');
+        if (summary) {
+          summary.classList.add('visible');
         }
-        newCard.addEventListener('click', () => {
-          const description = (newCard as Element).querySelector('.description-text');
-          const summary = (newCard as Element).querySelector('.summary-text');
-          const showMoreText = (newCard as Element).querySelector('.show-more-text');
-
-          if (description && summary && showMoreText) {
-            (newCard as Element).classList.toggle('expanded');
-            description.classList.toggle('visible');
-            summary.classList.toggle('visible');
-            showMoreText.textContent = description.classList.contains('visible') ? 'Show less' : 'Show more';
-          }
-        });
       });
     }
 
@@ -240,42 +227,14 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
       min-height: 12em;
     }
 
-    .term-card.expanded {
-      min-height: 24em;
-      background-color: rgb(249 250 251);
-      z-index: 10;
-      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-    }
-
-    .summary-text,
-    .description-text {
-      transition:
-        opacity 0.3s ease-in-out,
-        max-height 0.3s ease-in-out;
-      opacity: 0;
-      max-height: 0;
-      overflow: hidden;
-      display: none;
-    }
-
-    .summary-text.visible,
-    .description-text.visible {
+    .summary-text {
       opacity: 1;
-      max-height: 500px;
-      margin-bottom: 1rem;
-      display: block;
-    }
-
-    .description-text {
-      white-space: pre-line;
-      line-height: 1.5;
-    }
-
-    .show-more-text {
+      max-height: unset;
       display: block;
-      margin-top: 0.5rem;
     }
 
+    .description-text,
+    .term-card.expanded,
     .term-card.expanded .show-more-text {
       display: none;
     }

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

@@ -6,7 +6,7 @@ import { getFlows } from '@utils/collections/flows';
 import { buildUrl } from '@utils/url-builder';
 
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 type PageTypesWithFlows = PageTypes | 'flows';
 
 export async function getStaticPaths() {
@@ -58,7 +58,7 @@ const {
       }}
     />
   </div>
-  <ViewTransitions />
+  <ClientRouter />
 </VisualiserLayout>
 
 <script define:vars={{ id }}>

package/eventcatalog/src/pages/visualiser/context-map/index.astro

@@ -1,6 +1,6 @@
 ---
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
-import { ViewTransitions } from 'astro:transitions';
+import { ClientRouter } from 'astro:transitions';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 ---
 
@@ -26,5 +26,5 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
       }}
     />
   </div>
-  <ViewTransitions />
+  <ClientRouter />
 </VerticalSideBarLayout>

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

@@ -8,7 +8,7 @@ export const getChangeLogs = async (item: CollectionEntry<CollectionTypes>): Pro
 
   // Get all logs for collection type and filter by given collection
   const logs = await getCollection('changelogs', (log) => {
-    return log.id.includes(`${collection}/`) && log.id.includes(slug);
+    return log.id.includes(`${collection}/`) && log.slug.includes(slug);
   });
 
   const hydratedLogs = logs.map((log) => {

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

@@ -0,0 +1,43 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+
+const getOwners = (function () {
+  type Owners = CollectionEntry<'users' | 'teams'>;
+  let cachedOwners: Map<string, Owners> | null = null;
+  let initializingPromise: Promise<Map<string, Owners>> | null = null;
+
+  /**
+   * Initializes and caches the owners by fetching from the 'users' and 'teams' collections.
+   */
+  async function init() {
+    const ownersMap = new Map<string, CollectionEntry<'users' | 'teams'>>();
+
+    const owners = await Promise.all([
+      getCollection('users', (entry) => entry.data.hidden !== true),
+      getCollection('teams', (entry) => entry.data.hidden !== true),
+    ]);
+
+    for (const owner of owners.flat()) {
+      ownersMap.set(owner.data.id, owner);
+    }
+
+    cachedOwners = ownersMap;
+    initializingPromise = null;
+
+    return cachedOwners;
+  }
+
+  return () =>
+    cachedOwners || // Return cached owners if already initialized
+    initializingPromise || // Return the promise if initialization is in progress
+    (initializingPromise = init()); // Initialize if neither cache nor promise exists
+})();
+
+export async function getOwner(lookup: { id: string }): Promise<CollectionEntry<'users' | 'teams'> | undefined> {
+  const lookupId = typeof lookup === 'string' ? lookup : lookup.id;
+
+  const owner = (await getOwners()).get(lookupId);
+
+  if (!owner) console.warn(`Entry ${lookupId} not found in "teams"/"users" collections.`);
+
+  return owner;
+}