@eventcatalog/core 0.1.9 → 0.1.13

package/.next/server/chunks/{730.js → 685.js}

@@ -1,6 +1,6 @@
 "use strict";
-exports.id = 730;
-exports.ids = [730];
+exports.id = 685;
+exports.ids = [685];
 exports.modules = {
 
 /***/ 2455:
@@ -238,6 +238,415 @@ function Admonition({ children , type , className =''  }) {
 };
 
 
+/***/ }),
+
+/***/ 1262:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* binding */ NodeGraph_NodeGraph)
+});
+
+// EXTERNAL MODULE: external "react/jsx-runtime"
+var jsx_runtime_ = __webpack_require__(997);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(6689);
+// EXTERNAL MODULE: external "react-flow-renderer"
+var external_react_flow_renderer_ = __webpack_require__(6987);
+var external_react_flow_renderer_default = /*#__PURE__*/__webpack_require__.n(external_react_flow_renderer_);
+// EXTERNAL MODULE: external "next/config"
+var config_ = __webpack_require__(4558);
+var config_default = /*#__PURE__*/__webpack_require__.n(config_);
+;// CONCATENATED MODULE: ./components/Mdx/NodeGraph/GraphElements.ts
+
+
+const { publicRuntimeConfig: { basePath =''  } = {
+}  } = config_default()();
+const MIN_NODE_WIDTH = 150;
+const generateLink = (value, type)=>basePath !== '' ? `${basePath}/${type}/${value}` : `/${type}/${value}`
+;
+const calcWidth = (value)=>value.length * 7 > MIN_NODE_WIDTH ? value.length * 7 : MIN_NODE_WIDTH
+;
+const buildNodeEdge = ({ id , target , source , isAnimated =true  })=>({
+        id,
+        target,
+        source,
+        type: 'smoothstep',
+        arrowHeadType: external_react_flow_renderer_.ArrowHeadType.ArrowClosed,
+        animated: isAnimated
+    })
+;
+const buildNodeData = ({ label , type , maxWidth  })=>{
+    const width = calcWidth(label);
+    const linkType = type === 'service' ? 'services' : 'events';
+    const link = generateLink(label, linkType);
+    return {
+        label,
+        link,
+        width,
+        maxWidth
+    };
+};
+/**
+ * Builds a graph for a given event
+ * @param {Event} - event
+ * @param rootNodeColor - The color of the root node
+ * @param isAnimated - whether to animate the graph
+ */ const getEventElements = ({ name: eventName , producers: eventProducers , consumers: eventConsumers  }, rootNodeColor = '#2563eb', isAnimated = true)=>{
+    const position = {
+        x: 0,
+        y: 0
+    };
+    const consumerColor = '#818cf8';
+    const producerColor = '#75d7b6';
+    const producersNames = eventProducers.map((s)=>calcWidth(s)
+    );
+    const maxProducersWidth = Math.max(...producersNames);
+    const consumersNames = eventConsumers.map((s)=>calcWidth(s)
+    );
+    const maxConsumersWidth = Math.max(...consumersNames);
+    const eventNameAsNodeID = `ev-${eventName.replace(/ /g, '_')}`;
+    const eventNodeWidth = calcWidth(eventName);
+    const producers = eventProducers.map((node)=>({
+            label: node,
+            id: `pr-${node.replace(/ /g, '_')}`
+        })
+    );
+    const consumers = eventConsumers.map((node)=>({
+            label: node,
+            id: `co-${node.replace(/ /g, '_')}`
+        })
+    );
+    // Transforms services & event into a graph model
+    const producersNodes = producers.map(({ label , id  })=>{
+        const nodeWidth = calcWidth(label);
+        const diff = maxProducersWidth - nodeWidth;
+        const nodeMaxWidth = diff !== 0 ? nodeWidth - diff : maxProducersWidth;
+        return {
+            id,
+            data: buildNodeData({
+                label,
+                type: 'service',
+                maxWidth: nodeMaxWidth
+            }),
+            style: {
+                border: `2px solid ${producerColor}`,
+                width: nodeWidth
+            },
+            type: 'input',
+            position
+        };
+    });
+    const consumersNodes = consumers.map(({ id , label  })=>{
+        const width = calcWidth(label);
+        return {
+            id,
+            data: buildNodeData({
+                label,
+                type: 'service',
+                maxWidth: maxConsumersWidth
+            }),
+            style: {
+                border: `2px solid ${consumerColor}`,
+                width
+            },
+            type: 'output',
+            position
+        };
+    });
+    const eventNode = {
+        id: eventNameAsNodeID,
+        data: buildNodeData({
+            label: eventName,
+            type: 'event',
+            maxWidth: eventNodeWidth
+        }),
+        style: {
+            border: `2px solid ${rootNodeColor}`,
+            width: eventNodeWidth
+        },
+        position
+    };
+    // Build connections
+    const producersEdges = producers.map(({ id , label  })=>buildNodeEdge({
+            id: `epe-${label.replace(/ /g, '_')}`,
+            source: id,
+            target: eventNameAsNodeID,
+            isAnimated
+        })
+    );
+    const consumersEdges = consumers.map(({ id , label  })=>buildNodeEdge({
+            id: `ece-${label.replace(/ /g, '_')}`,
+            target: id,
+            source: eventNameAsNodeID,
+            isAnimated
+        })
+    );
+    // Merge nodes in order
+    const elements = [
+        ...producersNodes,
+        eventNode,
+        ...consumersNodes,
+        ...producersEdges,
+        ...consumersEdges
+    ];
+    return elements;
+};
+/**
+ * Builds a graph for a given service
+ * @param {Service} service
+ * @param {string} rootNodeColor of the root node
+ * @param isAnimated whether the graph should be animated
+ * @returns {string} Mermaid Graph
+ */ const getServiceElements = ({ publishes , subscribes , name: serviceName  }, rootNodeColor = '#2563eb', isAnimated = true)=>{
+    const position = {
+        x: 0,
+        y: 0
+    };
+    const publishColor = '#818cf8';
+    const subscribeColor = '#75d7b6';
+    const publishesNames = publishes.map((e)=>calcWidth(e.name)
+    );
+    const maxPublishesWidth = Math.max(...publishesNames);
+    const subscribesNames = subscribes.map((e)=>calcWidth(e.name)
+    );
+    const maxSubscribesWidth = Math.max(...subscribesNames);
+    const serviceNameAsNodeID = `ser-${serviceName.replace(/ /g, '_')}`;
+    // Transforms services & event into a graph model
+    const publishesNodes = publishes.map((node)=>{
+        const nodeWidth = calcWidth(node.name);
+        return {
+            id: `pub-${node.name.replace(/ /g, '_')}`,
+            data: buildNodeData({
+                label: node.name,
+                type: 'event',
+                maxWidth: maxPublishesWidth
+            }),
+            style: {
+                border: `2px solid ${publishColor}`,
+                width: nodeWidth
+            },
+            type: 'output',
+            position
+        };
+    });
+    const subscribesNodes = subscribes.map((node)=>{
+        const nodeWidth = calcWidth(node.name);
+        const diff = maxSubscribesWidth - nodeWidth;
+        const nodeMaxWidth = diff !== 0 ? nodeWidth - diff : maxSubscribesWidth;
+        return {
+            id: `sub-${node.name.replace(/ /g, '_')}`,
+            data: buildNodeData({
+                label: node.name,
+                type: 'event',
+                maxWidth: nodeMaxWidth
+            }),
+            style: {
+                border: `2px solid ${subscribeColor}`,
+                width: nodeWidth
+            },
+            type: 'input',
+            position
+        };
+    });
+    const serviceNode = {
+        id: serviceNameAsNodeID,
+        data: buildNodeData({
+            label: serviceName,
+            type: 'service',
+            maxWidth: calcWidth(serviceName)
+        }),
+        style: {
+            border: `2px solid ${rootNodeColor}`,
+            width: calcWidth(serviceName)
+        },
+        position
+    };
+    // Build connections
+    const publishesEdges = publishes.map((node)=>buildNodeEdge({
+            id: `ecp-${node.name.replace(/ /g, '_')}`,
+            source: serviceNameAsNodeID,
+            target: `pub-${node.name.replace(/ /g, '_')}`,
+            isAnimated
+        })
+    );
+    const subscribesEdges = subscribes.map((node)=>buildNodeEdge({
+            id: `esc-${node.name.replace(/ /g, '_')}`,
+            target: serviceNameAsNodeID,
+            source: `sub-${node.name.replace(/ /g, '_')}`,
+            isAnimated
+        })
+    );
+    // Merge nodes in order
+    const elements = [
+        ...subscribesNodes,
+        serviceNode,
+        ...publishesNodes,
+        ...publishesEdges,
+        ...subscribesEdges
+    ];
+    return elements;
+};
+
+// EXTERNAL MODULE: external "dagre"
+var external_dagre_ = __webpack_require__(4214);
+var external_dagre_default = /*#__PURE__*/__webpack_require__.n(external_dagre_);
+;// CONCATENATED MODULE: ./components/Mdx/NodeGraph/GraphLayout.ts
+
+
+const nodeDefaultWidth = 150;
+const nodeDefaultHeight = 36;
+const offset = 48;
+const verticalOffset = offset / 1.5;
+function createGraphLayout(elements, isHorizontal) {
+    const dagreGraph = new (external_dagre_default()).graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(()=>({
+        })
+    );
+    dagreGraph.setGraph({
+        rankdir: 'LR',
+        ranksep: offset * 2,
+        nodesep: verticalOffset
+    });
+    elements.forEach((element)=>{
+        if ((0,external_react_flow_renderer_.isNode)(element)) {
+            var ref, ref1, ref2, ref3;
+            // eslint-disable-next-line no-underscore-dangle
+            const nodeWidth = ((ref = element.__rf) === null || ref === void 0 ? void 0 : ref.width) ? (ref1 = element.__rf) === null || ref1 === void 0 ? void 0 : ref1.width : (ref2 = element.data) === null || ref2 === void 0 ? void 0 : ref2.width;
+            dagreGraph.setNode(element.id, {
+                width: nodeWidth || nodeDefaultWidth,
+                // eslint-disable-next-line no-underscore-dangle
+                height: ((ref3 = element.__rf) === null || ref3 === void 0 ? void 0 : ref3.height) || nodeDefaultHeight
+            });
+        } else {
+            dagreGraph.setEdge(element.source, element.target);
+        }
+    });
+    // Calculate the layout, to get the node positions with their widths and heights
+    external_dagre_default().layout(dagreGraph);
+    return elements.map((element)=>{
+        if ((0,external_react_flow_renderer_.isNode)(element)) {
+            var ref;
+            const node = dagreGraph.node(element.id);
+            element.targetPosition = isHorizontal ? external_react_flow_renderer_.Position.Left : external_react_flow_renderer_.Position.Top;
+            element.sourcePosition = isHorizontal ? external_react_flow_renderer_.Position.Right : external_react_flow_renderer_.Position.Bottom;
+            element.position = {
+                x: offset / 2 + node.x - ((element === null || element === void 0 ? void 0 : (ref = element.data) === null || ref === void 0 ? void 0 : ref.maxWidth) || node.width) / 2,
+                y: node.y - node.height / 2
+            };
+        }
+        return element;
+    });
+};
+// Helper - ReactFlow canvas height calculator
+const calcCanvasHeight = (data, type)=>{
+    const minHeight = 300;
+    const nodeSpacing = nodeDefaultHeight + verticalOffset;
+    let nodesHeight = 0;
+    if (type === 'event') {
+        nodesHeight = Math.max(data.producers.length, data.consumers.length) * nodeSpacing;
+    } else {
+        nodesHeight = Math.max(data.publishes.length, data.subscribes.length) * nodeSpacing;
+    }
+    return Math.max(minHeight, nodesHeight);
+};
+
+;// CONCATENATED MODULE: ./components/Mdx/NodeGraph/NodeGraph.tsx
+
+
+
+
+
+// NodeGraphBuilder component wrapping ReactFlow
+function NodeGraphBuilder({ data , source , rootNodeColor , maxZoom =10 , isAnimated =true , fitView =true , zoomOnScroll =false , isDraggable =false , isHorizontal =true  }) {
+    // Load event or service elements for graph
+    let initialElements;
+    if (source === 'event') {
+        initialElements = getEventElements(data, rootNodeColor, isAnimated);
+    } else {
+        initialElements = getServiceElements(data, rootNodeColor, isAnimated);
+    }
+    // Initialize graph layout
+    const isInitializedRef = (0,external_react_.useRef)(false);
+    const nodes = (0,external_react_flow_renderer_.useStoreState)((state)=>state.nodes
+    );
+    const edges = (0,external_react_flow_renderer_.useStoreState)((state)=>state.edges
+    );
+    // Calculate initial element layout
+    const graphElements = createGraphLayout(initialElements, isHorizontal);
+    const { 0: elements , 1: setElements  } = (0,external_react_.useState)(graphElements);
+    // Rerender graph layout to get rendered width/height for nodes/edges
+    (0,external_react_.useEffect)(()=>{
+        var // eslint-disable-next-line no-underscore-dangle
+        ref;
+        if (isInitializedRef.current === false && nodes.length > 0 && (nodes === null || nodes === void 0 ? void 0 : (ref = nodes[0]) === null || ref === void 0 ? void 0 : ref.__rf.width) != null) {
+            // Calculate element layout
+            const updateElements = ()=>{
+                const updatedElements = createGraphLayout([
+                    ...nodes,
+                    ...edges
+                ], isHorizontal);
+                setElements(updatedElements);
+                isInitializedRef.current = true;
+            };
+            updateElements();
+        }
+    }, [
+        nodes,
+        edges,
+        isInitializedRef,
+        isHorizontal
+    ]);
+    // ReactFlow operations
+    const onElementClick = (event, element)=>window.open(element.data.link, '_self')
+    ;
+    const onLoad = (0,external_react_.useCallback)((reactFlowInstance)=>{
+        if (fitView) {
+            reactFlowInstance.fitView();
+        }
+    }, [
+        fitView
+    ]);
+    return(/*#__PURE__*/ jsx_runtime_.jsx((external_react_flow_renderer_default()), {
+        elements: elements,
+        onLoad: onLoad,
+        onElementClick: onElementClick,
+        nodesDraggable: isDraggable,
+        zoomOnScroll: zoomOnScroll,
+        maxZoom: maxZoom,
+        children: /*#__PURE__*/ jsx_runtime_.jsx(external_react_flow_renderer_.Controls, {
+        })
+    }));
+}
+// NodeGraph wrapping NodeGraphBuilder Component
+function NodeGraph({ data , source , rootNodeColor , maxHeight , maxZoom , fitView , zoomOnScroll , isAnimated , isDraggable , isHorizontal  }) {
+    // Set dynamic height of node graph
+    const dynamicHeight = maxHeight || calcCanvasHeight(data, source);
+    return(/*#__PURE__*/ jsx_runtime_.jsx("div", {
+        className: "node-graph w-full border-dashed border-2 border-slate-300",
+        style: {
+            height: dynamicHeight
+        },
+        children: /*#__PURE__*/ jsx_runtime_.jsx(external_react_flow_renderer_.ReactFlowProvider, {
+            children: /*#__PURE__*/ jsx_runtime_.jsx(NodeGraphBuilder, {
+                source: source,
+                data: data,
+                rootNodeColor: rootNodeColor,
+                maxZoom: maxZoom,
+                fitView: fitView,
+                zoomOnScroll: zoomOnScroll,
+                isAnimated: isAnimated,
+                isDraggable: isDraggable,
+                isHorizontal: isHorizontal
+            })
+        })
+    }));
+}
+/* harmony default export */ const NodeGraph_NodeGraph = (NodeGraph);
+
+
 /***/ }),
 
 /***/ 4488:

package/.next/server/chunks/944.js

@@ -509,7 +509,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var next_mdx_remote__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(next_mdx_remote__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _components_Mdx_Admonition__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1790);
 /* harmony import */ var _components_Mdx_Examples__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3067);
-/* harmony import */ var _utils_random_bg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(6892);
+/* harmony import */ var _utils_random_bg__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(6892);
 /* harmony import */ var _components_ContentView__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2455);
 /* harmony import */ var _components_Mermaid__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(788);
 /* harmony import */ var _components_Sidebars_EventSidebar__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9610);
@@ -519,6 +519,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_Mdx_SchemaViewer_SchemaViewer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(7228);
 /* harmony import */ var _lib_events__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(9959);
 /* harmony import */ var _hooks_EventCatalog__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(5008);
+/* harmony import */ var _components_Mdx_NodeGraph_NodeGraph__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(1262);
 var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_lib_events__WEBPACK_IMPORTED_MODULE_12__, _components_Mermaid__WEBPACK_IMPORTED_MODULE_6__, _components_Mdx_Examples__WEBPACK_IMPORTED_MODULE_4__, _components_Mdx_SchemaViewer_SchemaViewer__WEBPACK_IMPORTED_MODULE_11__, _components_SyntaxHighlighter__WEBPACK_IMPORTED_MODULE_10__]);
 ([_lib_events__WEBPACK_IMPORTED_MODULE_12__, _components_Mermaid__WEBPACK_IMPORTED_MODULE_6__, _components_Mdx_Examples__WEBPACK_IMPORTED_MODULE_4__, _components_Mdx_SchemaViewer_SchemaViewer__WEBPACK_IMPORTED_MODULE_11__, _components_SyntaxHighlighter__WEBPACK_IMPORTED_MODULE_10__] = __webpack_async_dependencies__.then ? await __webpack_async_dependencies__ : __webpack_async_dependencies__);
 
@@ -536,6 +537,7 @@ var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_lib
 
 
 
+
 const getComponents = ({ event , schema , examples  })=>({
         code: ({ className , ...props })=>{
             const match = /language-(\w+)/.exec(className || '');
@@ -606,11 +608,32 @@ const getComponents = ({ event , schema , examples  })=>({
                     /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_Mermaid__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
                         source: "event",
                         data: event,
-                        rootNodeColor: (0,_utils_random_bg__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z)(event.name),
+                        rootNodeColor: (0,_utils_random_bg__WEBPACK_IMPORTED_MODULE_15__/* ["default"] */ .Z)(event.name),
                         charts: charts
                     })
                 ]
             })
+        ,
+        NodeGraph: ({ title , maxHeight , maxZoom , fitView , zoomOnScroll , isAnimated , isDraggable  })=>/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+                className: "mx-auto w-full",
+                children: [
+                    title && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
+                        className: "text-lg font-medium text-gray-900 underline",
+                        children: title
+                    }),
+                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_Mdx_NodeGraph_NodeGraph__WEBPACK_IMPORTED_MODULE_14__/* ["default"] */ .Z, {
+                        source: "event",
+                        data: event,
+                        rootNodeColor: (0,_utils_random_bg__WEBPACK_IMPORTED_MODULE_15__/* ["default"] */ .Z)(event.name),
+                        maxHeight: maxHeight,
+                        maxZoom: maxZoom,
+                        fitView: fitView,
+                        zoomOnScroll: zoomOnScroll,
+                        isAnimated: isAnimated,
+                        isDraggable: isDraggable
+                    })
+                ]
+            })
     })
 ;
 function Events(props) {

package/.next/server/pages/404.html

@@ -1 +1 @@
-<!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>404: This page could not be found</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/0b54ec6503b91283.css" as="style"/><link rel="stylesheet" href="/_next/static/css/0b54ec6503b91283.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-2ebfdb1666dac4ad.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-c205def1388372e3.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/_D78gGWWcjFmvj_jqGXW3/_buildManifest.js" defer=""></script><script src="/_next/static/_D78gGWWcjFmvj_jqGXW3/_ssgManifest.js" defer=""></script><script src="/_next/static/_D78gGWWcjFmvj_jqGXW3/_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="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 style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body { margin: 0 }</style><h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">This page could not be found<!-- -->.</h2></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":{"statusCode":404}},"page":"/_error","query":{},"buildId":"_D78gGWWcjFmvj_jqGXW3","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!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>404: This page could not be found</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/f756e2a0d8f4db27.css" as="style"/><link rel="stylesheet" href="/_next/static/css/f756e2a0d8f4db27.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-edf0c365e149f010.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-46c2e0f1ff3b4efb.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/Wp8i1_b29rcfszKFNI7O4/_buildManifest.js" defer=""></script><script src="/_next/static/Wp8i1_b29rcfszKFNI7O4/_ssgManifest.js" defer=""></script><script src="/_next/static/Wp8i1_b29rcfszKFNI7O4/_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="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 style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body { margin: 0 }</style><h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">This page could not be found<!-- -->.</h2></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":{"statusCode":404}},"page":"/_error","query":{},"buildId":"Wp8i1_b29rcfszKFNI7O4","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/.next/server/pages/500.html

@@ -1 +1 @@
-<!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>500: Internal Server Error</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/0b54ec6503b91283.css" as="style"/><link rel="stylesheet" href="/_next/static/css/0b54ec6503b91283.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-2ebfdb1666dac4ad.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-c205def1388372e3.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/_D78gGWWcjFmvj_jqGXW3/_buildManifest.js" defer=""></script><script src="/_next/static/_D78gGWWcjFmvj_jqGXW3/_ssgManifest.js" defer=""></script><script src="/_next/static/_D78gGWWcjFmvj_jqGXW3/_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="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 style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body { margin: 0 }</style><h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">500</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">Internal Server Error<!-- -->.</h2></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":{"statusCode":500}},"page":"/_error","query":{},"buildId":"_D78gGWWcjFmvj_jqGXW3","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!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>500: Internal Server Error</title><meta name="next-head-count" content="18"/><link rel="preload" href="/_next/static/css/f756e2a0d8f4db27.css" as="style"/><link rel="stylesheet" href="/_next/static/css/f756e2a0d8f4db27.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-edf0c365e149f010.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-46c2e0f1ff3b4efb.js" defer=""></script><script src="/_next/static/chunks/pages/_error-5a714c45c50a8db4.js" defer=""></script><script src="/_next/static/Wp8i1_b29rcfszKFNI7O4/_buildManifest.js" defer=""></script><script src="/_next/static/Wp8i1_b29rcfszKFNI7O4/_ssgManifest.js" defer=""></script><script src="/_next/static/Wp8i1_b29rcfszKFNI7O4/_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="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 style="color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body { margin: 0 }</style><h1 style="display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top">500</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0">Internal Server Error<!-- -->.</h2></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":{"statusCode":500}},"page":"/_error","query":{},"buildId":"Wp8i1_b29rcfszKFNI7O4","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/.next/server/pages/_app.js

@@ -54,10 +54,14 @@ function classNames(...classes) {
     return classes.filter(Boolean).join(' ');
 }
 function Example() {
-    const { title , homepageLink  } = (0,EventCatalog/* useConfig */.ZR)();
+    const { title , homepageLink , logo  } = (0,EventCatalog/* useConfig */.ZR)();
     const router = (0,router_namespaceObject.useRouter)();
     const { publicRuntimeConfig: { basePath =''  } = {
     }  } = config_default()();
+    const logoToLoad = logo || {
+        alt: 'EventCatalog Logo',
+        src: `logo.svg`
+    };
     return(/*#__PURE__*/ jsx_runtime_.jsx("div", {
         className: "bg-gray-800",
         children: /*#__PURE__*/ jsx_runtime_.jsx("div", {
@@ -78,7 +82,7 @@ function Example() {
                                             /*#__PURE__*/ jsx_runtime_.jsx("img", {
                                                 alt: "logo",
                                                 className: "text-white w-8 inline-block mr-3",
-                                                src: `${basePath}/logo.svg`
+                                                src: `${basePath}/${logoToLoad.src}`
                                             }),
                                             /*#__PURE__*/ jsx_runtime_.jsx("span", {
                                                 className: "text-xl",
@@ -94,7 +98,7 @@ function Example() {
                                         /*#__PURE__*/ jsx_runtime_.jsx("img", {
                                             alt: "logo",
                                             className: "text-white w-8 inline-block mr-3",
-                                            src: `${basePath}/logo.svg`
+                                            src: `${basePath}/${logoToLoad.src}`
                                         }),
                                         /*#__PURE__*/ jsx_runtime_.jsx("span", {
                                             className: "text-xl",