@eventcatalog/core 2.7.2 → 2.7.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.7.4
+
+### Patch Changes
+
+- 0189ebb: fix(core): ignore trailing slash for icons
+
+## 2.7.3
+
+### Patch Changes
+
+- 1c56b8d: feat(core): added automatic diffs for changelogs for json, yml and avro files
+
 ## 2.7.2
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.7.2",
+  "version": "2.7.4",
   "publishConfig": {
     "access": "public"
   },
@@ -50,6 +50,8 @@
     "astro-pagefind": "^1.5.0",
     "astro-seo": "^0.8.4",
     "dagre": "^0.8.5",
+    "diff": "^7.0.0",
+    "diff2html": "^3.4.48",
     "glob": "^10.4.1",
     "html-to-image": "^1.11.11",
     "lodash.merge": "4.6.2",
@@ -67,6 +69,7 @@
   },
   "devDependencies": {
     "@parcel/watcher": "^2.4.1",
+    "@types/diff": "^5.2.2",
     "@types/lodash.merge": "4.6.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/src/components/Lists/SpecificationsList.astro

@@ -21,7 +21,7 @@ const numberOfSpecifications = Object.keys(specVersions).length;
         href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/spec`)}
         class="text-sm flex items-center space-x-1 hover:underline hover:text-purple-500"
       >
-        <img src={buildUrl('/icons/openapi.svg')} class="h-4 w-4" />
+        <img src={buildUrl('/icons/openapi.svg', true)} class="h-4 w-4" />
         <span>OpenAPI spec</span>
       </a>
     )
@@ -32,7 +32,7 @@ const numberOfSpecifications = Object.keys(specVersions).length;
         href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/asyncapi`)}
         class="text-sm flex items-center space-x-1 hover:underline hover:text-purple-500"
       >
-        <img src={buildUrl('/icons/asyncapi.svg')} class="h-4 w-4" />
+        <img src={buildUrl('/icons/asyncapi.svg', true)} class="h-4 w-4" />
         <span>AsyncAPI spec</span>
       </a>
     )

package/src/content/config.ts

@@ -30,6 +30,7 @@ const changelogs = defineCollection({
     catalog: z
       .object({
         path: z.string(),
+        absoluteFilePath: z.string(),
         filePath: z.string(),
         publicPath: z.string(),
         type: z.string(),

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

@@ -6,8 +6,11 @@ import type { PageTypes } from '@types';
 import { getChangeLogs } from '@utils/changelogs/changelogs';
 import { RectangleGroupIcon, ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import { pageDataLoader } from '@utils/pages/pages';
+import 'diff2html/bundles/css/diff2html.min.css';
 
 import { buildUrl } from '@utils/url-builder';
+import { getVersions, getPreviousVersion } from '@utils/collections/util';
+import { getDiffsForCurrentAndPreviousVersion } from '@utils/collections/file-diffs';
 
 export async function getStaticPaths() {
   const itemTypes: PageTypes[] = ['events', 'commands', 'services', 'domains'];
@@ -22,6 +25,8 @@ export async function getStaticPaths() {
       },
       props: {
         type: itemTypes[index],
+        allVersionsForCollection: getVersions(items).versions,
+        allCollectionItems: items,
         ...item,
       },
     }))
@@ -29,6 +34,7 @@ export async function getStaticPaths() {
 }
 
 const props = Astro.props;
+let collectionItem = props;
 const logs = await getChangeLogs(props);
 
 const { data } = props;
@@ -44,15 +50,30 @@ const renderedLogs = await logs.map(async (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 logListPromise = logsToRender.map(async (log, index) => {
+  const currentLogVersion = log.data.version;
+  const previousLogVersion = log.data.version ? getPreviousVersion(log.data.version, props.allVersionsForCollection) : '';
+  return {
+    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,
+    diffs:
+      currentLogVersion && previousLogVersion
+        ? await getDiffsForCurrentAndPreviousVersion(
+            currentLogVersion,
+            previousLogVersion,
+            collectionItem.data.id,
+            props.allCollectionItems
+          )
+        : [],
+  };
+});
+
+const logList = await Promise.all(logListPromise);
 
 const getBadge = () => {
   if (props.collection === 'services') {
@@ -154,6 +175,7 @@ const badges = [getBadge()];
                   <div class="prose prose-md !max-w-none py-2">
                     <log.Content />
                   </div>
+                  {log.diffs && log.diffs.map((diff) => <div id="diff-container" set:html={diff} />)}
                 </div>
               </div>
             </li>

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

@@ -89,7 +89,7 @@ const getSpecificationBadges = () => {
       backgroundColor: 'white',
       textColor: 'gray',
       content: 'OpenAPI Spec',
-      iconURL: buildUrl('/icons/openapi.svg'),
+      iconURL: buildUrl('/icons/openapi.svg', true),
       class: 'text-black hover:underline',
       id: 'open-api-badge',
       url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}/spec`),
@@ -101,7 +101,7 @@ const getSpecificationBadges = () => {
       backgroundColor: 'white',
       textColor: 'gray',
       content: 'AsyncAPI Spec',
-      iconURL: buildUrl('/icons/asyncapi.svg'),
+      iconURL: buildUrl('/icons/asyncapi.svg', true),
       class: 'text-black hover:underline',
       id: 'asyncapi-badge',
       url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}/asyncapi`),

package/src/utils/collections/file-diffs.ts

@@ -0,0 +1,132 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { diffLines, type Change } from 'diff';
+import { html, parse } from 'diff2html';
+import { getItemsFromCollectionByIdAndSemverOrLatest } from './util';
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionTypes } from '@types';
+
+const FILE_EXTENSIONS_TO_INCLUDE = ['.json', '.avro', '.yaml', '.yml'];
+
+/**
+ * Generates a diff string in a unified diff format for two versions of a file.
+ * @param fileName - The name of the file being compared
+ * @param oldStr - The content of the old version of the file
+ * @param newStr - The content of the new version of the file
+ * @returns A string representing the diff in unified format
+ */
+function generateDiffString(fileName: string, oldStr: string, newStr: string): string {
+  const diff = diffLines(oldStr, newStr);
+
+  // Check if there are any changes
+  const hasChanges = diff.some((part) => part.added || part.removed);
+
+  if (!hasChanges) return '';
+
+  let diffString = `diff --git a/${fileName} b/${fileName}\n`;
+  diffString += `--- a/${fileName}\n`;
+  diffString += `+++ b/${fileName}\n`;
+
+  diff.forEach((part: Change) => {
+    const prefix = part.added ? '+' : part.removed ? '-' : ' ';
+    const lines = part.value.split('\n');
+    // Remove the last element if it's an empty string (which happens if the last line ends with a newline)
+    if (lines[lines.length - 1] === '') lines.pop();
+
+    lines.forEach((line: string) => {
+      diffString += `${prefix}${line}\n`;
+    });
+  });
+
+  return diffString;
+}
+
+/**
+ * Retrieves the list of files for diffing in a collection.
+ * @param collection - The collection entry to get files from
+ * @returns An array of objects containing file names and their directory paths
+ */
+export async function getFilesForDiffInCollection(
+  collection: CollectionEntry<CollectionTypes>
+): Promise<Array<{ file: string; dir: string }>> {
+  // @ts-ignore
+  const pathToFolder = collection.catalog?.absoluteFilePath;
+  if (!pathToFolder) return [];
+
+  const dir = dirname(pathToFolder);
+  const allFilesInDirectory = await readdir(dir);
+
+  return allFilesInDirectory
+    .filter((file) => FILE_EXTENSIONS_TO_INCLUDE.some((ext) => file.endsWith(ext)))
+    .map((file) => ({ file, dir }));
+}
+
+/**
+ * Generates diffs for files between two versions of a collection.
+ * @param collections - Array of all collection entries
+ * @param id - The ID of the collection to compare
+ * @param versionA - The first version to compare
+ * @param versionB - The second version to compare
+ * @returns An array of diff strings for matching files between versions
+ */
+async function getFilesDiffsBetweenVersions(
+  id: string,
+  collections: CollectionEntry<CollectionTypes>[],
+  versionA: string,
+  versionB: string
+): Promise<string[]> {
+  const [collectionA, collectionB] = await Promise.all([
+    getItemsFromCollectionByIdAndSemverOrLatest(collections, id, versionA),
+    getItemsFromCollectionByIdAndSemverOrLatest(collections, id, versionB),
+  ]);
+
+  if (collectionA.length === 0 || collectionB.length === 0) return [];
+
+  const [filesForCollectionA, filesForCollectionB] = await Promise.all([
+    getFilesForDiffInCollection(collectionA[0]),
+    getFilesForDiffInCollection(collectionB[0]),
+  ]);
+
+  if (filesForCollectionA.length === 0 || filesForCollectionB.length === 0) return [];
+
+  const matchingFiles = filesForCollectionA.filter((fileA) => filesForCollectionB.some((fileB) => fileB.file === fileA.file));
+
+  const filesToDiff = matchingFiles.map((file) => ({
+    file: file.file,
+    dirA: filesForCollectionA.find((f) => f.file === file.file)?.dir,
+    dirB: filesForCollectionB.find((f) => f.file === file.file)?.dir,
+  }));
+
+  const diffs = await Promise.all(
+    filesToDiff.map(async (file) => {
+      const [contentA, contentB] = await Promise.all([
+        file.dirA ? readFile(join(file.dirA, file.file), 'utf-8') : '',
+        file.dirB ? readFile(join(file.dirB, file.file), 'utf-8') : '',
+      ]);
+      return generateDiffString(file.file, contentB, contentA);
+    })
+  );
+
+  return diffs.filter((diff) => diff !== '');
+}
+
+/**
+ * Generates HTML diffs for files in a collection between the current and previous version.
+ * @param id - The ID of the collection
+ * @param version - The current version of the collection
+ * @param allCollectionItems - Array of all collection items
+ * @param versions - Array of all available versions
+ * @returns An array of HTML strings representing the diffs, or null if no previous version exists
+ */
+export async function getDiffsForCurrentAndPreviousVersion(
+  currentVersion: string,
+  previousVersion: string,
+  collectionId: string,
+  allCollectionItems: CollectionEntry<CollectionTypes>[]
+): Promise<string[] | null> {
+  const diffs = await getFilesDiffsBetweenVersions(collectionId, allCollectionItems, currentVersion, previousVersion);
+
+  if (diffs.length === 0) return [];
+
+  return diffs.map((diff) => html(parse(diff), { drawFileList: false, matching: 'lines', outputFormat: 'side-by-side' }));
+}

package/src/utils/collections/util.ts

@@ -1,6 +1,11 @@
 import type { CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
-import { coerce, satisfies as satisfiesRange, validRange } from 'semver';
+import { coerce, satisfies as satisfiesRange } from 'semver';
+
+export const getPreviousVersion = (version: string, versions: string[]) => {
+  const index = versions.indexOf(version);
+  return index === -1 ? null : versions[index + 1];
+};
 
 export const getVersions = (data: CollectionEntry<CollectionTypes>[]) => {
   const allVersions = data.map((item) => item.data.version).sort();