@eventcatalog/core 2.33.3 → 2.33.5

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.3";
+var version = "2.33.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-5QUF2S7L.js";
-import "../chunk-557OECV4.js";
+} from "../chunk-3H3JI5WP.js";
+import "../chunk-AECMEWQ4.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.3";
+var version = "2.33.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-5TXSONUY.js";
-import "../chunk-5QUF2S7L.js";
-import "../chunk-557OECV4.js";
+} from "../chunk-QUTVOUHZ.js";
+import "../chunk-3H3JI5WP.js";
+import "../chunk-AECMEWQ4.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-5QUF2S7L.js → chunk-3H3JI5WP.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-557OECV4.js";
+} from "./chunk-AECMEWQ4.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-557OECV4.js → chunk-AECMEWQ4.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.33.3";
+var version = "2.33.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-5TXSONUY.js → chunk-QUTVOUHZ.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-5QUF2S7L.js";
+} from "./chunk-3H3JI5WP.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.33.3";
+var version = "2.33.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-557OECV4.js";
+} from "./chunk-AECMEWQ4.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.3";
+var version = "2.33.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,15 +6,15 @@ import {
 } from "./chunk-UKJ7F5WR.js";
 import {
   log_build_default
-} from "./chunk-5TXSONUY.js";
-import "./chunk-5QUF2S7L.js";
+} from "./chunk-QUTVOUHZ.js";
+import "./chunk-3H3JI5WP.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
 } from "./chunk-7SI5EVOX.js";
 import {
   VERSION
-} from "./chunk-557OECV4.js";
+} from "./chunk-AECMEWQ4.js";
 import {
   isBackstagePluginEnabled,
   isEventCatalogScaleEnabled,

package/eventcatalog/src/components/MDX/Miro/Miro.astro

@@ -0,0 +1,87 @@
+---
+import Admonition from '@components/MDX/Admonition';
+import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
+import type { CollectionEntry } from 'astro:content';
+import { ExpandIcon } from 'lucide-react';
+
+interface Props {
+  title?: string;
+  height: string;
+  boardId: string;
+  autoplay: boolean;
+  moveToViewport: string;
+  moveToWidget: string;
+  edit: boolean;
+}
+
+const {
+  title,
+  height = '500',
+  boardId,
+  autoplay = true,
+  edit = false,
+  moveToViewport,
+  moveToWidget,
+  ...eventCatalogResource
+} = Astro.props;
+
+const resource = eventCatalogResource as CollectionEntry<'services'>;
+
+const baseUrl = 'https://miro.com/app/live-embed';
+const params = {
+  autoplay: autoplay ? 'true' : 'false',
+  embedMode: !edit ? 'view_only_without_ui' : undefined,
+  moveToViewport: moveToViewport || undefined,
+  moveToWidget: moveToWidget || undefined,
+};
+
+const backUrl = buildUrl(`/docs/${resource.collection}/${resource.data.id}/${resource.data.version}#${title}-miro-title`);
+
+const fullScreenParams = {
+  ...params,
+  boardId: boardId,
+  title: title,
+  back: backUrl,
+};
+
+const url = new URL(`${baseUrl}/${boardId}`);
+Object.entries(params).forEach(([key, value]) => {
+  if (value !== undefined) {
+    url.searchParams.set(key, value);
+  }
+});
+
+const openFullScreenUrl = buildUrlWithParams(`/miro`, fullScreenParams);
+---
+
+{
+  !boardId && (
+    <Admonition type="warning">
+      <div>
+        <span class="block font-bold">{`<Miro/>`} failed to load</span>
+        <span class="block">Please provide a boardId to use the Miro component.</span>
+      </div>
+    </Admonition>
+  )
+}
+
+{
+  boardId && (
+    <div>
+      {title && (
+        <h3 id={`${title}-miro-title`} class="text-3xl font-bold">
+          {title}
+        </h3>
+      )}
+      <div class="relative">
+        <iframe class="border border-gray-200 rounded-md" src={url.href} width="100%" height={height} />
+        <a
+          href={openFullScreenUrl}
+          class="absolute bottom-[15px] right-5 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-md transition-colors"
+        >
+          <ExpandIcon className="w-5 h-5" />
+        </a>
+      </div>
+    </div>
+  )
+}

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

@@ -189,8 +189,10 @@ const NodeGraphBuilder = ({
   }, [animateMessages]);
 
   useEffect(() => {
-    fitView({ duration: 800 });
-  }, [nodes, edges]);
+    setTimeout(() => {
+      fitView({ duration: 800 });
+    }, 150);
+  }, []);
 
   const handlePaneClick = useCallback(() => {
     setIsSettingsOpen(false);

package/eventcatalog/src/components/MDX/components.tsx

@@ -18,6 +18,7 @@ import Tabs from '@components/MDX/Tabs/Tabs.astro';
 import TabItem from '@components/MDX/Tabs/TabItem.astro';
 import ResourceLink from '@components/MDX/ResourceLink/ResourceLink.astro';
 import Link from '@components/MDX/Link/Link.astro';
+import Miro from '@components/MDX/Miro/Miro.astro';
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
 import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
@@ -46,6 +47,7 @@ const components = (props: any) => {
     Tabs,
     Tile,
     Tiles,
+    Miro: (mdxProp: any) => jsx(Miro, { ...props, ...mdxProp }),
   };
 };
 

package/eventcatalog/src/content.config.ts

@@ -14,7 +14,7 @@ export const projectDirBase = (() => {
 
 const pages = defineCollection({
   loader: glob({
-    pattern: ['**/pages/*.(md|mdx)'],
+    pattern: ['**/pages/*.(md|mdx)', '!**/node_modules/**'],
     base: projectDirBase,
   }),
   schema: z
@@ -43,7 +43,7 @@ const resourcePointer = z.object({
 
 const changelogs = defineCollection({
   loader: glob({
-    pattern: ['**/changelog.(md|mdx)'],
+    pattern: ['**/changelog.(md|mdx)', '!**/node_modules/**'],
     base: projectDirBase,
   }),
   schema: z.object({
@@ -133,7 +133,7 @@ const flowStep = z
 
 const flows = defineCollection({
   loader: glob({
-    pattern: ['**/flows/*/index.(md|mdx)', '**/flows/*/versioned/*/index.(md|mdx)'],
+    pattern: ['**/flows/*/index.(md|mdx)', '**/flows/*/versioned/*/index.(md|mdx)', '!**/node_modules/**'],
     base: projectDirBase,
     generateId: ({ data }) => {
       return `${data.id}-${data.version}`;
@@ -203,7 +203,7 @@ const flows = defineCollection({
 
 const events = defineCollection({
   loader: glob({
-    pattern: ['**/events/*/index.(md|mdx)', '**/events/*/versioned/*/index.(md|mdx)'],
+    pattern: ['**/events/*/index.(md|mdx)', '**/events/*/versioned/*/index.(md|mdx)', '!**/node_modules/**'],
     base: projectDirBase,
     generateId: ({ data, ...rest }) => {
       return `${data.id}-${data.version}`;
@@ -222,7 +222,7 @@ const events = defineCollection({
 
 const commands = defineCollection({
   loader: glob({
-    pattern: ['**/commands/*/index.(md|mdx)', '**/commands/*/versioned/*/index.(md|mdx)'],
+    pattern: ['**/commands/*/index.(md|mdx)', '**/commands/*/versioned/*/index.(md|mdx)', '!**/node_modules/**'],
     base: projectDirBase,
     generateId: ({ data }) => {
       return `${data.id}-${data.version}`;
@@ -241,7 +241,7 @@ const commands = defineCollection({
 
 const queries = defineCollection({
   loader: glob({
-    pattern: ['**/queries/*/index.(md|mdx)', '**/queries/*/versioned/*/index.(md|mdx)'],
+    pattern: ['**/queries/*/index.(md|mdx)', '**/queries/*/versioned/*/index.(md|mdx)', '!**/node_modules/**'],
     base: projectDirBase,
     generateId: ({ data }) => {
       return `${data.id}-${data.version}`;
@@ -309,7 +309,7 @@ const domains = defineCollection({
 
 const channels = defineCollection({
   loader: glob({
-    pattern: ['**/channels/*/index.(md|mdx)', '**/channels/*/versioned/*/index.(md|mdx)'],
+    pattern: ['**/channels/*/index.(md|mdx)', '**/channels/*/versioned/*/index.(md|mdx)', '!**/node_modules/**'],
     base: projectDirBase,
     generateId: ({ data }) => {
       return `${data.id}-${data.version}`;

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/components/NestedItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { buildUrl } from '@utils/url-builder';
 import type { SidebarItem } from '../types';
+import { ExternalLinkIcon } from 'lucide-react';
 
 interface NestedItemProps {
   item: SidebarItem;
@@ -89,16 +90,45 @@ const NestedItem: React.FC<NestedItemProps> = ({
     );
   }
 
-  const itemPath = item.slug ? buildUrl(`/docs/custom/${item.slug}`) : '#';
+  let itemPath = item.slug ? buildUrl(`/docs/custom/${item.slug}`) : '#';
   const isActive = currentPath === itemPath || currentPath.endsWith(`/${item.slug}`);
 
+  // Convert string style to React CSSProperties if needed
+  const attrs = item.attrs
+    ? {
+        ...item.attrs,
+        style:
+          typeof item.attrs.style === 'string'
+            ? item.attrs.style
+                .split(';')
+                .filter((style) => style.trim())
+                .reduce((acc, style) => {
+                  const [key, value] = style.split(':').map((s) => s.trim());
+                  const camelKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+                  return { ...acc, [camelKey]: value };
+                }, {})
+            : item.attrs.style,
+      }
+    : null;
+
+  const isExternalLink = item.slug?.startsWith('http');
+
+  if (isExternalLink && item.slug) {
+    itemPath = item.slug;
+  }
+
   return (
     <a
       href={itemPath}
+      {...(attrs || {})}
       className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
       data-active={isActive}
+      target={isExternalLink ? '_blank' : undefined}
     >
-      <span className="truncate">{item.label}</span>
+      <span className="truncate flex items-center gap-1.5">
+        {item.label}
+        {isExternalLink && <ExternalLinkIcon className="w-3 -mt-0.5 h-3" />}
+      </span>
       {item.badge && item?.badge?.text && (
         <span
           className={`text-${item.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${item.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/types.ts

@@ -1,6 +1,8 @@
 export interface SidebarItem {
   label: string;
   slug?: string;
+  link?: string;
+  attrs?: Record<string, string>;
   items?: SidebarItem[];
   badge?: {
     text: string;

package/eventcatalog/src/enterprise/custom-documentation/utils/custom-docs.ts

@@ -1,4 +1,3 @@
-// import { getCollection } from "astro:content";
 import config from '@config';
 import fs from 'node:fs';
 import path from 'node:path';
@@ -16,6 +15,8 @@ type SidebarItem = {
   items?: SidebarItem[];
   badge?: Badge;
   collapsed?: boolean;
+  link?: string;
+  attrs?: Record<string, string>;
 };
 
 type SideBarConfigurationItem = {
@@ -28,6 +29,8 @@ type SideBarConfigurationItem = {
   };
   badge?: Badge;
   collapsed?: boolean;
+  link?: string;
+  attrs?: Record<string, string>;
 };
 
 type AdjacentPage = {
@@ -52,39 +55,45 @@ const processAutoGeneratedDirectory = async (
   collapsed?: boolean
 ): Promise<SidebarItem> => {
   // @ts-ignore
-  const files = fs.readdirSync(path.join(process.env.PROJECT_DIR || '', DOCS_DIR, directory));
-
-  // Convert files to frontmatter
-  const docsWithFrontmatter = files.map((file) => {
-    // @ts-ignore
-    const content = fs.readFileSync(path.join(process.env.PROJECT_DIR || '', DOCS_DIR, directory, file), 'utf8');
-    const { data } = matter(content);
-    return { ...data, file };
-  });
-
-  // If user defined slug use it, otherwise use the file
-  const astroIdsForFiles = docsWithFrontmatter.map(
-    (doc: any) => doc.slug || path.join(DOCS_DIR, directory, doc.file).replace('.mdx', '')
-  );
+  const items = fs.readdirSync(path.join(process.env.PROJECT_DIR || '', DOCS_DIR, directory));
 
-  const entries = await Promise.all(
-    astroIdsForFiles.map(async (astroId) => {
-      const entry = await getEntry('customPages', astroId);
-      return entry;
-    })
-  );
+  const allItems: SidebarItem[] = [];
 
-  // Filter anything we haven't found
-  const filteredEntries = entries.filter((entry) => entry !== undefined);
+  for (const item of items) {
+    const fullPath = path.join(process.env.PROJECT_DIR || '', DOCS_DIR, directory, item);
+    const isDirectory = fs.statSync(fullPath).isDirectory();
+
+    if (isDirectory) {
+      // Recursively process subdirectory
+      const subdirResult = await processAutoGeneratedDirectory(
+        path.join(directory, item),
+        item, // Use directory name as label
+        undefined, // No badge for subdirectories
+        collapsed // Inherit collapsed state
+      );
+      allItems.push(subdirResult);
+    } else {
+      // Process file
+      const content = fs.readFileSync(fullPath, 'utf8');
+      const { data } = matter(content);
+
+      const astroId = data.slug || path.join(DOCS_DIR, directory, item).replace('.mdx', '');
+      const entry = await getEntry('customPages', astroId.toLowerCase());
+
+      if (entry) {
+        allItems.push({
+          label: entry.data.title,
+          slug: entry.data.slug || entry.id.replace(DOCS_DIR, ''),
+        });
+      }
+    }
+  }
 
   return {
     label,
     badge,
     collapsed,
-    items: filteredEntries.map((entry) => ({
-      label: entry?.data?.title,
-      slug: entry?.data?.slug || entry?.id.replace(DOCS_DIR, ''),
-    })),
+    items: allItems,
   };
 };
 
@@ -118,7 +127,16 @@ const processSidebarItems = async (items: SideBarConfigurationItem[]): Promise<S
     }
     // Otherwise, it's a regular item
     else {
-      processedItems.push(item as SidebarItem);
+      // if its a link, add it to the processedItems
+      if (item.link) {
+        processedItems.push({
+          label: item.label,
+          slug: item.link,
+          attrs: item.attrs,
+        });
+      } else {
+        processedItems.push(item as SidebarItem);
+      }
     }
   }
 

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

@@ -13,6 +13,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { render, getEntry } from 'astro:content';
+import mdxComponents from '@components/MDX/components';
 import 'diff2html/bundles/css/diff2html.min.css';
 
 import { buildUrl } from '@utils/url-builder';
@@ -226,7 +227,7 @@ const pages = [
                     </div>
                   )}
                   <div class="prose prose-md !max-w-none py-2">
-                    <log.Content />
+                    <log.Content components={mdxComponents(props)} />
                   </div>
                   {log.diffs && log.diffs.map((diff) => <div id="diff-container" set:html={diff} />)}
                 </div>

package/eventcatalog/src/pages/miro/index.astro

@@ -0,0 +1,121 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { ClientRouter } from 'astro:transitions';
+---
+
+<VerticalSideBarLayout title="Miro">
+  <div class="h-[calc(100vh-80px)] bg-white p-3">
+    <div class="flex items-center justify-between mb-4">
+      <h1 id="boardTitle" class="text-2xl font-bold">Miro Board</h1>
+      <div class="flex items-center gap-3">
+        <button
+          id="backButton"
+          class="hidden items-center gap-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-md transition-colors"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path
+              fill-rule="evenodd"
+              d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L4.414 9H17a1 1 0 110 2H4.414l5.293 5.293a1 1 0 010 1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+          <span>Back</span>
+        </button>
+        <button id="toggleEditButton" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors">
+          Enable Editing
+        </button>
+      </div>
+    </div>
+    <div class="w-full bg-gray-100 h-[calc(100%-4rem)]">
+      <iframe class="w-full h-full border border-gray-200 rounded-md"></iframe>
+    </div>
+  </div>
+</VerticalSideBarLayout>
+
+<ClientRouter />
+<script>
+  function configureMiro() {
+    // Get url from query params and then embed into the iframe
+    const url = new URL(window.location.href);
+    const boardId = url.searchParams.get('boardId');
+    const moveToViewport = url.searchParams.get('moveToViewport');
+    const moveToWidget = url.searchParams.get('moveToWidget');
+    const autoplay = url.searchParams.get('autoplay');
+    const edit = url.searchParams.get('edit');
+    const title = url.searchParams.get('title') || 'Miro Board';
+    const backUrl = url.searchParams.get('back');
+
+    // Configure back button if back URL is provided
+    const backButton = document.querySelector('#backButton');
+    if (backButton && backUrl) {
+      backButton.classList.remove('hidden');
+      backButton.classList.add('flex');
+      backButton.addEventListener('click', () => {
+        window.location.href = `${decodeURIComponent(backUrl)}#${title}-miro-title`;
+      });
+    }
+
+    // Update the board title
+    const boardTitleElement = document.querySelector('#boardTitle');
+    if (boardTitleElement) {
+      boardTitleElement.textContent = title;
+    }
+
+    // Create base Miro URL
+    const miroBaseUrl = `https://miro.com/app/live-embed/${boardId}`;
+    const miroUrlParams = new URLSearchParams({
+      autoplay: autoplay ? 'true' : 'false',
+    });
+
+    // Add optional parameters
+    if (!edit) {
+      miroUrlParams.set('embedMode', 'view_only_without_ui');
+    }
+
+    if (moveToViewport) {
+      miroUrlParams.set('moveToViewport', moveToViewport);
+    }
+
+    if (moveToWidget) {
+      miroUrlParams.set('moveToWidget', moveToWidget);
+    }
+
+    const miroUrl = `${miroBaseUrl}?${miroUrlParams.toString()}`;
+
+    const iframe = document.querySelector('iframe');
+    if (iframe) {
+      iframe.src = miroUrl;
+      iframe.width = '100%';
+      iframe.height = '100%';
+    }
+
+    // Configure toggle edit button
+    const toggleEditButton = document.querySelector('#toggleEditButton');
+    if (toggleEditButton) {
+      // Update button text and style based on current mode
+      if (edit === 'true') {
+        toggleEditButton.textContent = 'Switch to Read only';
+        toggleEditButton.classList.remove('bg-blue-500', 'hover:bg-blue-600');
+        toggleEditButton.classList.add('bg-gray-500', 'hover:bg-gray-600');
+      } else {
+        toggleEditButton.textContent = 'Enable Editing';
+        toggleEditButton.classList.remove('bg-gray-500', 'hover:bg-gray-600');
+        toggleEditButton.classList.add('bg-blue-500', 'hover:bg-blue-600');
+      }
+
+      // Add click handler
+      toggleEditButton.addEventListener('click', () => {
+        const currentUrl = new URL(window.location.href);
+        if (edit === 'true') {
+          currentUrl.searchParams.delete('edit');
+        } else {
+          currentUrl.searchParams.set('edit', 'true');
+        }
+        window.location.href = currentUrl.toString();
+      });
+    }
+  }
+
+  configureMiro();
+
+  document.addEventListener('astro:page-load', configureMiro);
+</script>

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.33.3",
+  "version": "2.33.5",
   "publishConfig": {
     "access": "public"
   },