@eventcatalog/core 2.0.15 → 2.0.17

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.0.17
+
+### Patch Changes
+
+- 6337769: feat(core): added ability to customise header text and logo
+
+## 2.0.16
+
+### Patch Changes
+
+- cae7c0a: fix(core): added missing urls for slash support
+
 ## 2.0.15
 
 ### Patch Changes

package/bin/dist/eventcatalog.config.d.cts

@@ -9,9 +9,10 @@ interface Config {
     editUrl: string;
     base?: string;
     trailingSlash?: boolean;
-    logo: {
+    logo?: {
         alt: string;
         src: string;
+        text?: string;
     };
     docs: {
         sidebar: {

package/bin/dist/eventcatalog.config.d.ts

@@ -9,9 +9,10 @@ interface Config {
     editUrl: string;
     base?: string;
     trailingSlash?: boolean;
-    logo: {
+    logo?: {
         alt: string;
         src: string;
+        text?: string;
     };
     docs: {
         sidebar: {

package/bin/eventcatalog.config.ts

@@ -10,9 +10,10 @@ export interface Config {
   editUrl: string;
   base?: string;
   trailingSlash?: boolean;
-  logo: {
+  logo?: {
     alt: string;
     src: string;
+    text?: string;
   };
   docs: {
     sidebar: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "publishConfig": {
     "access": "public"
   },

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

@@ -100,6 +100,15 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
   // ensureDirSync(astroContentDir);
   fs.writeFileSync(path.join(astroContentDir, 'config.ts'), astroConfigFile);
 
+  // Copy the public directory files into the astro public directory
+  const usersPublicDirectory = path.join(source, 'public');
+  const astroPublicDir = path.join(astroContentDir, '../../public');
+
+  if (fs.existsSync(usersPublicDirectory)) {
+    // fs.mkdirSync(astroPublicDir, { recursive: true });
+    fs.cpSync(usersPublicDirectory, astroPublicDir, { recursive: true });
+  }
+
   // Copy all the event files over
   await copyFiles({
     source,

package/scripts/start-catalog-locally.js

@@ -11,7 +11,6 @@ const catalogDir = join(__dirname, '../');
 const projectDIR = join(__dirname, `../examples/${catalog}`);
 
 fs.copyFileSync(join(projectDIR, 'eventcatalog.config.js'), join(catalogDir, 'eventcatalog.config.js'));
-
 fs.copyFileSync(join(projectDIR, 'eventcatalog.styles.css'), join(catalogDir, 'eventcatalog.styles.css'));
 
 execSync(

package/src/components/Header.astro

@@ -21,13 +21,19 @@ const navItems = [
   }
 ];
 
+const logo = {
+  src: catalog?.logo?.src || '/logo.png',
+  alt: catalog?.logo?.alt || 'Event Catalog',
+  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">
       <a href={buildUrl('/docs')} class="flex space-x-2 items-center">
-        <img src={buildUrl('/logo.png', true)} class="w-8" />
-        <span class="hidden sm:inline-block text-[1em]">{catalog.title}</span>
+        {logo.src && <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8" />}
+        {logo.text && <span class="hidden sm:inline-block text-[1em]">{logo.text}</span>}
       </a>
     </div>
     <div class="w-1/3 md:block hidden">

package/src/components/Lists/VersionList.astro

@@ -1,5 +1,6 @@
 ---
 import type { CollectionTypes } from '@types';
+import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 
 interface Props {
@@ -17,7 +18,7 @@ const currentPath = Astro.url.pathname;
   <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={`/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'}`}>
+      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>}

package/src/components/MDX/OpenAPI/OpenAPI.tsx

@@ -2,6 +2,7 @@ import type { CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import * as path from 'path';
 import { existsSync } from 'node:fs';
+import { buildUrl } from '@utils/url-builder';
 
 const OpenAPI = (props: CollectionEntry<CollectionTypes>) => {
   // @ts-ignore
@@ -23,7 +24,7 @@ const OpenAPI = (props: CollectionEntry<CollectionTypes>) => {
       {fileExists && (
         <div>
           This {props.collection.slice(0, -1)} has an OpenAPI file{' '}
-          <a className="text-purple-500" href={`/docs/${props.collection}/${props.data.id}/${props.data.version}/spec`}>
+          <a className="text-purple-500" href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}/spec`)}>
             you can view here.
           </a>
         </div>

package/src/components/SideBars/DomainSideBar.astro

@@ -2,6 +2,7 @@
 import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
 import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
 interface Props {
   domain: CollectionEntry<'domains'>;
@@ -19,7 +20,7 @@ const serviceList = services.map((p) => ({
   label: p.data.id,
   badge: p.collection,
   tag: `v${p.data.version}`,
-  href: `/docs/${p.collection}/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
 const ownersList = owners.map((o) => ({
@@ -27,7 +28,7 @@ const ownersList = owners.map((o) => ({
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 ---
@@ -37,6 +38,6 @@ const ownersList = owners.map((o) => ({
     <PillList title={`Services (${services.length})`} pills={serviceList} emptyMessage={`This domain does not contain any services.`} color="pink" client:load />
     <OwnersList title={`Service owners (${ownersList.length})`} owners={ownersList} emptyMessage={`This domain does not have any documented owners.`} client:load />
     {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
-    <a href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
+    <a href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
   </div>
 </aside>

package/src/components/SideBars/MessageSideBar.astro

@@ -5,6 +5,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import type { CollectionMessageTypes } from '@types';
 import * as path from 'path';
 import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
 interface Props {
   message: CollectionEntry<CollectionMessageTypes>;
 }
@@ -20,13 +21,13 @@ const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
 const producerList = producers.map((p) => ({
   label: `${p.data.name} (service)`,
   tag: `v${p.data.version}`,
-  href: `/docs/services/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
 }));
 
 const consumerList = consumers.map((p) => ({
   label: `${p.data.name} (service)`,
   tag: `v${p.data.version}`,
-  href: `/docs/services/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
 }));
 
 const ownersList = owners.map((o) => ({
@@ -34,7 +35,7 @@ const ownersList = owners.map((o) => ({
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 const type = message.collection.slice(0, -1);
@@ -72,7 +73,7 @@ const schemaURL = path.join(publicPath, schemaFilePath || '')
         )
       }
       <a
-        href={`/visualiser/${message.collection}/${message.data.id}/${message.data.version}`}
+        href={buildUrl(`/visualiser/${message.collection}/${message.data.id}/${message.data.version}`)}
         class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
         >View in Visualiser</a
       >

package/src/components/SideBars/ServiceSideBar.astro

@@ -2,6 +2,7 @@
 import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
 import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
 import { join } from 'node:path'
 interface Props {
@@ -23,14 +24,14 @@ const sendsList = sends.map((p) => ({
   badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
-  href: `/docs/${p.collection}/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 const receivesList = receives.map((p) => ({
   label: p.data.name,
   badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
-  href: `/docs/${p.collection}/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
 const ownersList = owners.map((o) => ({
@@ -38,7 +39,7 @@ const ownersList = owners.map((o) => ({
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 // @ts-ignore
@@ -74,8 +75,8 @@ const schemaURL = join(publicPath, schemaFilePath || '')
           </a>
         )
       }
-      <a href={`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
-      <a id="open-api-button" href={`/docs/${service.collection}/${service.data.id}/${service.data.version}/spec`} class="hidden text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View API spec</a>
+      <a href={buildUrl(`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
+      <a id="open-api-button" href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/spec`)} class="hidden text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View API spec</a>
     </div>
   </div>
 </aside>

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

@@ -17,6 +17,7 @@ import { getDomains } from '@utils/domains/domains';
 import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
 import type { CollectionTypes } from '@types';
 import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
+import { buildUrl } from '@utils/url-builder';
 
 export async function getStaticPaths() {
   const events = await getEvents();
@@ -113,7 +114,7 @@ const badges = [
                   <div class="mt-2 text-sm text-yellow-700">
                     <p>
                       You are looking at a previous version of the {props.collection.slice(0, props.collection.length - 1)} <strong>{props.data.name}</strong>.{' '}
-                      <a class="underline hover:text-purple-500 block pt-2" href={`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`}>
+                      <a class="underline hover:text-purple-500 block pt-2" href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`)}>
                         The latest version of this {props.collection.slice(0, props.collection.length - 1)} is v{props.data.latestVersion} &rarr;
                       </a>
                     </p>

package/src/pages/docs/teams/[id]/index.astro

@@ -10,6 +10,7 @@ import type { CollectionEntry } from 'astro:content';
 import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
 import EnvelopeIcon from '@heroicons/react/16/solid/EnvelopeIcon';
+import { buildUrl } from '@utils/url-builder';
 
 export async function getStaticPaths() {
   const teams = await getTeams();
@@ -42,18 +43,18 @@ const membersList = members.map((o) => ({
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name} (service)`,
-href: `/docs/${p.collection}/${p.data.id}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   tag: `v${p.data.version}`
 }));
 
 const ownedEventsList = [...events, ...commands].map((p) => ({
   label: `${p.data.name} (${p.collection.slice(0, -1)})`,
-  href: `/docs/${p.collection}/${p.data.id}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`
 }));

package/src/pages/docs/users/[id]/index.astro

@@ -8,6 +8,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
 import { getUsers } from '@utils/users';
 import EnvelopeIcon from '@heroicons/react/16/solid/EnvelopeIcon';
+import { buildUrl } from '@utils/url-builder';
 
 export async function getStaticPaths() {
   const teams = await getUsers();
@@ -35,7 +36,7 @@ const teams = props.data.associatedTeams as CollectionEntry<'teams'>[];
 
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name} (service)`,
-  href: `/docs/${p.collection}/${p.data.id}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   tag: `v${p.data.version}`,
 }));
 
@@ -43,14 +44,14 @@ const ownedMessageList = [...events, ...commands].map((p) => ({
   label: `${p.data.name} (${p.collection.slice(0, -1)})`,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
-  href: `/docs/${p.collection}/${p.data.id}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
 const associatedTeams = teams.map((o) => ({
   label: o.data.name,
   type: o.collection,
   badge: 'Team',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 ---
 

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

@@ -6,6 +6,7 @@ import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/services/services';
+import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 
 export async function getStaticPaths() {
@@ -41,6 +42,6 @@ const {
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
   <div class="bg-gray-100/50">
     <div class="h-[calc(100vh-110px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
-    <NodeGraph id={id} collection={collection} title={`${props.data.name} (v${props.data.version})`} mode="full" linkTo="visualiser" version={props.data.version} href={{ label: `Open documentation for ${props.data.name} v${props.data.version}`, url: `/docs/${props.collection}/${props.data.id}/${props.data.version}`}} />
+    <NodeGraph id={id} collection={collection} title={`${props.data.name} (v${props.data.version})`} mode="full" linkTo="visualiser" version={props.data.version} href={{ label: `Open documentation for ${props.data.name} v${props.data.version}`, url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}} />
   </div>
 </VisualiserLayout>