@eventcatalog/core 4.3.2 → 4.3.4

package/eventcatalog/src/components/SideNav/NestedSideBar/storage.ts

@@ -1,9 +1,11 @@
+import type { SectionCollapsePreferences } from './utils';
+
 // ============================================
 // Local Storage Persistence
 // ============================================
 
 const STORAGE_KEY = 'eventcatalog-sidebar-nav';
-const COLLAPSED_SECTIONS_KEY = 'eventcatalog-sidebar-collapsed';
+const SECTION_PREFERENCES_KEY = 'eventcatalog-sidebar-sections:v2';
 const FAVORITES_KEY = 'eventcatalog-sidebar-favorites';
 
 // ============================================
@@ -49,21 +51,28 @@ export const loadState = (): PersistedState | null => {
 // Collapsed Sections
 // ============================================
 
-export const saveCollapsedSections = (sections: Set<string>): void => {
+export const saveCollapsedSections = (preferences: SectionCollapsePreferences): void => {
   try {
-    localStorage.setItem(COLLAPSED_SECTIONS_KEY, JSON.stringify([...sections]));
+    localStorage.setItem(SECTION_PREFERENCES_KEY, JSON.stringify({ expanded: [...preferences.expanded] }));
   } catch (e) {
     console.warn('Failed to save collapsed sections:', e);
   }
 };
 
-export const loadCollapsedSections = (): Set<string> => {
+export const loadCollapsedSections = (): SectionCollapsePreferences => {
   try {
-    const stored = localStorage.getItem(COLLAPSED_SECTIONS_KEY);
-    return stored ? new Set(JSON.parse(stored)) : new Set();
+    const stored = localStorage.getItem(SECTION_PREFERENCES_KEY);
+    if (stored) {
+      const preferences = JSON.parse(stored);
+      return {
+        expanded: new Set(Array.isArray(preferences.expanded) ? preferences.expanded : []),
+      };
+    }
+
+    return { expanded: new Set() };
   } catch (e) {
     console.warn('Failed to load collapsed sections:', e);
-    return new Set();
+    return { expanded: new Set() };
   }
 };
 

package/eventcatalog/src/components/SideNav/NestedSideBar/utils.spec.ts

@@ -1,12 +1,35 @@
 import { describe, expect, it } from 'vitest';
-import { isGroupCollapsed } from './utils';
+import { canCollapseGroup, getGroupLabel, isGroupCollapsed } from './utils';
+
+const preferences = (expanded: string[] = []) => ({
+  expanded: new Set(expanded),
+});
+
+describe('sidebar group presentation', () => {
+  it('includes the visible child count in the group label', () => {
+    expect(getGroupLabel('Outbound Messages', 10)).toBe('Outbound Messages (10)');
+  });
+
+  it.each(['Quick Reference', 'Architecture', 'Resources'])('does not include the child count for %s', (title) => {
+    expect(getGroupLabel(title, 10)).toBe(title);
+  });
+
+  it('only allows groups with more than five children to collapse', () => {
+    expect(canCollapseGroup(5)).toBe(false);
+    expect(canCollapseGroup(6)).toBe(true);
+  });
+});
 
 describe('isGroupCollapsed', () => {
-  it('ignores persisted collapse state when the group cannot be expanded', () => {
-    expect(isGroupCollapsed(false, 'group-1', new Set(['group-1']))).toBe(false);
+  it('keeps groups without a caret expanded', () => {
+    expect(isGroupCollapsed(false, 'group-1', preferences())).toBe(false);
+  });
+
+  it('collapses expandable groups by default', () => {
+    expect(isGroupCollapsed(true, 'outbound-messages', preferences())).toBe(true);
   });
 
-  it('uses persisted collapse state when the group can be expanded', () => {
-    expect(isGroupCollapsed(true, 'adrs:status:superseded', new Set(['adrs:status:superseded']))).toBe(true);
+  it('uses an explicit expanded preference', () => {
+    expect(isGroupCollapsed(true, 'outbound-messages', preferences(['outbound-messages']))).toBe(false);
   });
 });

package/eventcatalog/src/components/SideNav/NestedSideBar/utils.ts

@@ -1,7 +1,20 @@
 // Shared utilities for NestedSideBar components
 
-export const isGroupCollapsed = (canCollapse: boolean, groupId: string, collapsedSections: Set<string>): boolean =>
-  canCollapse && collapsedSections.has(groupId);
+export const SIDEBAR_GROUP_COLLAPSE_THRESHOLD = 5;
+const GROUP_TITLES_WITHOUT_COUNT = new Set(['Quick Reference', 'Architecture', 'Resources']);
+
+export type SectionCollapsePreferences = {
+  expanded: Set<string>;
+};
+
+export const canCollapseGroup = (childCount: number): boolean => childCount > SIDEBAR_GROUP_COLLAPSE_THRESHOLD;
+
+export const getGroupLabel = (title: string, childCount: number): string =>
+  GROUP_TITLES_WITHOUT_COUNT.has(title) ? title : `${title} (${childCount})`;
+
+export const isGroupCollapsed = (canCollapse: boolean, groupId: string, preferences: SectionCollapsePreferences): boolean => {
+  return canCollapse && !preferences.expanded.has(groupId);
+};
 
 /**
  * Returns Tailwind classes for badge styling based on badge type.

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -93,18 +93,15 @@ const editUrl =
   (config.editUrl && (props as any)?.filePath ? buildEditUrlForResource(config.editUrl, (props as any).filePath) : '');
 ---
 
-<VerticalSideBarLayout title={doc.title || 'Documentation'} showNestedSideBar={false}>
+<VerticalSideBarLayout title={doc.title || 'Documentation'}>
+  <Fragment slot="sidebar-content">
+    <div class="h-full min-h-0">
+      <CustomDocsNav />
+    </div>
+  </Fragment>
+
   <div class="custom-docs-shell flex w-full" data-pagefind-body data-pagefind-meta={`title:${doc.title}`}>
-    <!-- Left Sidebar Navigation -->
-    <aside
-      class="sidebar-transition fixed top-0 bottom-0 left-[var(--ec-vertical-nav-width,14rem)] z-10 w-[var(--ec-custom-docs-sidebar-width,20rem)] overflow-hidden border-r border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-rail-bg))]"
-    >
-      <div class="h-full">
-        <CustomDocsNav />
-      </div>
-    </aside>
-
-    <div class="sidebar-transition flex w-full min-w-0" style="margin-left: var(--ec-custom-docs-sidebar-width, 20rem);">
+    <div class="flex w-full min-w-0">
       <main class="min-w-0 flex-1">
         <div
           class="w-full lg:mr-2 pr-10 py-10 bg-[rgb(var(--ec-page-bg))]"
@@ -275,19 +272,6 @@ const editUrl =
 </VerticalSideBarLayout>
 
 <style is:global>
-  :root {
-    --ec-custom-docs-sidebar-width: 20rem;
-  }
-
-  #eventcatalog-header {
-    left: calc(var(--ec-vertical-nav-width, 14rem) + var(--ec-custom-docs-sidebar-width, 20rem)) !important;
-  }
-
-  .custom-docs-shell {
-    margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1);
-    margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);
-  }
-
   .mermaid svg {
     margin: 1em auto 2em;
   }

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -449,9 +449,25 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         }
       })();
     </script>
+    <script is:inline>
+      (() => {
+        const sidebarWidthStorageKey = 'eventcatalog-sidebar-width:v1';
+        const minimumSidebarWidth = 224;
+        const maximumSidebarWidth = 576;
+
+        try {
+          const savedWidth = Number(localStorage.getItem(sidebarWidthStorageKey));
+          if (Number.isFinite(savedWidth) && savedWidth > 0) {
+            const width = Math.min(maximumSidebarWidth, Math.max(minimumSidebarWidth, savedWidth));
+            document.documentElement.style.setProperty('--ec-sidebar-panel-width', `${width}px`);
+          }
+        } catch (error) {}
+      })();
+    </script>
     <style is:global>
       :root {
         --ec-vertical-nav-width: 14rem;
+        --ec-sidebar-panel-width: 17rem;
       }
 
       :root[data-vertical-nav-collapsed='true'] {
@@ -472,7 +488,6 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         min-height: 100vh;
         min-height: 100dvh;
         background-color: rgb(var(--ec-page-bg));
-        --ec-sidebar-panel-width: 17rem;
         display: flex;
         flex-direction: column;
       }
@@ -580,7 +595,44 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         top: 0;
         left: var(--ec-vertical-nav-width);
         z-index: 20;
-        overflow-y: auto;
+        overflow: hidden;
+      }
+      .sidebar-resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 30;
+        width: 8px;
+        height: 100%;
+        cursor: col-resize;
+        touch-action: none;
+      }
+      .sidebar-resize-handle::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 2px;
+        content: '';
+        background: rgb(var(--ec-accent) / 0.65);
+        opacity: 0;
+        transform: translateX(-50%);
+        transition: opacity 150ms ease;
+      }
+      .sidebar-resize-handle:hover::after,
+      .sidebar-resize-handle:focus-visible::after,
+      body.sidebar-is-resizing .sidebar-resize-handle::after {
+        opacity: 1;
+      }
+      .sidebar-resize-handle:focus-visible {
+        outline: none;
+      }
+      body.sidebar-is-resizing {
+        cursor: col-resize;
+        user-select: none;
+      }
+      body.sidebar-is-resizing .sidebar-transition {
+        transition: none;
       }
       .content-panel {
         min-width: 0;
@@ -754,14 +806,22 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         </div>
       </aside>
       {
-        showNestedSideBar &&
-          (Astro.slots.has('sidebar-content') ? (
-            <aside id="sidebar" class="sidebar-panel sidebar-transition">
-              <slot name="sidebar-content" />
-            </aside>
-          ) : (
-            <SideNav id="sidebar" class={`sidebar-panel sidebar-transition`} />
-          ))
+        showNestedSideBar && (
+          <aside id="sidebar" class="sidebar-panel sidebar-transition">
+            {Astro.slots.has('sidebar-content') ? <slot name="sidebar-content" /> : <SideNav class="h-full min-h-0" />}
+            <div
+              id="sidebar-resize-handle"
+              class="sidebar-resize-handle"
+              role="separator"
+              aria-label="Resize sidebar"
+              aria-orientation="vertical"
+              aria-valuemin="224"
+              aria-valuemax="576"
+              aria-valuenow="272"
+              tabindex="0"
+            />
+          </aside>
+        )
       }
       <main class="content-panel sidebar-transition w-full bg-[rgb(var(--ec-page-bg))]" id="content">
         {
@@ -803,6 +863,9 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
   }}
 >
   const VERTICAL_NAV_STORAGE_KEY = 'eventcatalog-vertical-nav-collapsed';
+  const SIDEBAR_WIDTH_STORAGE_KEY = 'eventcatalog-sidebar-width:v1';
+  const MINIMUM_SIDEBAR_WIDTH = 224;
+  const MAXIMUM_SIDEBAR_WIDTH = 576;
   const ACTIVE_NAV_CLASSES = [
     'border-[rgb(var(--ec-accent)/0.2)]',
     'bg-[rgb(var(--ec-page-bg)/0.88)]',
@@ -926,6 +989,80 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
     }
   };
 
+  const clampSidebarWidth = (width) => Math.min(MAXIMUM_SIDEBAR_WIDTH, Math.max(MINIMUM_SIDEBAR_WIDTH, width));
+
+  const applySidebarWidth = (width) => {
+    const nextWidth = clampSidebarWidth(width);
+    document.documentElement.style.setProperty('--ec-sidebar-panel-width', `${nextWidth}px`);
+
+    const resizeHandle = document.getElementById('sidebar-resize-handle');
+    resizeHandle?.setAttribute('aria-valuenow', String(Math.round(nextWidth)));
+    return nextWidth;
+  };
+
+  const persistSidebarWidth = (width) => {
+    try {
+      localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, String(Math.round(width)));
+    } catch (error) {}
+  };
+
+  const getPersistedSidebarWidth = () => {
+    try {
+      const savedWidth = Number(localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY));
+      return Number.isFinite(savedWidth) && savedWidth > 0 ? clampSidebarWidth(savedWidth) : null;
+    } catch (error) {
+      return null;
+    }
+  };
+
+  const setupSidebarResize = () => {
+    const sidebar = document.getElementById('sidebar');
+    const resizeHandle = document.getElementById('sidebar-resize-handle');
+    if (!sidebar || !resizeHandle) return;
+
+    const persistedWidth = getPersistedSidebarWidth();
+    const currentWidth = persistedWidth ?? sidebar.getBoundingClientRect().width;
+    applySidebarWidth(currentWidth);
+
+    resizeHandle.onpointerdown = (event) => {
+      if (event.button !== 0) return;
+
+      const startX = event.clientX;
+      const startWidth = sidebar.getBoundingClientRect().width;
+      document.body.classList.add('sidebar-is-resizing');
+      resizeHandle.setPointerCapture(event.pointerId);
+
+      resizeHandle.onpointermove = (moveEvent) => {
+        applySidebarWidth(startWidth + moveEvent.clientX - startX);
+      };
+
+      const finishResize = (upEvent) => {
+        const finalWidth = applySidebarWidth(startWidth + upEvent.clientX - startX);
+        persistSidebarWidth(finalWidth);
+        document.body.classList.remove('sidebar-is-resizing');
+        if (resizeHandle.hasPointerCapture(upEvent.pointerId)) {
+          resizeHandle.releasePointerCapture(upEvent.pointerId);
+        }
+        resizeHandle.onpointermove = null;
+        resizeHandle.onpointerup = null;
+        resizeHandle.onpointercancel = null;
+      };
+
+      resizeHandle.onpointerup = finishResize;
+      resizeHandle.onpointercancel = finishResize;
+    };
+
+    resizeHandle.onkeydown = (event) => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+
+      event.preventDefault();
+      const direction = event.key === 'ArrowLeft' ? -1 : 1;
+      const step = event.shiftKey ? 32 : 16;
+      const nextWidth = applySidebarWidth(sidebar.getBoundingClientRect().width + direction * step);
+      persistSidebarWidth(nextWidth);
+    };
+  };
+
   // Apply immediately when this script executes so transitions don't briefly re-open the rail.
   applyPersistedVerticalNavState();
 
@@ -1015,6 +1152,7 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
     }
 
     setVerticalNavCollapsedState(getPersistedVerticalNavCollapsedState());
+    setupSidebarResize();
 
     syncNavItemStates();
 

package/eventcatalog/src/pages/docs/services/[id]/[docType]/[docId]/index.astro

@@ -0,0 +1,25 @@
+---
+import LatestVersionRedirect from '@components/LatestVersionRedirect.astro';
+import { isResourceDocsEnabled, isSSR } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
+import { Page as VersionedPage } from '../../../../[type]/[id]/[version]/[docType]/[docId]/_index.data';
+import { getLatestServicePaths, getLatestServiceVersion } from '../../../_latest-version-route';
+
+export const prerender = !isSSR();
+export const getStaticPaths = async () => getLatestServicePaths(await VersionedPage.getStaticPaths());
+
+const { id, docType, docId } = Astro.params;
+const version = Astro.props.redirectVersion ?? (id ? await getLatestServiceVersion(id) : undefined);
+
+if (!isResourceDocsEnabled() || !id || !docType || !docId || !version) {
+  throw new Response(null, { status: 404, statusText: 'Resource documentation not found' });
+}
+
+const redirectUrl = buildUrl(`/docs/services/${id}/${version}/${docType}/${docId}`);
+
+if (isSSR()) {
+  return Astro.redirect(`${redirectUrl}${Astro.url.search}${Astro.url.hash}`);
+}
+---
+
+<LatestVersionRedirect title="Latest service documentation" redirectUrl={redirectUrl} />

package/eventcatalog/src/pages/docs/services/[id]/asyncapi/[filename].astro

@@ -0,0 +1,25 @@
+---
+import LatestVersionRedirect from '@components/LatestVersionRedirect.astro';
+import { isSSR } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
+import { Page as VersionedPage } from '../../../[type]/[id]/[version]/asyncapi/_[filename].data';
+import { getLatestServicePaths, getLatestServiceVersion } from '../../_latest-version-route';
+
+export const prerender = !isSSR();
+export const getStaticPaths = async () => getLatestServicePaths(await VersionedPage.getStaticPaths());
+
+const { id, filename } = Astro.params;
+const version = Astro.props.redirectVersion ?? (id ? await getLatestServiceVersion(id) : undefined);
+
+if (!id || !filename || !version) {
+  throw new Response(null, { status: 404, statusText: 'AsyncAPI specification not found' });
+}
+
+const redirectUrl = buildUrl(`/docs/services/${id}/${version}/asyncapi/${filename}`);
+
+if (isSSR()) {
+  return Astro.redirect(`${redirectUrl}${Astro.url.search}${Astro.url.hash}`);
+}
+---
+
+<LatestVersionRedirect title="Latest AsyncAPI specification" redirectUrl={redirectUrl} />

package/eventcatalog/src/pages/docs/services/[id]/changelog/index.astro

@@ -0,0 +1,25 @@
+---
+import LatestVersionRedirect from '@components/LatestVersionRedirect.astro';
+import { isChangelogEnabled, isSSR } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
+import { Page as VersionedPage } from '../../../[type]/[id]/[version]/changelog/_index.data';
+import { getLatestServicePaths, getLatestServiceVersion } from '../../_latest-version-route';
+
+export const prerender = !isSSR();
+export const getStaticPaths = async () => getLatestServicePaths(await VersionedPage.getStaticPaths());
+
+const { id } = Astro.params;
+const version = Astro.props.redirectVersion ?? (id ? await getLatestServiceVersion(id) : undefined);
+
+if (!isChangelogEnabled() || !id || !version) {
+  throw new Response(null, { status: 404, statusText: 'Changelog not found' });
+}
+
+const redirectUrl = buildUrl(`/docs/services/${id}/${version}/changelog`);
+
+if (isSSR()) {
+  return Astro.redirect(`${redirectUrl}${Astro.url.search}${Astro.url.hash}`);
+}
+---
+
+<LatestVersionRedirect title="Latest service changelog" redirectUrl={redirectUrl} />

package/eventcatalog/src/pages/docs/services/[id]/graphql/[filename].astro

@@ -0,0 +1,25 @@
+---
+import LatestVersionRedirect from '@components/LatestVersionRedirect.astro';
+import { isSSR } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
+import { Page as VersionedPage } from '../../../[type]/[id]/[version]/graphql/_[filename].data';
+import { getLatestServicePaths, getLatestServiceVersion } from '../../_latest-version-route';
+
+export const prerender = !isSSR();
+export const getStaticPaths = async () => getLatestServicePaths(await VersionedPage.getStaticPaths());
+
+const { id, filename } = Astro.params;
+const version = Astro.props.redirectVersion ?? (id ? await getLatestServiceVersion(id) : undefined);
+
+if (!id || !filename || !version) {
+  throw new Response(null, { status: 404, statusText: 'GraphQL specification not found' });
+}
+
+const redirectUrl = buildUrl(`/docs/services/${id}/${version}/graphql/${filename}`);
+
+if (isSSR()) {
+  return Astro.redirect(`${redirectUrl}${Astro.url.search}${Astro.url.hash}`);
+}
+---
+
+<LatestVersionRedirect title="Latest GraphQL specification" redirectUrl={redirectUrl} />

package/eventcatalog/src/pages/docs/services/[id]/spec/[filename].astro

@@ -0,0 +1,25 @@
+---
+import LatestVersionRedirect from '@components/LatestVersionRedirect.astro';
+import { isSSR } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
+import { Page as VersionedPage } from '../../../[type]/[id]/[version]/spec/_[filename].data';
+import { getLatestServicePaths, getLatestServiceVersion } from '../../_latest-version-route';
+
+export const prerender = !isSSR();
+export const getStaticPaths = async () => getLatestServicePaths(await VersionedPage.getStaticPaths());
+
+const { id, filename } = Astro.params;
+const version = Astro.props.redirectVersion ?? (id ? await getLatestServiceVersion(id) : undefined);
+
+if (!id || !filename || !version) {
+  throw new Response(null, { status: 404, statusText: 'OpenAPI specification not found' });
+}
+
+const redirectUrl = buildUrl(`/docs/services/${id}/${version}/spec/${filename}`);
+
+if (isSSR()) {
+  return Astro.redirect(`${redirectUrl}${Astro.url.search}${Astro.url.hash}`);
+}
+---
+
+<LatestVersionRedirect title="Latest OpenAPI specification" redirectUrl={redirectUrl} />

package/eventcatalog/src/pages/docs/services/_latest-version-route.ts

@@ -0,0 +1,42 @@
+import type { CollectionEntry } from 'astro:content';
+
+type StaticPath = {
+  params: Record<string, string | undefined>;
+  props?: Record<string, unknown>;
+};
+
+type LatestService = CollectionEntry<'services'>;
+
+export const toLatestServicePaths = (paths: StaticPath[], latestServices: LatestService[]): StaticPath[] => {
+  const latestVersions = new Map(latestServices.map((service) => [service.data.id, service.data.version]));
+
+  return paths.flatMap(({ params, props = {} }) => {
+    const { type, version, ...aliasParams } = params;
+
+    if (type !== 'services' || !params.id || latestVersions.get(params.id) !== version) {
+      return [];
+    }
+
+    return [
+      {
+        params: aliasParams,
+        props: {
+          ...props,
+          redirectVersion: version,
+        },
+      },
+    ];
+  });
+};
+
+export const getLatestServicePaths = async (paths: StaticPath[]): Promise<StaticPath[]> => {
+  const { getServices } = await import('@utils/collections/services');
+  const latestServices = await getServices({ getAllVersions: false });
+  return toLatestServicePaths(paths, latestServices);
+};
+
+export const getLatestServiceVersion = async (id: string): Promise<string | undefined> => {
+  const { getServices } = await import('@utils/collections/services');
+  const latestServices = await getServices({ getAllVersions: false });
+  return latestServices.find((service) => service.data.id === id)?.data.version;
+};

package/eventcatalog/src/stores/sidebar-store/builders/service.ts

@@ -58,12 +58,15 @@ export const buildServiceNode = (
   const renderEntities = serviceEntities.length > 0 && shouldRenderSideBarSection(service, 'entities');
   const renderOwners = owners.length > 0 && shouldRenderSideBarSection(service, 'owners');
   const renderRepository = service.data.repository && shouldRenderSideBarSection(service, 'repository');
+  const isLatestVersion = service.data.version === service.data.latestVersion;
+  const docsBasePath = `/docs/services/${service.data.id}${isLatestVersion ? '' : `/${service.data.version}`}`;
   const docsSection = buildResourceDocsSection(
     'services',
     service.data.id,
     service.data.version,
     context.resourceDocs,
-    context.resourceDocCategories
+    context.resourceDocCategories,
+    { includeVersionInUrl: !isLatestVersion }
   );
 
   // Diagrams
@@ -82,11 +85,11 @@ export const buildServiceNode = (
     pages: [
       buildQuickReferenceSection(
         [
-          { title: 'Overview', href: buildUrl(`/docs/services/${service.data.id}/${service.data.version}`) },
+          { title: 'Overview', href: buildUrl(docsBasePath) },
           isChangelogEnabled() &&
             shouldRenderSideBarSection(service, 'changelog') && {
               title: 'Changelog',
-              href: buildUrl(`/docs/services/${service.data.id}/${service.data.version}/changelog`),
+              href: buildUrl(`${docsBasePath}/changelog`),
             },
         ].filter(Boolean) as { title: string; href: string }[]
       ),
@@ -135,25 +138,19 @@ export const buildServiceNode = (
             type: 'item',
             title: `${specification.name}`,
             leftIcon: '/icons/openapi-black.svg',
-            href: buildUrl(
-              `/docs/services/${service.data.id}/${service.data.version}/spec/${specification.filenameWithoutExtension}`
-            ),
+            href: buildUrl(`${docsBasePath}/spec/${specification.filenameWithoutExtension}`),
           })),
           ...asyncAPISpecifications.map((specification) => ({
             type: 'item',
             title: `${specification.name}`,
             leftIcon: '/icons/asyncapi-black.svg',
-            href: buildUrl(
-              `/docs/services/${service.data.id}/${service.data.version}/asyncapi/${specification.filenameWithoutExtension}`
-            ),
+            href: buildUrl(`${docsBasePath}/asyncapi/${specification.filenameWithoutExtension}`),
           })),
           ...graphQLSpecifications.map((specification) => ({
             type: 'item',
             title: `${specification.name}`,
             leftIcon: '/icons/graphql-black.svg',
-            href: buildUrl(
-              `/docs/services/${service.data.id}/${service.data.version}/graphql/${specification.filenameWithoutExtension}`
-            ),
+            href: buildUrl(`${docsBasePath}/graphql/${specification.filenameWithoutExtension}`),
           })),
         ],
       },

package/eventcatalog/src/stores/sidebar-store/builders/shared.ts

@@ -189,8 +189,10 @@ export const buildResourceDocsSection = (
   id: string,
   version: string,
   resourceDocs: ResourceDocEntry[],
-  resourceDocCategories: ResourceDocCategoryEntry[]
+  resourceDocCategories: ResourceDocCategoryEntry[],
+  options: { includeVersionInUrl?: boolean } = {}
 ): NavNode | null => {
+  const { includeVersionInUrl = true } = options;
   const docsForResource = resourceDocs.filter(
     (doc) => doc.data.resourceCollection === collection && doc.data.resourceId === id && doc.data.resourceVersion === version
   );
@@ -249,7 +251,7 @@ export const buildResourceDocsSection = (
         type: 'item',
         title: doc.data.title || doc.data.id,
         href: buildUrl(
-          `/docs/${collection}/${id}/${version}/${encodeURIComponent(doc.data.type)}/${encodeURIComponent(doc.data.id)}`
+          `/docs/${collection}/${id}${includeVersionInUrl ? `/${version}` : ''}/${encodeURIComponent(doc.data.type)}/${encodeURIComponent(doc.data.id)}`
         ),
       })),
     })),

package/eventcatalog/src/stores/sidebar-store/state.ts

@@ -68,7 +68,7 @@ const groupAdrsByStatus = (adrs: Adr[]): NavNode[] =>
 
     groups.push({
       type: 'group',
-      title: `${formatAdrStatus(status)} (${adrsForStatus.length})`,
+      title: formatAdrStatus(status),
       collapseKey: `adrs:status:${status}`,
       subtle: true,
       pages: [...adrsForStatus].sort(byResourceName).map(getAdrNodeKey),

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "4.3.2",
+  "version": "4.3.4",
   "publishConfig": {
     "access": "public"
   },
@@ -116,9 +116,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
-    "@eventcatalog/linter": "1.1.8",
+    "@eventcatalog/sdk": "2.26.3",
     "@eventcatalog/visualiser": "^4.1.1",
-    "@eventcatalog/sdk": "2.26.3"
+    "@eventcatalog/linter": "1.1.8"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",