@eventcatalog/core 2.48.0 → 2.48.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 = "2.48.0";
+var version = "2.48.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-LK6C3F6Q.js";
-import "../chunk-I755G24S.js";
+} from "../chunk-SKRYED6N.js";
+import "../chunk-TU4LMTL7.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.48.0";
+var version = "2.48.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-RW4O4UUQ.js";
-import "../chunk-LK6C3F6Q.js";
-import "../chunk-I755G24S.js";
+} from "../chunk-UVANOIYF.js";
+import "../chunk-SKRYED6N.js";
+import "../chunk-TU4LMTL7.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -191,7 +191,6 @@ function getRelativeTargetPath(filePath) {
     filePathArr.shift();
   }
   if (filePathArr[0] == "snippets") {
-    console.log("SNIPPETS", filePathArr);
     return import_node_path2.default.join("snippets", ...filePathArr.slice(1));
   }
   const relativePath = [];

package/dist/catalog-to-astro-content-directory.js

@@ -1,8 +1,8 @@
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
-} from "./chunk-B53UJPGW.js";
-import "./chunk-WDTWWPPX.js";
+} from "./chunk-IZMM7ZGY.js";
+import "./chunk-LDBRNJIL.js";
 import "./chunk-E7TXTI7G.js";
 export {
   catalogToAstro,

package/dist/{chunk-B53UJPGW.js → chunk-IZMM7ZGY.js}

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-WDTWWPPX.js";
+} from "./chunk-LDBRNJIL.js";
 import {
   verifyRequiredFieldsAreInCatalogConfigFile
 } from "./chunk-E7TXTI7G.js";

package/dist/{chunk-WDTWWPPX.js → chunk-LDBRNJIL.js}

@@ -76,7 +76,6 @@ function getRelativeTargetPath(filePath) {
     filePathArr.shift();
   }
   if (filePathArr[0] == "snippets") {
-    console.log("SNIPPETS", filePathArr);
     return path.join("snippets", ...filePathArr.slice(1));
   }
   const relativePath = [];

package/dist/{chunk-LK6C3F6Q.js → chunk-SKRYED6N.js}

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

package/dist/{chunk-I755G24S.js → chunk-TU4LMTL7.js}

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

package/dist/{chunk-RW4O4UUQ.js → chunk-UVANOIYF.js}

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

package/dist/{chunk-MDWGYIVH.js → chunk-XE6PFSH5.js}

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-WDTWWPPX.js";
+} from "./chunk-LDBRNJIL.js";
 
 // src/watcher.js
 import watcher from "@parcel/watcher";

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-I755G24S.js";
+} from "./chunk-TU4LMTL7.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.48.0";
+var version = "2.48.2";
 
 // src/constants.ts
 var VERSION = version;
@@ -306,7 +306,6 @@ function getRelativeTargetPath(filePath) {
     filePathArr.shift();
   }
   if (filePathArr[0] == "snippets") {
-    console.log("SNIPPETS", filePathArr);
     return import_node_path3.default.join("snippets", ...filePathArr.slice(1));
   }
   const relativePath = [];

package/dist/eventcatalog.config.d.cts

@@ -101,6 +101,12 @@ interface Config {
             renderMode?: 'flat' | 'single';
         };
     };
+    environments?: {
+        name: string;
+        url: string;
+        description?: string;
+        shortName?: string;
+    }[];
 }
 
 export type { Config, SideBarConfig };

package/dist/eventcatalog.config.d.ts

@@ -101,6 +101,12 @@ interface Config {
             renderMode?: 'flat' | 'single';
         };
     };
+    environments?: {
+        name: string;
+        url: string;
+        description?: string;
+        shortName?: string;
+    }[];
 }
 
 export type { Config, SideBarConfig };

package/dist/eventcatalog.js

@@ -3,19 +3,19 @@ import {
 } from "./chunk-BLDONK5J.js";
 import {
   watch
-} from "./chunk-MDWGYIVH.js";
+} from "./chunk-XE6PFSH5.js";
 import {
   log_build_default
-} from "./chunk-RW4O4UUQ.js";
-import "./chunk-LK6C3F6Q.js";
+} from "./chunk-UVANOIYF.js";
+import "./chunk-SKRYED6N.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
-} from "./chunk-B53UJPGW.js";
-import "./chunk-WDTWWPPX.js";
+} from "./chunk-IZMM7ZGY.js";
+import "./chunk-LDBRNJIL.js";
 import {
   VERSION
-} from "./chunk-I755G24S.js";
+} from "./chunk-TU4LMTL7.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

package/dist/map-catalog-to-astro.cjs

@@ -110,7 +110,6 @@ function getRelativeTargetPath(filePath) {
     filePathArr.shift();
   }
   if (filePathArr[0] == "snippets") {
-    console.log("SNIPPETS", filePathArr);
     return import_node_path.default.join("snippets", ...filePathArr.slice(1));
   }
   const relativePath = [];

package/dist/map-catalog-to-astro.js

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-WDTWWPPX.js";
+} from "./chunk-LDBRNJIL.js";
 export {
   mapCatalogToAstro
 };

package/dist/watcher.cjs

@@ -114,7 +114,6 @@ function getRelativeTargetPath(filePath) {
     filePathArr.shift();
   }
   if (filePathArr[0] == "snippets") {
-    console.log("SNIPPETS", filePathArr);
     return import_node_path.default.join("snippets", ...filePathArr.slice(1));
   }
   const relativePath = [];

package/dist/watcher.js

@@ -1,7 +1,7 @@
 import {
   watch
-} from "./chunk-MDWGYIVH.js";
-import "./chunk-WDTWWPPX.js";
+} from "./chunk-XE6PFSH5.js";
+import "./chunk-LDBRNJIL.js";
 export {
   watch
 };

package/eventcatalog/src/components/EnvironmentDropdown.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+interface Environment {
+  name: string;
+  url: string;
+  description?: string;
+  shortName?: string;
+}
+
+interface EnvironmentDropdownProps {
+  environments: Environment[];
+}
+
+export const EnvironmentDropdown: React.FC<EnvironmentDropdownProps> = ({ environments }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentEnvironment, setCurrentEnvironment] = useState<Environment | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Check if current URL matches any environment
+    const currentUrl = window.location.origin;
+    const matchedEnv = environments.find((env) => {
+      // Normalize URLs for comparison
+      const envUrl = new URL(env.url).origin;
+      return envUrl === currentUrl;
+    });
+    setCurrentEnvironment(matchedEnv || null);
+  }, [environments]);
+
+  useEffect(() => {
+    // Handle click outside
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    // Handle escape key
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('click', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const toggleDropdown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={toggleDropdown}
+        className="flex items-center space-x-1 text-sm font-medium text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 rounded-md px-3 py-2"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+          />
+        </svg>
+        <span>
+          Environments
+          {currentEnvironment && (
+            <span className="font-normal"> ({currentEnvironment.shortName || currentEnvironment.name})</span>
+          )}
+        </span>
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      <div
+        className={`${isOpen ? '' : 'hidden'} absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-100 overflow-hidden z-20`}
+      >
+        {environments.map((env) => {
+          const isCurrentEnv = currentEnvironment?.name === env.name;
+
+          return (
+            <a
+              key={env.name}
+              href={env.url}
+              onClick={(e) => {
+                e.preventDefault();
+                // Construct the full URL with the current path when clicked
+                const currentPath = window.location.pathname + window.location.search + window.location.hash;
+                const targetUrl = new URL(env.url);
+                targetUrl.pathname = currentPath;
+                window.location.href = targetUrl.toString();
+              }}
+              className={`block px-4 py-3 text-sm transition-colors border-b border-gray-50 last:border-b-0 ${
+                isCurrentEnv ? 'bg-purple-50 text-purple-700 hover:bg-purple-100' : 'text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <div className={`font-medium ${isCurrentEnv ? 'text-purple-700' : ''}`}>{env.name}</div>
+                  {env.description && (
+                    <div className={`text-xs font-light mt-1 ${isCurrentEnv ? 'text-purple-600' : 'text-gray-500'}`}>
+                      {env.description}
+                    </div>
+                  )}
+                </div>
+                {isCurrentEnv && (
+                  <svg className="w-4 h-4 text-purple-600 flex-shrink-0 ml-2" fill="currentColor" viewBox="0 0 20 20">
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                )}
+              </div>
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/eventcatalog/src/components/Header.astro

@@ -5,6 +5,7 @@ import { buildUrl } from '@utils/url-builder';
 import { showEventCatalogBranding, showCustomBranding } from '@utils/feature';
 import { getSession } from 'auth-astro/server';
 import { isAuthEnabled, isSSR } from '@utils/feature';
+import { EnvironmentDropdown } from './EnvironmentDropdown';
 
 let session = null;
 if (isAuthEnabled()) {
@@ -41,7 +42,10 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
       <div class="hidden md:block w-3/12">
         {
           session ? (
-            <div class="flex justify-end pr-2">
+            <div class="flex items-center space-x-4 justify-end pr-2">
+              {catalog.environments && catalog.environments.length > 0 && (
+                <EnvironmentDropdown environments={catalog.environments} client:load />
+              )}
               <div class="relative">
                 <button
                   id="profile-menu-button"
@@ -89,6 +93,9 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
           ) : (
             <>
               <div class="flex items-center space-x-4 justify-end pr-2">
+                {catalog.environments && catalog.environments.length > 0 && (
+                  <EnvironmentDropdown environments={catalog.environments} client:load />
+                )}
                 {isAuthEnabled() && (
                   <button
                     id="okta-signin-btn"

package/eventcatalog/src/components/SideNav/ListViewSideBar/components/MessageList.tsx

@@ -54,6 +54,7 @@ const MessageList: React.FC<MessageListProps> = ({ messages, decodedCurrentPath,
       <li key={message.id} data-active={decodedCurrentPath === message.href}>
         <a
           href={message.href}
+          data-active={decodedCurrentPath === message.href}
           className={`flex items-center justify-between px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
             decodedCurrentPath.includes(message.href) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
           }`}

package/eventcatalog/src/components/SideNav/ListViewSideBar/components/SpecificationList.tsx

@@ -26,6 +26,7 @@ const SpecificationList: React.FC<SpecificationListProps> = ({ specifications, i
           <a
             key={`${spec.name}-asyncapi`}
             href={buildUrl(`/docs/services/${id}/${version}/asyncapi/${spec.filenameWithoutExtension}`)}
+            data-active={window.location.href.includes(`docs/services/${id}/${version}/asyncapi`)}
             className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md justify-between ${
               window.location.href.includes(`docs/services/${id}/${version}/asyncapi`) ? 'bg-purple-100' : 'hover:bg-purple-100'
             }`}
@@ -42,6 +43,7 @@ const SpecificationList: React.FC<SpecificationListProps> = ({ specifications, i
           <a
             key={`${spec.name}-openapi`}
             href={buildUrl(`/docs/services/${id}/${version}/spec/${spec.filenameWithoutExtension}`)}
+            data-active={window.location.href.includes(`docs/services/${id}/${version}/spec/${spec.filenameWithoutExtension}`)}
             className={`items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md flex justify-between ${
               window.location.href.includes(`docs/services/${id}/${version}/spec/${spec.filenameWithoutExtension}`)
                 ? 'bg-purple-100'

package/eventcatalog/src/components/SideNav/ListViewSideBar/index.tsx

@@ -99,6 +99,7 @@ const ServiceItem = React.memo(
         <div className="space-y-0.5 border-gray-200/80 border-l pl-3 ml-[9px] mt-1">
           <a
             href={`${item.href}`}
+            data-active={decodedCurrentPath === item.href}
             className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
               decodedCurrentPath === item.href ? 'bg-purple-100' : 'hover:bg-purple-100'
             }`}
@@ -111,6 +112,7 @@ const ServiceItem = React.memo(
                 serviceName: item.name,
                 serviceId: item.id,
               })}
+              data-active={window.location.href.includes(`serviceId=${item.id}`)}
               className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
                 window.location.href.includes(`serviceId=${item.id}`) ? 'bg-purple-100' : 'hover:bg-purple-100'
               }`}
@@ -343,7 +345,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
     const activeElement = document.querySelector('[data-active="true"]');
     if (activeElement) {
       // Add y offset to the scroll position
-      activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      activeElement.scrollIntoView({ behavior: 'instant', block: 'center' });
     }
   }, []);
 
@@ -492,6 +494,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
         <div className={`space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1 ${marginLeft}`}>
           <a
             href={`${item.href}`}
+            data-active={decodedCurrentPath === item.href}
             className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
               decodedCurrentPath === item.href ? 'bg-purple-100 ' : 'hover:bg-purple-100'
             }`}
@@ -505,6 +508,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                 domainId: item.id,
                 domainName: item.name,
               })}
+              data-active={window.location.href.includes(`domainId=${item.id}`)}
               className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
                 window.location.href.includes(`domainId=${item.id}`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
               }`}
@@ -515,6 +519,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
           {!isVisualizer && (
             <a
               href={buildUrl(`/docs/domains/${item.id}/language`)}
+              data-active={decodedCurrentPath.includes(`/docs/domains/${item.id}/language`)}
               className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
                 decodedCurrentPath.includes(`/docs/domains/${item.id}/language`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
               }`}
@@ -600,6 +605,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                     <li key={item.href}>
                       <a
                         href={item.href}
+                        data-active={decodedCurrentPath === item.href}
                         className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
                           decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
                         }`}
@@ -672,15 +678,17 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
               <div className="pt-4 pb-2">
                 <ul className="space-y-4">
                   {filteredData['services'].map((item: any) => (
-                    <ServiceItem
-                      key={item.href}
-                      item={item}
-                      decodedCurrentPath={decodedCurrentPath}
-                      collapsedGroups={collapsedGroups}
-                      toggleGroupCollapse={toggleGroupCollapse}
-                      isVisualizer={isVisualizer}
-                      searchTerm={debouncedSearchTerm}
-                    />
+                    <li key={item.href} data-active={decodedCurrentPath === item.href}>
+                      <ServiceItem
+                        key={item.href}
+                        item={item}
+                        decodedCurrentPath={decodedCurrentPath}
+                        collapsedGroups={collapsedGroups}
+                        toggleGroupCollapse={toggleGroupCollapse}
+                        isVisualizer={isVisualizer}
+                        searchTerm={debouncedSearchTerm}
+                      />
+                    </li>
                   ))}
                 </ul>
               </div>
@@ -693,6 +701,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                     <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
                       <a
                         href={item.href}
+                        data-active={decodedCurrentPath === item.href}
                         className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
                           decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
                         }`}
@@ -719,6 +728,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                     <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
                       <a
                         href={item.href}
+                        data-active={decodedCurrentPath === item.href}
                         className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
                           decodedCurrentPath === item.href ? 'bg-cyan-100 text-cyan-900' : 'hover:bg-purple-100'
                         }`}

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

@@ -33,7 +33,6 @@ import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 import { Box, Boxes } from 'lucide-react';
 import type { CollectionTypes } from '@types';
 
-import { ClientRouter } from 'astro:transitions';
 import { render } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 
@@ -363,7 +362,6 @@ nodeGraphs.push({
         {props?.collection === 'entities' && <EntitySideBar entity={props} />}
       </aside>
     </div>
-    <ClientRouter />
   </main>
 
   <style is:global>

package/package.json

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