@eventcatalog/core 2.8.4 → 2.8.6

package/.all-contributorsrc

@@ -410,6 +410,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "d-o-h",
+      "name": "d-o-h",
+      "avatar_url": "https://avatars.githubusercontent.com/u/23699653?v=4",
+      "profile": "https://github.com/d-o-h",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @eventcatalog/core
 
+## 2.8.6
+
+### Patch Changes
+
+- b4c49ef: feat(core): added links to the landing page and fixed resource counter values
+
+## 2.8.5
+
+### Patch Changes
+
+- db41392: fix(core): flows now work with latest semver for services
+- 8376da8: chore(core): fixed url builder for server/client components
+
 ## 2.8.4
 
 ### Patch Changes

package/README.md

@@ -29,7 +29,7 @@
 <h4>Features: Documentation generator for Event Driven Architectures, Markdown driven, Document Domains/Services/Messages/Schemas and more, Content versioning, Assign Owners, Schemas, OpenAPI, MDX Components and more...</h4>
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-43-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-44-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [Read the Docs](https://eventcatalog.dev/) | [Edit the Docs](https://github.com/event-catalog/docs) | [View Demo](https://demo.eventcatalog.dev/docs)
@@ -228,6 +228,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/hpatoio"><img src="https://avatars.githubusercontent.com/u/249948?v=4?s=100" width="100px;" alt="Simone Fumagalli"/><br /><sub><b>Simone Fumagalli</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=hpatoio" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/d-o-h"><img src="https://avatars.githubusercontent.com/u/23699653?v=4?s=100" width="100px;" alt="d-o-h"/><br /><sub><b>d-o-h</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=d-o-h" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/astro.config.mjs

@@ -48,6 +48,15 @@ export default defineConfig({
     pagefind(),
   ],
   vite: {
+    define: {
+      /**
+       * Trailing slash is exposed as global variable here principally for `@utils/url-builder`.
+       * The utility is used by client components and because of that it can't direct import 
+       * the eventcatalog.config, as the config use packages that only run in node environments,
+       * such as `node:path`.
+       */
+      '__EC_TRAILING_SLASH__': config.trailingSlash || false,
+    },
     build: {
       commonjsOptions: {
         transformMixedEsModules: true,

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.8.4",
+  "version": "2.8.6",
   "publishConfig": {
     "access": "public"
   },
@@ -41,7 +41,6 @@
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.2",
     "@asyncapi/react-component": "^2.2.2",
-    "@changesets/cli": "^2.27.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@parcel/watcher": "^2.4.1",
@@ -82,6 +81,7 @@
     "@types/semver": "^7.5.8"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.27.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "prettier": "^3.3.3",

package/src/components/DiscoverInsight.astro

@@ -0,0 +1,52 @@
+---
+import { buildUrl } from '@utils/url-builder';
+import type React from 'react';
+
+interface Props {
+  color: string;
+  dataTarget: number;
+  icon: React.ElementType;
+  label: 'domains' | 'services' | 'commands' | 'events' | 'flows';
+}
+
+const { color, dataTarget, icon: Icon, label } = Astro.props;
+---
+
+<div class={`relative text-center ${color}`}>
+  <div class="flex justify-center mb-2">
+    <Icon className="w-8 h-8" />
+  </div>
+
+  <div class="text-2xl font-bold mb-1">
+    <span class="statistic" data-target={dataTarget}>0</span>
+  </div>
+
+  <a
+    href={buildUrl(`/discover/${label}`)}
+    class="static before:block before:absolute before:top-0 before:left-0 before:z-0 before:w-full before:h-full hover:underline underline-offset-8 text-sm text-gray-600 capitalize"
+  >
+    {label}
+  </a>
+</div>
+
+<script>
+  function animateStatistics() {
+    const statistics = document.querySelectorAll('.statistic');
+    statistics.forEach((statistic) => {
+      let target = parseInt(statistic.getAttribute('data-target')!);
+      let current = 0;
+      const increment = target / 50;
+      const timer = setInterval(() => {
+        current += increment;
+        if (current >= target) {
+          clearInterval(timer);
+          statistic.textContent = target.toString();
+        } else {
+          statistic.textContent = Math.round(current).toString();
+        }
+      }, 20);
+    });
+  }
+
+  window.addEventListener('load', animateStatistics);
+</script>

package/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -5,8 +5,6 @@ import { getNodesAndEdges as getNodesAndEdgesForEvent } from '@utils/events/node
 import { getNodesAndEdges as getNodesAndEdgesForCommand } from '@utils/commands/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/domains/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/flows/node-graph';
-import { buildUrl } from '@utils/url-builder';
-import config from '@eventcatalog';
 
 interface Props {
   id: string;
@@ -80,13 +78,6 @@ if (collection === 'flows') {
   nodes = eventNodes;
   edges = eventEdges;
 }
-
-const getDocUrlForCollection = () => {
-  return buildUrl(`/docs/${collection}/${id}/${version}`);
-};
-const getVisualiserUrlForCollection = () => {
-  return buildUrl(`/visualiser/${collection}/${id}/${version}`);
-};
 ---
 
 <div>
@@ -99,7 +90,6 @@ const getVisualiserUrlForCollection = () => {
     href={href.url}
     linkTo={linkTo}
     client:only="react"
-    urlHasTrailingSlash={config.trailingSlash}
     linksToVisualiser={linksToVisualiser}
   />
 </div>

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

@@ -23,7 +23,7 @@ import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
 import DownloadButton from './DownloadButton';
-import { buildUrl } from '@utils/url-builder-client';
+import { buildUrl } from '@utils/url-builder';
 
 interface Props {
   nodes: any;
@@ -34,18 +34,14 @@ interface Props {
   includeControls?: boolean;
   linkTo: 'docs' | 'visualiser';
   includeKey?: boolean;
-  urlHasTrailingSlash?: boolean;
   linksToVisualiser?: boolean;
 }
 
-const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>, trailingSlash?: boolean) => {
-  return buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`, trailingSlash);
+const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
+  return buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
 };
-const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>, trailingSlash?: boolean) => {
-  return buildUrl(
-    `/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`,
-    trailingSlash
-  );
+const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
+  return buildUrl(`/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
 };
 
 const NodeGraphBuilder = ({
@@ -55,7 +51,6 @@ const NodeGraphBuilder = ({
   includeBackground = true,
   linkTo = 'docs',
   includeKey = true,
-  urlHasTrailingSlash,
   linksToVisualiser = false,
 }: Props) => {
   const nodeTypes = useMemo(
@@ -93,10 +88,10 @@ const NodeGraphBuilder = ({
     (_: any, node: Node) => {
       if (linksToVisualiser) {
         if (node.type === 'events' || node.type === 'commands') {
-          navigate(getVisualiserUrlForCollection(node.data.message, urlHasTrailingSlash));
+          navigate(getVisualiserUrlForCollection(node.data.message));
         }
         if (node.type === 'services') {
-          navigate(getVisualiserUrlForCollection(node.data.service, urlHasTrailingSlash));
+          navigate(getVisualiserUrlForCollection(node.data.service));
         }
         return;
       }
@@ -198,7 +193,6 @@ interface NodeGraphProps {
   linkTo: 'docs' | 'visualiser';
   includeKey?: boolean;
   footerLabel?: string;
-  urlHasTrailingSlash?: boolean;
   linksToVisualiser?: boolean;
 }
 
@@ -212,7 +206,6 @@ const NodeGraph = ({
   hrefLabel = 'Open in visualizer',
   includeKey = true,
   footerLabel,
-  urlHasTrailingSlash,
   linksToVisualiser = false,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
@@ -234,7 +227,6 @@ const NodeGraph = ({
             title={title}
             linkTo={linkTo}
             includeKey={includeKey}
-            urlHasTrailingSlash={urlHasTrailingSlash}
             linksToVisualiser={linksToVisualiser}
           />
 

package/src/components/MDX/Tiles/Tile.astro

@@ -1,7 +1,7 @@
 ---
 import type { ComponentType } from 'react';
 import * as Icons from '@heroicons/react/24/solid';
-import { buildUrl } from '@utils/url-builder-client';
+import { buildUrl } from '@utils/url-builder';
 
 interface Props {
   href: string;

package/src/env.d.ts

@@ -1,2 +1,4 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+declare const __EC_TRAILING_SLASH__: boolean;

package/src/pages/index.astro

@@ -8,6 +8,7 @@ import { getMessages } from '@utils/messages';
 import { getDomains } from '@utils/domains/domains';
 import { getServices } from '@utils/services/services';
 import { getFlows } from '@utils/flows/flows';
+import DiscoverInsight from '@components/DiscoverInsight.astro';
 
 const { commands = [], events = [] } = await getMessages();
 const domains = await getDomains();
@@ -30,138 +31,61 @@ const flows = await getFlows();
         <h2 class="text-center text-xl font-bold">Architecture insights</h2>
         <section class="mb-16 bg-white rounded-xl shadow-lg p-6">
           <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-            <div class="text-center">
-              <div class="flex justify-center mb-2">
-                <RectangleGroupIcon className="w-8 h-8 text-yellow-600" />
-              </div>
-              <div class="text-2xl font-bold text-yellow-600 mb-1">
-                <span class="statistic" data-target="5">0</span>
-              </div>
-              <div class="text-sm text-gray-600">Domains</div>
-            </div>
-            <div class="text-center">
-              <div class="flex justify-center mb-2">
-                <ServerIcon className="w-8 h-8 text-pink-500" />
-              </div>
-              <div class="text-2xl font-bold text-pink-500 mb-1">
-                <span class="statistic" data-target="12">0</span>
-              </div>
-              <div class="text-sm text-gray-600">Services</div>
-            </div>
-            <div class="text-center">
-              <div class="flex justify-center mb-2">
-                <ChatBubbleLeftIcon className="w-8 h-8 text-blue-500" />
-              </div>
-              <div class="text-2xl font-bold text-blue-500 mb-1">
-                <span class="statistic" data-target="30">0</span>
-              </div>
-              <div class="text-sm text-gray-600">Commands</div>
-            </div>
-            <div class="text-center">
-              <div class="flex justify-center mb-2">
-                <BoltIcon className="w-8 h-8 text-orange-400" />
-              </div>
-              <div class="text-2xl font-bold text-orange-400 mb-1">
-                <span class="statistic" data-target="20">0</span>
-              </div>
-              <div class="text-sm text-gray-600">Events</div>
-            </div>
+            <DiscoverInsight color="text-yellow-600" dataTarget={domains.length} icon={RectangleGroupIcon} label="domains" />
 
-            <div class="text-center">
-              <div class="flex justify-center mb-2">
-                <QueueListIcon className="w-8 h-8 text-green-800" />
-              </div>
-              <div class="text-2xl font-bold text-green-800 mb-1">
-                <span class="statistic" data-target="8">0</span>
-              </div>
-              <div class="text-sm text-gray-600">Flows</div>
-            </div>
+            <DiscoverInsight color="text-pink-500" dataTarget={services.length} icon={ServerIcon} label="services" />
+
+            <DiscoverInsight color="text-blue-500" dataTarget={commands.length} icon={ChatBubbleLeftIcon} label="commands" />
+
+            <DiscoverInsight color="text-orange-400" dataTarget={events.length} icon={BoltIcon} label="events" />
+
+            <DiscoverInsight color="text-green-800" dataTarget={flows.length} icon={QueueListIcon} label="flows" />
           </div>
         </section>
-      </div>
 
-      <section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
-        <div
-          class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-        >
-          <div class="h-2 bg-blue-400"></div>
-          <div class="p-6">
-            <h2 class="text-2xl font-semibold mb-4 text-blue-700">Documentation</h2>
-            <p class="text-gray-600 mb-4">
-              Create and maintain comprehensive documentation for your events, including schemas, examples, and versioning.
-            </p>
-            <a href={buildUrl('/docs')} class="text-blue-600 hover:text-blue-800 font-semibold">Explore docs →</a>
+        <section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+          <div
+            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
+          >
+            <div class="h-2 bg-blue-400"></div>
+            <div class="p-6">
+              <h2 class="text-2xl font-semibold mb-4 text-blue-700">Documentation</h2>
+              <p class="text-gray-600 mb-4">
+                Create and maintain comprehensive documentation for your events, including schemas, examples, and versioning.
+              </p>
+              <a href={buildUrl('/docs')} class="text-blue-600 hover:text-blue-800 font-semibold">Explore docs →</a>
+            </div>
           </div>
-        </div>
-        <div
-          class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-        >
-          <div class="h-2 bg-teal-400"></div>
-          <div class="p-6">
-            <h2 class="text-2xl font-semibold mb-4 text-teal-700">Visualiser</h2>
-            <p class="text-gray-600 mb-4">
-              Transform complex event flows into clear, interactive diagrams. Gain insights at a glance and communicate
-              effectively across teams.
-            </p>
-            <a href={buildUrl('/visualiser')} class="text-teal-600 hover:text-teal-800 font-semibold">Explore visualiser →</a>
+          <div
+            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
+          >
+            <div class="h-2 bg-teal-400"></div>
+            <div class="p-6">
+              <h2 class="text-2xl font-semibold mb-4 text-teal-700">Visualiser</h2>
+              <p class="text-gray-600 mb-4">
+                Transform complex event flows into clear, interactive diagrams. Gain insights at a glance and communicate
+                effectively across teams.
+              </p>
+              <a href={buildUrl('/visualiser')} class="text-teal-600 hover:text-teal-800 font-semibold">Explore visualiser →</a>
+            </div>
           </div>
-        </div>
 
-        <div
-          class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-        >
-          <div class="h-2 bg-red-700"></div>
-          <div class="p-6">
-            <h2 class="text-2xl font-semibold mb-4 text-red-700">Discover</h2>
-            <p class="text-gray-600 mb-4">
-              Dive deep into your event catalog. Search, filter, and analyze your events to gain insights and improve your
-              architecture.
-            </p>
-            <a href={buildUrl('/discover/events')} class="text-red-600 hover:text-red-800 font-semibold">Start exploring →</a>
+          <div
+            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
+          >
+            <div class="h-2 bg-red-700"></div>
+            <div class="p-6">
+              <h2 class="text-2xl font-semibold mb-4 text-red-700">Discover</h2>
+              <p class="text-gray-600 mb-4">
+                Dive deep into your event catalog. Search, filter, and analyze your events to gain insights and improve your
+                architecture.
+              </p>
+              <a href={buildUrl('/discover/events')} class="text-red-600 hover:text-red-800 font-semibold">Start exploring →</a>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </div>
     </main>
-
-    <script define:vars={{ domains, services, commands, events, flows }}>
-      function animateStatistics() {
-        const statistics = document.querySelectorAll('.statistic');
-        statistics.forEach((statistic) => {
-          let target;
-          switch (statistic.parentElement.nextElementSibling.textContent.trim()) {
-            case 'Domains':
-              target = domains.length;
-              break;
-            case 'Services':
-              target = services.length;
-              break;
-            case 'Commands':
-              target = commands.length;
-              break;
-            case 'Events':
-              target = events.length;
-              break;
-            case 'Flows':
-              target = flows.length;
-              break;
-            default:
-              target = parseInt(statistic.getAttribute('data-target'));
-          }
-          let current = 0;
-          const increment = target / 50;
-          const timer = setInterval(() => {
-            current += increment;
-            statistic.textContent = Math.round(current);
-            if (current >= target) {
-              clearInterval(timer);
-              statistic.textContent = target;
-            }
-          }, 20);
-        });
-      }
-
-      window.addEventListener('load', animateStatistics);
-    </script>
   </body>
 </PlainPage>
 

package/src/utils/flows/node-graph.ts

@@ -16,9 +16,8 @@ interface Props {
 }
 
 const getServiceNode = (step: any, services: CollectionEntry<'services'>[]) => {
-  const service = services.find(
-    (service) => service.data.id === step.service.id && service.data.version === step.service.version
-  );
+  const servicesForVersion = getItemsFromCollectionByIdAndSemverOrLatest(services, step.service.id, step.service.version);
+  const service = servicesForVersion?.[0];
   return {
     ...step,
     type: service ? service.collection : 'step',

package/src/utils/url-builder.ts

@@ -1,5 +1,3 @@
-import config from '@eventcatalog';
-
 const cleanUrl = (url: string) => {
   return url.replace(/\/+/g, '/');
 };
@@ -7,7 +5,7 @@ const cleanUrl = (url: string) => {
 // Custom URL builder as Astro does not support this stuff out the box
 export const buildUrl = (url: string, ignoreTrailingSlash = false) => {
   // Should a trailingSlash be added to urls?
-  const trailingSlash = config.trailingSlash || false;
+  const trailingSlash = __EC_TRAILING_SLASH__;
 
   let newUrl = url;
 

package/src/utils/url-builder-client.ts

@@ -1,22 +0,0 @@
-const cleanUrl = (url: string) => {
-  return url.replace(/\/+/g, '/');
-};
-
-// Custom URL builder as Astro does not support this stuff out the box.
-// Used on client components to build URLs
-export const buildUrl = (url: string, trailingSlash = false, ignoreTrailingSlash = false) => {
-  let newUrl = url;
-
-  // If the base URL is not the root, we need to append it
-  if (import.meta.env.BASE_URL !== '/') {
-    newUrl = `${import.meta.env.BASE_URL}${url}`;
-  }
-
-  // Should we add a trailing slash to the url?
-  if (trailingSlash && !ignoreTrailingSlash) {
-    if (url.endsWith('/')) return newUrl;
-    return cleanUrl(`${newUrl}/`);
-  }
-
-  return cleanUrl(newUrl);
-};