@eventcatalog/core 3.2.0 → 3.2.2

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 = "3.2.0";
+var version = "3.2.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-AA47DJ43.js";
-import "../chunk-RWYEP5SD.js";
+} from "../chunk-AETVSFIG.js";
+import "../chunk-34AD2NAO.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 = "3.2.0";
+var version = "3.2.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-VPQCMMRM.js";
-import "../chunk-AA47DJ43.js";
-import "../chunk-RWYEP5SD.js";
+} from "../chunk-JPKOTGEV.js";
+import "../chunk-AETVSFIG.js";
+import "../chunk-34AD2NAO.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-RWYEP5SD.js → chunk-34AD2NAO.js}

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

package/dist/{chunk-GGRXP5WM.js → chunk-6OFLYNWB.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-L3QRQT7U.js";
+} from "./chunk-7YZYT44Y.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-L3QRQT7U.js → chunk-7YZYT44Y.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-RWYEP5SD.js";
+} from "./chunk-34AD2NAO.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-AA47DJ43.js → chunk-AETVSFIG.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-RWYEP5SD.js";
+} from "./chunk-34AD2NAO.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-VPQCMMRM.js → chunk-JPKOTGEV.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-AA47DJ43.js";
+} from "./chunk-AETVSFIG.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-RWYEP5SD.js";
+} from "./chunk-34AD2NAO.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -109,7 +109,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.2.0";
+var version = "3.2.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-VPQCMMRM.js";
-import "./chunk-AA47DJ43.js";
+} from "./chunk-JPKOTGEV.js";
+import "./chunk-AETVSFIG.js";
 import {
   runMigrations
 } from "./chunk-BH3JMNAV.js";
@@ -21,13 +21,13 @@ import {
 } from "./chunk-5VBIXL6C.js";
 import {
   generate
-} from "./chunk-GGRXP5WM.js";
+} from "./chunk-6OFLYNWB.js";
 import {
   logger
-} from "./chunk-L3QRQT7U.js";
+} from "./chunk-7YZYT44Y.js";
 import {
   VERSION
-} from "./chunk-RWYEP5SD.js";
+} from "./chunk-34AD2NAO.js";
 import "./chunk-UPONRQSN.js";
 
 // src/eventcatalog.ts

package/dist/generate.cjs

@@ -73,7 +73,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.2.0";
+var version = "3.2.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-GGRXP5WM.js";
-import "./chunk-L3QRQT7U.js";
-import "./chunk-RWYEP5SD.js";
+} from "./chunk-6OFLYNWB.js";
+import "./chunk-7YZYT44Y.js";
+import "./chunk-34AD2NAO.js";
 import "./chunk-UPONRQSN.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.2.0";
+var version = "3.2.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-L3QRQT7U.js";
-import "../chunk-RWYEP5SD.js";
+} from "../chunk-7YZYT44Y.js";
+import "../chunk-34AD2NAO.js";
 export {
   logger
 };

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

@@ -0,0 +1,77 @@
+---
+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;
+  description?: string;
+  height?: string;
+  width?: string;
+  url: string;
+}
+
+const { title, description, height = '600', width = '100%', url, ...eventCatalogResource } = Astro.props;
+
+const resource = eventCatalogResource as CollectionEntry<'services'>;
+
+// Validate that the URL is from IcePanel
+const isValidIcePanelUrl = url?.startsWith('https://s.icepanel.io/') || url?.startsWith('https://icepanel.io/');
+
+const backUrl = resource.collection
+  ? buildUrl(`/docs/${resource.collection}/${resource.data.id}/${resource.data.version}#${title}-icepanel-title`)
+  : undefined;
+
+const fullScreenParams = {
+  url: url,
+  title: title,
+  back: backUrl,
+};
+
+const openFullScreenUrl = buildUrlWithParams(`/icepanel`, fullScreenParams);
+---
+
+{
+  !url && (
+    <Admonition type="warning">
+      <div>
+        <span class="block font-bold">{`<IcePanel/>`} failed to load</span>
+        <span class="block">Please provide a url to use the IcePanel component.</span>
+      </div>
+    </Admonition>
+  )
+}
+
+{
+  url && !isValidIcePanelUrl && (
+    <Admonition type="warning">
+      <div>
+        <span class="block font-bold">{`<IcePanel/>`} invalid URL</span>
+        <span class="block">Please provide a valid IcePanel URL (e.g., https://s.icepanel.io/...).</span>
+      </div>
+    </Admonition>
+  )
+}
+
+{
+  url && isValidIcePanelUrl && (
+    <div>
+      {title && (
+        <h3 id={`${title}-icepanel-title`} class="text-3xl font-bold">
+          {title}
+        </h3>
+      )}
+      {description && <p class="text-[rgb(var(--ec-page-text-muted))] mb-3">{description}</p>}
+      <div class="relative">
+        <iframe class="rounded-2xl border-none" src={url} width={width} height={height} title={title || 'IcePanel Diagram'} />
+        <a
+          href={openFullScreenUrl}
+          class="absolute bottom-[15px] right-5 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle))] px-4 py-2 rounded-md transition-colors"
+        >
+          <ExpandIcon className="w-5 h-5" />
+        </a>
+      </div>
+    </div>
+  )
+}

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

@@ -25,6 +25,7 @@ import Miro from '@components/MDX/Miro/Miro.astro';
 import Lucid from '@components/MDX/Lucid/Lucid.astro';
 import DrawIO from '@components/MDX/DrawIO/DrawIO.astro';
 import FigJam from '@components/MDX/FigJam/FigJam.astro';
+import IcePanel from '@components/MDX/IcePanel/IcePanel.astro';
 import Design from '@components/MDX/Design/Design.astro';
 import MermaidFileLoader from '@components/MDX/MermaidFileLoader/MermaidFileLoader.astro';
 //  Portals: required for server/client components
@@ -65,6 +66,7 @@ const components = (props: any) => {
     Lucid: (mdxProp: any) => jsx(Lucid, { ...props, ...mdxProp }),
     DrawIO: (mdxProp: any) => jsx(DrawIO, { ...props, ...mdxProp }),
     FigJam: (mdxProp: any) => jsx(FigJam, { ...props, ...mdxProp }),
+    IcePanel: (mdxProp: any) => jsx(IcePanel, { ...props, ...mdxProp }),
     MermaidFileLoader: (mdxProp: any) => jsx(MermaidFileLoader, { ...props, ...mdxProp }),
   };
 };

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

@@ -73,31 +73,25 @@ const logList = await Promise.all(logListPromise);
 
 const getBadge = () => {
   if (props.collection === 'services') {
-    return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-600' };
+    return { badgeType: 'service', content: 'Service', icon: ServerIcon };
   }
   if (props.collection === 'events') {
-    return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon, class: 'text-orange-600' };
+    return { badgeType: 'event', content: 'Event', icon: BoltIcon };
   }
   if (props.collection === 'commands') {
-    return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-600' };
+    return { badgeType: 'command', content: 'Command', icon: ChatBubbleLeftIcon };
   }
   if (props.collection === 'queries') {
-    return { backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon, class: 'text-green-600' };
+    return { badgeType: 'query', content: 'Query', icon: MagnifyingGlassIcon };
   }
   if (props.collection === 'domains') {
-    return {
-      backgroundColor: 'yellow',
-      textColor: 'yellow',
-      content: 'Domain',
-      icon: RectangleGroupIcon,
-      class: 'text-yellow-600',
-    };
+    return { badgeType: 'domain', content: 'Domain', icon: RectangleGroupIcon };
   }
   if (props.collection === 'containers') {
-    return { backgroundColor: 'blue', textColor: 'blue', content: 'Container', icon: DatabaseIcon, class: 'text-blue-600' };
+    return { badgeType: 'default', content: 'Container', icon: DatabaseIcon };
   }
   if (props.collection === 'flows') {
-    return { backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon, class: 'text-teal-600' };
+    return { badgeType: 'design', content: 'Flow', icon: QueueListIcon };
   }
 };
 
@@ -112,7 +106,7 @@ const badges = [getBadge()];
           <div>
             <a
               href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
-              class="text-sm font-medium text-gray-500 hover:text-gray-700"
+              class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
             >
               {props.data.name}
             </a>
@@ -120,12 +114,17 @@ const badges = [getBadge()];
         </li>
         <li>
           <div class="flex items-center">
-            <svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-gray-300">
+            <svg
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+              class="h-5 w-5 flex-shrink-0 text-[rgb(var(--ec-page-border))]"
+            >
               <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path>
             </svg>
             <a
               href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
-              class="text-sm font-medium text-gray-500 hover:text-gray-700"
+              class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
             >
               Changelog
             </a>
@@ -133,18 +132,19 @@ const badges = [getBadge()];
         </li>
       </ol>
     </nav>
-    <div class="border-b border-gray-200 flex justify-between items-start py-4 w-full">
+    <div class="border-b border-[rgb(var(--ec-page-border))] flex justify-between items-start py-4 w-full">
       <div>
-        <h2 class="text-2xl md:text-4xl font-bold">{props.data.name} (Changelog)</h2>
-        <h2 class="text-lg pt-2 text-gray-500 font-light">{props.data.summary}</h2>
+        <h2 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{props.data.name} (Changelog)</h2>
+        <h2 class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
         {
           badges && (
             <div class="flex flex-wrap py-2 pt-4">
               {badges.map((badge: any) => (
                 <span
-                  class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
+                  class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center"
+                  style={`background-color: rgb(var(--ec-badge-${badge.badgeType}-bg)); color: rgb(var(--ec-badge-${badge.badgeType}-text));`}
                 >
-                  {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
+                  {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1" />}
                   <span>{badge.content}</span>
                 </span>
               ))}
@@ -155,7 +155,7 @@ const badges = [getBadge()];
     </div>
     {
       logList.length === 0 && (
-        <div class="py-4 text-gray-400 prose prose-md">
+        <div class="py-4 text-[rgb(var(--ec-page-text-muted))] prose prose-md">
           <p>No changelogs found.</p>
         </div>
       )
@@ -167,25 +167,22 @@ const badges = [getBadge()];
             <li>
               <div class="relative pb-8">
                 {index !== logList.length - 1 ? (
-                  <span aria-hidden="true" class="absolute left-6 top-4 -ml-px h-full w-0.5 bg-gray-200" />
+                  <span aria-hidden="true" class="absolute left-6 top-4 -ml-px h-full w-0.5 bg-[rgb(var(--ec-page-border))]" />
                 ) : null}
                 <div class="relative flex space-x-3">
                   <div>
                     <a
                       href={buildUrl(`${log.url}/${log.version}`)}
-                      class={
-                        'bg-primary hover:bg-primary/80 text-white flex h-8 w-14 items-center justify-center rounded-full ring-8 ring-white'
-                      }
+                      class="bg-primary hover:bg-primary/80 text-white flex h-8 w-14 items-center justify-center rounded-full ring-8 ring-[rgb(var(--ec-page-bg))]"
                     >
                       {log.version}
-                      {/* <DocumentTextIcon aria-hidden="true" className="h-5 w-5 text-white" /> */}
                     </a>
                   </div>
                 </div>
                 <div class="pl-[70px] py-2 -mt-10">
                   {log.createdAt && (
                     <div class="pb-2">
-                      <h3 class="text-2xl text-gray-800 font-bold">
+                      <h3 class="text-2xl text-[rgb(var(--ec-page-text))] font-bold">
                         <span>
                           {log.createdAt.toISOString().split('T')[0]} {`${log.isLatest ? '(latest)' : ''}`}
                         </span>
@@ -195,10 +192,8 @@ const badges = [getBadge()];
                   {log.badges && (
                     <div class="flex flex-wrap">
                       {log.badges.map((badge: any) => (
-                        <span
-                          class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
-                        >
-                          {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
+                        <span class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]">
+                          {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1" />}
                           <span>{badge.content}</span>
                         </span>
                       ))}
@@ -207,7 +202,7 @@ const badges = [getBadge()];
                   <div class="prose prose-md !max-w-none py-2">
                     <log.Content components={mdxComponents(props)} />
                   </div>
-                  {log.diffs && log.diffs.map((diff) => <div id="diff-container" set:html={diff} />)}
+                  {log.diffs && log.diffs.map((diff) => <div class="bg-white rounded-lg p-2 my-2" set:html={diff} />)}
                 </div>
               </div>
             </li>

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

@@ -0,0 +1,67 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { ClientRouter } from 'astro:transitions';
+---
+
+<VerticalSideBarLayout title="IcePanel">
+  <div class="h-[calc(100vh-80px)] bg-[rgb(var(--ec-page-bg))] p-3">
+    <div class="flex items-center justify-between mb-4">
+      <h1 id="diagramTitle" class="text-2xl font-bold text-[rgb(var(--ec-page-text))]">IcePanel Diagram</h1>
+      <div class="flex items-center gap-3">
+        <button
+          id="backButton"
+          class="hidden items-center gap-2 bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle))] 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>
+      </div>
+    </div>
+    <div class="w-full bg-[rgb(var(--ec-card-bg))] h-[calc(100%-4rem)] rounded-2xl">
+      <iframe class="w-full h-full rounded-2xl border-none"></iframe>
+    </div>
+  </div>
+</VerticalSideBarLayout>
+
+<ClientRouter />
+<script>
+  function configureIcePanel() {
+    // Get url from query params and then embed into the iframe
+    const pageUrl = new URL(window.location.href);
+    const icePanelUrl = pageUrl.searchParams.get('url');
+    const title = pageUrl.searchParams.get('title') || 'IcePanel Diagram';
+    const backUrl = pageUrl.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}-icepanel-title`;
+      });
+    }
+
+    // Update the diagram title
+    const diagramTitleElement = document.querySelector('#diagramTitle');
+    if (diagramTitleElement) {
+      diagramTitleElement.textContent = title;
+    }
+
+    const iframe = document.querySelector('iframe');
+    if (iframe && icePanelUrl) {
+      iframe.src = icePanelUrl;
+      iframe.width = '100%';
+      iframe.height = '100%';
+    }
+  }
+
+  configureIcePanel();
+
+  document.addEventListener('astro:page-load', configureIcePanel);
+</script>

package/package.json

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