@eventcatalog/core 2.10.0 → 2.11.0

package/src/components/Search.astro

@@ -20,9 +20,9 @@ import PageFindSearch from 'astro-pagefind/components/Search';
   </div>
 </div>
 
-<div id="search-dialog" class="hidden relative z-50" role="dialog" aria-modal="true">
+<div id="search-dialog" class="hidden relative z-[100]" role="dialog" aria-modal="true">
   <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity search-background backdrop-blur-sm bg-black/10"></div>
-  <div id="search-background" class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
+  <div id="search-background" class="fixed inset-0 z-40 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
     <div
       id="command-pal"
       class="mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"
@@ -49,6 +49,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
   const dummyInput = document.getElementById('search-dummy-input');
   const dialog = document.getElementById('search-dialog');
   const header = document.getElementById('eventcatalog-header');
+  const verticalNav = document.getElementById('eventcatalog-vertical-nav');
 
   // Listen for the short cut keys
   window.addEventListener('keydown', (event) => {
@@ -75,6 +76,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
         input && input.focus();
       }, 10);
       if (header) header.classList.remove('backdrop-blur-sm');
+      if (verticalNav) verticalNav.style.zIndex = '-100';
       // @ts-ignore
       dialog.style.display = 'block';
     });
@@ -85,6 +87,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
     // @ts-ignore
     if (e.target.id === 'search-background') {
       if (header) header.classList.add('backdrop-blur-sm');
+      if (verticalNav) verticalNav.style.zIndex = '10';
       dialog.style.display = 'none';
     }
   });

package/src/components/SideBars/CatalogResourcesSideBar/index.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import debounce from 'lodash.debounce';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ServerIcon,
+  RectangleGroupIcon,
+  BoltIcon,
+  ChatBubbleLeftIcon,
+  MagnifyingGlassIcon,
+  QueueListIcon,
+  UserGroupIcon,
+  UserIcon,
+} from '@heroicons/react/24/outline';
+import './styles.css';
+import { getIconForCollection as getIconForCollectionOriginal } from '@utils/collections/icons';
+
+const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
+  const [data, setData] = useState(resources);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>({});
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  const debouncedHandleSearch = useMemo(() => debounce(handleSearch, 300), []);
+
+  useEffect(() => {
+    return () => {
+      debouncedHandleSearch.cancel();
+    };
+  }, [debouncedHandleSearch]);
+
+  const toggleGroupCollapse = (group: string) => {
+    setCollapsedGroups((prev) => ({
+      ...prev,
+      [group]: !prev[group],
+    }));
+  };
+
+  const filteredData = useMemo(() => {
+    if (!searchQuery) return data;
+
+    const lowercasedQuery = searchQuery.toLowerCase();
+    const filterCollection = (collection: any[]) =>
+      collection.filter((item) => item.label.toLowerCase().includes(lowercasedQuery));
+
+    return Object.keys(data).reduce((acc, key) => {
+      const filteredCollection = filterCollection(data[key]);
+      if (filteredCollection.length > 0) {
+        acc[key] = filteredCollection;
+      }
+      return acc;
+    }, {} as any);
+  }, [searchQuery, data]);
+
+  const getIconForCollection = useMemo(() => getIconForCollectionOriginal, []);
+
+  return (
+    <nav className="space-y-6 text-black ">
+      <div className="space-y-2">
+        <div className="mb-4 px-1">
+          <input
+            type="text"
+            placeholder="Filter catalog..."
+            className="w-full font-light px-3 py-1 text-sm text-gray-600 border border-purple-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500"
+            onChange={debouncedHandleSearch}
+          />
+        </div>
+
+        {Object.keys(filteredData).length === 0 ? (
+          <div className="px-2 text-gray-400 dark:text-gray-200 text-sm">No results found</div>
+        ) : (
+          Object.keys(filteredData).map((key) => {
+            const collection = filteredData[key];
+            if (collection[0] && collection[0].visible === false) return null;
+            const isCollapsed = collapsedGroups[key];
+            return (
+              <ul className="w-full space-y-1.5 pb-2 pl-1 text-black" key={key}>
+                <li
+                  className="font capitalize cursor-pointer flex items-center ml-1 text-[14px]"
+                  onClick={() => toggleGroupCollapse(key)}
+                >
+                  <span className="">{`${key} (${collection.length})`}</span>
+                  <span className="ml-2 block">
+                    {isCollapsed ? <ChevronDownIcon className="w-3 h-3" /> : <ChevronUpIcon className="w-3 h-3" />}
+                  </span>
+                </li>
+                {!isCollapsed &&
+                  collection.map((item: any) => {
+                    const Icon = getIconForCollection(item.collection);
+                    return (
+                      <li
+                        className={`w-full has-tooltip text-md xl:text-sm space-y-2 scroll-m-20 rounded-md text-black hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white    ${currentPath.includes(item.href) ? ' bg-gradient-to-l from-purple-500 to-purple-700  font-normal text-white ' : 'font-thin'}`}
+                        id={item.href}
+                        key={item.href}
+                      >
+                        <a className={`flex px-1 justify-start items-center w-full rounded-md  `} href={`${item.href}`}>
+                          <Icon className="w-3 mr-2" />
+                          <span className="block truncate  !whitespace-normal">{item.label}</span>
+                          {/* {item.label.length > 2 && (
+                            <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+                              {item.label}
+                            </span>
+                          )} */}
+                        </a>
+                      </li>
+                    );
+                  })}
+              </ul>
+            );
+          })
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default CatalogResourcesSideBar;

package/src/components/SideBars/CatalogResourcesSideBar/styles.css

@@ -0,0 +1,8 @@
+.tooltip {
+  visibility: hidden;
+  position: absolute;
+}
+.has-tooltip:hover .tooltip {
+  visibility: visible;
+  z-index: 100;
+}

package/src/components/SideBars/DomainSideBar.astro

@@ -1,9 +1,10 @@
 ---
 import OwnersList from '@components/Lists/OwnersList';
-import PillList from '@components/Lists/PillList';
+import PillListFlat from '@components/Lists/PillListFlat';
 import VersionList from '@components/Lists/VersionList.astro';
 import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
+import { ScrollText, Workflow } from 'lucide-react';
 interface Props {
   domain: CollectionEntry<'domains'>;
 }
@@ -20,6 +21,7 @@ const serviceList = services.map((p) => ({
   label: p.data.name,
   badge: p.collection,
   tag: `v${p.data.version}`,
+  collection: p.collection,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
@@ -32,33 +34,38 @@ const ownersList = owners.map((o) => ({
 }));
 ---
 
-<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
   <div>
-    <PillList
+    <PillListFlat
       title={`Services (${services.length})`}
       pills={serviceList}
       emptyMessage={`This domain does not contain any services.`}
       color="pink"
+      icon="ServerIcon"
       client:load
     />
+    {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
     <OwnersList
       title={`Domain owners (${ownersList.length})`}
       owners={ownersList}
       emptyMessage={`This domain does not have any documented owners.`}
       client:load
     />
-    {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
     <div class="space-y-2">
       <a
         href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-        >View in Visualiser</a
+        class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
+        <Workflow strokeWidth={2} size={16} />
+        <span class="block">View in visualiser</span>
+      </a>
       <a
         href={buildUrl(`/docs/${domain.collection}/${domain.data.id}/${domain.data.version}/changelog`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-        >Changelog</a
+        class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
+        <ScrollText strokeWidth={2} size={16} />
+        <span class="block">Read changelog</span>
+      </a>
     </div>
   </div>
 </aside>

package/src/components/SideBars/MessageSideBar.astro

@@ -1,11 +1,12 @@
 ---
 import { getEntry, type CollectionEntry } from 'astro:content';
-import PillList from '@components/Lists/PillList';
+import PillListFlat from '@components/Lists/PillListFlat';
 import OwnersList from '@components/Lists/OwnersList';
 import type { CollectionMessageTypes } from '@types';
 import * as path from 'path';
 import VersionList from '@components/Lists/VersionList.astro';
 import { buildUrl } from '@utils/url-builder';
+import { FileDownIcon, ScrollText, Workflow } from 'lucide-react';
 interface Props {
   message: CollectionEntry<CollectionMessageTypes>;
 }
@@ -19,14 +20,16 @@ const ownersRaw = message.data?.owners || [];
 const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
 
 const producerList = producers.map((p) => ({
-  label: `${p.data.name} (service)`,
+  label: `${p.data.name}`,
   tag: `v${p.data.version}`,
+  collection: p.collection,
   href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
 }));
 
 const consumerList = consumers.map((p) => ({
-  label: `${p.data.name} (service)`,
+  label: `${p.data.name}`,
   tag: `v${p.data.version}`,
+  collection: p.collection,
   href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
 }));
 
@@ -77,22 +80,41 @@ const schemaFilePath = message?.data?.schemaPath;
 const schemaURL = path.join(publicPath, schemaFilePath || '');
 ---
 
-<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto pb-20">
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
   <div class="">
-    <PillList
-      color="pink"
-      title={`${type} Producers (${producerList.length})`}
-      pills={producerList}
-      emptyMessage={getProducerEmptyMessage(type)}
-      client:load
-    />
-    <PillList
-      color="pink"
-      title={`${type} Consumers (${consumerList.length})`}
-      pills={consumerList}
-      emptyMessage={getConsumerEmptyMessage(type)}
-      client:load
-    />
+    {
+      producerList.length > 0 && (
+        <PillListFlat
+          color="pink"
+          title={`${type} Producers (${producerList.length})`}
+          pills={producerList}
+          emptyMessage={getProducerEmptyMessage(type)}
+          client:load
+        />
+      )
+    }
+    {
+      consumerList.length > 0 && (
+        <PillListFlat
+          color="pink"
+          title={`${type} Consumers (${consumerList.length})`}
+          pills={consumerList}
+          emptyMessage={getConsumerEmptyMessage(type)}
+          client:load
+        />
+      )
+    }
+
+    {
+      message.data.versions && (
+        <VersionList
+          title={`${type} versions (${message.data.versions?.length})`}
+          versions={message.data.versions}
+          collectionItem={message}
+        />
+      )
+    }
+
     <OwnersList
       title={`${type} owners (${ownersList.length})`}
       owners={ownersList}
@@ -100,48 +122,34 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
       client:load
     />
 
-    {message.data.versions && <VersionList versions={message.data.versions} collectionItem={message} />}
-
     <div class="space-y-2">
       {
         message?.data?.schemaPath && (
           <a
             href={buildUrl(schemaURL, true)}
             download={`${message.data.name}(${message.data.version})-${schemaFilePath}`}
-            class="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-200 bg-gray-800 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+            class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
           >
-            <>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="2"
-                stroke="currentColor"
-                aria-hidden="true"
-                class="-ml-1 mr-2 h-5 w-5 text-gray-200"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                />
-              </svg>
-              <span>Download Schema</span>
-            </>
+            <FileDownIcon strokeWidth={2} size={16} />
+            <span>Download schema</span>
           </a>
         )
       }
       <a
         href={buildUrl(`/visualiser/${message.collection}/${message.data.id}/${message.data.version}`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-        >View in Visualiser</a
+        class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
+        <Workflow strokeWidth={2} size={16} />
+        <span class="block">View in visualiser</span>
+      </a>
 
       <a
         href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}/changelog`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-        >Changelog</a
+        class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
+        <ScrollText strokeWidth={2} size={16} />
+        <span class="block">Read changelog</span>
+      </a>
     </div>
   </div>
 </aside>

package/src/components/SideBars/ServiceSideBar.astro

@@ -1,10 +1,11 @@
 ---
 import OwnersList from '@components/Lists/OwnersList';
-import PillList from '@components/Lists/PillList';
+import PillListFlat from '@components/Lists/PillListFlat';
 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 { ScrollText, Workflow, FileDownIcon } from 'lucide-react';
 import { join } from 'node:path';
 interface Props {
   service: CollectionEntry<'services'>;
@@ -24,6 +25,7 @@ const sendsList = sends.map((p) => ({
   label: p.data.name,
   badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
+  collection: p.collection,
   tag: `v${p.data.version}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
@@ -32,6 +34,7 @@ const receivesList = receives.map((p) => ({
   badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
+  collection: p.collection,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
@@ -49,22 +52,26 @@ const schemaFilePath = service?.data?.schemaPath;
 const schemaURL = join(publicPath, schemaFilePath || '');
 ---
 
-<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
-  <div id="sidebar-cta-portal">
-    <PillList
+<aside class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
+  <div id="sidebar-cta-portal" class="">
+    <PillListFlat
       title={`Receives Messages (${receivesList.length})`}
       pills={receivesList}
       emptyMessage={`This service does not receive any messages.`}
       color="orange"
       client:load
     />
-    <PillList
+    <PillListFlat
       title={`Sends Messages (${sendsList.length})`}
       pills={sendsList}
       emptyMessage={`This service does not send any messages.`}
       color="orange"
       client:load
     />
+    {service.data.versions && <VersionList versions={service.data.versions} collectionItem={service} />}
+
+    {service.data.specifications && <SpecificationsList collectionItem={service} />}
+
     <OwnersList
       title={`Service owners (${ownersList.length})`}
       owners={ownersList}
@@ -72,48 +79,33 @@ const schemaURL = join(publicPath, schemaFilePath || '');
       client:load
     />
 
-    {service.data.versions && <VersionList versions={service.data.versions} collectionItem={service} />}
-    {service.data.specifications && <SpecificationsList collectionItem={service} />}
-
     <div class="space-y-2">
       {
         service?.data?.schemaPath && (
           <a
             href={buildUrl(schemaURL, true)}
             download={`${service.data.name}(${service.data.version})-${schemaFilePath}`}
-            class="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-200 bg-gray-800 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+            class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
           >
-            <>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="2"
-                stroke="currentColor"
-                aria-hidden="true"
-                class="-ml-1 mr-2 h-5 w-5 text-gray-200"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                />
-              </svg>
-              <span>Download Schema</span>
-            </>
+            <FileDownIcon strokeWidth={2} size={16} />
+            <span>Download schema</span>
           </a>
         )
       }
       <a
         href={buildUrl(`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-        >View in Visualiser</a
+        class="flex items-center justify-center space-x-2 text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
+        <Workflow strokeWidth={2} size={16} />
+        <span class="block">View in visualiser</span>
+      </a>
       <a
         href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/changelog`)}
-        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
-        >Changelog</a
+        class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
+        <ScrollText strokeWidth={2} size={16} />
+        <span class="block">Read changelog</span>
+      </a>
     </div>
   </div>
 </aside>

package/src/components/Tables/Table.tsx

@@ -64,8 +64,8 @@ export const Table = ({
       <div className=" bg-gray-100/20 rounded-md border-2 border-gray-200 shadow-sm ">
         <table className="min-w-full divide-y divide-gray-200 rounded-md ">
           <thead className="bg-gray-200/50">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className="rounded-tl-lg">
+            {table.getHeaderGroups().map((headerGroup, index) => (
+              <tr key={`${headerGroup}-${index}`} className="rounded-tl-lg">
                 {headerGroup.headers.map((header) => (
                   <th key={`${header.id}`} className="pl-4 pr-3 text-left text-sm font-semibold text-gray-800 sm:pl-0  ">
                     <div className="flex flex-col justify-start px-2 py-2 space-y-2">

package/src/components/Tables/columns/MessageTableColumns.tsx

@@ -78,9 +78,9 @@ export const columns = () => [
         return <div className="font-light text-sm text-gray-400/60 text-left italic">No producers documented</div>;
       return (
         <ul className="">
-          {producers.map((producer: any) => {
+          {producers.map((producer: any, index: number) => {
             return (
-              <li className="py-2 group flex items-center space-x-2" key={producer.data.id}>
+              <li className="py-2 group flex items-center space-x-2" key={`${producer.data.id}-${index}`}>
                 <a
                   href={buildUrl(`/docs/${producer.collection}/${producer.data.id}/${producer.data.version}`)}
                   className="group-hover:text-primary flex space-x-1 items-center "
@@ -118,9 +118,9 @@ export const columns = () => [
 
       return (
         <ul>
-          {consumers.map((consumer: any) => {
+          {consumers.map((consumer: any, index: number) => {
             return (
-              <li key={consumer.data.id} className="py-1 group font-light ">
+              <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
                 <a
                   href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-primary flex space-x-1 items-center "

package/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -71,11 +71,11 @@ export const columns = () => [
 
       return (
         <ul>
-          {receives.map((consumer: any) => {
+          {receives.map((consumer: any, index: number) => {
             const type = consumer.collection.slice(0, -1);
             const { color, Icon } = useMemo(() => getColorAndIconForMessageType(type), [type]);
             return (
-              <li key={consumer.data.id} className="py-1 group font-light ">
+              <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
                 <a
                   href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-primary flex space-x-1 items-center "
@@ -113,12 +113,12 @@ export const columns = () => [
 
       return (
         <ul>
-          {sends.map((consumer: any) => {
+          {sends.map((consumer: any, index: number) => {
             const type = consumer.collection.slice(0, -1);
             const color = type === 'event' ? 'orange' : 'blue';
             const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
             return (
-              <li key={consumer.data.id} className="py-1 group font-light">
+              <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light">
                 <a
                   href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-primary flex space-x-1 items-center "

package/src/layouts/DiscoverLayout.astro

@@ -2,7 +2,6 @@
 import { Table } from '@components/Tables/Table';
 import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
-import PlainPage from '@layouts/PlainPage.astro';
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getFlows } from '@utils/flows/flows';
@@ -11,6 +10,7 @@ import { getServices } from '@utils/services/services';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
+import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
 
 const events = await getEvents();
 const queries = await getQueries();
@@ -74,8 +74,8 @@ const tabs = [
 ];
 ---
 
-<PlainPage title={`Explore | ${title}`}>
-  <main>
+<VerticalSideBarLayout title={`Explore | ${title}`}>
+  <main class="ml-0">
     <div>
       <!-- <div class="sm:hidden">
         <label for="tabs" class="sr-only">Select a tab</label>
@@ -88,7 +88,7 @@ const tabs = [
       </div> -->
       <div class="hidden sm:block">
         <div class="border-b border-gray-200">
-          <nav class="flex space-x-8 -mb-0.5" aria-label="Tabs">
+          <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
             {
               tabs.map((tab) => (
                 <a
@@ -109,9 +109,9 @@ const tabs = [
     </div>
 
     <!-- Table -->
-    <div class="pb-20">
+    <div class="pb-20 ml-6">
       <div>
-        <div class="sm:flex sm:items-center py-8 pb-4">
+        <div class="sm:flex sm:items-center py-4 pb-4">
           <div class="sm:flex-auto space-y-2">
             <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
             <p class="text-md text-gray-700">{subtitle}</p>
@@ -128,7 +128,7 @@ const tabs = [
       </div>
     </div>
   </main>
-</PlainPage>
+</VerticalSideBarLayout>
 
 <style>
   .ec-align-top {

package/src/layouts/Footer.astro

@@ -3,7 +3,7 @@ import { buildUrl } from '@utils/url-builder';
 const { className } = Astro.props;
 ---
 
-<footer class={`py-4 space-y-8 border-t border-gray-300 ${className}`}>
+<footer class={`relative py-4 space-y-8 border-t border-gray-300 ${className}`}>
   <div class="flex justify-between items-center py-8 text-gray-500 text-sm font-light">
     <div class="flex space-x-5">
       <a href="https://github.com/event-catalog/eventcatalog" target="_blank"