@eventcatalog/core 3.14.6 → 3.15.0-beta.0

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/_index.data.ts

@@ -0,0 +1,86 @@
+import { isSSR, isResourceDocsEnabled } from '@utils/feature';
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { getResourceDocs, getResourceDocsForResource, type ResourceCollection } from '@utils/collections/resource-docs';
+
+const supportedResourceCollections = new Set<ResourceCollection>([
+  'domains',
+  'services',
+  'events',
+  'commands',
+  'queries',
+  'flows',
+  'containers',
+  'channels',
+  'entities',
+  'data-products',
+]);
+
+export class Page extends HybridPage {
+  static async getStaticPaths() {
+    if (isSSR() || !isResourceDocsEnabled()) {
+      return [];
+    }
+
+    const docs = await getResourceDocs();
+    const latestDocs = docs.filter((doc) => doc.data.version === doc.data.latestVersion);
+
+    return latestDocs.map((doc) => ({
+      params: {
+        type: doc.data.resourceCollection,
+        id: doc.data.resourceId,
+        version: doc.data.resourceVersion,
+        docType: doc.data.type,
+        docId: doc.data.id,
+      },
+      props: {},
+    }));
+  }
+
+  protected static async fetchData(params: any) {
+    if (!isResourceDocsEnabled()) {
+      return null;
+    }
+
+    const decodeParam = (value: string) => {
+      try {
+        return decodeURIComponent(value);
+      } catch {
+        return value;
+      }
+    };
+
+    const type = decodeParam(params.type);
+    const id = decodeParam(params.id);
+    const version = decodeParam(params.version);
+    const docType = decodeParam(params.docType);
+    const docId = decodeParam(params.docId);
+    if (!type || !id || !version || !docType || !docId) {
+      return null;
+    }
+
+    if (!supportedResourceCollections.has(type as ResourceCollection)) {
+      return null;
+    }
+
+    const docsForResource = await getResourceDocsForResource(type as ResourceCollection, id, version);
+    const doc = docsForResource.find(
+      (resourceDoc) =>
+        resourceDoc.data.type === docType &&
+        resourceDoc.data.id === docId &&
+        resourceDoc.data.version === resourceDoc.data.latestVersion
+    );
+
+    if (!doc) {
+      return null;
+    }
+
+    return doc;
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Resource documentation not found',
+    });
+  }
+}

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

@@ -0,0 +1,195 @@
+---
+import { render } from 'astro:content';
+
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import components from '@components/MDX/components';
+import { buildUrl } from '@utils/url-builder';
+import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
+import { isResourceDocsEnabled } from '@utils/feature';
+import { getIcon } from '@utils/badges';
+import { collectionToResourceMap } from '@utils/collections/util';
+
+import { Page } from './_index.data';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+if (!isResourceDocsEnabled()) {
+  return Astro.redirect(buildUrl('/docs/custom/feature'));
+}
+
+const props = await Page.getData(Astro);
+const { Content, headings } = await render(props);
+
+const title = props.data.title || props.data.id;
+const pageTitle = `${title} | ${props.data.resourceId}`;
+const versions = props.data.versions || [props.data.version];
+const badges = (props.data.badges || []).map((badge: any) => ({
+  ...badge,
+  iconComponent: badge.icon ? getIcon(badge.icon) : null,
+}));
+
+const docsBasePath = `/docs/${props.data.resourceCollection}/${props.data.resourceId}/${props.data.resourceVersion}/${encodeURIComponent(props.data.type)}/${encodeURIComponent(props.data.id)}`;
+const singularResourceName =
+  collectionToResourceMap[props.data.resourceCollection as keyof typeof collectionToResourceMap] ??
+  props.data.resourceCollection.slice(0, props.data.resourceCollection.length - 1);
+
+const pagefindAttributes =
+  props.data.version === props.data.latestVersion
+    ? {
+        'data-pagefind-body': '',
+        'data-pagefind-meta': `title:${pageTitle}`,
+      }
+    : {};
+---
+
+<VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
+  <main class="flex docs-layout h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
+    <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))]">
+        <div class="border-b border-[rgb(var(--ec-page-border))] pb-4">
+          <p class="text-xs uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+            <a
+              href={buildUrl(`/docs/${props.data.resourceCollection}/${props.data.resourceId}/${props.data.resourceVersion}`)}
+              class="hover:underline"
+            >
+              {singularResourceName}: {props.data.resourceId}
+            </a>
+          </p>
+          <div class="flex items-center gap-2 pt-1">
+            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
+            <span
+              class="text-xs rounded-md px-2 py-1 bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))]"
+            >
+              v{props.data.version}
+              {props.data.version === props.data.latestVersion && ' (latest)'}
+            </span>
+          </div>
+          {
+            props.data.summary && (
+              <p class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>
+            )
+          }
+          {
+            badges.length > 0 && (
+              <div class="flex flex-wrap gap-3 pt-4">
+                {badges.map((badge: any) => (
+                  <span
+                    class={`
+                      inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
+                      bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                      text-[rgb(var(--ec-page-text))]
+                    `}
+                  >
+                    {badge.iconComponent && (
+                      <badge.iconComponent className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />
+                    )}
+                    <span>{badge.content}</span>
+                  </span>
+                ))}
+              </div>
+            )
+          }
+        </div>
+        <div data-pagefind-ignore>
+          {
+            props.data.version !== props.data.latestVersion && (
+              <div class="rounded-md bg-[rgb(var(--ec-accent-subtle))] p-4 not-prose my-4">
+                <div class="flex">
+                  <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-[rgb(var(--ec-accent))]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path
+                        fill-rule="evenodd"
+                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-[rgb(var(--ec-accent-text))]">New version found</h3>
+                    <div class="mt-2 text-sm text-[rgb(var(--ec-accent-text))]">
+                      <p>
+                        You are looking at a previous version of the {singularResourceName} doc <strong>{title}</strong>.{' '}
+                        <a
+                          class="underline hover:text-primary block pt-2"
+                          href={buildUrl(`${docsBasePath}/${props.data.latestVersion}`)}
+                        >
+                          The latest version of this doc is <span>v{props.data.latestVersion}</span> &rarr;
+                        </a>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+          }
+        </div>
+        <div class="prose py-8 max-w-none">
+          <Content components={components(props)} />
+        </div>
+      </div>
+      <aside class="hidden lg:block sticky top-0 pb-10 w-80 overflow-y-auto border-l border-[rgb(var(--ec-page-border))] py-2">
+        <div class="sticky top-28 left-0 h-full overflow-y-auto px-6 py-4">
+          <h3 class="text-sm text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2">
+            <AlignLeftIcon className="w-4 h-4" />
+            On this page
+          </h3>
+          <nav class="space-y-1 text-sm py-4">
+            {
+              headings.map((heading) => {
+                if (heading.depth > 3) {
+                  return null;
+                }
+                return (
+                  <a
+                    href={`#${heading.slug}`}
+                    class={`block text-[12px] py-0.5 ${heading.depth === 1 ? 'font-light' : ''} text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]`}
+                    style={`padding-left: ${(heading.depth - 1) * 8}px`}
+                  >
+                    {heading.text}
+                  </a>
+                );
+              })
+            }
+          </nav>
+          <div class="space-y-2 pb-4">
+            <span class="text-xs text-[rgb(var(--ec-page-text))] font-semibold capitalize">Versions ({versions.length})</span>
+            <ul role="list" class="space-y-2">
+              {
+                versions.map((version: string) => (
+                  <li class="version-item rounded-md px-1 group w-full">
+                    <a class="flex items-center space-x-2" href={buildUrl(`${docsBasePath}/${encodeURIComponent(version)}`)}>
+                      <HistoryIcon
+                        className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))] group-hover:text-[rgb(var(--ec-accent-text))]"
+                        strokeWidth={1}
+                      />
+                      <span
+                        class={`font-light text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent-text))] ${
+                          version === props.data.version ? 'underline' : ''
+                        }`}
+                      >
+                        {version === props.data.latestVersion ? `v${version} (latest)` : `v${version}`}
+                      </span>
+                    </a>
+                  </li>
+                ))
+              }
+            </ul>
+            <div class="border-b border-[rgb(var(--ec-page-border))] pt-2"></div>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </main>
+</VerticalSideBarLayout>
+
+<style is:global>
+  .docs-layout .prose {
+    max-width: none;
+    overflow: auto;
+  }
+
+  .version-item:hover {
+    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+  }
+</style>

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

@@ -8,6 +8,7 @@ import {
   buildRepositorySection,
   buildAttachmentsSection,
   buildDiagramNavItems,
+  buildResourceDocsSection,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 
@@ -42,6 +43,13 @@ export const buildContainerNode = (
   const hasAttachments = container.data.attachments && container.data.attachments.length > 0;
 
   const renderRepository = container.data.repository && shouldRenderSideBarSection(container, 'repository');
+  const docsSection = buildResourceDocsSection(
+    'containers',
+    container.data.id,
+    container.data.version,
+    context.resourceDocs,
+    context.resourceDocCategories
+  );
 
   // Diagrams
   const containerDiagrams = container.data.diagrams || [];
@@ -60,6 +68,7 @@ export const buildContainerNode = (
           href: buildUrl(`/docs/containers/${container.data.id}/${container.data.version}`),
         },
       ]),
+      docsSection,
       renderVisualiser && {
         type: 'group',
         title: 'Architecture',

package/eventcatalog/src/stores/sidebar-store/builders/data-product.ts

@@ -1,19 +1,17 @@
 import type { CollectionEntry } from 'astro:content';
 import { buildUrl } from '@utils/url-builder';
-import type { NavNode, ChildRef } from './shared';
-import { buildQuickReferenceSection, buildOwnersSection, shouldRenderSideBarSection } from './shared';
+import type { NavNode, ChildRef, ResourceGroupContext } from './shared';
+import { buildQuickReferenceSection, buildOwnersSection, shouldRenderSideBarSection, buildResourceDocsSection } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 import { getItemsFromCollectionByIdAndSemverOrLatest, sortVersioned } from '@utils/collections/util';
 import { getSchemaFormatFromURL } from '@utils/collections/schemas';
 
-interface DataProductContext {
-  events: CollectionEntry<'events'>[];
-  commands: CollectionEntry<'commands'>[];
-  queries: CollectionEntry<'queries'>[];
-  services: CollectionEntry<'services'>[];
-  containers: CollectionEntry<'containers'>[];
+type DataProductContext = Pick<
+  ResourceGroupContext,
+  'events' | 'commands' | 'queries' | 'services' | 'containers' | 'resourceDocs' | 'resourceDocCategories'
+> & {
   channels: CollectionEntry<'channels'>[];
-}
+};
 
 // Get highest version from matched items (semver ranges may return multiple matches)
 const getHighestVersion = <T extends { data: { version: string } }>(items: T[]): T | undefined => {
@@ -68,6 +66,13 @@ export const buildDataProductNode = (
 
   const renderVisualiser = isVisualiserEnabled();
   const renderOwners = owners.length > 0 && shouldRenderSideBarSection(dataProduct, 'owners');
+  const docsSection = buildResourceDocsSection(
+    'data-products',
+    dataProduct.data.id,
+    dataProduct.data.version,
+    context.resourceDocs,
+    context.resourceDocCategories
+  );
 
   // Resolve inputs and outputs to their proper sidebar references
   const resolvedInputs = inputs.map((input) => resolvePointerToRef(input, context)).filter(Boolean) as string[];
@@ -94,6 +99,7 @@ export const buildDataProductNode = (
       buildQuickReferenceSection([
         { title: 'Overview', href: buildUrl(`/docs/data-products/${dataProduct.data.id}/${dataProduct.data.version}`) },
       ]),
+      docsSection,
       renderVisualiser && {
         type: 'group',
         title: 'Architecture',

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

@@ -9,6 +9,7 @@ import {
   buildRepositorySection,
   buildAttachmentsSection,
   buildDiagramNavItems,
+  buildResourceDocsSection,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 import { pluralizeMessageType } from '@utils/collections/messages';
@@ -41,6 +42,13 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
   const hasAttachments = domain.data.attachments && domain.data.attachments.length > 0;
 
   const renderRepository = domain.data.repository && shouldRenderSideBarSection(domain, 'repository');
+  const docsSection = buildResourceDocsSection(
+    'domains',
+    domain.data.id,
+    domain.data.version,
+    context.resourceDocs,
+    context.resourceDocCategories
+  );
 
   // Domain-level messages (sends/receives)
   const sendsMessages = domain.data.sends || [];
@@ -70,6 +78,7 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
         { title: 'Overview', href: buildUrl(`/docs/domains/${domain.data.id}/${domain.data.version}`) },
         renderUbiquitousLanguage && { title: 'Ubiquitous Language', href: buildUrl(`/docs/domains/${domain.data.id}/language`) },
       ]),
+      docsSection,
       {
         type: 'group',
         title: 'Architecture',

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

@@ -1,9 +1,17 @@
 import type { CollectionEntry } from 'astro:content';
 import { buildUrl } from '@utils/url-builder';
-import type { NavNode, ChildRef } from './shared';
-import { buildQuickReferenceSection } from './shared';
+import type { NavNode, ChildRef, ResourceGroupContext } from './shared';
+import { buildQuickReferenceSection, buildResourceDocsSection } from './shared';
+
+export const buildFlowNode = (flow: CollectionEntry<'flows'>, context: ResourceGroupContext): NavNode => {
+  const docsSection = buildResourceDocsSection(
+    'flows',
+    flow.data.id,
+    flow.data.version,
+    context.resourceDocs,
+    context.resourceDocCategories
+  );
 
-export const buildFlowNode = (flow: CollectionEntry<'flows'>): NavNode => {
   return {
     type: 'item',
     title: flow.data.name,
@@ -12,6 +20,7 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>): NavNode => {
     summary: flow.data.summary,
     pages: [
       buildQuickReferenceSection([{ title: 'Overview', href: buildUrl(`/docs/flows/${flow.data.id}/${flow.data.version}`) }]),
+      docsSection,
       {
         type: 'group',
         title: 'Architecture',
@@ -24,6 +33,6 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>): NavNode => {
           },
         ].filter(Boolean) as ChildRef[],
       },
-    ],
+    ].filter(Boolean) as ChildRef[],
   };
 };

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

@@ -9,6 +9,7 @@ import {
   buildRepositorySection,
   buildAttachmentsSection,
   buildDiagramNavItems,
+  buildResourceDocsSection,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 
@@ -35,6 +36,13 @@ export const buildMessageNode = (
 
   const hasSchema = message.data.schemaPath !== undefined;
   const renderVisualiser = isVisualiserEnabled();
+  const docsSection = buildResourceDocsSection(
+    collection as 'events' | 'commands' | 'queries',
+    message.data.id,
+    message.data.version,
+    context.resourceDocs,
+    context.resourceDocCategories
+  );
 
   const hasAttachments = message.data.attachments && message.data.attachments.length > 0;
 
@@ -57,6 +65,7 @@ export const buildMessageNode = (
           href: buildUrl(`/docs/${collection}/${message.data.id}/${message.data.version}`),
         },
       ]),
+      docsSection,
       renderVisualiser && {
         type: 'group',
         title: 'Architecture',

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

@@ -11,6 +11,7 @@ import {
   buildRepositorySection,
   buildAttachmentsSection,
   buildDiagramNavItems,
+  buildResourceDocsSection,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 import { pluralizeMessageType } from '@utils/collections/messages';
@@ -44,6 +45,13 @@ export const buildServiceNode = (service: CollectionEntry<'services'>, owners: a
   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 docsSection = buildResourceDocsSection(
+    'services',
+    service.data.id,
+    service.data.version,
+    context.resourceDocs,
+    context.resourceDocCategories
+  );
 
   // Diagrams
   const serviceDiagrams = service.data.diagrams || [];
@@ -59,6 +67,7 @@ export const buildServiceNode = (service: CollectionEntry<'services'>, owners: a
       buildQuickReferenceSection([
         { title: 'Overview', href: buildUrl(`/docs/services/${service.data.id}/${service.data.version}`) },
       ]),
+      docsSection,
       {
         type: 'group',
         title: 'Architecture',

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

@@ -2,6 +2,12 @@ import type { ResourceGroup } from '@eventcatalog/sdk';
 import type { CollectionEntry } from 'astro:content';
 import { getLatestVersionInCollectionById } from '@utils/collections/util';
 import { buildUrl } from '@utils/url-builder';
+import {
+  getGroupedResourceDocsByType,
+  type ResourceCollection,
+  type ResourceDocEntry,
+  type ResourceDocCategoryEntry,
+} from '@utils/collections/resource-docs';
 
 /**
  * A child reference can be:
@@ -17,6 +23,7 @@ export type NavNode = {
   type: 'group' | 'item';
   title: string;
   icon?: string; // Lucide icon name
+  subtle?: boolean; // Render lightweight styling for nested subgroup headers
   leftIcon?: string; // Path to SVG icon shown on the left of the label
   href?: string; // URL (for leaf items)
   external?: boolean; // If true, the item will open in a new tab
@@ -55,6 +62,8 @@ export type ResourceGroupContext = {
   flows: CollectionEntry<'flows'>[];
   containers: CollectionEntry<'containers'>[];
   diagrams: CollectionEntry<'diagrams'>[];
+  resourceDocs: ResourceDocEntry[];
+  resourceDocCategories: ResourceDocCategoryEntry[];
 };
 
 export const buildQuickReferenceSection = (items: { title: string; href: string }[]): NavNode => ({
@@ -112,6 +121,79 @@ export const buildAttachmentsSection = (attachments: any[]): NavNode | null => {
     })),
   };
 };
+
+export const buildResourceDocsSection = (
+  collection: ResourceCollection,
+  id: string,
+  version: string,
+  resourceDocs: ResourceDocEntry[],
+  resourceDocCategories: ResourceDocCategoryEntry[]
+): NavNode | null => {
+  const docsForResource = resourceDocs.filter(
+    (doc) => doc.data.resourceCollection === collection && doc.data.resourceId === id && doc.data.resourceVersion === version
+  );
+
+  if (docsForResource.length === 0) {
+    return null;
+  }
+
+  const categoriesForResource = resourceDocCategories.filter(
+    (category) =>
+      category.data.resourceCollection === collection &&
+      category.data.resourceId === id &&
+      category.data.resourceVersion === version
+  );
+
+  const groupedDocs = getGroupedResourceDocsByType(docsForResource, {
+    latestOnly: true,
+    categories: categoriesForResource,
+  });
+
+  if (groupedDocs.length === 0) {
+    return null;
+  }
+
+  const typeLabelMap: Record<string, string> = {
+    adrs: 'ADR',
+    runbooks: 'Runbook',
+    contracts: 'Contract',
+    troubleshooting: 'Troubleshooting',
+    guides: 'Guide',
+  };
+
+  const toTypeLabel = (value: string) => {
+    if (typeLabelMap[value]) {
+      return typeLabelMap[value];
+    }
+
+    const normalized = value
+      .split(/[-_\s]+/)
+      .filter(Boolean)
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join(' ');
+
+    return normalized || 'Doc';
+  };
+
+  return {
+    type: 'group',
+    title: 'Documentation',
+    icon: 'BookText',
+    pages: groupedDocs.map((group) => ({
+      type: 'group',
+      title: group.label || toTypeLabel(group.type),
+      subtle: true,
+      pages: group.docs.map((doc) => ({
+        type: 'item',
+        title: doc.data.title || doc.data.id,
+        href: buildUrl(
+          `/docs/${collection}/${id}/${version}/${encodeURIComponent(doc.data.type)}/${encodeURIComponent(doc.data.id)}`
+        ),
+      })),
+    })),
+  };
+};
+
 export const buildResourceGroupSections = (resourceGroups: ResourceGroup[], context: ResourceGroupContext) => {
   return resourceGroups.map((resourceGroup) => buildResourceGroupSection(resourceGroup, context));
 };

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

@@ -8,6 +8,7 @@ import { getUsers } from '@utils/collections/users';
 import { getTeams } from '@utils/collections/teams';
 import { getDiagrams } from '@utils/collections/diagrams';
 import { getDataProducts } from '@utils/collections/data-products';
+import { getResourceDocCategories, getResourceDocs } from '@utils/collections/resource-docs';
 import { buildUrl } from '@utils/url-builder';
 import type { NavigationData, NavNode, ChildRef } from './builders/shared';
 import { buildDomainNode } from './builders/domain';
@@ -19,6 +20,7 @@ import { buildDataProductNode } from './builders/data-product';
 import config from '@config';
 import { getDesigns } from '@utils/collections/designs';
 import { getChannels } from '@utils/collections/channels';
+import { buildQuickReferenceSection, buildResourceDocsSection } from './builders/shared';
 
 export type { NavigationData, NavNode, ChildRef };
 
@@ -45,6 +47,8 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     channels,
     diagrams,
     dataProducts,
+    resourceDocs,
+    resourceDocCategories,
   ] = await Promise.all([
     getDomains({ getAllVersions: false, includeServicesInSubdomains: false }),
     getServices({ getAllVersions: false }),
@@ -57,6 +61,8 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     getChannels({ getAllVersions: false }),
     getDiagrams({ getAllVersions: false }),
     getDataProducts({ getAllVersions: false }),
+    getResourceDocs(),
+    getResourceDocCategories(),
   ]);
 
   // Calculate derived lists to avoid extra fetches
@@ -75,6 +81,8 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     containers,
     diagrams,
     dataProducts,
+    resourceDocs,
+    resourceDocCategories,
   };
 
   // Process all domains with their owners first (async)
@@ -122,7 +130,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
 
   const flowNodes = flows.reduce(
     (acc, flow) => {
-      acc[`flow:${flow.data.id}:${flow.data.version}`] = buildFlowNode(flow);
+      acc[`flow:${flow.data.id}:${flow.data.version}`] = buildFlowNode(flow, context);
       return acc;
     },
     {} as Record<string, NavNode>
@@ -196,6 +204,8 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     services,
     containers,
     channels,
+    resourceDocs,
+    resourceDocCategories,
   };
 
   const dataProductNodes = dataProductWithOwners.reduce(
@@ -238,12 +248,27 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
   const channelNodes = channels.reduce(
     (acc, channel) => {
       const versionedKey = `channel:${channel.data.id}:${channel.data.version}`;
+      const docsSection = buildResourceDocsSection(
+        'channels',
+        channel.data.id,
+        channel.data.version,
+        resourceDocs,
+        resourceDocCategories
+      );
       acc[versionedKey] = {
         type: 'item',
         title: channel.data.name,
         badge: 'Channel',
         summary: channel.data.summary,
-        href: buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.version}`),
+        pages: [
+          buildQuickReferenceSection([
+            {
+              title: 'Overview',
+              href: buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.version}`),
+            },
+          ]),
+          docsSection,
+        ].filter(Boolean) as ChildRef[],
       };
 
       if (channel.data.latestVersion === channel.data.version) {