@eventcatalog/core 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.2.0
+
+### Minor Changes
+
+- 9b92648: feat(core): added changelog support for domains, services and messages
+
 ## 2.1.0
 
 ### Minor Changes

package/package.json

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

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

@@ -44,7 +44,13 @@ const copyFiles = async ({ source, target, catalogFilesDir, pathToMarkdownFiles,
 
     //ensure the directory exists
     ensureDirSync(path.dirname(targetPath));
-    fs.cpSync(file, targetPath.replace('index.md', 'index.mdx'));
+
+    if (file.includes('changelog.md')) {
+      const target = targetPath.replace('/content', '/content/changelogs');
+      fs.cpSync(file, target.replace('changelog.md', 'changelog.mdx'));
+    } else {
+      fs.cpSync(file, targetPath.replace('index.md', 'index.mdx').replace('changelog.md', 'changelog.mdx'));
+    }
   }
 
   // Copy all other files (non markdown) files into catalog-files directory (non collection)
@@ -121,6 +127,7 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
       path.join(source, 'events/**/**/index.md'),
       path.join(source, 'services/**/events/**/index.md'),
       path.join(source, 'domains/**/events/**/index.md'),
+      path.join(source, 'events/**/**/changelog.md'),
     ],
     pathToAllFiles: [
       path.join(source, 'events/**'),
@@ -139,6 +146,7 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
       path.join(source, 'commands/**/**/index.md'),
       path.join(source, 'services/**/commands/**/index.md'),
       path.join(source, 'domains/**/commands/**/index.md'),
+      path.join(source, 'commands/**/**/changelog.md'),
     ],
     pathToAllFiles: [
       path.join(source, 'commands/**'),
@@ -153,7 +161,11 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
     source,
     target: astroContentDir,
     catalogFilesDir,
-    pathToMarkdownFiles: [path.join(source, 'services/**/**/index.md'), path.join(source, 'domains/**/services/**/index.md')],
+    pathToMarkdownFiles: [
+      path.join(source, 'services/**/**/index.md'),
+      path.join(source, 'domains/**/services/**/index.md'),
+      path.join(source, 'services/**/**/changelog.md'),
+    ],
     pathToAllFiles: [path.join(source, 'services/**'), path.join(source, 'domains/**/services/**')],
     type: 'services',
   });
@@ -163,7 +175,7 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
     source,
     target: astroContentDir,
     catalogFilesDir,
-    pathToMarkdownFiles: [path.join(source, 'domains/**/**/index.md')],
+    pathToMarkdownFiles: [path.join(source, 'domains/**/**/index.md'), path.join(source, 'domains/**/**/changelog.md')],
     pathToAllFiles: [path.join(source, 'domains/**')],
     type: 'domains',
   });

package/scripts/default-files-for-collections/changelogs.md

@@ -0,0 +1,5 @@
+---
+id: empty
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/watcher.js

@@ -30,7 +30,12 @@ for (let item of [...verifiedWatchList]) {
     for (let event of events) {
       const { path: eventPath, type } = event;
       const file = eventPath.split(item)[1];
-      const newPath = path.join(contentPath, item, extensionReplacer(item, file));
+      let newPath = path.join(contentPath, item, extensionReplacer(item, file));
+
+      // Check if changlogs, they need to go into their own content folder
+      if (file.includes('changelog.md')) {
+        newPath = newPath.replace('src/content', 'src/content/changelogs');
+      }
 
       // If config files have changes
       if (eventPath.includes('eventcatalog.config.js') || eventPath.includes('eventcatalog.styles.css')) {

package/src/components/Lists/VersionList.astro

@@ -26,6 +26,7 @@ const currentPath = Astro.url.pathname;
       </option>
     })}
   </select>
+  <a href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.latestVersion}/changelog`)} class="text-[10px] text-gray-500">View changelogs</a>
 </div>
 
 <script>

package/src/components/SideBars/DomainSideBar.astro

@@ -38,6 +38,9 @@ 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={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 class="space-y-2">
+      <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>
+      <a href={buildUrl(`${domain.data.version}/changelog`)} 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">Changelog</a>
+    </div>
   </div>
 </aside>

package/src/components/SideBars/MessageSideBar.astro

@@ -47,7 +47,7 @@ const schemaURL = path.join(publicPath, schemaFilePath || '')
 
 ---
 
-<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto pb-20 ">
   <div class="">
     <PillList color="pink" title={`${type} Producers (${producerList.length})`} pills={producerList} emptyMessage={`This ${type} does not get produced by any services.`} client:load />
     <PillList color="pink" title={`${type} Consumers (${consumerList.length})`} pills={consumerList} emptyMessage={`This ${type} does not get consumed by any services.`} client:load />
@@ -77,6 +77,9 @@ const schemaURL = path.join(publicPath, schemaFilePath || '')
         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(`${message.data.version}/changelog`)} 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">Changelog</a>
+     
     </div>
   </div>
 </aside>

package/src/components/SideBars/ServiceSideBar.astro

@@ -46,8 +46,6 @@ const ownersList = owners.map((o) => ({
 const publicPath = service?.catalog?.publicPath;
 const schemaFilePath = service?.data?.schemaPath;
 const schemaURL = join(publicPath, schemaFilePath || '')
-
-
 ---
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
@@ -77,6 +75,7 @@ const schemaURL = join(publicPath, schemaFilePath || '')
       }
       <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>
+      <a href={buildUrl(`${service.data.version}/changelog`)} 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">Changelog</a>
     </div>
   </div>
 </aside>

package/src/content/config.ts

@@ -13,6 +13,26 @@ const pages = defineCollection({
   }),
 });
 
+const changelogs = defineCollection({
+  type: 'content',
+  schema: z.object({
+    createdAt: z.date().optional(),
+    badges: z.array(badge).optional(),
+    // Used by eventcatalog
+    version: z.string().optional(),
+    versions: z.array(z.string()).optional(),
+    latestVersion: z.string().optional(),
+    catalog: z
+      .object({
+        path: z.string(),
+        filePath: z.string(),
+        publicPath: z.string(),
+        type: z.string(),
+      })
+      .optional(),
+  }),
+});
+
 // Create a union type for owners
 const ownerReference = z.union([reference('users'), reference('teams')]);
 
@@ -123,4 +143,5 @@ export const collections = {
   teams,
   domains,
   pages,
+  changelogs,
 };

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

@@ -0,0 +1,172 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+import { getEvents } from '@utils/events';
+import { getServices } from '@utils/services/services';
+import { getCommands } from '@utils/commands';
+import { getDomains } from '@utils/domains/domains';
+import type { CollectionTypes } from '@types';
+import Layout from '@layouts/DocsLayout.astro';
+import { getChangeLogs } from '@utils/changelogs/changelogs';
+import { EnvelopeIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
+
+import { buildUrl } from '@utils/url-builder';
+
+export async function getStaticPaths() {
+  const events = await getEvents();
+  const commands = await getCommands();
+  const services = await getServices();
+  const domains = await getDomains();
+
+  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
+
+    return collection.map((item) => ({
+      params: {
+        type: item.collection,
+        id: item.data.id,
+        version: item.data.version,
+      },
+      props: {
+        type: item.collection,
+        ...item,
+      },
+    }));
+  };
+
+  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands)];
+}
+
+const props = Astro.props;
+const logs = await getChangeLogs(props);
+
+const { data } = props;
+const latestVersion = data.latestVersion;
+
+const renderedLogs = await logs.map(async (log) => {
+  const { Content } = await log.render();
+  return {
+    Content,
+    ...log
+  }
+});
+
+const logsToRender = await Promise.all(renderedLogs);
+
+const logList = logsToRender.map((log, index) => ({
+    id: log.id,
+    url: buildUrl(`/docs/${props.collection}/${props.data.id}`),
+    isLatest: log.data.version === latestVersion,
+    version: log.data.version,
+    createdAt: log.data.createdAt,
+    badges: log.data.badges || [],
+    Content: log.Content,
+}));
+
+const getBadge = () => {
+  if (props.collection === 'services') {
+    return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: "text-pink-400" };
+  }
+  if (props.collection === 'events') {
+    return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: EnvelopeIcon, class: "text-orange-400" };
+  }
+  if (props.collection === 'commands') {
+    return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: EnvelopeIcon, class: "text-blue-400" };
+  }
+  if (props.collection === 'domains') {
+    return { backgroundColor: 'yellow', textColor: 'yellow', content: 'Domain', icon: RectangleGroupIcon, class: "text-yellow-400" };
+  }
+};
+
+const badges = [
+  getBadge()
+];
+
+---
+
+<Layout title="ChangeLog">
+  <main class="flex-1 w-full lg:pr-10 md:pt-4">
+    <div class="border-b border-gray-200 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>
+        {
+          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 : ''} `}>
+                  {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
+                  <span>{badge.content}</span>
+                </span>
+              ))}
+            </div>
+          )
+        }
+      </div>
+    </div>
+    {logList.length === 0 && 
+      <div class="py-4 text-gray-400 prose prose-md">
+        <p>No changelogs found.</p>
+      </div>
+    }
+    <div class="flow-root py-8">
+      <ul role="list" class="-mb-8">
+        {logList.map((log, index) => (
+          <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" />
+              ) : null}
+              <div class="relative flex space-x-3">
+                <div>
+                  <a
+                    href={log.isLatest ? `${log.url}` : `${log.url}/${log.version}`}
+                    class={'bg-purple-500 hover:bg-purple-400 text-white flex h-8 w-14 items-center justify-center rounded-full ring-8 ring-white'}
+                  >
+                    {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">
+                          <span>{log.createdAt.toISOString().split('T')[0]} {`${log.isLatest ? '(latest)' : ''}`}</span>
+                      </h3>
+                  </div>
+                  }
+                {
+                  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>{badge.content}</span>
+                        </span>
+                      ))}
+                    </div>
+                  )
+                }
+                <div class="prose prose-md !max-w-none py-2">
+                  <log.Content />
+                </div>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+    <footer class="py-4 space-y-8 border-t border-gray-300">
+      <div class="flex justify-between items-center py-8 text-gray-500 text-sm font-light">
+        <div class="flex space-x-5">
+          <a href="https://github.com/event-catalog/eventcatalog" target="_blank"><svg class="w-5 h-5 bg-gray-400  hover:bg-purple-500 dark:hover:bg-gray-400" style="mask-image: url(&quot;/icons/github.svg&quot;); mask-repeat: no-repeat; mask-position: center center;"></svg></a>
+          <a href="https://x.com/event_catalog" target="_blank"><span class="sr-only">x</span><svg class="w-5 h-5 bg-gray-400  hover:bg-purple-500 dark:hover:bg-gray-400" style="mask-image: url(&quot;/icons/x-twitter.svg&quot;); mask-repeat: no-repeat; mask-position: center center;"></svg></a>
+        </div>
+        <a target="_blank" class="hover:text-purple-500 hover:underline text-gray-400 font-light not-prose" href="https://eventcatalog.dev">Powered by EventCatalog</a>
+      </div>
+    </footer>
+  </main>
+
+</Layout>
+

package/src/utils/changelogs/changelogs.ts

@@ -0,0 +1,34 @@
+import type { CollectionTypes } from '@types';
+import { getCollection, type CollectionEntry } from 'astro:content';
+
+export type ChangeLog = CollectionEntry<'changelogs'>;
+
+export const getChangeLogs = async (item: CollectionEntry<CollectionTypes>): Promise<ChangeLog[]> => {
+  const { collection, data } = item;
+
+  // Get all logs for collection type and filter by given collection
+  const logs = await getCollection('changelogs', (log) => {
+    return log.id.includes(`${collection}/`) && log.id.includes(`/${data.id}/`);
+  });
+
+  const hydratedLogs = logs.map((log) => {
+    // Check if there is a version in the url
+    const isVersioned = log.id.includes('versioned');
+
+    const parts = log.id.split('/');
+    // hack to get the version of the id (url)
+    const version = parts[parts.length - 2];
+    return {
+      ...log,
+      data: {
+        ...log.data,
+        version: isVersioned ? version : data.latestVersion || 'latest',
+      },
+    };
+  });
+
+  // Order by version string
+  return hydratedLogs.sort((a, b) => {
+    return b.data.version.localeCompare(a.data.version);
+  });
+};