npm - @eventcatalog/core - Versions diffs - 0.1.13 → 0.1.17 - Mend

@eventcatalog/core 0.1.13 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (221) hide show

package/out/visualiser/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><script src="//unpkg.com/three"></script><script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/><meta name="description" content="An open source project to Discover, Explore and Document your Event Driven Architectures."/><meta property="og:url" content="https://eventcatalog.dev/"/><meta property="og:type" content="website"/><meta property="og:title" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."/><meta property="og:description" content="An open source tool powered by markdown to document your Event Driven Architecture."/><meta property="og:image" content="https://eventcatalog.dev/img/opengraph.png"/><meta property="og:image:alt" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="600"/><meta property="og:locale" content="en-GB"/><meta name="author" content="David Boyne"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"/><title>EventCatalog - Visualiser</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/6774df2af1f71309.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6774df2af1f71309.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-49abfa9a972ed5a3.js" defer=""></script><script src="/_next/static/chunks/framework-576ec6a1c1386453.js" defer=""></script><script src="/_next/static/chunks/main-0015f560a7edeb35.js" defer=""></script><script src="/_next/static/chunks/pages/_app-6eba1099469a6889.js" defer=""></script><script src="/_next/static/chunks/b744740b-229c238b25b9eeac.js" defer=""></script><script src="/_next/static/chunks/519-2ec6fc3cdbaa4dc2.js" defer=""></script><script src="/_next/static/chunks/962-20c87db3880df896.js" defer=""></script><script src="/_next/static/chunks/506-12764fcf4b5d93b0.js" defer=""></script><script src="/_next/static/chunks/109-a08539311d3d6672.js" defer=""></script><script src="/_next/static/chunks/pages/visualiser-e4e3757e74f19df7.js" defer=""></script><script src="/_next/static/R1JBWbiD3Q61grTfkBBSU/_buildManifest.js" defer=""></script><script src="/_next/static/R1JBWbiD3Q61grTfkBBSU/_ssgManifest.js" defer=""></script><script src="/_next/static/R1JBWbiD3Q61grTfkBBSU/_middlewareManifest.js" defer=""></script></head><body><div id="__next" data-reactroot=""><div class="bg-gray-800"><div class="max-w-7xl mx-auto "><div class="relative flex items-center justify-between h-16"><div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"><div class="flex-shrink-0 flex items-center text-white font-bold"><a class="flex items-center" href="/"><img alt="logo" class="text-white w-8 inline-block mr-3" src="/logo.svg"/><span class="text-xl">EventCatalog</span></a></div></div><div class="hidden sm:block sm:ml-6"><div class="flex space-x-4"><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/events/">Events</a><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/services/">Services</a><a class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page" href="/visualiser/">Visualiser</a><a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="/overview/">3D Node Graph</a></div></div></div></div></div><div class="h-screen overflow-hidden"><div class="sm:hidden px-4 py-2 bg-gray-200 border-b border-gray-300"><div class="relative rounded-md shadow-sm"><select class=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"><option>Please select your event or service</option><option value="{&quot;label&quot;:&quot;AddedItemToCart&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;AddedItemToCart&quot;,&quot;version&quot;:&quot;0.0.3&quot;,&quot;summary&quot;:&quot;Holds information about what the user added to their shopping cart.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[{&quot;label&quot;:&quot;AsyncAPI Specification&quot;,&quot;url&quot;:&quot;https://studio.asyncapi.com/#schema-lightMeasuredPayload&quot;}],&quot;historicVersions&quot;:[&quot;0.0.2&quot;,&quot;0.0.1&quot;]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->AddedItemToCart</option><option value="{&quot;label&quot;:&quot;OrderComplete&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;OrderComplete&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when an order has been complete. (Delivered and finished)\n&quot;,&quot;producers&quot;:[&quot;Orders Service&quot;],&quot;consumers&quot;:[&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->OrderComplete</option><option value="{&quot;label&quot;:&quot;OrderConfirmed&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;OrderConfirmed&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when an order has been confirmed and ready to be processed (shipped for example)\n&quot;,&quot;producers&quot;:[&quot;Orders Service&quot;],&quot;consumers&quot;:[&quot;Shipping Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->OrderConfirmed</option><option value="{&quot;label&quot;:&quot;OrderRequested&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;OrderRequested&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Holds information about the customers order.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Payment Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->OrderRequested</option><option value="{&quot;label&quot;:&quot;PaymentProcessed&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;PaymentProcessed&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Holds information about the payment that has been processed.\n&quot;,&quot;producers&quot;:[&quot;Payment Service&quot;],&quot;consumers&quot;:[&quot;Orders Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->PaymentProcessed</option><option value="{&quot;label&quot;:&quot;RemovedItemFromCart&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;RemovedItemFromCart&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Holds information about what the user removed from their cart.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->RemovedItemFromCart</option><option value="{&quot;label&quot;:&quot;ShipmentDelivered&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;ShipmentDelivered&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has been delivered and received.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Order Service&quot;,&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->ShipmentDelivered</option><option value="{&quot;label&quot;:&quot;ShipmentDispatched&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;ShipmentDispatched&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has been dispatched.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Shipping Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->ShipmentDispatched</option><option value="{&quot;label&quot;:&quot;ShipmentPrepared&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;ShipmentPrepared&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has finished being prepared and is ready to be dispatched.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Shipping Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},&quot;type&quot;:&quot;event&quot;}">Event: <!-- -->ShipmentPrepared</option><option value="{&quot;label&quot;:&quot;Basket Service&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Basket Service&quot;,&quot;summary&quot;:&quot;CRUD based API to handle Basket interactions for users of the shopping website.\n&quot;,&quot;owners&quot;:[&quot;dboyne&quot;],&quot;repository&quot;:{&quot;language&quot;:&quot;JavaScript&quot;,&quot;url&quot;:&quot;https://github.com/boyney123/pretend-basket-service&quot;},&quot;tags&quot;:[],&quot;externalLinks&quot;:[{&quot;label&quot;:&quot;AsyncAPI Specification&quot;,&quot;url&quot;:&quot;https://studio.asyncapi.com/#schema-lightMeasuredPayload&quot;}],&quot;publishes&quot;:[{&quot;name&quot;:&quot;AddedItemToCart&quot;,&quot;version&quot;:&quot;0.0.3&quot;,&quot;summary&quot;:&quot;Holds information about what the user added to their shopping cart.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[{&quot;label&quot;:&quot;AsyncAPI Specification&quot;,&quot;url&quot;:&quot;https://studio.asyncapi.com/#schema-lightMeasuredPayload&quot;}],&quot;historicVersions&quot;:[&quot;0.0.2&quot;,&quot;0.0.1&quot;]},{&quot;name&quot;:&quot;OrderRequested&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Holds information about the customers order.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Payment Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},{&quot;name&quot;:&quot;RemovedItemFromCart&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Holds information about what the user removed from their cart.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]}],&quot;subscribes&quot;:[]},&quot;type&quot;:&quot;service&quot;}">Service: <!-- -->Basket Service</option><option value="{&quot;label&quot;:&quot;Data Lake&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Data Lake&quot;,&quot;summary&quot;:&quot;Our internal datalake used by the data team and business analytics.\n&quot;,&quot;owners&quot;:[&quot;dboyne&quot;],&quot;repository&quot;:{},&quot;tags&quot;:[],&quot;externalLinks&quot;:[],&quot;publishes&quot;:[],&quot;subscribes&quot;:[{&quot;name&quot;:&quot;AddedItemToCart&quot;,&quot;version&quot;:&quot;0.0.3&quot;,&quot;summary&quot;:&quot;Holds information about what the user added to their shopping cart.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[{&quot;label&quot;:&quot;AsyncAPI Specification&quot;,&quot;url&quot;:&quot;https://studio.asyncapi.com/#schema-lightMeasuredPayload&quot;}],&quot;historicVersions&quot;:[&quot;0.0.2&quot;,&quot;0.0.1&quot;]},{&quot;name&quot;:&quot;OrderComplete&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when an order has been complete. (Delivered and finished)\n&quot;,&quot;producers&quot;:[&quot;Orders Service&quot;],&quot;consumers&quot;:[&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},{&quot;name&quot;:&quot;RemovedItemFromCart&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Holds information about what the user removed from their cart.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},{&quot;name&quot;:&quot;ShipmentDelivered&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has been delivered and received.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Order Service&quot;,&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]}]},&quot;type&quot;:&quot;service&quot;}">Service: <!-- -->Data Lake</option><option value="{&quot;label&quot;:&quot;Payment Service&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Payment Service&quot;,&quot;summary&quot;:&quot;Event based application that integrates with Stripe.\n&quot;,&quot;owners&quot;:[&quot;dboyne&quot;],&quot;repository&quot;:{},&quot;tags&quot;:[],&quot;externalLinks&quot;:[],&quot;publishes&quot;:[{&quot;name&quot;:&quot;PaymentProcessed&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Holds information about the payment that has been processed.\n&quot;,&quot;producers&quot;:[&quot;Payment Service&quot;],&quot;consumers&quot;:[&quot;Orders Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]}],&quot;subscribes&quot;:[{&quot;name&quot;:&quot;OrderRequested&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Holds information about the customers order.\n&quot;,&quot;producers&quot;:[&quot;Basket Service&quot;],&quot;consumers&quot;:[&quot;Payment Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]}]},&quot;type&quot;:&quot;service&quot;}">Service: <!-- -->Payment Service</option><option value="{&quot;label&quot;:&quot;Shipping Service&quot;,&quot;data&quot;:{&quot;name&quot;:&quot;Shipping Service&quot;,&quot;summary&quot;:&quot;Event based application that handles processing of shipments, preparing them and dispatching them.\n&quot;,&quot;owners&quot;:[&quot;dboyne&quot;],&quot;repository&quot;:{&quot;language&quot;:&quot;JavaScript&quot;,&quot;url&quot;:&quot;https://github.com/boyney123/pretend-shipping-service&quot;},&quot;tags&quot;:[],&quot;externalLinks&quot;:[],&quot;publishes&quot;:[{&quot;name&quot;:&quot;ShipmentDelivered&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has been delivered and received.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Order Service&quot;,&quot;Data Lake&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},{&quot;name&quot;:&quot;ShipmentDispatched&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has been dispatched.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Shipping Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},{&quot;name&quot;:&quot;ShipmentPrepared&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has finished being prepared and is ready to be dispatched.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Shipping Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]}],&quot;subscribes&quot;:[{&quot;name&quot;:&quot;OrderConfirmed&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when an order has been confirmed and ready to be processed (shipped for example)\n&quot;,&quot;producers&quot;:[&quot;Orders Service&quot;],&quot;consumers&quot;:[&quot;Shipping Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},{&quot;name&quot;:&quot;ShipmentDispatched&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has been dispatched.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Shipping Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]},{&quot;name&quot;:&quot;ShipmentPrepared&quot;,&quot;version&quot;:&quot;0.0.1&quot;,&quot;summary&quot;:&quot;Event represents when a shipment has finished being prepared and is ready to be dispatched.\n&quot;,&quot;producers&quot;:[&quot;Shipping Service&quot;],&quot;consumers&quot;:[&quot;Shipping Service&quot;],&quot;owners&quot;:[&quot;dboyne&quot;,&quot;mSmith&quot;],&quot;externalLinks&quot;:[],&quot;historicVersions&quot;:[]}]},&quot;type&quot;:&quot;service&quot;}">Service: <!-- -->Shipping Service</option></select></div></div><div class="grid grid-cols-8 xl:grid-cols-6"><div class="hidden sm:block col-span-2 xl:col-span-1 bg-white px-4 h-screen overflow-auto border-r-2 shadow-md border-gray-200 py-3"><div class="border-b border-gray-200 pb-6"><div class="mt-1 relative rounded-md shadow-sm"><div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" class="h-5 w-5 text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div><input type="text" name="event" id="event" placeholder="Find Event or Service" class="focus:ring-gray-500 focus:border-gray-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md"/></div></div><div class="space-y-6"><div><span class="font-bold block py-2">Events <!-- --> <!-- -->(<!-- -->9<!-- -->)</span><ul class="space-y-4 overflow-auto"><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#2e0a58" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">AddedItemToCart</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Holds information about what the user added to their shopping cart.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#871e73" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">OrderComplete</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Event represents when an order has been complete. (Delivered and finished)
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#d1ffa1" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">OrderConfirmed</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Event represents when an order has been confirmed and ready to be processed (shipped for example)
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#e053ec" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">OrderRequested</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Holds information about the customers order.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#08642a" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">PaymentProcessed</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Holds information about the payment that has been processed.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#7de28e" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">RemovedItemFromCart</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Holds information about what the user removed from their cart.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#ea7bc8" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">ShipmentDelivered</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Event represents when a shipment has been delivered and received.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#f36bc3" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">ShipmentDispatched</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Event represents when a shipment has been dispatched.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#1774bd" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">ShipmentPrepared</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Event represents when a shipment has finished being prepared and is ready to be dispatched.
+</div></div></div></button></li></ul></div><div><span class="font-bold block py-2">Services <!-- --> <!-- -->(<!-- -->4<!-- -->)</span><ul class="space-y-4 overflow-auto"><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#5b5ad5" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">Basket Service</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">CRUD based API to handle Basket interactions for users of the shopping website.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#45603f" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">Data Lake</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Our internal datalake used by the data team and business analytics.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#5b7e99" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">Payment Service</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Event based application that integrates with Stripe.
+</div></div></div></button></li><li class="flex"><button type="button" class="flex shadow-sm rounded-md w-full text-left border "><div style="background:#438ef7" class="bg-red-500 flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md"></div><div class="w-full rounded-r-md border-t border-r border-b bg-white"><div class="p-4 text-sm space-y-2 flex flex-col justify-between h-full"><div class="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">Shipping Service</div><div class="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">Event based application that handles processing of shipments, preparing them and dispatching them.
+</div></div></div></button></li></ul></div></div></div><div class="bg-gray-200 h-screen col-span-12 sm:col-span-6 xl:col-span-5"></div></div></div><footer class="bg-gray-800"><div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"><nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"><div class="px-5 py-2"><a href="/events" class="text-base text-gray-500 hover:text-gray-900">Events</a></div><div class="px-5 py-2"><a href="/services" class="text-base text-gray-500 hover:text-gray-900">Services</a></div><div class="px-5 py-2"><a href="/overview" class="text-base text-gray-500 hover:text-gray-900">3D Node Graph</a></div><div class="px-5 py-2"><a href="https://github.com/boyney123/eventcatalog-demo/edit/master" class="text-base text-gray-500 hover:text-gray-900">GitHub</a></div></nav><p class="mt-8 text-center text-base text-gray-400">Copyright © <!-- -->2022<!-- --> <!-- -->Your Company<!-- -->. Built with<!-- --> <a class="underline" href="https://eventcatalog.dev" target="_blank" rel="noreferrer">EventCatalog.</a></p></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"events":[{"name":"AddedItemToCart","version":"0.0.3","summary":"Holds information about what the user added to their shopping cart.\n","producers":["Basket Service"],"consumers":["Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[{"label":"AsyncAPI Specification","url":"https://studio.asyncapi.com/#schema-lightMeasuredPayload"}],"historicVersions":["0.0.2","0.0.1"]},{"name":"OrderComplete","version":"0.0.1","summary":"Event represents when an order has been complete. (Delivered and finished)\n","producers":["Orders Service"],"consumers":["Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"OrderConfirmed","version":"0.0.1","summary":"Event represents when an order has been confirmed and ready to be processed (shipped for example)\n","producers":["Orders Service"],"consumers":["Shipping Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"OrderRequested","version":"0.0.1","summary":"Holds information about the customers order.\n","producers":["Basket Service"],"consumers":["Payment Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"PaymentProcessed","version":"0.0.1","summary":"Holds information about the payment that has been processed.\n","producers":["Payment Service"],"consumers":["Orders Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"RemovedItemFromCart","version":"0.0.1","summary":"Holds information about what the user removed from their cart.\n","producers":["Basket Service"],"consumers":["Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"ShipmentDelivered","version":"0.0.1","summary":"Event represents when a shipment has been delivered and received.\n","producers":["Shipping Service"],"consumers":["Order Service","Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"ShipmentDispatched","version":"0.0.1","summary":"Event represents when a shipment has been dispatched.\n","producers":["Shipping Service"],"consumers":["Shipping Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"ShipmentPrepared","version":"0.0.1","summary":"Event represents when a shipment has finished being prepared and is ready to be dispatched.\n","producers":["Shipping Service"],"consumers":["Shipping Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]}],"services":[{"name":"Basket Service","summary":"CRUD based API to handle Basket interactions for users of the shopping website.\n","owners":["dboyne"],"repository":{"language":"JavaScript","url":"https://github.com/boyney123/pretend-basket-service"},"tags":[],"externalLinks":[{"label":"AsyncAPI Specification","url":"https://studio.asyncapi.com/#schema-lightMeasuredPayload"}],"publishes":[{"name":"AddedItemToCart","version":"0.0.3","summary":"Holds information about what the user added to their shopping cart.\n","producers":["Basket Service"],"consumers":["Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[{"label":"AsyncAPI Specification","url":"https://studio.asyncapi.com/#schema-lightMeasuredPayload"}],"historicVersions":["0.0.2","0.0.1"]},{"name":"OrderRequested","version":"0.0.1","summary":"Holds information about the customers order.\n","producers":["Basket Service"],"consumers":["Payment Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"RemovedItemFromCart","version":"0.0.1","summary":"Holds information about what the user removed from their cart.\n","producers":["Basket Service"],"consumers":["Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]}],"subscribes":[]},{"name":"Data Lake","summary":"Our internal datalake used by the data team and business analytics.\n","owners":["dboyne"],"repository":{},"tags":[],"externalLinks":[],"publishes":[],"subscribes":[{"name":"AddedItemToCart","version":"0.0.3","summary":"Holds information about what the user added to their shopping cart.\n","producers":["Basket Service"],"consumers":["Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[{"label":"AsyncAPI Specification","url":"https://studio.asyncapi.com/#schema-lightMeasuredPayload"}],"historicVersions":["0.0.2","0.0.1"]},{"name":"OrderComplete","version":"0.0.1","summary":"Event represents when an order has been complete. (Delivered and finished)\n","producers":["Orders Service"],"consumers":["Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"RemovedItemFromCart","version":"0.0.1","summary":"Holds information about what the user removed from their cart.\n","producers":["Basket Service"],"consumers":["Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"ShipmentDelivered","version":"0.0.1","summary":"Event represents when a shipment has been delivered and received.\n","producers":["Shipping Service"],"consumers":["Order Service","Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]}]},{"name":"Payment Service","summary":"Event based application that integrates with Stripe.\n","owners":["dboyne"],"repository":{},"tags":[],"externalLinks":[],"publishes":[{"name":"PaymentProcessed","version":"0.0.1","summary":"Holds information about the payment that has been processed.\n","producers":["Payment Service"],"consumers":["Orders Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]}],"subscribes":[{"name":"OrderRequested","version":"0.0.1","summary":"Holds information about the customers order.\n","producers":["Basket Service"],"consumers":["Payment Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]}]},{"name":"Shipping Service","summary":"Event based application that handles processing of shipments, preparing them and dispatching them.\n","owners":["dboyne"],"repository":{"language":"JavaScript","url":"https://github.com/boyney123/pretend-shipping-service"},"tags":[],"externalLinks":[],"publishes":[{"name":"ShipmentDelivered","version":"0.0.1","summary":"Event represents when a shipment has been delivered and received.\n","producers":["Shipping Service"],"consumers":["Order Service","Data Lake"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"ShipmentDispatched","version":"0.0.1","summary":"Event represents when a shipment has been dispatched.\n","producers":["Shipping Service"],"consumers":["Shipping Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"ShipmentPrepared","version":"0.0.1","summary":"Event represents when a shipment has finished being prepared and is ready to be dispatched.\n","producers":["Shipping Service"],"consumers":["Shipping Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]}],"subscribes":[{"name":"OrderConfirmed","version":"0.0.1","summary":"Event represents when an order has been confirmed and ready to be processed (shipped for example)\n","producers":["Orders Service"],"consumers":["Shipping Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"ShipmentDispatched","version":"0.0.1","summary":"Event represents when a shipment has been dispatched.\n","producers":["Shipping Service"],"consumers":["Shipping Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]},{"name":"ShipmentPrepared","version":"0.0.1","summary":"Event represents when a shipment has finished being prepared and is ready to be dispatched.\n","producers":["Shipping Service"],"consumers":["Shipping Service"],"owners":["dboyne","mSmith"],"externalLinks":[],"historicVersions":[]}]}]},"__N_SSG":true},"page":"/visualiser","query":{},"buildId":"R1JBWbiD3Q61grTfkBBSU","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/core",
-  "version": "0.1.13",
+  "version": "0.1.17",
   "publishConfig": {
     "access": "public"
   },

package/pages/events/[name].tsx CHANGED Viewed

@@ -34,14 +34,16 @@ export const getComponents = ({ event, schema, examples }: any) => ({
     return match ? <SyntaxHighlighter language={match[1]} {...props} /> : <code className={className} {...props} />;
   },
-  Schema: ({ title = 'Event Schema' }: { title: string }) => {
+  Schema: ({ title }: { title: string }) => {
     if (!schema) return null;
     return (
       <section className="mt-8 xl:mt-10">
-        <h2 id="activity-title" className="text-lg font-medium text-gray-900 underline">
-          {title}
-        </h2>
+        {title && (
+          <h2 id="activity-title" className="text-lg font-medium text-gray-900 underline">
+            {title}
+          </h2>
+        )}
         <SyntaxHighlighter language={schema.language} showLineNumbers={false} name={`${event.name} Schema (${schema.language})`}>
           {schema.snippet}
         </SyntaxHighlighter>
@@ -49,12 +51,12 @@ export const getComponents = ({ event, schema, examples }: any) => ({
     );
   },
   SchemaViewer: ({
-    title = 'Event Schema',
+    title,
     renderRootTreeLines = false,
     defaultExpandedDepth = 1,
     maxHeight,
   }: {
-    title: string;
+    title?: string;
     renderRootTreeLines?: boolean;
     defaultExpandedDepth?: number;
     maxHeight?: string;
@@ -63,7 +65,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
     return (
       <section className="mt-8 xl:mt-10">
-        <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>
+        {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
         <SchemaViewer
           schema={schema.snippet}
           maxHeight={parseInt(maxHeight, 10)}
@@ -83,7 +85,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
     );
     return null;
   },
-  Mermaid: ({ title, charts }: { title: string; charts?: string[] }) => (
+  Mermaid: ({ title, charts }: { title?: string; charts?: string[] }) => (
     <div className="mx-auto w-full py-10">
       {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
       <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} charts={charts} />
@@ -99,7 +101,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
     isDraggable,
   }: // isHorizontal,
   {
-    title: string;
+    title?: string;
     maxHeight?: number;
     maxZoom?: number;
     fitView?: boolean;

package/pages/services/[name].tsx CHANGED Viewed

@@ -22,7 +22,7 @@ interface ServicesPageProps {
   notFound?: boolean;
 }
-function MermaidComponent({ title, service, charts }: { title: string; service: Service; charts?: string[] }) {
+function MermaidComponent({ title, service, charts }: { title?: string; service: Service; charts?: string[] }) {
   return (
     <div className="mx-auto w-full py-10">
       {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
@@ -46,7 +46,7 @@ const getComponents = (service) => ({
     isDraggable,
   }: // isHorizontal,
   {
-    title: string;
+    title?: string;
     maxHeight?: number;
     maxZoom?: number;
     fitView?: boolean;

package/pages/visualiser.tsx ADDED Viewed

@@ -0,0 +1,248 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import debounce from 'lodash.debounce';
+import type { Event, Service } from '@eventcatalog/types';
+import { SearchIcon } from '@heroicons/react/outline';
+import { getAllEvents } from '@/lib/events';
+import { getAllServices } from '@/lib/services';
+import { useConfig } from '@/hooks/EventCatalog';
+import NodeGraph from '@/components/Mdx/NodeGraph/NodeGraph';
+import getBackgroundColor from '@/utils/random-bg';
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+export interface PageProps {
+  events: Event[];
+  services: Service[];
+}
+function Graph({ events, services }: PageProps) {
+  const { title } = useConfig();
+  const [searchFilter, setSearchFilter] = useState('');
+  const [selectedRootNode, setSelectedRootNode] = useState<any>();
+  const [listItemsToRender, setListItemsToRender] = useState({ events, services });
+  const { query, isReady: isRouterReady } = useRouter();
+  const { name, type } = query;
+  const handleListItemSelection = (data: Event | Service, dataType: 'event' | 'service') => {
+    setSelectedRootNode({ label: data.name, data, type: dataType });
+  };
+  const searchOnChange = useCallback(
+    debounce((e) => {
+      setSearchFilter(e.target.value);
+    }, 500),
+    [listItemsToRender]
+  );
+  const handleDropdownSelect = (e) => {
+    const { value } = e.target;
+    const selectedItem = JSON.parse(value);
+    setSelectedRootNode(selectedItem);
+  };
+  const getListItemsToRender = useCallback(() => {
+    if (!searchFilter) return { events, services };
+    const filteredEvents = events.filter((event) => event.name.indexOf(searchFilter) > -1);
+    const filteredServices = services.filter((service) => service.name.indexOf(searchFilter) > -1);
+    return { events: filteredEvents, services: filteredServices };
+  }, [events, services, searchFilter]);
+  useEffect(() => {
+    const filteredListItems = getListItemsToRender();
+    setListItemsToRender(filteredListItems);
+  }, [searchFilter, getListItemsToRender]);
+  useEffect(() => {
+    if (!isRouterReady) return;
+    const initialDataToLoad = events[0];
+    const initialSelectedRootNode = { label: initialDataToLoad.name, type: 'event', data: initialDataToLoad };
+    if (name && type) {
+      const dataToSearch = type === 'service' ? services : (events as []);
+      const match = dataToSearch.find((item) => item.name === name);
+      if (match) {
+        setSelectedRootNode({ label: match.name, type, data: match });
+      } else {
+        setSelectedRootNode(initialSelectedRootNode);
+      }
+    } else {
+      setSelectedRootNode(initialSelectedRootNode);
+    }
+  }, [name, type, events, services, isRouterReady]);
+  return (
+    <div className="h-screen overflow-hidden">
+      <Head>
+        <title>{title} - Visualiser</title>
+      </Head>
+      <div className="sm:hidden px-4 py-2 bg-gray-200 border-b border-gray-300">
+        <div className="relative rounded-md shadow-sm">
+          <select
+            className=" block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            onChange={handleDropdownSelect}
+          >
+            <option>Please select your event or service</option>
+            {events.map((item) => (
+              <option value={JSON.stringify({ label: item.name, data: item, type: 'event' })}>Event: {item.name}</option>
+            ))}
+            {services.map((item) => (
+              <option value={JSON.stringify({ label: item.name, data: item, type: 'service' })}>Service: {item.name}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="grid grid-cols-8 xl:grid-cols-6">
+        <div className="hidden sm:block col-span-2 xl:col-span-1 bg-white px-4  h-screen overflow-auto border-r-2 shadow-md border-gray-200 py-3">
+          <div className="border-b border-gray-200 pb-6">
+            <div className="mt-1 relative rounded-md shadow-sm">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </div>
+              <input
+                type="text"
+                name="event"
+                id="event"
+                onChange={searchOnChange}
+                placeholder="Find Event or Service"
+                className="focus:ring-gray-500 focus:border-gray-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md"
+              />
+            </div>
+          </div>
+          <div className="space-y-6">
+            <div>
+              <span className="font-bold block py-2">
+                Events {` `}
+                {searchFilter && (
+                  <>
+                    ({listItemsToRender.events.length}/{events.length})
+                  </>
+                )}
+                {!searchFilter && <>({events.length})</>}
+              </span>
+              {listItemsToRender.events.length === 0 && <span className="text-sm text-gray-300">No Events Found</span>}
+              <ul className="space-y-4 overflow-auto">
+                {listItemsToRender.events.map((event) => {
+                  const isSelected = selectedRootNode ? selectedRootNode.label === event.name : false;
+                  return (
+                    <ListItem
+                      type="event"
+                      key={event.name}
+                      data={event}
+                      onClick={(e) => handleListItemSelection(e.data, 'event')}
+                      isSelected={isSelected}
+                    />
+                  );
+                })}
+              </ul>
+            </div>
+            <div>
+              <span className="font-bold block py-2">
+                Services {` `}
+                {searchFilter && (
+                  <>
+                    ({listItemsToRender.services.length}/{services.length})
+                  </>
+                )}
+                {!searchFilter && <>({services.length})</>}
+              </span>
+              {listItemsToRender.services.length === 0 && <span className="text-sm text-gray-300">No Services Found</span>}
+              <ul className="space-y-4 overflow-auto">
+                {listItemsToRender.services.map((service) => {
+                  const isSelected = selectedRootNode ? selectedRootNode.label === service.name : false;
+                  return (
+                    <ListItem
+                      type="event"
+                      key={service.name}
+                      data={service}
+                      onClick={(e) => handleListItemSelection(e.data, 'service')}
+                      isSelected={isSelected}
+                    />
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div className="bg-gray-200 h-screen col-span-12 sm:col-span-6  xl:col-span-5">
+          {selectedRootNode && (
+            <NodeGraph
+              source={selectedRootNode.type}
+              data={selectedRootNode.data}
+              title="Visualiser"
+              subtitle={selectedRootNode.data.name}
+              rootNodeColor={getBackgroundColor(selectedRootNode.label)}
+              fitView
+              isAnimated
+              isDraggable
+              includeBackground
+              renderWithBorder={false}
+              maxHeight="100%"
+              includeEdgeLabels
+              includeNodeIcons
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+interface ListItemProps {
+  data: Service | Event;
+  // eslint-disable-next-line no-unused-vars
+  onClick(data: { data: Event | Service; type: string }): void;
+  type: 'event' | 'service';
+  isSelected: boolean;
+}
+function ListItem({ data, onClick, type, isSelected }: ListItemProps) {
+  const border = isSelected ? 'border-green-500 bg-green-50 shadow-md ' : '';
+  return (
+    <li className="flex">
+      <button
+        type="button"
+        onClick={() => onClick({ data, type })}
+        className={`flex shadow-sm rounded-md w-full text-left border ${border}`}
+      >
+        <div
+          style={{
+            background: getBackgroundColor(data.name),
+          }}
+          className={classNames(
+            'bg-red-500',
+            'flex-shrink-0 flex h-full items-center justify-center w-4 text-white text-sm font-medium rounded-l-md'
+          )}
+        />
+        <div className={`w-full rounded-r-md border-t border-r border-b ${isSelected ? 'bg-green-50' : 'bg-white'}`}>
+          <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
+            <div className="text-gray-900 font-bold hover:text-gray-600 break-all text-xs xl:text-md">{data.name}</div>
+            <div className="hidden xl:block text-gray-500 text-xs font-normal mt-2 ">{data.summary}</div>
+          </div>
+        </div>
+      </button>
+    </li>
+  );
+}
+export default Graph;
+export const getStaticProps = () => {
+  const events = getAllEvents();
+  const services = getAllServices();
+  return {
+    props: {
+      events,
+      services,
+    },
+  };
+};

package/styles/globals.css CHANGED Viewed

@@ -46,3 +46,7 @@ event-table thead th {
   background-color: rgba(0, 0, 0, 0.5);
   user-select: none;
 }
+.react-flow__controls-no-shadow{
+  box-shadow: none !important;
+}

package/.next/static/Wp8i1_b29rcfszKFNI7O4/_buildManifest.js DELETED Viewed

@@ -1 +0,0 @@

- self.__BUILD_MANIFEST=function(s,e,c,a,t,n,i,f,b,d,r,v,u,k){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/pages/index-fe1a9e09c7f51e66.js"],"/_error":["static/chunks/pages/_error-5a714c45c50a8db4.js"],"/events":[s,e,c,i,"static/chunks/pages/events-1f39499146c9c75f.js"],"/events/[name]":[s,a,f,b,d,e,c,t,r,v,n,u,k,"static/chunks/pages/events/[name]-89e1edc81aa51fc3.js"],"/events/[name]/logs":[e,"static/chunks/364-9c039ca46569869e.js","static/css/5eeed9cb243ce668.css","static/chunks/pages/events/[name]/logs-707da36de8222a98.js"],"/events/[name]/v/[version]":[s,a,f,b,d,e,c,t,r,v,n,u,k,"static/chunks/pages/events/[name]/v/[version]-d8d4d12f05da9c8a.js"],"/overview":["static/chunks/pages/overview-2f0bfad06c84e437.js"],"/services":[s,e,c,i,"static/chunks/pages/services-f52121c6dc1211aa.js"],"/services/[name]":[s,a,e,c,t,n,"static/chunks/pages/services/[name]-204382bfbc48b1b4.js"],"/users/[id]":[s,c,"static/chunks/pages/users/[id]-d3140bb155f8fb45.js"],sortedPages:["/","/_app","/_error","/events","/events/[name]","/events/[name]/logs","/events/[name]/v/[version]","/overview","/services","/services/[name]","/users/[id]"]}}("static/chunks/176cb4e4-8a0f6f010ef8accb.js","static/chunks/519-7c428c1e49c8e614.js","static/chunks/962-d5070461f6d4a478.js","static/chunks/b744740b-94e91620ba96ccbf.js","static/chunks/280-06401c009983574c.js","static/chunks/651-7a25d8468f22423c.js","static/chunks/274-11c4d093341d7201.js","static/chunks/1df474da-91f6061ee61707c6.js","static/chunks/7f5d3f51-7158fdd5a44cedd5.js","static/chunks/2edb282b-9e1cce5842787609.js","static/chunks/5-f60eecf67567a225.js","static/chunks/620-d80b0351ea428525.js","static/chunks/178-bc36881df28d1bab.js","static/css/7e14b4dede1671ad.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/.next/static/Wp8i1_b29rcfszKFNI7O4/_ssgManifest.js DELETED Viewed

	@@ -1 +0,0 @@
1	- self.__SSG_MANIFEST=new Set(["\u002Foverview","\u002Fevents","\u002Fservices","\u002Fevents\u002F[name]\u002Flogs","\u002Fservices\u002F[name]","\u002Fusers\u002F[id]","\u002Fevents\u002F[name]","\u002Fevents\u002F[name]\u002Fv\u002F[version]"]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()

package/.next/static/chunks/178-bc36881df28d1bab.js DELETED Viewed

@@ -1 +0,0 @@

- (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[178],{81178:function(e,n,t){"use strict";t.r(n),t.d(n,{__N_SSG:function(){return R},default:function(){return U},getComponents:function(){return T}});var r=t(52322),a=t(97729),s=t(23816),l=t(61790),i=t(2784),c=t(63548),o=t(86562),d=t(85411);function m(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function u(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){m(e,n,t[n])}))}return e}function x(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var h=function(e){var n=e.language,t=e.name,a=void 0===t?"":t,s=x(e,["language","name"]),l=(0,i.useState)(!1),m=l[0],h=l[1];return(0,r.jsxs)("div",{className:"relative group",children:[(0,r.jsx)("button",{type:"button",onClick:function(){(0,d.Z)(s.children),h(!0),setTimeout((function(){return h(!1)}),2e3)},className:"absolute top-2 right-5 text-sm bg-gray-700 text-white rounded-md py-1 px-4 transform transition opacity-0 group-hover:opacity-100",children:m?"Copied":"Copy"}),(0,r.jsx)(o.Z,u({style:c.Z,language:n},s,{wrapLines:!0,className:"max-h-96 overflow-auto",children:s.children.replace(/\\n/g,"\n")})),a&&(0,r.jsx)("span",{className:"-mb-2 block text-xs text-right font-bold",children:a})]})};function f(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return n.filter(Boolean).join(" ")}var g=function(e){var n=e.title,t=void 0===n?"Examples":n,a=e.description,s=e.examples,l=void 0===s?[]:s,c=e.showLineNumbers,o=l.map((function(e,n){return{name:e.name||"Example ".concat(n+1),content:e.snippet,description:e.description,langugage:e.langugage}})),d=(0,i.useState)(o[0]),m=d[0],u=d[1];return(0,r.jsx)("div",{className:"my-5 examples",children:(0,r.jsxs)("div",{className:"",children:[(0,r.jsx)("h2",{className:"text-lg font-medium text-gray-700 underline",children:t}),a&&(0,r.jsx)("p",{className:"text-md font-medium text-gray-700",children:a}),(0,r.jsxs)("div",{children:[(0,r.jsx)("nav",{className:"-mb-px flex","aria-label":"Tabs",children:o.map((function(e){var n=e.name===m.name;return(0,r.jsxs)("button",{type:"button",onClick:function(){return function(e){u(e)}(e)},className:f(n?"border-green-500 text-green-600 selected":"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300","whitespace-nowrap py-4 border-b-2 font-medium text-sm important:no-underline px-8 hover:bg-gray-50 transition"),"aria-current":n?"page":void 0,children:[e.name,(0,r.jsxs)("span",{className:"block text-xs mt-",children:["(",e.langugage,")"]})]},e.name)}))}),(0,r.jsxs)("div",{className:"my-4",children:[(0,r.jsx)(h,{language:m.langugage,showLineNumbers:c,children:m.content}),m.langugage&&(0,r.jsx)("span",{className:"-mb-2 block text-xs text-right font-bold",children:m.name})]})]})]})})},p=t(46892),j=t(62455),v=t(4573),b=t(39097),y=t(70314),N=t(17962),w=t(55008);var O=function(e){var n=e.event,t=e.loadedVersion,a=e.isOldVersion,s=(0,w.aF)().getUserById,l=n.name,i=n.owners,c=n.producers,o=n.consumers,d=n.historicVersions,m=n.externalLinks,u=n.schema,x=(0,y.default)().publicRuntimeConfig,h=(void 0===x?{}:x).basePath,f=void 0===h?"":h;return(0,r.jsxs)("aside",{className:"hidden xl:block xl:pl-8",children:[(0,r.jsx)("h2",{className:"sr-only",children:"Details"}),(0,r.jsx)("div",{className:"pt-6 py-6 space-y-8",children:(0,r.jsxs)("div",{children:[(0,r.jsxs)("h2",{className:"text-sm font-medium text-gray-500",children:[(0,r.jsx)(N.FMB,{className:"h-5 w-5 text-green-400 inline-block mr-2","aria-hidden":"true"}),"Producers"]}),(0,r.jsx)("ul",{className:"mt-2 leading-8",children:c.map((function(e){return(0,r.jsx)("li",{className:"inline mr-1",children:(0,r.jsx)(b.default,{href:"/services/".concat(e),children:(0,r.jsxs)("a",{className:"relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5",children:[(0,r.jsx)("div",{className:"absolute flex-shrink-0 flex items-center justify-center",children:(0,r.jsx)("span",{className:"h-1.5 w-1.5 rounded-full bg-green-500 animate animate-pulse","aria-hidden":"true"})}),(0,r.jsx)("div",{className:"ml-3.5 text-sm font-medium text-gray-900",children:e})]})})},e)}))})]})}),(0,r.jsx)("div",{className:"border-t border-gray-200 py-6 space-y-8",children:(0,r.jsxs)("div",{children:[(0,r.jsxs)("h2",{className:"text-sm font-medium text-gray-500",children:[(0,r.jsx)(N.FMB,{className:"h-5 w-5 text-indigo-400 inline-block mr-2","aria-hidden":"true"}),"Consumers"]}),(0,r.jsx)("ul",{className:"mt-2 leading-8",children:o.map((function(e){return(0,r.jsx)("li",{className:"inline",children:(0,r.jsx)(b.default,{href:"/services/".concat(e),children:(0,r.jsxs)("a",{href:"#",className:"relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5",children:[(0,r.jsx)("div",{className:"absolute flex-shrink-0 flex items-center justify-center",children:(0,r.jsx)("span",{className:"h-1.5 w-1.5 rounded-full bg-indigo-500 animate animate-pulse","aria-hidden":"true"})}),(0,r.jsx)("div",{className:"ml-3.5 text-sm font-medium text-gray-900",children:e})]})})},e)}))})]})}),d.length>0&&(0,r.jsx)("div",{className:"border-t border-gray-200 py-6",children:(0,r.jsxs)("div",{children:[(0,r.jsx)("h2",{className:"text-sm font-medium text-gray-500",children:"Event Versions"}),(0,r.jsxs)("ul",{className:"mt-2 leading-8 text-left text-blue-500",children:[(0,r.jsx)("li",{className:"text-sm inline ",children:(0,r.jsx)(b.default,{href:"/events/".concat(l),children:(0,r.jsx)("a",{children:(0,r.jsx)("span",{className:"inline-flex mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative ".concat("latest"===t?"bg-blue-400 text-white shadow-md font-bold underline":"bg-blue-100 text-blue-800"),children:"Latest"})})})}),d.map((function(e){var n=t===e?"bg-blue-400 text-white shadow-md font-bold underline":"bg-blue-100 text-blue-800";return(0,r.jsx)("li",{className:"text-sm inline",children:(0,r.jsx)(b.default,{href:"/events/".concat(l,"/v/").concat(e),children:(0,r.jsx)("a",{children:(0,r.jsxs)("span",{className:"inline-flex mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative ".concat(n),children:["v",e]})})})},e)}))]})]})}),i&&i.length>0&&(0,r.jsx)("div",{className:"border-t border-gray-200 py-6 space-y-8",children:(0,r.jsxs)("div",{children:[(0,r.jsx)("h2",{className:"text-sm font-medium text-gray-500",children:"Event Owners"}),(0,r.jsx)("ul",{className:"mt-4 leading-8 space-y-2",children:i.map((function(e){var n=s(e);return n?(0,r.jsx)("li",{className:"flex justify-start",children:(0,r.jsx)(b.default,{href:"/users/".concat(e),children:(0,r.jsxs)("a",{className:"flex items-center space-x-3",children:[(0,r.jsx)("div",{className:"flex-shrink-0",children:(0,r.jsx)("img",{className:"h-5 w-5 rounded-full",src:n.avatarUrl,alt:""})}),(0,r.jsx)("div",{className:"text-sm font-medium text-gray-900",children:n.name})]})})},e):null}))})]})}),(0,r.jsxs)("div",{className:"border-t border-gray-200 py-6 space-y-1",children:[u&&(0,r.jsxs)("a",{href:u?a?"".concat(f,"/schemas/").concat(l,"/").concat(t,"/schema.").concat(u.extension):"".concat(f,"/schemas/").concat(l,"/schema.").concat(u.extension):null,download:"".concat(l,"(").concat(n.version,").").concat(u.extension),className:"hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-200 bg-gray-800 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900",children:[(0,r.jsx)(N._8t,{className:"-ml-1 mr-2 h-5 w-5 text-gray-200","aria-hidden":"true"}),(0,r.jsx)("span",{children:"Download Schema"})]}),d.length>0&&(0,r.jsx)(b.default,{href:"/events/".concat(l,"/logs"),children:(0,r.jsx)("a",{className:"hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200",children:(0,r.jsx)("span",{children:"View Changes"})})}),m.length>0&&m.map((function(e){return(0,r.jsxs)("a",{href:e.url,target:"_blank",type:"button",className:"hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-teal-300 shadow-sm text-sm font-medium rounded-md text-teal-800 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-200",rel:"noreferrer",children:[(0,r.jsx)(N.h0n,{className:"-ml-1 mr-2 h-5 w-5 text-teal-200","aria-hidden":"true"}),(0,r.jsx)("span",{children:"".concat(e.label)})]},e.url)}))]})]})},E=t(4488),k=t(52428),S=t(57840),V=t(69931),P=t(81669),Z=t.n(P);(0,V.fH)();var C=function(e){var n=e.schema,t=e.maxHeight,a=e.renderRootTreeLines,s=void 0!==a&&a,l=e.hideExamples,c=void 0!==l&&l,o=e.defaultExpandedDepth,d=void 0===o?1:o,m=(0,i.useMemo)((function(){return JSON.parse(n)}),[n]);return(0,r.jsx)(S.K,{schema:m,emptyText:"No schema defined",maxHeight:t,defaultExpandedDepth:d,renderRootTreeLines:s,hideExamples:c,className:Z().schemaViewer})},D=t(81262);function _(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function L(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){_(e,n,t[n])}))}return e}function H(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var R=!0,T=function(e){var n=e.event,t=e.schema,a=e.examples;return{code:function(e){var n=e.className,t=H(e,["className"]),a=/language-(\w+)/.exec(n||"");return a?(0,r.jsx)(h,L({language:a[1]},t)):(0,r.jsx)("code",L({className:n},t))},Schema:function(e){var a=e.title,s=void 0===a?"Event Schema":a;return t?(0,r.jsxs)("section",{className:"mt-8 xl:mt-10",children:[(0,r.jsx)("h2",{id:"activity-title",className:"text-lg font-medium text-gray-900 underline",children:s}),(0,r.jsx)(h,{language:t.language,showLineNumbers:!1,name:"".concat(n.name," Schema (").concat(t.language,")"),children:t.snippet})]}):null},SchemaViewer:function(e){var n=e.title,a=void 0===n?"Event Schema":n,s=e.renderRootTreeLines,l=void 0!==s&&s,i=e.defaultExpandedDepth,c=void 0===i?1:i,o=e.maxHeight;return t?(0,r.jsxs)("section",{className:"mt-8 xl:mt-10",children:[(0,r.jsx)("h2",{className:"text-lg font-medium text-gray-900 underline",children:a}),(0,r.jsx)(C,{schema:t.snippet,maxHeight:parseInt(o,10),renderRootTreeLines:l,defaultExpandedDepth:c})]}):null},Admonition:l.Z,EventExamples:function(e){return a.length>0?(0,r.jsx)(g,L({},e,{examples:a,showLineNumbers:!0})):(console.log("You are using the <EventExamples /> component without any examples, please read https://eventcatalog.dev/docs/events/adding-examples for more information"),null)},Mermaid:function(e){var t=e.title,a=e.charts;return(0,r.jsxs)("div",{className:"mx-auto w-full py-10",children:[t&&(0,r.jsx)("h2",{className:"text-lg font-medium text-gray-900 underline",children:t}),(0,r.jsx)(v.Z,{source:"event",data:n,rootNodeColor:(0,p.Z)(n.name),charts:a})]})},NodeGraph:function(e){var t=e.title,a=e.maxHeight,s=e.maxZoom,l=e.fitView,i=e.zoomOnScroll,c=e.isAnimated,o=e.isDraggable;return(0,r.jsxs)("div",{className:"mx-auto w-full",children:[t&&(0,r.jsx)("h2",{className:"text-lg font-medium text-gray-900 underline",children:t}),(0,r.jsx)(D.Z,{source:"event",data:n,rootNodeColor:(0,p.Z)(n.name),maxHeight:a,maxZoom:s,fitView:l,zoomOnScroll:i,isAnimated:c,isDraggable:o})]})}}};function U(e){var n=e.event,t=e.markdown,l=e.loadedVersion,i=e.notFound,c=(0,w.ZR)().title,o=(0,w.wG)(),d=o.getEditUrl,m=o.hasEditUrl,u=n.name,x=n.summary,h=n.draft,f=n.schema,g=n.examples,p=n.version;if(i)return(0,r.jsx)(E.Z,{type:"event",name:n.name,editUrl:m?d("/events/".concat(u,"/index.md")):""});var v=t.lastModifiedDate,b=[{name:"Events",href:"/events",current:!1},{name:u,href:"/services/".concat(u),current:!0}],y=T({event:n,schema:f,examples:g});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.default,{children:(0,r.jsxs)("title",{children:[c," - ",u," v",p]})}),(0,r.jsx)(j.Z,{title:u,editUrl:m?d("/events/".concat(u,"/index.md")):"",subtitle:x,draft:h,lastModifiedDate:v,tags:[{label:"v".concat(p)}],breadCrumbs:(0,r.jsx)(k.Z,{pages:b}),isOldVersion:"latest"!==l,latestVersionUrl:"/events/".concat(u),version:l,sidebar:(0,r.jsx)(O,{event:n,loadedVersion:l,isOldVersion:"latest"!==l}),children:(0,r.jsx)(s.R,L({},t.source,{components:y}))})]})}},81669:function(e){e.exports={schemaViewer:"SchemaViewer_schemaViewer__un45l"}}}]);