@eventcatalog/core 2.12.2 → 2.13.0

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

@@ -11,8 +11,13 @@ import ReactFlow, {
   type Edge,
   type Node,
   useReactFlow,
+  getBezierPath,
+  BaseEdge,
+  SmoothStepEdge,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
+
+// Nodes and edges
 import ServiceNode from './Nodes/Service';
 import EventNode from './Nodes/Event';
 import QueryNode from './Nodes/Query';
@@ -20,11 +25,15 @@ import UserNode from './Nodes/User';
 import StepNode from './Nodes/Step';
 import CommandNode from './Nodes/Command';
 import ExternalSystemNode from './Nodes/ExternalSystem';
+import AnimatedMessageEdge from './Edges/AnimatedMessageEdge';
+
 import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
 import DownloadButton from './DownloadButton';
 import { buildUrl } from '@utils/url-builder';
+import ChannelNode from './Nodes/Channel';
+import { CogIcon } from '@heroicons/react/20/solid';
 
 interface Props {
   nodes: any;
@@ -38,9 +47,6 @@ interface Props {
   linksToVisualiser?: boolean;
 }
 
-const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
-  return buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
-};
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
   return buildUrl(`/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
 };
@@ -58,6 +64,7 @@ const NodeGraphBuilder = ({
     () => ({
       services: ServiceNode,
       events: EventNode,
+      channels: ChannelNode,
       queries: QueryNode,
       commands: CommandNode,
       step: StepNode,
@@ -67,25 +74,35 @@ const NodeGraphBuilder = ({
     }),
     []
   );
+  const edgeTypes = useMemo(
+    () => ({
+      animated: AnimatedMessageEdge,
+    }),
+    []
+  );
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isAnimated, setIsAnimated] = useState(false);
+  const [animateMessages, setAnimateMessages] = useState(false);
+
   const { fitView } = useReactFlow();
 
   const resetNodesAndEdges = useCallback(() => {
     setNodes((nds) =>
       nds.map((node) => {
         node.style = { ...node.style, opacity: 1 };
-        return { ...node, animated: false };
+        return { ...node, animated: animateMessages };
       })
     );
     setEdges((eds) =>
       eds.map((edge) => {
         edge.style = { ...edge.style, opacity: 1 };
         edge.labelStyle = { ...edge.labelStyle, opacity: 1 };
-        return { ...edge, animated: false };
+        return { ...edge, data: { ...edge.data, opacity: 1 }, animated: animateMessages };
       })
     );
-  }, [setNodes, setEdges]);
+  }, [setNodes, setEdges, animateMessages]);
 
   const handleNodeClick = useCallback(
     (_: any, node: Node) => {
@@ -110,6 +127,7 @@ const NodeGraphBuilder = ({
           connectedNodeIds.add(edge.target);
           return {
             ...edge,
+            data: { ...edge.data, opacity: 1 },
             style: { ...edge.style, opacity: 1 },
             labelStyle: { ...edge.labelStyle, opacity: 1 },
             animated: true,
@@ -117,9 +135,10 @@ const NodeGraphBuilder = ({
         }
         return {
           ...edge,
+          data: { ...edge.data, opacity: 0.1 },
           style: { ...edge.style, opacity: 0.1 },
           labelStyle: { ...edge.labelStyle, opacity: 0.1 },
-          animated: false,
+          animated: animateMessages,
         };
       });
 
@@ -143,14 +162,105 @@ const NodeGraphBuilder = ({
     [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
   );
 
+  const toggleAnimation = () => {
+    setIsAnimated(!isAnimated);
+    setEdges((eds) =>
+      eds.map((edge) => ({
+        ...edge,
+        animated: !isAnimated,
+      }))
+    );
+  };
+
+  const toggleAnimateMessages = () => {
+    setAnimateMessages(!animateMessages);
+    localStorage.setItem('EventCatalog:animateMessages', JSON.stringify(!animateMessages));
+  };
+
+  // animate messages, between views
+  useEffect(() => {
+    const storedAnimateMessages = localStorage.getItem('EventCatalog:animateMessages');
+    if (storedAnimateMessages !== null) {
+      setAnimateMessages(storedAnimateMessages === 'true');
+    }
+  }, []);
+
+  useEffect(() => {
+    setEdges((eds) =>
+      eds.map((edge) => ({
+        ...edge,
+        animated: animateMessages,
+        type: animateMessages ? 'animated' : 'default',
+        data: { ...edge.data, animateMessages },
+      }))
+    );
+  }, [animateMessages]);
+
   const handlePaneClick = useCallback(() => {
+    setIsSettingsOpen(false);
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
 
+  const handleLegendClick = useCallback(
+    (collectionType: string) => {
+      const updatedNodes = nodes.map((node) => {
+        if (node.type === collectionType) {
+          return { ...node, style: { ...node.style, opacity: 1 } };
+        }
+        return { ...node, style: { ...node.style, opacity: 0.1 } };
+      });
+
+      const updatedEdges = edges.map((edge) => {
+        return {
+          ...edge,
+          data: { ...edge.data, opacity: 0.1 },
+          style: { ...edge.style, opacity: 0.1 },
+          labelStyle: { ...edge.labelStyle, opacity: 0.1 },
+          animated: animateMessages,
+        };
+      });
+
+      setNodes(updatedNodes);
+      setEdges(updatedEdges);
+
+      fitView({
+        padding: 0.2,
+        duration: 800,
+        nodes: updatedNodes.filter((node) => node.type === collectionType),
+      });
+    },
+    [nodes, edges, setNodes, setEdges, fitView]
+  );
+
+  const getNodesByCollectionWithColors = useCallback((nodes: Node[]) => {
+    const colors = {
+      events: 'orange',
+      services: 'pink',
+      commands: 'blue',
+      queries: 'green',
+      channels: 'gray',
+    };
+
+    return nodes.reduce((acc: { [key: string]: { count: number; color: string } }, node) => {
+      const collection = node.type;
+      if (collection) {
+        if (acc[collection]) {
+          acc[collection].count += 1;
+        } else {
+          acc[collection] = { count: 1, color: colors[collection as keyof typeof colors] || 'black' };
+        }
+      }
+      return acc;
+    }, {});
+  }, []);
+
+  const legend = getNodesByCollectionWithColors(nodes);
+
   return (
     <ReactFlow
       nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
       nodes={nodes}
       edges={edges}
       fitView
@@ -160,25 +270,82 @@ const NodeGraphBuilder = ({
       nodeOrigin={[0.1, 0.1]}
       onNodeClick={handleNodeClick}
       onPaneClick={handlePaneClick}
+      className="relative"
     >
-      {title && (
-        <Panel position="top-right">
-          <span className="block shadow-sm bg-white text-xl z-10 text-black px-4 py-2 border-gray-200 rounded-md border">
-            <strong>Visualiser</strong> | {title}
-          </span>
-        </Panel>
+      <Panel position="top-center" className="w-full pr-6 ">
+        <div className="flex space-x-2 justify-between  items-center">
+          <div>
+            <button
+              onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+              className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+              aria-label="Open settings"
+            >
+              <CogIcon className="h-5 w-5 text-gray-600" />
+            </button>
+          </div>
+          {title && (
+            <span className="block shadow-sm bg-white text-xl z-10 text-black px-4 py-2 border-gray-200 rounded-md border opacity-80">
+              {title}
+            </span>
+          )}
+          <div className="flex justify-end ">
+            <DownloadButton filename={title} addPadding={false} />
+          </div>
+        </div>
+      </Panel>
+
+      {isSettingsOpen && (
+        <div className="absolute top-[68px] left-5 w-72 p-4 bg-white rounded-lg shadow-lg z-30 border border-gray-200">
+          <h3 className="text-lg font-semibold mb-4">Visualizer Settings</h3>
+          <div className="space-y-4 ">
+            <div>
+              <div className="flex items-center justify-between">
+                <label htmlFor="message-animation-toggle" className="text-sm font-medium text-gray-700">
+                  Simulate Messages
+                </label>
+                <button
+                  id="message-animation-toggle"
+                  onClick={toggleAnimateMessages}
+                  className={`${
+                    animateMessages ? 'bg-purple-600' : 'bg-gray-200'
+                  } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+                >
+                  <span
+                    className={`${
+                      animateMessages ? 'translate-x-6' : 'translate-x-1'
+                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+                  />
+                </button>
+              </div>
+              <p className="text-[10px] text-gray-500">Animate events, queries and commands.</p>
+            </div>
+          </div>
+        </div>
       )}
-      <DownloadButton filename={title} addPadding={!!title} />
       {includeBackground && <Background color="#bbb" gap={16} />}
       {includeBackground && <Controls />}
       {includeKey && (
         <Panel position="bottom-right">
           <div className=" bg-white font-light px-4 text-[12px] shadow-md py-1 rounded-md">
+            <ul className="m-0 p-0 ">
+              {Object.entries(legend).map(([key, { count, color }]) => (
+                <li
+                  key={key}
+                  className="flex space-x-2 items-center text-[10px] cursor-pointer hover:text-purple-600 hover:underline"
+                  onClick={() => handleLegendClick(key)}
+                >
+                  <span className={`w-2 h-2 block`} style={{ backgroundColor: color }} />
+                  <span className="block capitalize">
+                    {key} ({count})
+                  </span>
+                </li>
+              ))}
+            </ul>
             {/* <span className="font-bold">Key</span> */}
-            <ul className="m-0 p-0">
+            {/* <ul className="m-0 p-0">
               <li className="flex space-x-2 items-center text-[10px]">
                 <span className="w-2 h-2 bg-orange-500 block" />
-                <span className="block">Event</span>
+                <span className="block">Events</span>
               </li>
               <li className="flex space-x-2 items-center text-[10px]">
                 <span className="w-2 h-2 bg-pink-500 block" />
@@ -192,7 +359,11 @@ const NodeGraphBuilder = ({
                 <span className="w-2 h-2 bg-green-500 block" />
                 <span className="block">Query</span>
               </li>
-            </ul>
+              <li className="flex space-x-2 items-center text-[10px]">
+                <span className="w-2 h-2 bg-gray-500 block" />
+                <span className="block">Channel</span>
+              </li>
+            </ul> */}
           </div>
         </Panel>
       )}

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

@@ -0,0 +1,133 @@
+import { BoltIcon } from '@heroicons/react/16/solid';
+import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
+import type { CollectionMessageTypes, CollectionTypes } from '@types';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  channel: CollectionEntry<'channels'>;
+  source: CollectionEntry<CollectionMessageTypes>;
+  target: CollectionEntry<CollectionMessageTypes>;
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+import * as ProtocolIcons from '@icons/protocols';
+import { LinkIcon } from '@heroicons/react/24/outline';
+
+const protocolIcons = Object.keys(ProtocolIcons).reduce(
+  (icons, key) => {
+    const iconKey = key as keyof typeof ProtocolIcons;
+    icons[key.toLowerCase()] = ProtocolIcons[iconKey];
+    return icons;
+  },
+  {} as { [key: string]: string }
+);
+
+const getIconForProtocol = (icon: keyof typeof protocolIcons) => {
+  const Icon = protocolIcons[icon];
+  return Icon ? (props: any) => <span {...props} dangerouslySetInnerHTML={{ __html: Icon }} /> : null;
+};
+
+export default function ChannelNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, channel, source, target } = data as Data;
+
+  const { id, name, version, summary, owners = [], address, protocols = [] } = channel.data;
+  const protocol = protocols[0];
+
+  const Icon = getIconForProtocol(protocol);
+
+  const getAddress = () => {
+    const sourceChannel = source.data.channels?.find((channel) => channel.id === id);
+    const targetChannel = target.data.channels?.find((channel) => channel.id === id);
+    const sourceParams = sourceChannel?.parameters || {};
+    const targetParams = targetChannel?.parameters || {};
+    const params = { ...sourceParams, ...targetParams };
+
+    let updatedAddress = address;
+    if (params) {
+      Object.keys(params).forEach((key) => {
+        const placeholder = `{${key}}`;
+        if (updatedAddress && updatedAddress.includes(placeholder)) {
+          updatedAddress = updatedAddress.replace(new RegExp(`{${key}}`, 'g'), params[key]);
+        }
+      });
+    }
+
+    return updatedAddress;
+  };
+
+  return (
+    <div
+      className={classNames(
+        mode === 'simple' ? 'min-h-[3em]' : 'min-h-[6.5em]',
+        'w-full rounded-md border flex justify-start  bg-white text-black border-gray-400 transform  '
+      )}
+    >
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-gray-500 to-gray-700 relative flex items-center w-5 justify-center rounded-l-sm text-gray-100-500',
+          `border-r-[1px] border-gray-500`
+        )}
+      >
+        <ArrowsRightLeftIcon 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] ">
+            Channel
+          </span>
+        )}
+      </div>
+      <div className="p-1 min-w-60 max-w-[min-content]">
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
+        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+          <div className="flex justify-between items-center">
+            <span className="text-xs font-bold block pb-0.5">{name}</span>
+            {Icon && <Icon className="w-5 h-5 opacity-60 p-0.5" />}
+          </div>
+          <div className="flex justify-between">
+            <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
+            {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Channel</span>}
+          </div>
+        </div>
+        {mode === 'full' && (
+          <div className="divide-y divide-gray-200 ">
+            <div className="leading-[10px] py-1 ">
+              <span className="text-[8px] font-light">{summary}</span>
+            </div>
+            {address && (
+              <div className="leading-3 py-1 flex flex-col items-start space-y-0.5">
+                <div className="text-[6px] flex items-center space-x-0.5 ">
+                  <LinkIcon className="w-2 h-2 opacity-60" />
+                  <span className="block font-normal ">{getAddress()}</span>
+                </div>
+                {protocols.length > 0 && (
+                  <div className="text-[6px] font-semibold flex space-x-2 items-center ">
+                    {[...protocols].map((protocol, index) => {
+                      const ProtoColIcon = getIconForProtocol(protocol);
+                      return (
+                        <span key={index} className="font-normal flex items-center -ml-[1px] space-x-0.5">
+                          {ProtoColIcon && <ProtoColIcon className="w-2 h-2 opacity-60 inline-block" />}
+                          <span>{protocol}</span>
+                        </span>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MDX/components.tsx

@@ -11,6 +11,7 @@ import Step from '@components/MDX/Steps/Step.astro';
 import Admonition from '@components/MDX/Admonition';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI.astro';
 import AsyncAPI from '@components/MDX/AsyncAPI/AsyncAPI.astro';
+import ChannelInformation from '@components/MDX/ChannelInformation/ChannelInformation';
 
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
@@ -30,6 +31,7 @@ const components = (props: any) => {
     Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
+    ChannelInformation: (mdxProp: any) => ChannelInformation({ ...props.data, ...mdxProp }),
     SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
     Schema: (mdxProp: any) => Schema({ ...props, ...mdxProp }),
   };

package/src/components/Seo.astro

@@ -47,11 +47,9 @@ if (typeof _image === 'string') {
     },
   }}
   twitter={{
-    creator: '@liran_tal',
     image: image ? image.toString() : undefined,
     imageAlt: ogTitle,
     title: ogTitle,
-    site: '@liran_tal',
     description: description,
     card: image ? 'summary_large_image' : 'summary',
   }}

package/src/components/SideBars/CatalogResourcesSideBar/index.tsx

@@ -1,17 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import debounce from 'lodash.debounce';
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-  ServerIcon,
-  RectangleGroupIcon,
-  BoltIcon,
-  ChatBubbleLeftIcon,
-  MagnifyingGlassIcon,
-  QueueListIcon,
-  UserGroupIcon,
-  UserIcon,
-} from '@heroicons/react/24/outline';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import './styles.css';
 import { getIconForCollection as getIconForCollectionOriginal } from '@utils/collections/icons';
 
@@ -19,6 +8,7 @@ const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
   const [data, setData] = useState(resources);
   const [searchQuery, setSearchQuery] = useState('');
   const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>({});
+  const decodedCurrentPath = decodeURIComponent(currentPath);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
@@ -76,6 +66,7 @@ const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
             const collection = filteredData[key];
             if (collection[0] && collection[0].visible === false) return null;
             const isCollapsed = collapsedGroups[key];
+
             return (
               <ul className="w-full space-y-1.5 pb-2 pl-1 text-black" key={key}>
                 <li
@@ -92,7 +83,7 @@ const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
                     const Icon = getIconForCollection(item.collection);
                     return (
                       <li
-                        className={`w-full has-tooltip text-md xl:text-sm space-y-2 scroll-m-20 rounded-md text-black hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white    ${currentPath.includes(item.href) ? ' bg-gradient-to-l from-purple-500 to-purple-700  font-normal text-white ' : 'font-thin'}`}
+                        className={`w-full has-tooltip text-md xl:text-sm space-y-2 scroll-m-20 rounded-md text-black hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white    ${decodedCurrentPath.includes(item.href) ? ' bg-gradient-to-l from-purple-500 to-purple-700  font-normal text-white ' : 'font-thin'}`}
                         id={item.href}
                         key={item.href}
                       >

package/src/components/SideBars/ChannelSideBar.astro

@@ -0,0 +1,117 @@
+---
+import { getEntry, type CollectionEntry } from 'astro:content';
+import PillListFlat from '@components/Lists/PillListFlat';
+import ProtocolList from '@components/Lists/ProtocolList';
+import OwnersList from '@components/Lists/OwnersList';
+import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
+import { ScrollText } from 'lucide-react';
+import RepositoryList from '@components/Lists/RepositoryList.astro';
+
+interface Props {
+  channel: CollectionEntry<'channels'>;
+}
+
+const { channel } = Astro.props;
+
+const ownersRaw = channel.data?.owners || [];
+const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
+
+const channelParameters: Record<string, { enum?: string[]; description?: string }> = channel.data.parameters || {};
+const parameters = Object.keys(channelParameters).map((key) => ({
+  key,
+  ...channelParameters[key],
+}));
+
+const paramsList = parameters.map((param) => ({
+  label: param.key,
+  description: param?.description,
+  collection: 'channels-parameter',
+}));
+
+const protocols = channel.data.protocols || [];
+const protocolList = protocols.map((p) => ({
+  label: p,
+  collection: 'channels-protocol',
+  // icon: p,
+  icon: p,
+}));
+
+const ownersList = owners.map((o) => ({
+  label: o.data.name,
+  type: o.collection,
+  badge: o.collection === 'users' ? o.data.role : 'Team',
+  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
+}));
+
+const messageList = (channel.data.messages ?? []).map((p) => ({
+  label: p.name,
+  badge: p.collection,
+  color: p.collection === 'events' ? 'orange' : 'blue',
+  collection: p.collection,
+  tag: `v${p.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.id}/${p.version}`),
+}));
+---
+
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
+  <div class="">
+    {
+      messageList.length > 0 && (
+        <PillListFlat
+          title={`Messages using channel (${messageList.length})`}
+          pills={messageList}
+          emptyMessage={`This channel does not have any messages.`}
+          color="orange"
+          client:load
+        />
+      )
+    }
+
+    {
+      protocolList.length > 0 && (
+        <ProtocolList color="pink" title={`Protocols (${protocolList.length})`} pills={protocolList} client:load />
+      )
+    }
+
+    {
+      channel.data.versions && (
+        <VersionList
+          title={`Channel versions (${channel.data.versions?.length})`}
+          versions={channel.data.versions}
+          collectionItem={channel}
+        />
+      )
+    }
+
+    <OwnersList
+      title={`Channel owners (${ownersList.length})`}
+      owners={ownersList}
+      emptyMessage={`This channel does not have any documented owners.`}
+      client:load
+    />
+
+    {
+      channel.data.repository && (
+        <RepositoryList repository={channel.data.repository?.url} language={channel.data.repository?.language} />
+      )
+    }
+
+    {
+      paramsList.length > 0 && (
+        <PillListFlat color="pink" title={`Channel parameters (${paramsList.length})`} pills={paramsList} client:load />
+      )
+    }
+
+    <div class="space-y-2">
+      <a
+        href={buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.latestVersion}/changelog`)}
+        class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
+      >
+        <ScrollText strokeWidth={2} size={16} />
+        <span class="block">Read changelog</span>
+      </a>
+    </div>
+  </div>
+</aside>

package/src/components/SideBars/MessageSideBar.astro

@@ -16,6 +16,7 @@ const { message } = Astro.props;
 
 const producers = (message.data.producers as CollectionEntry<'services'>[]) || [];
 const consumers = (message.data.consumers as CollectionEntry<'services'>[]) || [];
+const channels = (message.data.messageChannels as CollectionEntry<'channels'>[]) || [];
 
 const ownersRaw = message.data?.owners || [];
 const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
@@ -42,6 +43,13 @@ const ownersList = owners.map((o) => ({
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
+const channelList = channels.map((c) => ({
+  label: `${c.data.name}`,
+  tag: `v${c.data.version}`,
+  collection: c.collection,
+  href: buildUrl(`/docs/channels/${c.data.id}/${c.data.version}`),
+}));
+
 const getType = (type: string) => {
   switch (type) {
     case 'queries':
@@ -105,6 +113,11 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
         />
       )
     }
+    {
+      channelList.length > 0 && (
+        <PillListFlat color="pink" title={`Channels (${channelList.length})`} pills={channelList} client:load />
+      )
+    }
 
     {
       message.data.versions && (