@eventcatalog/core 2.10.1 → 2.11.0

package/src/layouts/VerticalSideBarLayout.astro

@@ -0,0 +1,312 @@
+---
+interface Props {
+  title: string;
+  sidebar?: boolean;
+  description?: string;
+}
+
+import { BookOpenText, Workflow, TableProperties, House } from 'lucide-react';
+import Header from '../components/Header.astro';
+import SEO from '../components/Seo.astro';
+
+import { getCommands } from '@utils/commands';
+import { getDomains } from '@utils/domains/domains';
+import { getEvents } from '@utils/events';
+import { getServices } from '@utils/services/services';
+import { getFlows } from '@utils/flows/flows';
+import { getTeams } from '@utils/teams';
+import { getUsers } from '@utils/users';
+import config, { type CatalogConfig } from '@eventcatalog';
+import { buildUrl } from '@utils/url-builder';
+import { getQueries } from '@utils/queries';
+import CatalogResourcesSideBar from '@components/SideBars/CatalogResourcesSideBar';
+
+const events = await getEvents({ getAllVersions: false });
+const commands = await getCommands({ getAllVersions: false });
+const queries = await getQueries({ getAllVersions: false });
+const services = await getServices({ getAllVersions: false });
+const domains = await getDomains({ getAllVersions: false });
+const flows = await getFlows({ getAllVersions: false });
+const teams = await getTeams();
+const users = await getUsers();
+
+const messages = [...events, ...commands, ...queries];
+
+// @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
+const allData = [...domains, ...services, ...messages, ...flows, ...teams, ...users];
+
+const currentPath = Astro.url.pathname;
+
+const getDefaultUrl = (route: string, defaultValue: string) => {
+  if (domains.length > 0) return buildUrl(`/${route}/domains/${domains[0].data.id}/${domains[0].data.latestVersion}`);
+  if (services.length > 0) return buildUrl(`/${route}/services/${services[0].data.id}/${services[0].data.latestVersion}`);
+  if (messages.length > 0)
+    return buildUrl(`/${route}/${messages[0].collection}/${messages[0].data.id}/${messages[0].data.latestVersion}`);
+  if (flows.length > 0) return buildUrl(`/${route}/flows/${flows[0].data.id}/${flows[0].data.latestVersion}`);
+  return buildUrl(defaultValue);
+};
+
+const navigationItems = [
+  {
+    id: '/',
+    label: 'Home',
+    icon: House,
+    href: buildUrl('/'),
+    current: currentPath === '/',
+    sidebar: false,
+  },
+  {
+    id: '/docs',
+    label: 'Documentation',
+    icon: BookOpenText,
+    href: getDefaultUrl('docs', '/docs'),
+    current: currentPath.includes('/docs'),
+    sidebar: true,
+  },
+  {
+    id: '/visualiser',
+    label: 'Visualiser',
+    icon: Workflow,
+    href: getDefaultUrl('visualiser', '/visualiser'),
+    current: currentPath.includes('/visualiser'),
+    sidebar: true,
+  },
+  {
+    id: '/discover',
+    label: 'Explore',
+    icon: TableProperties,
+    href: buildUrl('/discover/events'),
+    current: currentPath.includes('/discover/'),
+    sidebar: false,
+  },
+];
+
+const eventCatalogConfig = config as CatalogConfig;
+
+const {
+  services: servicesConfig,
+  domains: domainsConfig,
+  messages: messagesConfig,
+  flows: flowsConfig,
+  teams: teamsConfig,
+  users: usersConfig,
+} = eventCatalogConfig?.docs?.sidebar || {};
+
+const getConfigValue = (obj: any, key: string, defaultValue: any) => {
+  return obj?.[key] ?? defaultValue;
+};
+
+const visibleCollections: { [key: string]: boolean } = {
+  events: getConfigValue(messagesConfig, 'visible', true),
+  commands: getConfigValue(messagesConfig, 'visible', true),
+  domains: getConfigValue(domainsConfig, 'visible', true),
+  flows: getConfigValue(flowsConfig, 'visible', true),
+  services: getConfigValue(servicesConfig, 'visible', true),
+  teams: getConfigValue(teamsConfig, 'visible', true),
+  users: getConfigValue(usersConfig, 'visible', true),
+};
+
+const sideNav = allData.reduce((acc, item) => {
+  const title = item.collection;
+  const group = acc[title] || [];
+  const currentPath = Astro.url.pathname;
+  const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
+
+  if (currentPath.includes('visualiser') && (item.collection === 'teams' || item.collection === 'users')) {
+    return acc;
+  }
+
+  const navigationItem = {
+    label: item.data.name,
+    version: item.collection === 'teams' || item.collection === 'users' ? null : item.data.version,
+    // items: item.collection === 'users' ? [] : item.headings,
+    visible: visibleCollections[item.collection],
+    // @ts-ignore
+    href: item.data.version
+      ? // @ts-ignore
+        buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`)
+      : buildUrl(`/${route}/${item.collection}/${item.data.id}`),
+    collection: item.collection,
+  };
+
+  group.push(navigationItem);
+
+  return {
+    ...acc,
+    [title]: group,
+  };
+}, {} as any);
+
+const currentNavigationItem = navigationItems.find((item) => item.current);
+const { title, description, sidebar: showSideBarOverride } = Astro.props;
+
+const showSideBarOnLoad = currentNavigationItem?.sidebar;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
+    <style>
+      .sidebar-transition {
+        transition-property: width, transform;
+        transition-duration: 300ms;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .tooltip {
+        visibility: hidden;
+        position: absolute;
+      }
+      .has-tooltip:hover .tooltip {
+        visibility: visible;
+        z-index: 100;
+      }
+    </style>
+  </head>
+  <body>
+    <Header />
+    <div class="flex">
+      <aside class="flex" id="eventcatalog-vertical-nav">
+        <div
+          class="fixed flex flex-col items-center w-16 h-screen py-4 bg-white bg-gradient-to-b from-white to-gray-100 border-r border-gray-200 z-20 shadow-md justify-between"
+        >
+          <nav class="flex flex-col h-[84vh] justify-between">
+            <div class="flex flex-col items-center flex-1 space-y-8">
+              {
+                navigationItems.map((item) => {
+                  return (
+                    <a
+                      id={item.id}
+                      data-role="nav-item"
+                      href={item.href}
+                      class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${item.current ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'}`}
+                    >
+                      <div class="has-tooltip">
+                        <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
+                          {item.label}
+                        </span>
+                        <item.icon className="h-6 w-6  " />
+                      </div>
+                    </a>
+                  );
+                })
+              }
+            </div>
+            <div class="flex flex-col items-center mt-4 space-y-4 -mb-10">
+              <a href="https://discord.com/invite/3rjaZMmrAm" class="text-gray-500 has-tooltip">
+                <span class="tooltip rounded shadow-lg p-1 text-xs bg-black text-white ml-10 w-[162px]"
+                  >Join EventCatalog Discord</span
+                >
+                <img src="/icons/discord.svg" class="w-7 h-7" />
+              </a>
+              <a href="https://github.com/event-catalog/eventcatalog" class="text-gray-500 has-tooltip">
+                <span class="tooltip rounded shadow-lg p-1 text-xs bg-black text-white ml-10 w-[175px]"
+                  >Found an issue? Let us know</span
+                >
+                <img src="/icons/github-purple.svg" class="w-7 h-7" />
+              </a>
+            </div>
+          </nav>
+        </div>
+
+        <div
+          id="sidebar"
+          class={`sidebar-transition h-[100vh]  max-h-screen px-5 py-4 overflow-y-auto bg-white bg-gradient-to-b from-white  to-gray-100 border-r border-gray-200 w-60 shadow-lg ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
+        >
+          <CatalogResourcesSideBar resources={sideNav} currentPath={currentPath} client:load />
+        </div>
+      </aside>
+      <main class={`sidebar-transition w-full max-h-screen ${showSideBarOnLoad ? 'ml-0' : 'ml-16'}`} id="content">
+        <slot />
+      </main>
+    </div>
+  </body>
+</html>
+<script define:vars={{ navigationItems, currentNavigationItem, showSideBarOnLoad }}>
+  // Listen for Astro transititions
+  document.addEventListener('astro:page-load', () => {
+    document.dispatchEvent(new CustomEvent('contentLoaded'));
+  });
+
+  // Listen for DOM loaded
+  document.addEventListener('DOMContentLoaded', () => {
+    document.dispatchEvent(new CustomEvent('contentLoaded'));
+  });
+
+  document.addEventListener('contentLoaded', () => {
+    const sidebar = document.getElementById('sidebar');
+    const content = document.getElementById('content');
+    const currentPath = window.location.href;
+
+    // Hide the sidebar if the current navigation item is not a sidebar item
+    if (!currentNavigationItem.sidebar || currentPath.includes('asyncapi') || currentPath.includes('/spec')) {
+      sidebar.style.display = 'none';
+      content.style.width = '100%';
+      content.classList.add('ml-16');
+    } else {
+      sidebar.style.display = 'block';
+    }
+
+    const navItems = document.querySelectorAll('[data-role="nav-item"]');
+    let isOpen = showSideBarOnLoad;
+
+    navItems.forEach((item) => {
+      item.addEventListener('click', (e) => {
+        const currentPath = window.location.href;
+        const id = item.getAttribute('id');
+
+        const navItem = navigationItems.find((navItem) => navItem.id === id);
+
+        console.log(navItem);
+
+        if (!navItem.sidebar || !currentPath.includes(navItem.id)) {
+          window.location.href = navItem.href;
+          return;
+        }
+
+        // not on the target page then just go to it.
+        if (!currentPath.includes(navItem.id)) return;
+
+        if (currentPath.includes(navItem.id)) {
+          e.preventDefault();
+          if (isOpen) {
+            hideSidebar();
+          } else {
+            showSidebar();
+          }
+        }
+      });
+    });
+
+    function showSidebar() {
+      if (!sidebar || !content) return;
+      isOpen = true;
+      localStorage.setItem('sidebarState', 'open');
+      sidebar.style.display = 'block';
+      setTimeout(() => {
+        sidebar.style.transform = 'translateX(0)';
+        content.style.transform = 'translateX(0)';
+        content.classList.remove('ml-16');
+        content.style.width = 'calc(100% - 240px)';
+      }, 10);
+    }
+
+    function hideSidebar() {
+      if (!sidebar || !content) return;
+      isOpen = false;
+      sidebar.style.transform = 'translateX(-100%)';
+      content.style.transform = 'translateX(0px)';
+      content.style.width = '100%';
+      content.classList.add('ml-16');
+    }
+
+    if (sidebar) {
+      sidebar.addEventListener('transitionend', () => {
+        if (!isOpen && sidebar && content) {
+          sidebar.style.display = 'none';
+          content.style.transform = 'translateX(0px)';
+        }
+      });
+    }
+  });
+</script>

package/src/layouts/VisualiserLayout.astro

@@ -1,14 +1,11 @@
 ---
-import BasicList from '@components/Lists/BasicList';
-import PlainPage from '@layouts/PlainPage.astro';
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
 import { getFlows } from '@utils/flows/flows';
 import { getQueries } from '@utils/queries';
 import { getServices } from '@utils/services/services';
-import { buildUrl } from '@utils/url-builder';
-import { ViewTransitions } from 'astro:transitions';
+import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
 
 const [services, events, commands, queries, domains, flows] = await Promise.all([
   getServices(),
@@ -55,10 +52,10 @@ const getColor = (collection: string) => {
 };
 ---
 
-<PlainPage title={title} description={description}>
+<VerticalSideBarLayout title={title} description={description}>
   <div class="">
     <div class="">
-      <div class="hidden md:block">
+      <!-- <div class="hidden md:block">
         <aside class="sm:fixed grow w-56 xl:w-[19em] overflow-y-auto h-full z-10 pb-20" id="visualiser-navigation">
           <div class="w-full">
             <div class="sticky top-0 z-10 h-8 pointer-events-none -mt-7">
@@ -93,9 +90,9 @@ const getColor = (collection: string) => {
             }
           </div>
         </aside>
-      </div>
+      </div> -->
 
-      <main class="flex-1 h-full w-full relative sm:pl-60 xl:pl-80">
+      <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-primary 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"
@@ -112,9 +109,8 @@ const getColor = (collection: string) => {
         <slot />
       </main>
     </div>
-    <ViewTransitions />
   </div>
-</PlainPage>
+</VerticalSideBarLayout>
 
 <script>
   function setupSidebarToggle() {

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

@@ -14,6 +14,7 @@ import js from '@asyncapi/react-component/browser/standalone/without-parser.js?u
 import { AsyncApiComponentWP, type ConfigInterface } from '@asyncapi/react-component';
 import { pageDataLoader } from '@utils/pages/pages';
 import type { CollectionEntry } from 'astro:content';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 
 export async function getStaticPaths() {
   const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
@@ -52,9 +53,9 @@ const component = createElement(AsyncApiComponentWP, { schema: { stringified },
 const renderedComponent = renderToString(component);
 ---
 
-<PlainPage title="AsyncApi Spec">
+<VerticalSideBarLayout title="AsyncApi Spec">
   <div id="asyncapi" class="md:pr-14" set:html={renderedComponent} />
-</PlainPage>
+</VerticalSideBarLayout>
 
 <script is:inline src={js}></script>
 <script define:vars={{ schema: stringified, config }}>

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

@@ -1,5 +1,4 @@
 ---
-import Layout from '@layouts/DocsLayout.astro';
 import Footer from '@layouts/Footer.astro';
 
 import type { PageTypes } from '@types';
@@ -11,6 +10,8 @@ import 'diff2html/bundles/css/diff2html.min.css';
 import { buildUrl } from '@utils/url-builder';
 import { getVersions, getPreviousVersion } from '@utils/collections/util';
 import { getDiffsForCurrentAndPreviousVersion } from '@utils/collections/file-diffs';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { ViewTransitions } from 'astro:transitions';
 
 export async function getStaticPaths() {
   const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
@@ -100,10 +101,43 @@ const getBadge = () => {
 };
 
 const badges = [getBadge()];
+import { HomeIcon } from '@heroicons/react/20/solid';
+
+const pages = [
+  { name: 'Projects', href: '#', current: false },
+  { name: 'Project Nero', href: '#', current: true },
+];
 ---
 
-<Layout title="ChangeLog">
-  <main class="flex-1 w-full lg:pr-10 md:pt-4">
+<VerticalSideBarLayout title="ChangeLog">
+  <main class="w-full md:pt-4 px-8 overflow-y-auto h-full max-w-[95%]">
+    <nav aria-label="Breadcrumb" class="flex">
+      <ol role="list" class="flex items-center space-x-2">
+        <li>
+          <div>
+            <a
+              href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
+              class="text-sm font-medium text-gray-500 hover:text-gray-700"
+            >
+              {props.data.name}
+            </a>
+          </div>
+        </li>
+        <li>
+          <div class="flex items-center">
+            <svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-gray-300">
+              <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path>
+            </svg>
+            <a
+              href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
+              class="text-sm font-medium text-gray-500 hover:text-gray-700"
+            >
+              Changelog
+            </a>
+          </div>
+        </li>
+      </ol>
+    </nav>
     <div class="border-b border-gray-200 flex justify-between items-start py-4 w-full">
       <div>
         <h2 class="text-2xl md:text-4xl font-bold">{props.data.name} (Changelog)</h2>
@@ -131,7 +165,7 @@ const badges = [getBadge()];
         </div>
       )
     }
-    <div class="flow-root py-8">
+    <div class="flow-root py-8 w-full">
       <ul role="list" class="-mb-8">
         {
           logList.map((log, index) => (
@@ -188,4 +222,5 @@ const badges = [getBadge()];
     </div>
     <Footer />
   </main>
-</Layout>
+  <ViewTransitions />
+</VerticalSideBarLayout>