@eventcatalog/core 0.1.13 → 0.1.17

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

@@ -1,6 +1,6 @@
 "use strict";
-exports.id = 685;
-exports.ids = [685];
+exports.id = 730;
+exports.ids = [730];
 exports.modules = {
 
 /***/ 2455:
@@ -238,415 +238,6 @@ 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

@@ -59,48 +59,34 @@ function Examples({ title ='Examples' , description , examples =[] , showLineNum
                     className: "text-md font-medium text-gray-700",
                     children: description
                 }),
-                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                    children: [
-                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("nav", {
-                            className: "-mb-px flex",
-                            "aria-label": "Tabs",
-                            children: tabs.map((tab)=>{
-                                const isSelected = tab.name === selectedTab.name;
-                                return(/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", {
-                                    type: "button",
-                                    onClick: ()=>handleTabSelection(tab)
-                                    ,
-                                    className: classNames(isSelected ? '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": isSelected ? 'page' : undefined,
-                                    children: [
-                                        tab.name,
-                                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", {
-                                            className: "block text-xs mt-",
-                                            children: [
-                                                "(",
-                                                tab.langugage,
-                                                ")"
-                                            ]
-                                        })
-                                    ]
-                                }, tab.name));
-                            })
-                        }),
-                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-                            className: "my-4",
-                            children: [
-                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_SyntaxHighlighter__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
+                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
+                    children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+                        className: "col-span-5",
+                        children: [
+                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("nav", {
+                                className: "-mb-2 flex bg-gray-900",
+                                "aria-label": "Tabs",
+                                children: tabs.map((tab)=>{
+                                    const isSelected = tab.name === selectedTab.name;
+                                    return(/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
+                                        type: "button",
+                                        onClick: ()=>handleTabSelection(tab)
+                                        ,
+                                        className: classNames(isSelected ? 'border-yellow-300 text-yellow-300 selected bg-gray-700' : 'border-transparent text-gray-500 hover:text-gray-400 bg-gray-800  ', 'whitespace-nowrap py-3 border-b-2 font-medium important:no-underline px-6 text-xs  transition '),
+                                        "aria-current": isSelected ? 'page' : undefined,
+                                        children: tab.name
+                                    }, tab.name));
+                                })
+                            }),
+                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
+                                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_components_SyntaxHighlighter__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
                                     language: selectedTab.langugage,
                                     showLineNumbers: showLineNumbers,
                                     children: selectedTab.content
-                                }),
-                                selectedTab.langugage && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
-                                    className: "-mb-2 block text-xs text-right font-bold",
-                                    children: selectedTab.name
                                 })
-                            ]
-                        })
-                    ]
+                            })
+                        ]
+                    })
                 })
             ]
         })
@@ -399,6 +385,15 @@ function EventSideBar({ event , loadedVersion , isOldVersion  }) {
                             })
                         })
                     }),
+                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(next_link__WEBPACK_IMPORTED_MODULE_2__["default"], {
+                        href: `/visualiser?type=event&name${eventName}`,
+                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.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: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
+                                children: "View in Visualiser"
+                            })
+                        })
+                    }),
                     externalLinks.length > 0 && externalLinks.map((tag)=>/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("a", {
                             href: tag.url,
                             target: "_blank",
@@ -443,6 +438,8 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__) => {
 /* harmony import */ var react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(727);
 /* harmony import */ var react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7656);
+/* harmony import */ var _heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(8768);
+/* harmony import */ var _heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5__);
 var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_4__]);
 copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependencies__.then ? await __webpack_async_dependencies__ : __webpack_async_dependencies__)[0];
 
@@ -450,6 +447,7 @@ copy_text_to_clipboard__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependenc
 
 
 
+
 function SyntaxHighlighter({ language , name ='' , ...props }) {
     const { 0: showCopied , 1: setShowCopied  } = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
     const handleCopyCode = ()=>{
@@ -460,25 +458,40 @@ function SyntaxHighlighter({ language , name ='' , ...props }) {
     };
     const regex = /\\n/g;
     return(/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-        className: "relative group",
+        className: "h-96 relative",
         children: [
-            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
+            name && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+                className: `flex -mb-3 pb-2 bg-gray-900 ${name ? 'justify-between' : 'justify-end'}`,
+                children: [
+                    name && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
+                        className: "block text-xs py-2 px-2 font-bold text-gray-300",
+                        children: name
+                    }),
+                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
+                        type: "button",
+                        onClick: handleCopyCode,
+                        className: "text-xs text-white rounded-md px-4",
+                        children: showCopied ? 'Copied' : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5__.ClipboardCopyIcon, {
+                            className: "h-4 w-4"
+                        })
+                    })
+                ]
+            }),
+            !name && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
                 type: "button",
                 onClick: handleCopyCode,
-                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: showCopied ? 'Copied' : 'Copy'
+                className: "text-xs absolute right-0 top-2 text-white rounded-md px-4",
+                children: showCopied ? 'Copied' : /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_heroicons_react_outline__WEBPACK_IMPORTED_MODULE_5__.ClipboardCopyIcon, {
+                    className: "h-4 w-4"
+                })
             }),
             /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__.Prism, {
                 style: (react_syntax_highlighter_dist_cjs_styles_prism_dracula__WEBPACK_IMPORTED_MODULE_2___default()),
                 language: language,
                 ...props,
                 wrapLines: true,
-                className: "max-h-96 overflow-auto",
+                className: "h-96 overflow-auto",
                 children: props.children.replace(regex, '\n')
-            }),
-            name && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
-                className: "-mb-2 block text-xs text-right font-bold",
-                children: name
             })
         ]
     }));
@@ -519,7 +532,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);
+/* harmony import */ var _components_Mdx_NodeGraph_NodeGraph__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(8484);
 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__);
 
@@ -549,12 +562,12 @@ const getComponents = ({ event , schema , examples  })=>({
                 ...props
             });
         },
-        Schema: ({ title ='Event Schema'  })=>{
+        Schema: ({ title  })=>{
             if (!schema) return null;
             return(/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
                 className: "mt-8 xl:mt-10",
                 children: [
-                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
+                    title && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
                         id: "activity-title",
                         className: "text-lg font-medium text-gray-900 underline",
                         children: title
@@ -568,12 +581,12 @@ const getComponents = ({ event , schema , examples  })=>({
                 ]
             }));
         },
-        SchemaViewer: ({ title ='Event Schema' , renderRootTreeLines =false , defaultExpandedDepth =1 , maxHeight  })=>{
+        SchemaViewer: ({ title , renderRootTreeLines =false , defaultExpandedDepth =1 , maxHeight  })=>{
             if (!schema) return null;
             return(/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("section", {
                 className: "mt-8 xl:mt-10",
                 children: [
-                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
+                    title && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
                         className: "text-lg font-medium text-gray-900 underline",
                         children: title
                     }),

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/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>
+<!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/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/pages/_error-5a714c45c50a8db4.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="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" 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 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":"R1JBWbiD3Q61grTfkBBSU","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>