@eventcatalog/core 3.29.1 → 3.30.0

package/eventcatalog/src/layouts/VisualiserLayout.astro

@@ -53,8 +53,8 @@ const getColor = (collection: string) => {
 ---
 
 <VerticalSideBarLayout title={title} description={description}>
-  <div class="">
-    <div class="">
+  <div class="visualiser-full-bleed">
+    <div>
       <!-- <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">
@@ -144,6 +144,11 @@ const getColor = (collection: string) => {
 </script>
 
 <style>
+  .visualiser-full-bleed {
+    margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1);
+    margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);
+  }
+
   #visualiser-navigation {
     transform: translateX(0);
   }

package/eventcatalog/src/pages/_index.astro

@@ -7,6 +7,8 @@ import { getCollection } from 'astro:content';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { BookOpenText, Workflow, TableProperties, BookUser, Code2, FileJson } from 'lucide-react';
 
+const { showNestedSideBar = true } = Astro.props;
+
 // Lightweight data fetch: only raw collections, no hydration.
 // The homepage only needs counts + one item per type for default URLs.
 const [allDomains, allServices, allEvents, allCommands, allQueries, allFlows] = await Promise.all([
@@ -142,11 +144,11 @@ const quickActions = [
 ];
 ---
 
-<VerticalSideBarLayout title="EventCatalog">
+<VerticalSideBarLayout title="EventCatalog" showNestedSideBar={showNestedSideBar}>
   <div class="min-h-screen font-inter">
     <!-- Hero Section -->
     <div class="relative">
-      <main class="px-6 lg:px-8 pt-10 pb-8 max-w-[85em]">
+      <main class="px-0 pt-7 pb-8 max-w-[85em]">
         <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
           <div>
             <h1 class="text-2xl md:text-3xl font-bold mb-1 text-[rgb(var(--ec-page-text))] tracking-tight">
@@ -161,7 +163,7 @@ const quickActions = [
     </div>
 
     <!-- Main Content -->
-    <main class="px-6 lg:px-8 pb-8 max-w-[85em]">
+    <main class="px-0 pb-8 max-w-[85em]">
       <!-- Stat Cards -->
       <section class="mb-10">
         <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

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

@@ -22,9 +22,9 @@ const specifications = type === 'services' ? getSpecificationsForService(props)
 ---
 
 <VerticalSideBarLayout title={pageTitle}>
-  <main class="flex docs-layout h-full bg-[rgb(var(--ec-page-bg))]">
-    <div class="flex docs-layout w-full pl-16">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 bg-[rgb(var(--ec-page-bg))]">
+  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         {type === 'domains' && <DomainGrid domain={domain} client:load />}
         {type === 'services' && <MessageGrid service={props} specifications={specifications} client:load />}
       </div>

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

@@ -5,7 +5,7 @@ import VisualiserLayout from '@layouts/VisualiserLayout.astro';
 import components from '@components/MDX/components';
 import config from '@config';
 import { buildUrl } from '@utils/url-builder';
-import { ChevronDown, GitCompare, X, Rocket } from 'lucide-react';
+import { GitCompare, X, Rocket, AlignLeft, HistoryIcon } from 'lucide-react';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import { isLLMSTxtEnabled, isEventCatalogChatEnabled, isDiagramComparisonEnabled } from '@utils/feature';
 
@@ -15,7 +15,7 @@ export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 const props = await Page.getData(Astro);
-const { Content } = await render(props);
+const { Content, headings } = await render(props);
 
 const pageTitle = `Diagram | ${props.data.name}`;
 const currentVersion = props.data.version;
@@ -29,73 +29,123 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
 
 <VisualiserLayout title={pageTitle} description={props.data.summary}>
   <div class="diagram-page min-h-[calc(100vh-64px)] bg-[rgb(var(--ec-page-bg))]">
-    <header class="diagram-header border-b border-[rgb(var(--ec-page-border))]">
-      <div class="px-6 py-6 flex items-center justify-between gap-4">
-        <div class="min-w-0">
-          <div class="flex items-center gap-3">
-            <h1 class="text-2xl md:text-2xl font-bold text-[rgb(var(--ec-page-text))] truncate">
-              {props.data.name}
-            </h1>
-            {
-              hasMultipleVersions ? (
-                <div class="relative flex-shrink-0">
-                  <select
-                    id="version-select"
-                    class="appearance-none text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-transparent border border-[rgb(var(--ec-page-border))] rounded-md pl-2 pr-6 py-1 cursor-pointer hover:border-[rgb(var(--ec-accent))] transition-colors"
-                  >
-                    {allVersions.map((version: string) => (
-                      <option value={buildUrl(`/diagrams/${props.data.id}/${version}`)} selected={version === currentVersion}>
-                        v{version}
-                        {version === props.data.latestVersion ? ' (latest)' : ''}
-                      </option>
-                    ))}
-                  </select>
-                  <ChevronDown className="absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 text-[rgb(var(--ec-icon-color))] pointer-events-none" />
-                </div>
-              ) : (
-                <span class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">v{currentVersion}</span>
-              )
-            }
+    <div
+      class="flex docs-layout w-full"
+      style="padding-left: var(--ec-app-content-padding-left, 5rem); padding-right: var(--ec-app-content-padding-right, 5rem);"
+    >
+      <main class="diagram-content w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
+        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
+          <div class="flex items-start justify-between gap-4">
+            <div class="min-w-0">
+              <h1 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] truncate">
+                {props.data.name}
+              </h1>
+              {
+                props.data.summary && (
+                  <p class="pt-2 text-base font-light text-[rgb(var(--ec-page-text-muted))]">{props.data.summary}</p>
+                )
+              }
+            </div>
+
+            <div class="flex items-center gap-2">
+              <CopyAsMarkdown
+                client:only="react"
+                schemas={[]}
+                chatQuery={chatQuery}
+                chatEnabled={chatEnabled}
+                editUrl=""
+                markdownDownloadEnabled={markdownDownloadEnabled}
+                rssFeedEnabled={false}
+                preferChatAsDefault={chatEnabled}
+                chatButtonText="Ask about this diagram"
+              />
+            </div>
           </div>
-          {props.data.summary && <p class="mt-1 text-sm text-[rgb(var(--ec-page-text-muted))]">{props.data.summary}</p>}
         </div>
 
-        <div class="flex items-center gap-2">
-          {
-            hasMultipleVersions && (
-              <button
-                id="compare-btn"
-                type="button"
-                data-scale-enabled={scaleEnabled}
-                class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] bg-[rgb(var(--ec-dropdown-bg))] border border-[rgb(var(--ec-dropdown-border))] rounded-md shadow-xs hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))] transition-colors"
-              >
-                <GitCompare className="w-4 h-4" />
-                Compare diagram versions
-              </button>
-            )
-          }
-          <CopyAsMarkdown
-            client:only="react"
-            schemas={[]}
-            chatQuery={chatQuery}
-            chatEnabled={chatEnabled}
-            editUrl=""
-            markdownDownloadEnabled={markdownDownloadEnabled}
-            rssFeedEnabled={false}
-            preferChatAsDefault={chatEnabled}
-            chatButtonText="Ask about this diagram"
-          />
-        </div>
-      </div>
-    </header>
+        <article
+          class="diagram-article prose prose-md w-full max-w-none py-4 text-[15px] dark:prose-invert prose-headings:text-[rgb(var(--ec-page-text))] prose-p:text-[rgb(var(--ec-page-text))] prose-strong:text-[rgb(var(--ec-page-text))] prose-code:text-[rgb(var(--ec-page-text))]"
+        >
+          <Content components={components(props)} />
+        </article>
+      </main>
 
-    <main class="diagram-content p-6">
-      <article
-        class="diagram-article prose prose-lg max-w-none dark:prose-invert prose-headings:text-[rgb(var(--ec-page-text))] prose-p:text-[rgb(var(--ec-page-text))] prose-strong:text-[rgb(var(--ec-page-text))] prose-code:text-[rgb(var(--ec-page-text))]"
-      >
-        <Content components={components(props)} />
-      </article>
-    </main>
+      {
+        headings.length > 0 && (
+          <aside
+            id="eventcatalog-docs-sidebar"
+            class="hidden xl:block sticky top-[4rem] self-start w-[280px] max-h-[calc(100vh-4rem)] overflow-y-auto py-2 flex-shrink-0 pr-10 bg-[rgb(var(--ec-page-bg))]"
+          >
+            <div class="mt-8 space-y-8">
+              <div>
+                <h3 class="text-xs text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2 mb-4">
+                  <AlignLeft className="w-4 h-4" />
+                  On this page
+                </h3>
+                <nav class="text-xs border-l border-[rgb(var(--ec-page-border))]">
+                  {headings.map((heading) => {
+                    const level = heading.depth > 2 ? heading.depth : 1;
+                    if (heading.depth > 3) {
+                      return null;
+                    }
+                    return (
+                      <a
+                        href={`#${heading.slug}`}
+                        class="block py-1.5 pr-2.5 leading-5 text-[rgb(var(--ec-page-text-muted))] hover:border-[rgb(var(--ec-page-border))] hover:text-[rgb(var(--ec-page-text))] border-l-2 border-transparent -ml-px transition-all duration-200"
+                        style={`padding-left: ${level * 0.75}rem`}
+                      >
+                        {heading.text}
+                      </a>
+                    );
+                  })}
+                </nav>
+              </div>
+              {hasMultipleVersions && (
+                <div>
+                  <h3 class="text-xs text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2 mb-4">
+                    <HistoryIcon className="w-4 h-4" />
+                    {`Versions (${allVersions.length})`}
+                  </h3>
+                  <ul role="list" class="space-y-2">
+                    {allVersions.map((version: string) => {
+                      const isCurrent = version === currentVersion;
+                      return (
+                        <li>
+                          <a
+                            href={buildUrl(`/diagrams/${props.data.id}/${version}`)}
+                            class={`flex items-center gap-2 text-xs transition-colors ${
+                              isCurrent
+                                ? 'text-[rgb(var(--ec-accent))] font-medium'
+                                : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
+                            }`}
+                          >
+                            <HistoryIcon className="h-4 w-4 flex-shrink-0" />
+                            <span>{version === props.data.latestVersion ? `v${version} (latest)` : `v${version}`}</span>
+                          </a>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
+              {hasMultipleVersions && (
+                <div>
+                  <button
+                    id="compare-btn"
+                    type="button"
+                    data-scale-enabled={scaleEnabled}
+                    class="inline-flex w-full items-center justify-center gap-1.5 rounded-md border border-[rgb(var(--ec-dropdown-border))] bg-[rgb(var(--ec-dropdown-bg))] px-3 py-2 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] shadow-xs transition-colors hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))]"
+                  >
+                    <GitCompare className="w-4 h-4" />
+                    Compare diagram versions
+                  </button>
+                </div>
+              )}
+            </div>
+          </aside>
+        )
+      }
+    </div>
   </div>
 
   {/* Upgrade modal - shown when Scale is not enabled */}
@@ -203,6 +253,21 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
   <ClientRouter />
 </VisualiserLayout>
 
+<style is:global>
+  .diagram-page .prose {
+    max-width: none;
+    overflow: auto;
+  }
+
+  .toc-active-text {
+    color: rgb(var(--ec-accent));
+  }
+
+  .toc-active-border {
+    border-color: rgb(var(--ec-accent));
+  }
+</style>
+
 <script is:inline define:vars={{ config, baseUrl: import.meta.env.BASE_URL }}>
   window.eventcatalog = window.eventcatalog || {};
   window.eventcatalog.mermaid = config?.mermaid;
@@ -213,14 +278,6 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
   import { destroyZoomInstances, renderMermaidWithZoom } from '@utils/mermaid-zoom';
 
   function initDiagramPage() {
-    // Version selector
-    const versionSelect = document.getElementById('version-select') as HTMLSelectElement;
-    if (versionSelect) {
-      versionSelect.onchange = () => {
-        window.location.href = versionSelect.value;
-      };
-    }
-
     // Compare modal (Scale) and Upgrade modal (non-Scale)
     const compareBtn = document.getElementById('compare-btn') as HTMLButtonElement;
     const compareModal = document.getElementById('compare-modal');
@@ -316,6 +373,99 @@ const chatQuery = `Tell me about the "${props.data.name}" diagram (version ${pro
   document.addEventListener('astro:page-load', initDiagramPage);
 </script>
 
+<script>
+  // @ts-nocheck
+  function setupDiagramTocObserver() {
+    try {
+      const tocRoot = document.getElementById('eventcatalog-docs-sidebar');
+      if (!tocRoot) return;
+
+      const observerOptions = {
+        rootMargin: '0px 0px -40% 0px',
+        threshold: 0.1,
+      };
+
+      let observerPaused = false;
+
+      function highlightTocItem(id) {
+        tocRoot.querySelectorAll('.active-toc-item').forEach((link) => {
+          link.classList.remove('active-toc-item', 'toc-active-text', 'font-medium', 'toc-active-border');
+          link.classList.add('border-transparent');
+        });
+
+        const tocLink = tocRoot.querySelector(`nav a[href="#${id}"]`);
+        if (tocLink) {
+          tocLink.classList.add('active-toc-item', 'toc-active-text', 'font-medium', 'toc-active-border');
+          tocLink.classList.remove('border-transparent');
+
+          setTimeout(() => {
+            tocLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+          }, 10);
+        }
+      }
+
+      const observer = new IntersectionObserver((entries) => {
+        if (observerPaused) return;
+
+        entries.forEach((entry) => {
+          try {
+            const id = entry.target.getAttribute('id');
+            if (entry.isIntersecting && id) {
+              highlightTocItem(id);
+            }
+          } catch (entryError) {
+            console.error('Error processing intersection entry:', entryError);
+          }
+        });
+      }, observerOptions);
+
+      const prose = document.querySelector('.diagram-article.prose');
+      if (!prose) return;
+
+      const proseHeadings = prose.querySelectorAll('h1[id], h2[id], h3[id]');
+
+      if (proseHeadings.length > 0) {
+        proseHeadings.forEach((heading) => observer.observe(heading));
+      } else {
+        const allHeadings = prose.querySelectorAll('h1, h2, h3');
+
+        allHeadings.forEach((heading) => {
+          if (!heading.id) {
+            const text = heading.textContent || '';
+            const slug = text
+              .toLowerCase()
+              .replace(/[^\w\s-]/g, '')
+              .replace(/\s+/g, '-');
+            heading.id = slug;
+          }
+          observer.observe(heading);
+        });
+      }
+
+      const tocLinks = tocRoot.querySelectorAll('nav a[href^="#"]');
+      tocLinks.forEach((link) => {
+        link.addEventListener('click', () => {
+          const hrefAttr = link.getAttribute('href');
+          if (!hrefAttr) return;
+
+          const id = hrefAttr.substring(1);
+          highlightTocItem(id);
+          observerPaused = true;
+
+          setTimeout(() => {
+            observerPaused = false;
+          }, 500);
+        });
+      });
+    } catch (error) {
+      console.error('Error setting up diagram TOC highlighting:', error);
+    }
+  }
+
+  setupDiagramTocObserver();
+  document.addEventListener('astro:page-load', setupDiagramTocObserver);
+</script>
+
 <script>
   import { renderPlantUMLWithZoom } from '@utils/mermaid-zoom';