@eventcatalog/core 2.10.1 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.11.0
+
+### Minor Changes
+
+- 597dcf2: feat(core): UI improvements to EventCatalog
+
 ## 2.10.1
 
 ### Patch Changes

package/README.md

@@ -113,9 +113,9 @@ You can see the markdown files that generated the website in the GitHub repo und
 
 # Sponsors
 
-Thank you to our project sponsors.
+Thank you to our project  sponsors.
 
-<hr />
+## Gold sponsors
 
 <div align="center">
   <img alt="hookdeck" src="./images/sponsors/hookdeck.svg" />
@@ -125,6 +125,14 @@ Thank you to our project sponsors.
 
 <hr />
 
+<div align="center">
+  <img alt="hookdeck" src="./images/sponsors/gravitee-logo-black.svg" width="50%" />
+  <p style="margin: 0; padding: 0;">Manage, secure, and govern every API in your organization</p>
+  <a href="https://gravitee.io?utm_source=eventcatalog&utm_medium=web&utm_campaign=sponsorship" target="_blank" >Learn more</a>
+</div>
+
+<hr />
+
 _Sponsors help make EventCatalog sustainable, want to help the project? Get in touch! Or [visit our sponsor page](https://www.eventcatalog.dev/support)._
 
 # Enterprise support

package/images/sponsors/gravitee-logo-black.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 624.3 125.8" style="enable-background:new 0 0 624.3 125.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M279.4,85.5V23.7c0-1.6,1.3-2.9,2.9-2.9h5.7c1.6,0,2.9,1.3,2.9,2.9v61.8c0,1.6-1.3,2.9-2.9,2.9h-5.7
+			C280.7,88.4,279.4,87.1,279.4,85.5z"/>
+		<path class="st0" d="M282.3,0h5.7c1.6,0,2.9,1.3,2.9,2.9v5.7c0,1.6-1.3,2.9-2.9,2.9h-5.7c-1.6,0-2.9-1.3-2.9-2.9V2.9
+			C279.4,1.3,280.7,0,282.3,0z"/>
+	</g>
+	<path class="st0" d="M515,77h5.7c1.6,0,2.9,1.3,2.9,2.9v5.7c0,1.6-1.3,2.9-2.9,2.9H515c-1.6,0-2.9-1.3-2.9-2.9v-5.7
+		C512.1,78.2,513.4,77,515,77z"/>
+	<path class="st0" d="M266,20.9l-5.8,0c-1.8,0.1-3.3,1.2-3.8,2.9l-14.3,50.7c-0.4,2.1-2.5,3.4-4.5,3c-1.5-0.3-2.7-1.5-3-3.1
+		l-14.3-50.6c-0.5-1.7-2-2.9-3.8-2.9l-5.8,0c-1.2-0.1-2.3,0.8-2.4,2.1c0,0.3,0,0.6,0.1,0.9l15.1,53.8h0c2.2,8.1,10.6,12.9,18.7,10.7
+		c5.3-1.4,9.5-5.7,10.8-11l15-53.5c0.4-1.2-0.2-2.4-1.4-2.8C266.6,20.9,266.3,20.8,266,20.9z"/>
+	<g>
+		<path class="st0" d="M539.6,1.1L539.6,1.1c1.6,0,2.9,1.3,2.9,2.9v5.7c0,1.6-1.3,2.9-2.9,2.9l0,0c-1.6,0-2.9-1.3-2.9-2.9V3.9
+			C536.8,2.3,538.1,1.1,539.6,1.1z"/>
+		<path class="st0" d="M539.6,21.9L539.6,21.9c1.6,0,2.9,1.3,2.9,2.9v61.8c0,1.6-1.3,2.9-2.9,2.9l0,0c-1.6,0-2.9-1.3-2.9-2.9V24.7
+			C536.8,23.1,538.1,21.9,539.6,21.9z"/>
+	</g>
+	<path class="st0" d="M607.3,26.6c6.2,0,11.3,5.1,11.3,11.3V71c0,6.2-5.1,11.3-11.3,11.3h-34c-6.2,0-11.3-5.1-11.3-11.3V37.9
+		c0-6.2,5.1-11.3,11.3-11.3H607.3 M607.3,21h-34c-9.4,0-17,7.6-17,17V71c0,9.4,7.6,17,17,17h34c9.4,0,17-7.6,17-17V37.9
+		C624.3,28.6,616.7,21,607.3,21C607.3,21,607.3,21,607.3,21L607.3,21z"/>
+	<path class="st0" d="M79.7,21H21.2c-9.4,0-17,7.6-17,17c0,0,0,0,0,0v25.5c0,4.1,1.5,8,4.1,11.1c-4.8,5.2-5.5,13-1.7,19
+		C2.5,96.8,0,101.7,0,107v1.8c0,9.4,7.6,17,17,17h46.5c9.4,0,17-7.6,17-17V107c0-9.4-7.6-17-17-17H20.2v0c-2.7,0-4.8-2.2-4.7-4.9
+		c0-2.6,2.2-4.7,4.8-4.7h0.2c0.3,0,38.9,0,38.9,0c9.4,0,17-7.6,17-17c0,0,0,0,0,0l0.1-29c0-1.3,1-2.3,2.3-2.3h1.1
+		c1.5,0,2.8-1.3,2.8-2.8v-5.6C82.5,22.2,81.2,21,79.7,21z M69.3,107v1.8c0,3.2-2.6,5.8-5.8,5.8H17c-3.2,0-5.8-2.6-5.8-5.8V107
+		c0-3.2,2.6-5.8,5.8-5.8h46.5C66.7,101.2,69.3,103.8,69.3,107z M65,63.5c0,3.2-2.6,5.8-5.8,5.8h-38c-3.2,0-5.8-2.6-5.8-5.8V37.9
+		c0-3.2,2.6-5.8,5.8-5.8h38c3.2,0,5.8,2.6,5.8,5.8L65,63.5z"/>
+	<path class="st0" d="M123.6,21l-14.3,0c-9.4,0-17,7.6-17,17v47.6c0,1.5,1.2,2.8,2.8,2.8c0,0,0,0,0,0h5.6c1.5,0,2.8-1.2,2.8-2.8
+		c0,0,0,0,0,0l0-47.6c0-3.2,2.6-5.8,5.8-5.8h14.3c1.5,0,2.8-1.2,2.8-2.8c0,0,0,0,0,0v-5.6C126.4,22.2,125.1,21,123.6,21z"/>
+	<path class="st0" d="M338.4,32.2c1.6,0,2.9-1.3,2.9-2.9c0,0,0,0,0,0v-5.7c0-1.6-1.3-2.9-2.9-2.9l0,0h-15.8v-18
+		c0-1.5-1.2-2.8-2.8-2.8c0,0,0,0,0,0h-5.6c-1.5,0-2.8,1.2-2.8,2.8c0,0,0,0,0,0v18h-5.7c-1.6,0-2.9,1.3-2.9,2.9c0,0,0,0,0,0v5.7
+		c0,1.6,1.3,2.9,2.9,2.9c0,0,0,0,0,0h5.7v38.9c0,9.4,7.6,17,17,17l10,0c1.5,0,2.8-1.2,2.8-2.8l0,0v-5.6c0-1.5-1.2-2.8-2.8-2.8l0,0
+		h-10c-3.2,0-5.8-2.6-5.8-5.8l0-38.9L338.4,32.2z"/>
+	<path class="st0" d="M182.5,21l-43.5,0c-1.5,0-2.8,1.2-2.8,2.8c0,0,0,0,0,0v5.6c0,1.5,1.2,2.8,2.8,2.8h43.5c3.2,0,5.8,2.6,5.8,5.8
+		v7.4c-1.9-0.7-3.8-1-5.8-1h-33.4c-9.4,0-17,7.6-17,17v9.9c0,9.4,7.6,17,17,17l0,0h33.4c9.4,0,17-7.6,17-17V37.9
+		C199.4,28.6,191.8,21,182.5,21z M182.5,77h-33.4c-3.2,0-5.8-2.6-5.8-5.8v-9.9c0-3.2,2.6-5.8,5.8-5.8h33.4c3.1,0,5.7,2.5,5.8,5.6
+		v2.7c0,0,0,0.1,0,0.1v7.4C188.3,74.4,185.7,77,182.5,77L182.5,77z"/>
+	<path class="st0" d="M406.7,62.4c9.4,0,17-7.6,17-17v-7.5c0-9.4-7.6-17-17-17h-37.4c-9.4,0-17,7.6-17,17v0v4.8h0c0,0.1,0,0.1,0,0.2
+		v28.2c0,9.4,7.6,17,17,17l0,0l47.5,0c1.5,0,2.8-1.2,2.8-2.8l0,0v-5.6c0-1.5-1.2-2.8-2.8-2.8l0,0h-47.5c-3.2,0-5.8-2.6-5.8-5.8v-8.7
+		L406.7,62.4z M363.5,42.7v-4.8c0-3.2,2.6-5.8,5.8-5.8h37.4c3.2,0,5.8,2.6,5.8,5.8v7.5c0,3.2-2.6,5.8-5.8,5.8h-43.2v-8.3
+		C363.5,42.8,363.5,42.7,363.5,42.7L363.5,42.7z"/>
+	<path class="st0" d="M489,62.4c9.4,0,17-7.6,17-17c0,0,0,0,0,0v-7.5c0-9.4-7.6-17-17-17l0,0h-37.4c-9.4,0-17,7.6-17,17v0v4.8h0
+		c0,0.1,0,0.1,0,0.2v28.2c0,9.4,7.6,17,17,17l0,0l47.5,0c1.5,0,2.8-1.2,2.8-2.8l0,0v-5.6c0-1.5-1.2-2.8-2.8-2.8l0,0h-47.5
+		c-3.2,0-5.8-2.6-5.8-5.8v-8.7L489,62.4z M445.8,42.7v-4.8c0-3.2,2.6-5.8,5.8-5.8H489c3.2,0,5.8,2.6,5.8,5.8v7.5
+		c0,3.2-2.6,5.8-5.8,5.8h-43.2v-8.3C445.8,42.8,445.8,42.7,445.8,42.7L445.8,42.7z"/>
+</g>
+</svg>

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "publishConfig": {
     "access": "public"
   },
@@ -51,6 +51,7 @@
     "@tanstack/react-table": "^8.17.3",
     "@types/dagre": "^0.7.52",
     "@types/diff": "^5.2.2",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.merge": "4.6.9",
     "@types/node": "^20.14.2",
     "@types/semver": "^7.5.8",
@@ -68,7 +69,9 @@
     "glob": "^10.4.1",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
+    "lodash.debounce": "^4.0.8",
     "lodash.merge": "4.6.2",
+    "lucide-react": "^0.453.0",
     "mermaid": "^10.9.1",
     "rapidoc": "^9.3.4",
     "react": "^18.3.1",

package/public/icons/discord.svg

@@ -0,0 +1 @@
+<svg fill="#8a31da" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>discord</title> <path d="M20.992 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.050 0.005 0.109 0.005 0.168 0 1.523-1.191 2.768-2.693 2.854l-0.008 0zM11.026 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.048 0.005 0.104 0.005 0.161 0 1.525-1.19 2.771-2.692 2.862l-0.008 0zM26.393 6.465c-1.763-0.832-3.811-1.49-5.955-1.871l-0.149-0.022c-0.005-0.001-0.011-0.002-0.017-0.002-0.035 0-0.065 0.019-0.081 0.047l-0 0c-0.234 0.411-0.488 0.924-0.717 1.45l-0.043 0.111c-1.030-0.165-2.218-0.259-3.428-0.259s-2.398 0.094-3.557 0.275l0.129-0.017c-0.27-0.63-0.528-1.142-0.813-1.638l0.041 0.077c-0.017-0.029-0.048-0.047-0.083-0.047-0.005 0-0.011 0-0.016 0.001l0.001-0c-2.293 0.403-4.342 1.060-6.256 1.957l0.151-0.064c-0.017 0.007-0.031 0.019-0.040 0.034l-0 0c-2.854 4.041-4.562 9.069-4.562 14.496 0 0.907 0.048 1.802 0.141 2.684l-0.009-0.11c0.003 0.029 0.018 0.053 0.039 0.070l0 0c2.14 1.601 4.628 2.891 7.313 3.738l0.176 0.048c0.008 0.003 0.018 0.004 0.028 0.004 0.032 0 0.060-0.015 0.077-0.038l0-0c0.535-0.72 1.044-1.536 1.485-2.392l0.047-0.1c0.006-0.012 0.010-0.027 0.010-0.043 0-0.041-0.026-0.075-0.062-0.089l-0.001-0c-0.912-0.352-1.683-0.727-2.417-1.157l0.077 0.042c-0.029-0.017-0.048-0.048-0.048-0.083 0-0.031 0.015-0.059 0.038-0.076l0-0c0.157-0.118 0.315-0.24 0.465-0.364 0.016-0.013 0.037-0.021 0.059-0.021 0.014 0 0.027 0.003 0.038 0.008l-0.001-0c2.208 1.061 4.8 1.681 7.536 1.681s5.329-0.62 7.643-1.727l-0.107 0.046c0.012-0.006 0.025-0.009 0.040-0.009 0.022 0 0.043 0.008 0.059 0.021l-0-0c0.15 0.124 0.307 0.248 0.466 0.365 0.023 0.018 0.038 0.046 0.038 0.077 0 0.035-0.019 0.065-0.046 0.082l-0 0c-0.661 0.395-1.432 0.769-2.235 1.078l-0.105 0.036c-0.036 0.014-0.062 0.049-0.062 0.089 0 0.016 0.004 0.031 0.011 0.044l-0-0.001c0.501 0.96 1.009 1.775 1.571 2.548l-0.040-0.057c0.017 0.024 0.046 0.040 0.077 0.040 0.010 0 0.020-0.002 0.029-0.004l-0.001 0c2.865-0.892 5.358-2.182 7.566-3.832l-0.065 0.047c0.022-0.016 0.036-0.041 0.039-0.069l0-0c0.087-0.784 0.136-1.694 0.136-2.615 0-5.415-1.712-10.43-4.623-14.534l0.052 0.078c-0.008-0.016-0.022-0.029-0.038-0.036l-0-0z"></path> </g></svg>

package/public/icons/github-purple.svg

@@ -0,0 +1 @@
+<svg fill="#8a31da" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>

package/src/components/DocsNavigation.astro

@@ -130,16 +130,16 @@ const currentPath = Astro.url.pathname;
 
 <script>
   // Scroll to the current page element
-  document.addEventListener('DOMContentLoaded', () => {
-    const currentPath = document.location.pathname;
-    const currentElement = document.getElementById(currentPath);
-    if (currentElement) {
-      // scroll to the current element with padding
-      currentElement.scrollIntoView({
-        behavior: 'auto',
-        block: 'start',
-        inline: 'start',
-      });
-    }
-  });
+  // document.addEventListener('DOMContentLoaded', () => {
+  //   const currentPath = document.location.pathname;
+  //   const currentElement = document.getElementById(currentPath);
+  //   if (currentElement) {
+  //     // scroll to the current element with padding
+  //     currentElement.scrollIntoView({
+  //       behavior: 'auto',
+  //       block: 'start',
+  //       inline: 'start',
+  //     });
+  //   }
+  // });
 </script>

package/src/components/Header.astro

@@ -6,18 +6,18 @@ import { buildUrl } from '@utils/url-builder';
 const currentPath = Astro.url.pathname;
 
 const navItems = [
-  {
-    label: 'Docs',
-    href: buildUrl('/docs'),
-  },
-  {
-    label: 'Visualiser',
-    href: buildUrl('/visualiser'),
-  },
-  {
-    label: 'Discover',
-    href: buildUrl('/discover/events'),
-  },
+  // {
+  //   label: 'Docs',
+  //   href: buildUrl('/docs'),
+  // },
+  // {
+  //   label: 'Visualiser',
+  //   href: buildUrl('/visualiser'),
+  // },
+  // {
+  //   label: 'Discover',
+  //   href: buildUrl('/discover/events'),
+  // },
 ];
 
 const logo = {
@@ -29,9 +29,9 @@ const logo = {
 
 <nav
   id="eventcatalog-header"
-  class="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-50 backdrop-blur-sm"
+  class="fixed top-0 left-0 right-0 bg-white border-b border-gray-200 py-3 font-bold text-xl bg-opacity-20 backdrop-blur-sm"
 >
-  <div class="max-w-[120em] mx-auto px-4 sm:px-6 lg:px-10 xxl:max-w-[96em]">
+  <div class="max-w-[120em] mx-auto px-4 sm:px-4 lg:px-4 xxl:max-w-[96em]">
     <div class="flex justify-between items-center">
       <div class="flex-shrink-0 flex items-center w-1/3">
         <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center">
@@ -45,7 +45,7 @@ const logo = {
       </div>
 
       <div class="hidden md:block w-1/3">
-        <ul class="flex space-x-8 justify-end">
+        <!-- <ul class="flex space-x-8 justify-end">
           {
             navItems.map((item) => {
               const isActive = currentPath.includes(item.href);
@@ -56,7 +56,7 @@ const logo = {
               );
             })
           }
-        </ul>
+        </ul> -->
       </div>
 
       <div class="md:hidden">
@@ -78,7 +78,7 @@ const logo = {
 
     <div id="mobile-menu" class="md:hidden hidden mt-4">
       <ul class="flex flex-col space-y-8 my-4 mb-8">
-        {
+        <!-- {
           navItems.map((item) => {
             const isActive = currentPath.includes(item.href);
             return (
@@ -87,7 +87,7 @@ const logo = {
               </li>
             );
           })
-        }
+        } -->
       </ul>
     </div>
   </div>

package/src/components/Lists/OwnersList.tsx

@@ -1,5 +1,6 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { UserGroupIcon, UserIcon } from '@heroicons/react/24/outline';
 
 interface Props {
   title: string;
@@ -13,44 +14,36 @@ interface Props {
   emptyMessage: string;
 }
 
-const OwnersList2 = ({ title, owners, emptyMessage }: Props) => {
+const OwnersList = ({ title, owners, emptyMessage }: Props) => {
   return (
     <div>
       <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
-        <Disclosure as="div" className="py-4" defaultOpen={owners.length <= 5}>
-          <DisclosureButton className="group flex w-full items-center justify-between">
-            <span className="font-light text-black group-data-[hover]:text-black/80 capitalize"> {title} </span>
+        <Disclosure as="div" className="pb-8" defaultOpen={owners.length <= 5}>
+          <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
+            <span className="text-sm text-black group-data-[hover]:text-black/80 capitalize"> {title} </span>
             <ChevronDownIcon className="size-5 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
           </DisclosureButton>
           <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
-            <ul role="list" className="divide-y divide-black/5">
+            <ul role="list" className="space-y-2">
               {owners.map((item) => {
                 return (
-                  <li className="py-3" key={item.href}>
-                    <a className="flex items-center gap-x-3 group " href={item.href}>
-                      {item.type === 'users' && item.avatarUrl && (
-                        <img
-                          src={item.avatarUrl}
-                          alt={item.label}
-                          className="w-7 h-7 rounded-full border group-hover:border-primary/60"
-                        />
+                  <li
+                    className="has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
+                    key={item.href}
+                  >
+                    <a className={`flex items-center space-x-2`} href={item.href}>
+                      {item.type === 'users' && (
+                        <UserIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
                       )}
-                      {(item.type === 'teams' || !item.avatarUrl) && (
-                        <span className="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase group-hover:bg-primary">
-                          {item.label.charAt(0)}
-                        </span>
+                      {item.type === 'teams' && (
+                        <UserGroupIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
                       )}
-                      {/*  <span className="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase">{item.label.charAt(0)}</span> */}
-                      <div>
-                        <h3 className="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-primary">
+                      <span className="font-light text-sm truncate">{item.label}</span>
+                      {item.label.length > 24 && (
+                        <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
                           {item.label}
-                        </h3>
-                        <div className="-mt-0.5">
-                          <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-primary/10">
-                            {item.badge}
-                          </span>
-                        </div>
-                      </div>
+                        </span>
+                      )}
                     </a>
                   </li>
                 );
@@ -68,34 +61,4 @@ const OwnersList2 = ({ title, owners, emptyMessage }: Props) => {
   );
 };
 
-export default OwnersList2;
-
-// <div class="py-4">
-//   <span class="font-light capitalize">{title}</span>
-//   <ul role="list" class="divide-y divide-black/5">
-//     {owners.map((item) => {
-//       return (
-//         <li class="py-3">
-//           <a class="flex items-center gap-x-3 group " href={item.href}>
-//             {item.type === 'users' && item.avatarUrl && <img src={item.avatarUrl} alt={item.label} class="w-7 h-7 rounded-full border group-hover:border-purple-300" />}
-//             {(item.type === 'teams' || !item.avatarUrl) && (
-//               <span class="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase group-hover:bg-primary">{item.label.charAt(0)}</span>
-//             )}
-//             {/* // <span class="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase">{item.label.charAt(0)}</span> */}
-//             <div>
-//               <h3 class="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-purple-500">{item.label}</h3>
-//               <div class="-mt-0.5">
-//                 <span class="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-purple-100">{item.badge}</span>
-//               </div>
-//             </div>
-//           </a>
-//         </li>
-//       );
-//     })}
-//     {owners.length === 0 && (
-//       <li class="inline mr-2 leading-6 text-sm">
-//         <span class="text-gray-500">{emptyMessage}</span>
-//       </li>
-//     )}
-//   </ul>
-// </div>;
+export default OwnersList;

package/src/components/Lists/PillList.tsx

@@ -1,9 +1,10 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { ChevronDownIcon, ServerIcon } from '@heroicons/react/20/solid';
 
 interface Props {
   title: string;
   color: string;
+  icon?: React.ReactElement;
   pills: {
     label: string;
     badge?: string;
@@ -27,24 +28,27 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray' }: Props) => {
             <ul role="list" className=" py-2 ">
               {pills.map((item) => {
                 return (
-                  <li className="py-1" key={item.href}>
+                  <li className="py-1 " key={item.href}>
                     <a
-                      className={`flex items-start  group border border-gray-200 px-4 rounded-md border-l border-l-${item.color || color}-500 border-l-8`}
+                      className={`flex items-start  group border border-pink-200 hover:border-pink-400  rounded-md`}
                       href={item.href}
                     >
-                      <div className="w-full">
-                        <h3 className="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-primary">
-                          {item.label}
-                        </h3>
-                        <div className=" flex justify-between">
-                          <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-primary/20">
-                            {item.tag}
-                          </span>
-                          {item.badge && (
-                            <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-primary/20 capitalize">
-                              {item.badge.slice(0, -1)}
-                            </span>
-                          )}
+                      <div className="flex w-full">
+                        <div
+                          className={`bg-${color}-500 bg-gradient-to-b from-pink-500 to-pink-700 flex items-start py-2 px-2 rounded-tl rounded-bl`}
+                        >
+                          <ServerIcon className="h-4 w-4 text-white" />
+                        </div>
+                        <div className="w-full px-2 py-1 ">
+                          <h3 className="flex-auto truncate text-xs font-semibold  text-black">{item.label}</h3>
+                          <div className="flex justify-between w-full">
+                            <span className="text-[10px] font-light  text-gray-700 rounded-md ">{item.tag}</span>
+                            {item.badge && (
+                              <span className="text-[10px] font-light  text-gray-700 rounded-md  capitalize">
+                                {item.badge.slice(0, -1)}
+                              </span>
+                            )}
+                          </div>
                         </div>
                       </div>
                     </a>

package/src/components/Lists/PillListFlat.styles.css

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

package/src/components/Lists/PillListFlat.tsx

@@ -0,0 +1,69 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { getIconForCollection as getIconForCollectionOriginal } from '@utils/collections/icons';
+import { useMemo } from 'react';
+
+import './PillListFlat.styles.css';
+
+interface Props {
+  title: string;
+  color: string;
+  icon?: any;
+  pills: {
+    label: string;
+    badge?: string;
+    href: string;
+    tag?: string;
+    color?: string;
+    collection?: string;
+  }[];
+  emptyMessage: string;
+}
+
+const PillList = ({ title, pills, emptyMessage, color = 'gray', ...props }: Props) => {
+  const getIconForCollection = useMemo(() => getIconForCollectionOriginal, []);
+  return (
+    <div>
+      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+        <Disclosure as="div" className="pb-8" defaultOpen={pills.length <= 10}>
+          <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
+            <span className="text-sm text-black group-data-[hover]:text-black/80 capitalize"> {title} </span>
+            <ChevronDownIcon className="size-5 ml-2 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+          </DisclosureButton>
+          <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
+            <ul role="list" className="space-y-2">
+              {pills.map((item) => {
+                const Icon = item.collection ? getIconForCollection(item.collection) : null;
+                return (
+                  <li
+                    className=" has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
+                    key={item.href}
+                  >
+                    <a className={`flex items-center space-x-2`} href={item.href}>
+                      {Icon && <Icon className={`h-4 w-4`} />}
+                      <span className="font-light text-sm truncate">
+                        {item.label} ({item.tag})
+                      </span>
+                      {item.label.length > 24 && (
+                        <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+                          {item.label} ({item.tag})
+                        </span>
+                      )}
+                    </a>
+                  </li>
+                );
+              })}
+              {pills.length === 0 && (
+                <li className="inline mr-2 leading-tight text-xs">
+                  <span className="text-gray-400">{emptyMessage}</span>
+                </li>
+              )}
+            </ul>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    </div>
+  );
+};
+
+export default PillList;

package/src/components/Lists/SpecificationsList.astro

@@ -13,13 +13,13 @@ const specVersions = collectionItem.data.specifications || {};
 const numberOfSpecifications = Object.keys(specVersions).length;
 ---
 
-<div class="space-y-2 my-2 mb-8">
-  <span class="font-light text-black group-data-[hover]:text-black/80 capitalize">Specifications ({numberOfSpecifications})</span>
+<div class="space-y-2 mb-8">
+  <span class="text-sm text-black group-data-[hover]:text-black/80 capitalize">Specifications ({numberOfSpecifications})</span>
   {
     collectionItem.data.specifications?.openapiPath && (
       <a
         href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/spec`)}
-        class="text-sm flex items-center space-x-1 hover:underline hover:text-primary"
+        class="px-1 text-sm font-light flex items-center space-x-1 hover:underline hover:text-primary rounded-md hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white"
       >
         <img src={buildUrl('/icons/openapi.svg', true)} class="h-4 w-4" />
         <span>OpenAPI spec</span>
@@ -30,7 +30,7 @@ const numberOfSpecifications = Object.keys(specVersions).length;
     collectionItem.data.specifications?.asyncapiPath && (
       <a
         href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/asyncapi`)}
-        class="text-sm flex items-center space-x-1 hover:underline hover:text-primary"
+        class="px-1 text-sm font-light flex items-center space-x-1 hover:underline rounded-md hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white"
       >
         <img src={buildUrl('/icons/asyncapi.svg', true)} class="h-4 w-4" />
         <span>AsyncAPI spec</span>

package/src/components/Lists/VersionList.astro

@@ -2,21 +2,44 @@
 import type { CollectionTypes } from '@types';
 import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
+import { HistoryIcon } from 'lucide-react';
 
 interface Props {
+  title?: string;
   versions: string[];
   collectionItem: CollectionEntry<CollectionTypes>;
 }
 
-const { versions, collectionItem } = Astro.props;
+const { versions, collectionItem, title } = Astro.props;
 const currentPath = Astro.url.pathname;
 ---
 
-<div class="space-y-2 my-2 mb-8">
-  <span class="font-light text-black group-data-[hover]:text-black/80 capitalize"
-    >Versions ({collectionItem.data.versions?.length})</span
-  >
-  <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs">
+<div class="space-y-2 pb-8">
+  <span class="text-sm text-black group-data-[hover]:text-black/80 capitalize">
+    {title || `Versions (${collectionItem.data.versions?.length})`}
+  </span>
+  <ul role="list" class="space-y-2">
+    {
+      versions.map((version) => {
+        const isCurrent = currentPath.includes(version);
+        return (
+          <li class="rounded-md px-1 group w-full hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  ">
+            <a
+              class={`flex items-center space-x-2 cursor-pointer`}
+              href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)}
+            >
+              {/* {Icon && <Icon class={`h-4 w-4`} />} */}
+              <HistoryIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
+              <span class={`font-light text-sm ${isCurrent ? 'underline ' : ''}`}>
+                {version === collectionItem.data.latestVersion ? `v${version} (latest)` : `v${version}`}
+              </span>
+            </a>
+          </li>
+        );
+      })
+    }
+  </ul>
+  <!-- <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs">
     {
       versions.map((version) => {
         const isCurrent = currentPath.includes(version);
@@ -26,19 +49,16 @@ const currentPath = Astro.url.pathname;
             value={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)}
             class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-primary underline ' : 'bg-white'}`}
           >
-            <span>
-              v{version}
-              {version === collectionItem.data.latestVersion && <span>(latest)</span>}
-            </span>
+            {version === collectionItem.data.latestVersion ? `v${version} (latest)` : `v${version}`}
           </option>
         );
       })
     }
-  </select>
-  <a
+  </select> -->
+  <!-- <a
     href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.latestVersion}/changelog`)}
     class="text-[10px] text-gray-500">View changelogs</a
-  >
+  > -->
 </div>
 
 <script>

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';
     }
   });