@eventcatalog/core 2.2.6 → 2.2.7

package/.prettierrc

@@ -1,10 +1,18 @@
 {
-    "semi": true,
-    "singleQuote": true,
-    "printWidth": 130,
-    "tabWidth": 2,
-    "useTabs": false,
-    "trailingComma": "es5",
-    "bracketSpacing": true
-  }
-  
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 130,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.2.7
+
+### Patch Changes
+
+- d7148fa: chore(core): fixed long labels on the documentation sidebar
+
 ## 2.2.6
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "publishConfig": {
     "access": "public"
   },
@@ -25,8 +25,8 @@
     "changeset": "changeset",
     "generate": "node scripts/generate.js",
     "release": "changeset publish",
-    "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,json}\"",
-    "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,json}\""
+    "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,json,astro}\"",
+    "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,json,astro}\""
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
@@ -70,7 +70,8 @@
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "rimraf": "^5.0.7",
     "tsup": "^8.1.0"
   }

package/src/components/DocsNavigation.astro

@@ -21,13 +21,20 @@ const messages = [...events, ...commands];
 const allData = [...domains, ...services, ...messages, ...teams, ...users];
 
 const eventCatalogConfig = config as CatalogConfig;
-const { services: servicesConfig, domains: domainsConfig, messages: messagesConfig, teams: teamsConfig, users: usersConfig, showPageHeadings = true  } = eventCatalogConfig?.docs?.sidebar || {};
-
-const getConfigValue = (obj: any, key:string, defaultValue: any) => {
+const {
+  services: servicesConfig,
+  domains: domainsConfig,
+  messages: messagesConfig,
+  teams: teamsConfig,
+  users: usersConfig,
+  showPageHeadings = true,
+} = eventCatalogConfig?.docs?.sidebar || {};
+
+const getConfigValue = (obj: any, key: string, defaultValue: any) => {
   return obj?.[key] ?? defaultValue;
-}
+};
 
-const visibleCollections: {[key:string]: boolean} = {
+const visibleCollections: { [key: string]: boolean } = {
   events: getConfigValue(messagesConfig, 'visible', true),
   commands: getConfigValue(messagesConfig, 'visible', true),
   domains: getConfigValue(domainsConfig, 'visible', true),
@@ -38,20 +45,17 @@ const visibleCollections: {[key:string]: boolean} = {
 
 const fetchHeadings = allData.map(async (item) => {
   const renderHeadings = showPageHeadings;
-  const headings = renderHeadings ? await item.render() : { headings: []};
+  const headings = renderHeadings ? await item.render() : { headings: [] };
   return {
     ...item,
     headings: headings.headings,
   };
 });
 
-
-
-const withHeadings =  await Promise.all(fetchHeadings);
+const withHeadings = await Promise.all(fetchHeadings);
 
 const sideNav = withHeadings.reduce((acc, item) => {
-
-  const title = (item.collection === 'events' || item.collection === 'commands') ? 'Messages' : item.collection;
+  const title = item.collection === 'events' || item.collection === 'commands' ? 'Messages' : item.collection;
 
   const group = acc[title] || [];
 
@@ -61,7 +65,10 @@ const sideNav = withHeadings.reduce((acc, item) => {
     items: item.collection === 'users' ? [] : item.headings,
     visible: visibleCollections[item.collection],
     // @ts-ignore
-    href: item.data.version ? buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`) : buildUrl(`/docs/${item.collection}/${item.data.id}`),
+    href: item.data.version
+      ? // @ts-ignore
+        buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)
+      : buildUrl(`/docs/${item.collection}/${item.data.id}`),
   };
 
   group.push(navigationItem);
@@ -73,23 +80,29 @@ const sideNav = withHeadings.reduce((acc, item) => {
 }, {} as any);
 
 const currentPath = Astro.url.pathname;
-
 ---
 
-<div class="font-light w-full xl:pr-10 pb-20 ">
+<div class="font-light w-full xl:pr-10 pb-20">
   {
     Object.keys(sideNav).map((key) => {
       const collection = sideNav[key];
-      if(collection[0] && collection[0].visible === false) return null;
+      if (collection[0] && collection[0].visible === false) return null;
       return (
         <ul class=" w-full space-y-2 pb-8">
           <li class="font-semibold capitalize ">{key}</li>
           {collection.map((item: any) => {
             return (
-                <li class="px-2 w-full text-md xl:text-lg border-l border-gray-200 space-y-2 scroll-m-20" id={item.href} >
-                  <a class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`} href={`${item.href}`}>
-                  <span class="block">{item.label}</span>
-                    {item.version && <span class="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">v{item.version}</span>}
+              <li class="px-2 w-full text-md xl:text-lg border-l border-gray-200 space-y-2 scroll-m-20" id={item.href}>
+                <a
+                  class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`}
+                  href={`${item.href}`}
+                >
+                  <span class="block truncate !whitespace-normal">{item.label}</span>
+                  {item.version && (
+                    <span class="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">
+                      v{item.version}
+                    </span>
+                  )}
                 </a>
                 <ul class="hidden xl:block px-4  text-gray-500 text-md space-y-2  ">
                   {item.items.map((heading: any) => {
@@ -121,10 +134,6 @@ const currentPath = Astro.url.pathname;
         block: 'start',
         inline: 'start',
       });
-
-      // currentElement.scrollIntoView({
-      //   behavior: 'auto'
-      // });
     }
   });
-</script>
+</script>

package/src/components/Header.astro

@@ -17,16 +17,16 @@ const navItems = [
   {
     label: 'Discover',
     href: buildUrl('/discover/events'),
-  }
+  },
 ];
 
 const logo = {
   src: ('/' + (catalog?.logo?.src || 'logo.png')).replace(/^\/+/, '/'), // replace the leading slashes with a single one
   alt: catalog?.logo?.alt || 'Event Catalog',
-  text: catalog?.logo?.text || "EventCatalog"
-}
-
+  text: catalog?.logo?.text || 'EventCatalog',
+};
 ---
+
 <nav class="md:fixed top-0 w-full z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl max-w-[70em]">
   <div class="flex justify-between items-center">
     <div class="w-1/3 flex space-x-2 items-center">
@@ -57,14 +57,17 @@ const logo = {
     </div> -->
     <div class="w-1/3 justify-end text-md">
       <ul class="text-right flex justify-end space-x-8">
-        {navItems.map((item) => {
-          const isActive = currentPath.includes(item.href) ;
-          return <li class={`font-light ${isActive ? 'border-b-2 border-purple-500': ''}`}>
-          <a href={item.href}>{item.label}</a>
-        </li>
-        })}
+        {
+          navItems.map((item) => {
+            const isActive = currentPath.includes(item.href);
+            return (
+              <li class={`font-light ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
+                <a href={item.href}>{item.label}</a>
+              </li>
+            );
+          })
+        }
       </ul>
     </div>
   </div>
 </nav>
-

package/src/components/Lists/VersionList.astro

@@ -4,34 +4,46 @@ import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 
 interface Props {
-  versions: string[]
-  collectionItem: CollectionEntry<CollectionTypes>
+  versions: string[];
+  collectionItem: CollectionEntry<CollectionTypes>;
 }
 
 const { versions, collectionItem } = Astro.props;
 const currentPath = Astro.url.pathname;
-
 ---
 
 <div class="space-y-2 my-2 mb-8">
-  <span class="font-light text-black group-data-[hover]:text-black/80 capitalize">Versions ({collectionItem.data.versions?.length})</span>
-  <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs"> 
-    {versions.map((version) => {
-      const isCurrent = currentPath.includes(version);
-      return <option selected={isCurrent} value={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)} class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}>
-        <span>
-          v{version} 
-          {version === collectionItem.data.latestVersion && <span>(latest)</span>}
-        </span>
-      </option>
-    })}
+  <span class="font-light text-black group-data-[hover]:text-black/80 capitalize"
+    >Versions ({collectionItem.data.versions?.length})</span
+  >
+  <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs">
+    {
+      versions.map((version) => {
+        const isCurrent = currentPath.includes(version);
+        return (
+          <option
+            selected={isCurrent}
+            value={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)}
+            class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}
+          >
+            <span>
+              v{version}
+              {version === collectionItem.data.latestVersion && <span>(latest)</span>}
+            </span>
+          </option>
+        );
+      })
+    }
   </select>
-  <a href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.latestVersion}/changelog`)} class="text-[10px] text-gray-500">View changelogs</a>
+  <a
+    href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.latestVersion}/changelog`)}
+    class="text-[10px] text-gray-500">View changelogs</a
+  >
 </div>
 
 <script>
   document.getElementById('version')?.addEventListener('change', (e: any) => {
-    if (!e.target) return
+    if (!e.target) return;
     window.location.href = e.target.value;
-  })
+  });
 </script>

package/src/components/MDX/Accordion/Accordion.astro

@@ -1,9 +1,8 @@
 ---
-import AccordionClient from './Accordion'
-const {...props } = Astro.props;
+import AccordionClient from './Accordion';
+const { ...props } = Astro.props;
 ---
 
-<AccordionClient {...props} client:load> 
-    <slot />
-</AccordionClient> 
-
+<AccordionClient {...props} client:load>
+  <slot />
+</AccordionClient>

package/src/components/MDX/Accordion/AccordionGroup.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <div class="accordian-group border border-gray-200 rounded-md shadow-sm accordion my-2">

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

@@ -5,7 +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';
 
-
 interface Props {
   id: string;
   collection: string;
@@ -19,7 +18,7 @@ interface Props {
   };
 }
 
-const { id, collection, title, mode = 'simple', linkTo='docs', version, href } = Astro.props;
+const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href } = Astro.props;
 let nodes = [],
   edges = [];
 
@@ -56,7 +55,7 @@ if (collection === 'commands') {
   edges = eventEdges;
 }
 
-if(collection === 'domains'){
+if (collection === 'domains') {
   const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForDomain({
     id: id,
     version,
@@ -66,17 +65,23 @@ if(collection === 'domains'){
   nodes = eventNodes;
   edges = eventEdges;
 }
-
-
-
 ---
 
 <div>
-  <NodeGraphNew id={id} nodes={nodes} edges={edges} title={title} hrefLabel={href.label} href={href.url} linkTo={linkTo} client:load />
+  <NodeGraphNew
+    id={id}
+    nodes={nodes}
+    edges={edges}
+    title={title}
+    hrefLabel={href.label}
+    href={href.url}
+    linkTo={linkTo}
+    client:load
+  />
 </div>
 
 <style is:global>
   .react-flow__attribution {
     display: none;
   }
-</style>
+</style>

package/src/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -3,19 +3,19 @@ const { catalog, id } = Astro.props;
 import fs from 'node:fs/promises';
 import { existsSync } from 'fs';
 import path from 'path';
-import SchemaViewerClient from './SchemaViewer'
+import SchemaViewerClient from './SchemaViewer';
 import Admonition from '../Admonition';
 let schemas = [];
 
 function findSchemaViewers(document: string) {
   // Define regex pattern to match <SchemaViewer ... />
   const pattern = /<SchemaViewer\s+([^>]*)\/>/g;
-  
+
   // Find all matches of the pattern
   const matches = [...document.matchAll(pattern)];
-  
+
   // Extract the properties of each SchemaViewer
-  const schemaViewers = matches.map(match => {
+  const schemaViewers = matches.map((match) => {
     const propsString = match[1];
     const props = {};
 
@@ -36,59 +36,54 @@ function findSchemaViewers(document: string) {
 }
 
 try {
-    const file = await fs.readFile(catalog.absoluteFilePath, 'utf-8');
-    const schemaViewers = findSchemaViewers(file);
-
-    // Loop around all the possible SchemaViewers in the file.
-    const getAllComponents = schemaViewers.map(async (schemaViewerProps: any) => {
+  const file = await fs.readFile(catalog.absoluteFilePath, 'utf-8');
+  const schemaViewers = findSchemaViewers(file);
 
-      const schemaPath = path.join(catalog.filePath, schemaViewerProps.file)
-      const exists = existsSync(schemaPath);
-      let schema;
+  // Loop around all the possible SchemaViewers in the file.
+  const getAllComponents = schemaViewers.map(async (schemaViewerProps: any) => {
+    const schemaPath = path.join(catalog.filePath, schemaViewerProps.file);
+    const exists = existsSync(schemaPath);
+    let schema;
 
-      if(exists) {
-        // Load the schema for the component
-        schema = await fs.readFile(schemaPath, 'utf-8');
-        schema = JSON.parse(schema);
-      }
+    if (exists) {
+      // Load the schema for the component
+      schema = await fs.readFile(schemaPath, 'utf-8');
+      schema = JSON.parse(schema);
+    }
 
-      return {
-        id: schemaViewerProps.id || id,
-        exists,
-        schema,
-        schemaPath,
-        ...schemaViewerProps
-      }
-    });
-    
-    schemas = await Promise.all(getAllComponents);
+    return {
+      id: schemaViewerProps.id || id,
+      exists,
+      schema,
+      schemaPath,
+      ...schemaViewerProps,
+    };
+  });
 
+  schemas = await Promise.all(getAllComponents);
 } catch (error) {
-    console.log('Failed to process schemas')
-    console.log(error);
+  console.log('Failed to process schemas');
+  console.log(error);
 }
-
 ---
-<section class="space-y-4">
-{schemas.length > 0 &&
-  schemas.map((schema) => (
-    <div>
-      
-      {schema.exists && 
-        <SchemaViewerClient {...schema} client:load />
-      }
 
-      {/* User has tried to load the schema, but it was not found on file system */}
-      {!schema.exists && (
-        <Admonition type="warning">
-          <>
-            <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
-            <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
-          </>
-        </Admonition>
-      )}
+<section class="space-y-4">
+  {
+    schemas.length > 0 &&
+      schemas.map((schema) => (
+        <div>
+          {schema.exists && <SchemaViewerClient {...schema} client:load />}
 
-    </div>
-  ))
-}
+          {/* User has tried to load the schema, but it was not found on file system */}
+          {!schema.exists && (
+            <Admonition type="warning">
+              <>
+                <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
+                <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
+              </>
+            </Admonition>
+          )}
+        </div>
+      ))
+  }
 </section>

package/src/components/Search.astro

@@ -21,10 +21,21 @@ import PageFindSearch from 'astro-pagefind/components/Search';
 <div id="search-dialog" class="hidden relative z-10" role="dialog" aria-modal="true">
   <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity search-background backdrop-blur-sm bg-black/10"></div>
   <div id="search-background" class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
-    <div id="command-pal" class="mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+    <div
+      id="command-pal"
+      class="mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"
+    >
       <div class="relative">
-        <svg class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path>
+        <svg
+          class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+            clip-rule="evenodd"></path>
         </svg>
         <PageFindSearch id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />
       </div>
@@ -42,8 +53,8 @@ import PageFindSearch from 'astro-pagefind/components/Search';
       event.preventDefault();
       dummyInput?.click();
     }
-    if(event.key === 'Escape') {
-      if(dialog){
+    if (event.key === 'Escape') {
+      if (dialog) {
         dialog.style.display = 'none';
       }
     }

package/src/components/Seo.astro

@@ -4,12 +4,7 @@ import config from '@config';
 import defaultImageFile from '../../public/opengraph.png';
 import { buildUrl } from '@utils/url-builder';
 
-const {
-	title = config.title,
-	description = config.tagline,
-	ogTitle = title,
-	ogType = 'website',
-} = Astro.props;
+const { title = config.title, description = config.tagline, ogTitle = title, ogType = 'website' } = Astro.props;
 
 const siteBaseURL = new URL(Astro.url);
 const defaultImage = new URL(defaultImageFile.src, siteBaseURL);
@@ -19,13 +14,12 @@ _image = _image || defaultImage;
 
 let image = null;
 if (typeof _image === 'string') {
-    image = new URL(_image, siteBaseURL);
+  image = new URL(_image, siteBaseURL);
 } else if (_image && typeof _image['href'] !== 'undefined') {
-    image = new URL(_image['href'], siteBaseURL);
+  image = new URL(_image['href'], siteBaseURL);
 } else {
-	image = defaultImage;
+  image = defaultImage;
 }
-
 ---
 
 <meta charset="UTF-8" />
@@ -34,47 +28,47 @@ if (typeof _image === 'string') {
 <link rel="icon" type="image/svg+xml" href={buildUrl('/favicon.ico', true)} />
 
 <SEO
-	title={title}
-	description={description}
-	openGraph={{
-		basic: {
-			url: config.homepageLink,
-			title: ogTitle,
-			type: ogType,
-			image: _image?.src ? _image.src : defaultImage.toString(),
-		},
-		image: {
-			url: image.toString(),
-			secureUrl: image.toString(),
-			alt: ogTitle,
-			height: _image?.height,
-			width: _image?.width,
-			type: _image?.format && `image/${_image.format}`,
-		},
-	}}
-	twitter={{
-		creator: '@liran_tal',
-		image: image ? image.toString() : undefined,
-		imageAlt: ogTitle,
-		title: ogTitle,
-		site: '@liran_tal',
-		description: description,
-		card: image ? 'summary_large_image' : 'summary',
-	}}
-	extend={{
-		meta: [
-			{
-				name: 'og:locale',
-				content: 'en_US',
-			},
-			{
-				name: 'og:description',
-				content: description,
-			},
-			{
-				name: 'og:site_name',
-				content: config.homepageLink,
-			}
-		]
-	}}
-/>
+  title={title}
+  description={description}
+  openGraph={{
+    basic: {
+      url: config.homepageLink,
+      title: ogTitle,
+      type: ogType,
+      image: _image?.src ? _image.src : defaultImage.toString(),
+    },
+    image: {
+      url: image.toString(),
+      secureUrl: image.toString(),
+      alt: ogTitle,
+      height: _image?.height,
+      width: _image?.width,
+      type: _image?.format && `image/${_image.format}`,
+    },
+  }}
+  twitter={{
+    creator: '@liran_tal',
+    image: image ? image.toString() : undefined,
+    imageAlt: ogTitle,
+    title: ogTitle,
+    site: '@liran_tal',
+    description: description,
+    card: image ? 'summary_large_image' : 'summary',
+  }}
+  extend={{
+    meta: [
+      {
+        name: 'og:locale',
+        content: 'en_US',
+      },
+      {
+        name: 'og:description',
+        content: description,
+      },
+      {
+        name: 'og:site_name',
+        content: config.homepageLink,
+      },
+    ],
+  }}
+/>