@eventcatalog/core 2.6.3 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.7.0
+
+### Minor Changes
+
+- 515b01f: feat(core): added ability to full screen visuals, new icons for messages and new landing page
+
+## 2.6.4
+
+### Patch Changes
+
+- 0459eec: chore(core): fixed styled for openapi pages
+
 ## 2.6.3
 
 ### Patch Changes

package/astro.config.mjs

@@ -47,12 +47,6 @@ export default defineConfig({
     }),
     pagefind(),
   ],
-  redirects: {
-    "/": {
-      status: 302,
-      destination: join(base, config.landingPage || '/docs'),
-    },
-  },
   vite: {
     build: {
       commonjsOptions: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "publishConfig": {
     "access": "public"
   },

package/public/icons/youtube.svg

@@ -0,0 +1 @@
+<svg viewBox="0 -3 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>youtube [#168]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-300.000000, -7442.000000)" fill="#000000"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289" id="youtube-[#168]"> </path> </g> </g> </g> </g></svg>

package/src/components/Header.astro

@@ -21,47 +21,65 @@ const navItems = [
 ];
 
 const logo = {
-  src: ('/' + (catalog?.logo?.src || 'logo.png')).replace(/^\/+/, '/'), // replace the leading slashes with a single one
+  src: ('/' + (catalog?.logo?.src || 'logo.png')).replace(/^\/+/, '/'),
   alt: catalog?.logo?.alt || 'Event Catalog',
   text: catalog?.logo?.text || 'EventCatalog',
 };
 ---
 
-<nav class="md:fixed top-0 w-full z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl max-w-[70em]">
-  <div class="flex justify-between items-center">
-    <div class="w-1/3 flex space-x-2 items-center">
-      <a href={buildUrl(catalog.landingPage || '/docs')} class="flex space-x-2 items-center">
-        {logo.src && <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8" />}
-        {logo.text && <span class="hidden sm:inline-block text-[1em]">{logo.text}</span>}
-      </a>
-    </div>
-    <div class="w-1/3 md:block hidden">
-      <Search />
-      <!-- <Search id="search" className="pagefind-ui" uiOptions={{ showImages: false }} /> -->
-    </div>
-    <!-- <div class="w-1/3 px-2">
-      <div class="2/3">
-        <div class="relative mt-2 flex items-center">
-          <input
-            type="text"
-            name="search"
-            id="search"
-            class="block w-full px-2 rounded-md border-0 py-2 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-            placeholder="Find something..."
-          />
-          <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-            <kbd class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">⌘K</kbd>
-          </div>
-        </div>
+<nav id="eventcatalog-header" class="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl">
+  <div class="max-w-[120em] mx-auto px-4 sm:px-6 lg:px-8 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">
+          {logo.src && <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8 h-8" />}
+          {logo.text && <span class="hidden sm:inline-block text-[1em]">{logo.text}</span>}
+        </a>
+      </div>
+
+      <div class="hidden lg:block flex-grow mx-4 w-1/3">
+        <Search />
+      </div>
+
+      <div class="hidden md:block w-1/3">
+        <ul class="flex space-x-8 justify-end">
+          {
+            navItems.map((item) => {
+              const isActive = currentPath.includes(item.href);
+              return (
+                <li class={`font-light ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
+                  <a href={item.href}>{item.label}</a>
+                </li>
+              );
+            })
+          }
+        </ul>
+      </div>
+
+      <div class="md:hidden">
+        <button
+          id="menu-toggle"
+          type="button"
+          class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"
+          aria-label="Toggle menu"
+        >
+          <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+            <path
+              fill-rule="evenodd"
+              d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
+            ></path>
+          </svg>
+        </button>
       </div>
-    </div> -->
-    <div class="w-1/3 justify-end text-md">
-      <ul class="text-right flex justify-end space-x-8">
+    </div>
+
+    <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 (
-              <li class={`font-light ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
+              <li class={`font-light ${isActive ? 'font-bold text-purple-500' : ''}`}>
                 <a href={item.href}>{item.label}</a>
               </li>
             );
@@ -71,3 +89,35 @@ const logo = {
     </div>
   </div>
 </nav>
+
+<div id="eventcatalog-header-spacer" class="h-20"></div>
+<!-- Spacer to prevent content from being hidden under the fixed header -->
+
+<script>
+  const menuToggle = document.getElementById('menu-toggle');
+  const mobileMenu = document.getElementById('mobile-menu');
+
+  if (menuToggle && mobileMenu) {
+    menuToggle.addEventListener('click', () => {
+      mobileMenu.classList.toggle('hidden');
+    });
+  }
+</script>
+
+<style>
+  @media (max-width: 768px) {
+    nav {
+      transition: all 0.3s ease-out;
+    }
+
+    #mobile-menu {
+      transition: all 0.3s ease-out;
+      max-height: 0;
+      overflow: hidden;
+    }
+
+    #mobile-menu:not(.hidden) {
+      max-height: 500px; /* Adjust this value as needed */
+    }
+  }
+</style>

package/src/components/MDX/NodeGraph/Nodes/Command.tsx

@@ -1,4 +1,4 @@
-import { EnvelopeIcon } from '@heroicons/react/16/solid';
+import { ChatBubbleLeftIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from 'reactflow';
 
@@ -33,7 +33,7 @@ export default function CommandNode({ data, sourcePosition, targetPosition }: an
           `border-r-[1px] border-blue-500`
         )}
       >
-        <EnvelopeIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+        <ChatBubbleLeftIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
         {mode === 'full' && (
           <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
             Command

package/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -1,4 +1,4 @@
-import { EnvelopeIcon } from '@heroicons/react/16/solid';
+import { BoltIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
 import { Handle } from 'reactflow';
 
@@ -33,7 +33,7 @@ export default function EventNode({ data, sourcePosition, targetPosition }: any)
           `border-r-[1px] border-orange-500`
         )}
       >
-        <EnvelopeIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+        <BoltIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
         {mode === 'full' && (
           <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
             Event

package/src/components/MDX/NodeGraph/Nodes/Step.tsx

@@ -1,5 +1,3 @@
-import { EnvelopeIcon } from '@heroicons/react/16/solid';
-import type { CollectionEntry } from 'astro:content';
 import { Handle } from 'reactflow';
 
 interface Data {

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

@@ -1,5 +1,4 @@
-import { EnvelopeIcon } from '@heroicons/react/20/solid';
-import { ServerIcon } from '@heroicons/react/24/solid';
+import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionMessageTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
@@ -17,6 +16,7 @@ export const columns = () => [
       const messageRaw = info.row.original;
       const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
       const color = type === 'event' ? 'orange' : 'blue';
+      const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
       return (
         <div className=" group ">
           <a
@@ -26,7 +26,7 @@ export const columns = () => [
             <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
               <span className="flex items-center">
                 <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
-                  <EnvelopeIcon className="h-4 w-4 text-white" />
+                  <Icon className="h-4 w-4 text-white" />
                 </span>
                 <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500 font-light">
                   {messageRaw.data.name} (v{messageRaw.data.version})
@@ -42,14 +42,6 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
-  // columnHelper.accessor('data.version', {
-  //   header: () => <span>Version</span>,
-  //   cell: (info) => {
-  //     const message = info.row.original;
-  //     return <div className="text-left">{`v${info.getValue()} ${message.data.latestVersion === message.data.version ? '(latest)': ''}`}</div>
-  //   },
-  //   footer: (info) => info.column.id,
-  // }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',

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

@@ -1,5 +1,4 @@
-import { EnvelopeIcon } from '@heroicons/react/24/solid';
-import { ServerIcon } from '@heroicons/react/24/solid';
+import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
@@ -75,6 +74,7 @@ export const columns = () => [
           {receives.map((consumer: any) => {
             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 ">
                 <a
@@ -84,7 +84,7 @@ export const columns = () => [
                   <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
                     <span className="flex items-center">
                       <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
-                        <EnvelopeIcon className="h-4 w-4 text-white" />
+                        <Icon className="h-4 w-4 text-white" />
                       </span>
                       <span className="leading-none px-2 group-hover:underline ">
                         {consumer.data.name} (v{consumer.data.version})
@@ -117,6 +117,7 @@ export const columns = () => [
           {sends.map((consumer: any) => {
             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">
                 <a
@@ -126,7 +127,7 @@ export const columns = () => [
                   <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
                     <span className="flex items-center">
                       <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
-                        <EnvelopeIcon className="h-4 w-4 text-white" />
+                        <Icon className="h-4 w-4 text-white" />
                       </span>
                       <span className="leading-none px-2 group-hover:underline ">
                         {consumer.data.name} (v{consumer.data.version})

package/src/layouts/CustomDocsPageLayout.astro

@@ -20,10 +20,10 @@ import { buildUrl } from '@utils/url-builder';
     <title>EventCatalog</title>
   </head>
   <body>
-    <div class="px-10 max-w-[96em] mx-auto">
+    <div class="px-10 max-w-[120em] mx-auto">
       <Header />
 
-      <div class="md:pt-20">
+      <div class="md:pt-4">
         <nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full py-2">
           <div class="w-full">
             <SideBar />

package/src/layouts/DiscoverLayout.astro

@@ -1,7 +1,6 @@
 ---
 import { Table } from '@components/Tables/Table';
-import { QueueListIcon, RectangleGroupIcon } from '@heroicons/react/24/outline';
-import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon';
+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';
@@ -25,7 +24,7 @@ const tabs = [
     label: `Events (${events.length})`,
     href: buildUrl('/discover/events'),
     isActive: currentPath === '/discover/events',
-    icon: EnvelopeIcon,
+    icon: BoltIcon,
     activeColor: 'orange',
     enabled: events.length > 0,
   },
@@ -33,7 +32,7 @@ const tabs = [
     label: `Commands (${commands.length})`,
     href: buildUrl('/discover/commands'),
     isActive: currentPath === '/discover/commands',
-    icon: EnvelopeIcon,
+    icon: ChatBubbleLeftIcon,
     activeColor: 'blue',
     enabled: commands.length > 0,
   },

package/src/layouts/DocsLayout.astro

@@ -17,12 +17,12 @@ import SEO from '../components/Seo.astro';
     <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
   </head>
   <body>
-    <div class="px-10 max-w-[96em] mx-auto">
+    <div class="px-10 max-w-[120em] mx-auto">
       <Header />
 
-      <div class="md:pt-20">
+      <div>
         <nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full py-2">
-          <div class="w-full">
+          <div class="w-full pt-4">
             <SideBar />
           </div>
         </nav>

package/src/layouts/Footer.astro

@@ -1,8 +1,9 @@
 ---
 import { buildUrl } from '@utils/url-builder';
+const { className } = Astro.props;
 ---
 
-<footer class="py-4 space-y-8 border-t border-gray-300">
+<footer class={`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"
@@ -17,6 +18,12 @@ import { buildUrl } from '@utils/url-builder';
           style={`mask-image: url("${buildUrl('/icons/x-twitter.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
         ></svg></a
       >
+      <a href="https://www.youtube.com/@event-catalog" target="_blank"
+        ><span class="sr-only">x</span><svg
+          class="w-5 h-5 bg-gray-400 hover:bg-purple-500 dark:hover:bg-gray-400"
+          style={`mask-image: url("${buildUrl('/icons/youtube.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
+        ></svg></a
+      >
     </div>
     <a
       target="_blank"

package/src/layouts/PlainPage.astro

@@ -16,10 +16,10 @@ import SEO from '@components/Seo.astro';
     <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
   </head>
   <body>
-    <div class="px-10 max-w-[96em] mx-auto">
+    <div class="px-10 max-w-[120em] mx-auto">
       <Header />
 
-      <div class="md:pt-20">
+      <div class="md:pt-4">
         <div>
           <slot />
         </div>

package/src/layouts/VisualiserLayout.astro

@@ -54,43 +54,112 @@ const getColor = (collection: string) => {
 <PlainPage title={title} description={description}>
   <div class="flex min-h-full flex-row md:flex-col">
     <div class="mx-auto flex flex-col-reverse md:flex-row w-full items-start">
-      <aside
-        class="md:sticky mt-14 md:mt-0 top-0 w-full md:w-60 xl:w-[19em] shrink-0 lg:block font-light pr-10"
-        id="visualiser-navigation"
-      >
-        {
-          Object.keys(navigation).map((key: any) => {
-            const items = navigation[key]
-              .map((item: any) => {
-                const isCurrent = currentPath.includes(`${item.collection}/${item.data.id}/${item.data.version}`);
-                const isLatest = item.data.version === item.data.latestVersion;
-                if (!isLatest) return null;
-                return {
-                  label: item.data.name,
-                  version: item.data.version,
-                  color: getColor(item.collection),
-                  href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
-                  active: isCurrent,
-                };
-              })
-              .filter((n: any) => n !== null);
-            return (
-              <BasicList
-                title={`${key} (${navigation[key].length})`}
-                items={items}
-                emptyMessage="Nothing to show"
-                color="gray"
-                client:load
-              />
-            );
-          })
-        }
-      </aside>
-
-      <main class="flex-1 h-full w-full">
+      <div>
+        <aside
+          class="md:sticky mt-8 md:mt-0 top-0 w-full md:w-60 xl:w-[19em] shrink-0 lg:block font-light pr-10"
+          id="visualiser-navigation"
+        >
+          {
+            Object.keys(navigation).map((key: any) => {
+              const items = navigation[key]
+                .map((item: any) => {
+                  const isCurrent = currentPath.includes(`${item.collection}/${item.data.id}/${item.data.version}`);
+                  const isLatest = item.data.version === item.data.latestVersion;
+                  if (!isLatest) return null;
+                  return {
+                    label: item.data.name,
+                    version: item.data.version,
+                    color: getColor(item.collection),
+                    href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
+                    active: isCurrent,
+                  };
+                })
+                .filter((n: any) => n !== null);
+              return (
+                <BasicList
+                  title={`${key} (${navigation[key].length})`}
+                  items={items}
+                  emptyMessage="Nothing to show"
+                  color="gray"
+                  client:load
+                />
+              );
+            })
+          }
+        </aside>
+      </div>
+
+      <main class="flex-1 h-full w-full relative">
+        <button
+          id="fullscreen-toggle"
+          class="absolute top-[1em] z-40 left-5 bg-white hover:bg-gray-100/50 border border-gray-200 hover:text-purple-500 text-gray-800 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out flex items-center space-x-2 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
+          </svg>
+          <span>Toggle Fullscreen</span>
+        </button>
         <slot />
       </main>
     </div>
     <ViewTransitions />
   </div>
 </PlainPage>
+
+<script>
+  function setupSidebarToggle() {
+    const sidebar = document.getElementById('visualiser-navigation');
+    const toggleButton = document.getElementById('fullscreen-toggle');
+    const eventCatalogHeader = document.getElementById('eventcatalog-header');
+    const eventCatalogHeaderSpacer = document.getElementById('eventcatalog-header-spacer');
+    let isSidebarVisible = true;
+
+    if (!sidebar || !toggleButton) return;
+
+    function toggleSidebar() {
+      isSidebarVisible = !isSidebarVisible;
+      if (sidebar) sidebar.style.display = isSidebarVisible ? 'block' : 'none';
+      if (eventCatalogHeader) eventCatalogHeader.style.display = isSidebarVisible ? 'block' : 'none';
+      if (eventCatalogHeaderSpacer) eventCatalogHeaderSpacer.style.display = isSidebarVisible ? 'block' : 'none';
+    }
+
+    // Remove existing event listener if it exists
+    toggleButton.removeEventListener('click', toggleSidebar);
+
+    // Add the event listener
+    toggleButton.addEventListener('click', toggleSidebar);
+  }
+
+  // Run the setup immediately
+  setupSidebarToggle();
+
+  // Re-run the setup after each navigation
+  document.addEventListener('astro:page-load', setupSidebarToggle);
+</script>
+
+<style>
+  #visualiser-navigation {
+    transform: translateX(0);
+  }
+</style>
+
+<style>
+  #visualiser-navigation {
+    transition:
+      transform 0.3s ease-in-out,
+      opacity 0.3s ease-in-out;
+    transform: translateX(0);
+    opacity: 1;
+  }
+  #visualiser-navigation.hidden {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  main {
+    transition: margin-left 0.3s ease-in-out;
+  }
+</style>

package/src/pages/discover/[type]/index.astro

@@ -1,39 +1,31 @@
 ---
-import { getEvents } from '@utils/events';
 import DiscoverLayout from '@layouts/DiscoverLayout.astro';
-import type { CollectionEntry } from 'astro:content';
-import type { CollectionTypes } from '@types';
-import { getCommands } from '@utils/commands';
-import { getServices } from '@utils/services/services';
-import { getDomains } from '@utils/domains/domains';
+import type { PageTypes } from '@types';
 import { getFlows } from '@utils/flows/flows';
 
+import { pageDataLoader } from '@utils/pages/pages';
+type PageTypesWithFlows = PageTypes | 'flows';
+
 export async function getStaticPaths() {
-  const events = await getEvents();
-  const commands = await getCommands();
-  const services = await getServices();
-  const domains = await getDomains();
-  const flows = await getFlows();
+  const loaders = {
+    ...pageDataLoader,
+    flows: getFlows,
+  };
+
+  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'services', 'domains', 'flows'];
+  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
-  const buildPage = (type: string, collection: CollectionEntry<CollectionTypes>[]) => {
-    return {
+  return allItems.flatMap((items, index) =>
+    items.map((item) => ({
       params: {
-        type,
+        type: itemTypes[index],
       },
       props: {
-        type,
-        data: collection,
+        data: items,
+        type: itemTypes[index],
       },
-    };
-  };
-
-  return [
-    buildPage('events', events),
-    buildPage('commands', commands),
-    buildPage('services', services),
-    buildPage('domains', domains),
-    buildPage('flows', flows),
-  ];
+    }))
+  );
 }
 
 const { type, data } = Astro.props;

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

@@ -4,7 +4,7 @@ import Footer from '@layouts/Footer.astro';
 
 import type { PageTypes } from '@types';
 import { getChangeLogs } from '@utils/changelogs/changelogs';
-import { EnvelopeIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
+import { RectangleGroupIcon, ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import { pageDataLoader } from '@utils/pages/pages';
 
 import { buildUrl } from '@utils/url-builder';
@@ -59,10 +59,10 @@ const getBadge = () => {
     return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' };
   }
   if (props.collection === 'events') {
-    return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: EnvelopeIcon, class: 'text-orange-400' };
+    return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon, class: 'text-orange-400' };
   }
   if (props.collection === 'commands') {
-    return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: EnvelopeIcon, class: 'text-blue-400' };
+    return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-400' };
   }
   if (props.collection === 'domains') {
     return {

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

@@ -11,7 +11,7 @@ import ServiceSideBar from '@components/SideBars/ServiceSideBar.astro';
 import MessageSideBar from '@components/SideBars/MessageSideBar.astro';
 import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
 
-import { EnvelopeIcon, QueueListIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
+import { QueueListIcon, RectangleGroupIcon, ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import type { PageTypes } from '@types';
 
 import { buildUrl } from '@utils/url-builder';
@@ -57,10 +57,10 @@ const getBadge = () => {
     return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' };
   }
   if (props.collection === 'events') {
-    return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: EnvelopeIcon, class: 'text-orange-400' };
+    return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon, class: 'text-orange-400' };
   }
   if (props.collection === 'commands') {
-    return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: EnvelopeIcon, class: 'text-blue-400' };
+    return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-400' };
   }
   if (props.collection === 'domains') {
     return {
@@ -118,7 +118,7 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
   <!-- <main class="flex py-8 sm:px-8 docs-layout"> -->
   <div class="flex min-h-screen docs-layout">
     <main class="flex-1 w-full lg:pr-10 md:pt-4">
-      <div class="border-b border-gray-200 flex justify-between items-start py-4 md:py-8 md:pb-6">
+      <div class="border-b border-gray-200 flex justify-between items-start py-4 md:pb-6">
         <div>
           <h2 class="text-2xl md:text-4xl font-bold">
             {props.data.name}

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

@@ -53,16 +53,24 @@ const fileExists = fs.existsSync(pathOnDisk);
     ) : (
       <rapi-doc
         spec-url={buildUrl(pathToSpec, true)}
-        render-style="table"
         show-header="false"
-        allow-authentication="false"
-        allow-try="false"
-        style={{ height: '100vh', width: '100%' }}
-        class="py-4"
-        nav-bg-color="#fff"
+        allow-authentication="true"
+        allow-try="true"
+        class="relative top-0"
+        style={{ height: '100vh', width: '100%', zIndex: 100 }}
+        regular-font="ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
         schema-style="table"
-        primary-color="#e0baff"
-        bg-color="#fff"
+        default-schema-tab="schema"
+        bg-color="#ffffff"
+        text-color=""
+        nav-bg-color="#fff"
+        nav-text-color=""
+        nav-hover-bg-color="#fff"
+        nav-hover-text-color="#6b21a8"
+        nav-accent-color=""
+        primary-color="#6b21a8"
+        theme="light"
+        render-style="read"
       />
     )
   }
@@ -76,13 +84,44 @@ const fileExists = fs.existsSync(pathOnDisk);
 <style>
   rapi-doc::part(section-servers) {
     /* <<< targets the server div */
-    background: #6b5b95;
-    color: #d1c2e4;
+    /* background: #6b5b95; */
+    border: 2px solid #f1edff;
+    color: black;
     margin: 0 24px 0 24px;
     border-radius: 5px;
   }
   rapi-doc::part(label-selected-server) {
     /* <<< targets selected server label */
-    color: #fff;
+    color: black;
+  }
+
+  rapi-doc::part(section-navbar-search) {
+    margin: 0;
+    padding: 0;
+    margin-bottom: 1em;
+  }
+  rapi-doc::part(section-overview) {
+    margin: 0 2em 0 2em;
+    padding: 1em 0 1em;
+  }
+  rapi-doc::part(section-auth) {
+    margin: 2em 2em;
+    padding: 0;
+  }
+  rapi-doc::part(section-tag) {
+    margin: 2em 2em;
+    padding: 0;
+  }
+  rapi-doc::part(section-tag-title) {
+    margin: 0.5em 0 0;
+    padding: 0;
+  }
+  rapi-doc::part(section-operations-in-tag) {
+    margin: 1em 2em;
+    padding: 0;
+  }
+  rapi-doc::part(section-navbar) {
+    border-right: 1px solid #f1edff;
+    padding: 1em 1em 0 0;
   }
 </style>

package/src/pages/index.astro

@@ -0,0 +1,168 @@
+---
+import Footer from '@layouts/Footer.astro';
+import PlainPage from '@layouts/PlainPage.astro';
+import { buildUrl } from '@utils/url-builder';
+import { BoltIcon, ChatBubbleLeftIcon, QueueListIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
+
+import { getMessages } from '@utils/messages';
+import { getDomains } from '@utils/domains/domains';
+import { getServices } from '@utils/services/services';
+import { getFlows } from '@utils/flows/flows';
+
+const { commands = [], events = [] } = await getMessages();
+const domains = await getDomains();
+const services = await getServices();
+const flows = await getFlows();
+---
+
+<PlainPage title="EventCatalog">
+  <body class="min-h-screen">
+    <main 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-purple-600">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 font-bold">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-5 gap-4">
+            <div class="text-center">
+              <div class="flex justify-center mb-2">
+                <RectangleGroupIcon className="w-8 h-8 text-yellow-600" />
+              </div>
+              <div class="text-2xl font-bold text-yellow-600 mb-1">
+                <span class="statistic" data-target="5">0</span>
+              </div>
+              <div class="text-sm text-gray-600">Domains</div>
+            </div>
+            <div class="text-center">
+              <div class="flex justify-center mb-2">
+                <ServerIcon className="w-8 h-8 text-pink-500" />
+              </div>
+              <div class="text-2xl font-bold text-pink-500 mb-1">
+                <span class="statistic" data-target="12">0</span>
+              </div>
+              <div class="text-sm text-gray-600">Services</div>
+            </div>
+            <div class="text-center">
+              <div class="flex justify-center mb-2">
+                <ChatBubbleLeftIcon className="w-8 h-8 text-blue-500" />
+              </div>
+              <div class="text-2xl font-bold text-blue-500 mb-1">
+                <span class="statistic" data-target="30">0</span>
+              </div>
+              <div class="text-sm text-gray-600">Commands</div>
+            </div>
+            <div class="text-center">
+              <div class="flex justify-center mb-2">
+                <BoltIcon className="w-8 h-8 text-orange-400" />
+              </div>
+              <div class="text-2xl font-bold text-orange-400 mb-1">
+                <span class="statistic" data-target="20">0</span>
+              </div>
+              <div class="text-sm text-gray-600">Events</div>
+            </div>
+
+            <div class="text-center">
+              <div class="flex justify-center mb-2">
+                <QueueListIcon className="w-8 h-8 text-green-800" />
+              </div>
+              <div class="text-2xl font-bold text-green-800 mb-1">
+                <span class="statistic" data-target="8">0</span>
+              </div>
+              <div class="text-sm text-gray-600">Flows</div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <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">Documentation</h2>
+            <p class="text-gray-600 mb-4">
+              Create and maintain comprehensive documentation for your events, including schemas, examples, and versioning.
+            </p>
+            <a href={buildUrl('/docs')} class="text-blue-600 hover:text-blue-800 font-semibold">Explore docs →</a>
+          </div>
+        </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">Visualiser</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={buildUrl('/visualiser')} class="text-teal-600 hover:text-teal-800 font-semibold">Explore visualiser →</a>
+          </div>
+        </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-red-700"></div>
+          <div class="p-6">
+            <h2 class="text-2xl font-semibold mb-4 text-red-700">Discover</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>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <script define:vars={{ domains, services, commands, events, flows }}>
+      function animateStatistics() {
+        const statistics = document.querySelectorAll('.statistic');
+        statistics.forEach((statistic) => {
+          let target;
+          switch (statistic.parentElement.nextElementSibling.textContent.trim()) {
+            case 'Domains':
+              target = domains.length;
+              break;
+            case 'Services':
+              target = services.length;
+              break;
+            case 'Commands':
+              target = commands.length;
+              break;
+            case 'Events':
+              target = events.length;
+              break;
+            case 'Flows':
+              target = flows.length;
+              break;
+            default:
+              target = parseInt(statistic.getAttribute('data-target'));
+          }
+          let current = 0;
+          const increment = target / 50;
+          const timer = setInterval(() => {
+            current += increment;
+            statistic.textContent = Math.round(current);
+            if (current >= target) {
+              clearInterval(timer);
+              statistic.textContent = target;
+            }
+          }, 20);
+        });
+      }
+
+      window.addEventListener('load', animateStatistics);
+    </script>
+  </body>
+</PlainPage>
+
+<Footer className="px-10" />

package/tailwind.config.mjs

@@ -2,7 +2,11 @@
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        'xxl': '1990px',
+      },
+    },
   },
   safelist: [
     {pattern: /border-.*-(200|400|500)/},