@eventcatalog/core 2.6.2 → 2.6.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.6.4
+
+### Patch Changes
+
+- 0459eec: chore(core): fixed styled for openapi pages
+
+## 2.6.3
+
+### Patch Changes
+
+- d35846b: chore(core): refactored the way pages are rendered reducing code
+
 ## 2.6.2
 
 ### Patch Changes

package/package.json

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

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

@@ -1,50 +1,40 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import type { CollectionTypes } from '@types';
 import path from 'path';
 import { readFileSync } from 'fs';
-
-import PlainPage from '@layouts/PlainPage.astro';
-
 import { createElement } from 'react';
 import { renderToString } from 'react-dom/server';
-
 import { Parser } from '@asyncapi/parser';
 
-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, PageTypes } from '@types';
+
+import PlainPage from '@layouts/PlainPage.astro';
 
 import '@asyncapi/react-component/styles/default.min.css';
 import js from '@asyncapi/react-component/browser/standalone/without-parser.js?url';
 import { AsyncApiComponentWP, type ConfigInterface } from '@asyncapi/react-component';
+import { pageDataLoader } from '@utils/pages/pages';
+import type { CollectionEntry } from 'astro:content';
 
 export async function getStaticPaths() {
-  const events = await getEvents();
-  const commands = await getCommands();
-  const services = await getServices();
-  const domains = await getDomains();
+  const itemTypes: PageTypes[] = ['events', 'commands', 'services', 'domains'];
+  const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
   const hasAsyncAPISpec = (item: CollectionEntry<CollectionTypes>) => item.data.specifications?.asyncapiPath !== undefined;
+  const filteredItems = allItems.map((items) => items.filter(hasAsyncAPISpec));
 
-  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
-    const filteredCollection = collection.filter(hasAsyncAPISpec);
-
-    return filteredCollection.map((item) => ({
+  return filteredItems.flatMap((items, index) =>
+    items.map((item) => ({
       params: {
-        type: item.collection,
         id: item.data.id,
+        type: itemTypes[index],
         version: item.data.version,
       },
       props: {
-        type: item.collection,
+        type: itemTypes[index],
         ...item,
       },
-    }));
-  };
-
-  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands)];
+    }))
+  );
 }
 
 // @ts-ignore

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

@@ -1,40 +1,31 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-
 import Layout from '@layouts/DocsLayout.astro';
 import Footer from '@layouts/Footer.astro';
 
-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 type { PageTypes } from '@types';
 import { getChangeLogs } from '@utils/changelogs/changelogs';
 import { EnvelopeIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
+import { pageDataLoader } from '@utils/pages/pages';
 
 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 itemTypes: PageTypes[] = ['events', 'commands', 'services', 'domains'];
+  const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
-  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
-    return collection.map((item) => ({
+  return allItems.flatMap((items, index) =>
+    items.map((item) => ({
       params: {
-        type: item.collection,
+        type: itemTypes[index],
         id: item.data.id,
         version: item.data.version,
       },
       props: {
-        type: item.collection,
+        type: itemTypes[index],
         ...item,
       },
-    }));
-  };
-
-  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands)];
+    }))
+  );
 }
 
 const props = Astro.props;

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

@@ -1,5 +1,4 @@
 ---
-import type { CollectionEntry } from 'astro:content';
 import DocsLayout from '@layouts/DocsLayout.astro';
 import Footer from '@layouts/Footer.astro';
 
@@ -10,40 +9,39 @@ import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
 // SideBars
 import ServiceSideBar from '@components/SideBars/ServiceSideBar.astro';
 import MessageSideBar from '@components/SideBars/MessageSideBar.astro';
-
-import { getEvents } from '@utils/events';
-import { getServices } from '@utils/services/services';
-import { getCommands } from '@utils/commands';
-import { EnvelopeIcon, PencilIcon, QueueListIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
-import { getDomains } from '@utils/domains/domains';
 import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
-import type { CollectionTypes } from '@types';
+
+import { EnvelopeIcon, QueueListIcon, RectangleGroupIcon, ServerIcon } from '@heroicons/react/24/outline';
+import type { PageTypes } from '@types';
 
 import { buildUrl } from '@utils/url-builder';
 import { getFlows } from '@utils/flows/flows';
+import { pageDataLoader } from '@utils/pages/pages';
+
+type PageTypesWithFlows = PageTypes | 'flows';
 
 export async function getStaticPaths() {
-  const events = await getEvents();
-  const commands = await getCommands();
-  const services = await getServices();
-  const domains = await getDomains();
-  const flows = await getFlows();
+  const loaders = {
+    ...pageDataLoader,
+    flows: getFlows,
+  };
 
-  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
-    return collection.map((item) => ({
+  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'services', 'domains', 'flows'];
+  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
+
+  return allItems.flatMap((items, index) =>
+    items.map((item) => ({
       params: {
-        type: item.collection,
+        type: itemTypes[index],
         id: item.data.id,
         version: item.data.version,
       },
       props: {
-        type: item.collection,
+        type: itemTypes[index],
         ...item,
       },
-    }));
-  };
-
-  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands), ...buildPages(flows)];
+    }))
+  );
 }
 
 const props = Astro.props;

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

@@ -3,40 +3,33 @@ import type { CollectionEntry } from 'astro:content';
 import * as path from 'path';
 import fs from 'node:fs';
 
-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 type { CollectionTypes, PageTypes } from '@types';
 import PlainPage from '@layouts/PlainPage.astro';
 import { DocumentMinusIcon } from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
+import { pageDataLoader } from '@utils/pages/pages';
 
 export async function getStaticPaths() {
-  const events = await getEvents();
-  const commands = await getCommands();
-  const services = await getServices();
-  const domains = await getDomains();
+  const itemTypes: PageTypes[] = ['events', 'commands', 'services', 'domains'];
 
-  const hasOpenAPISpec = (item: CollectionEntry<CollectionTypes>) => item.data.specifications?.openapiPath !== undefined;
+  const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
-  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
-    const filteredCollection = collection.filter(hasOpenAPISpec);
+  const hasOpenAPISpec = (item: CollectionEntry<CollectionTypes>) => item.data.specifications?.openapiPath !== undefined;
+  const filteredItems = allItems.map((items) => items.filter(hasOpenAPISpec));
 
-    return filteredCollection.map((item) => ({
+  return filteredItems.flatMap((items, index) =>
+    items.map((item) => ({
       params: {
-        type: item.collection,
+        type: itemTypes[index],
         id: item.data.id,
         version: item.data.version,
       },
       props: {
-        type: item.collection,
+        type: itemTypes[index],
         ...item,
       },
-    }));
-  };
-
-  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands)];
+    }))
+  );
 }
 
 // @ts-ignore
@@ -60,16 +53,24 @@ const fileExists = fs.existsSync(pathOnDisk);
     ) : (
       <rapi-doc
         spec-url={buildUrl(pathToSpec, true)}
-        render-style="table"
         show-header="false"
-        allow-authentication="false"
-        allow-try="false"
-        style={{ height: '100vh', width: '100%' }}
-        class="py-4"
-        nav-bg-color="#fff"
+        allow-authentication="true"
+        allow-try="true"
+        class="relative top-0"
+        style={{ height: '100vh', width: '100%', zIndex: 100 }}
+        regular-font="ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
         schema-style="table"
-        primary-color="#e0baff"
-        bg-color="#fff"
+        default-schema-tab="schema"
+        bg-color="#ffffff"
+        text-color=""
+        nav-bg-color="#fff"
+        nav-text-color=""
+        nav-hover-bg-color="#fff"
+        nav-hover-text-color="#6b21a8"
+        nav-accent-color=""
+        primary-color="#6b21a8"
+        theme="light"
+        render-style="read"
       />
     )
   }
@@ -83,13 +84,44 @@ const fileExists = fs.existsSync(pathOnDisk);
 <style>
   rapi-doc::part(section-servers) {
     /* <<< targets the server div */
-    background: #6b5b95;
-    color: #d1c2e4;
+    /* background: #6b5b95; */
+    border: 2px solid #f1edff;
+    color: black;
     margin: 0 24px 0 24px;
     border-radius: 5px;
   }
   rapi-doc::part(label-selected-server) {
     /* <<< targets selected server label */
-    color: #fff;
+    color: black;
+  }
+
+  rapi-doc::part(section-navbar-search) {
+    margin: 0;
+    padding: 0;
+    margin-bottom: 1em;
+  }
+  rapi-doc::part(section-overview) {
+    margin: 0 2em 0 2em;
+    padding: 1em 0 1em;
+  }
+  rapi-doc::part(section-auth) {
+    margin: 2em 2em;
+    padding: 0;
+  }
+  rapi-doc::part(section-tag) {
+    margin: 2em 2em;
+    padding: 0;
+  }
+  rapi-doc::part(section-tag-title) {
+    margin: 0.5em 0 0;
+    padding: 0;
+  }
+  rapi-doc::part(section-operations-in-tag) {
+    margin: 1em 2em;
+    padding: 0;
+  }
+  rapi-doc::part(section-navbar) {
+    border-right: 1px solid #f1edff;
+    padding: 1em 1em 0 0;
   }
 </style>

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

@@ -1,39 +1,35 @@
 ---
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
 import VisualiserLayout from '@layouts/VisualiserLayout.astro';
-import type { CollectionTypes } from '@types';
-import { getCommands } from '@utils/commands';
-import { getDomains } from '@utils/domains/domains';
-import { getEvents } from '@utils/events';
+import type { PageTypes } from '@types';
 import { getFlows } from '@utils/flows/flows';
-import { getServices } from '@utils/services/services';
 import { buildUrl } from '@utils/url-builder';
-import type { CollectionEntry } from 'astro:content';
+
+import { pageDataLoader } from '@utils/pages/pages';
+type PageTypesWithFlows = PageTypes | 'flows';
 
 export async function getStaticPaths() {
-  const [services, events, commands, domains, flows] = await Promise.all([
-    getServices(),
-    getEvents(),
-    getCommands(),
-    getDomains(),
-    getFlows(),
-  ]);
+  const loaders = {
+    ...pageDataLoader,
+    flows: getFlows,
+  };
+
+  const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'services', 'domains', 'flows'];
+  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
-  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
-    return collection.map((item) => ({
+  return allItems.flatMap((items, index) =>
+    items.map((item) => ({
       params: {
-        type: item.collection,
+        type: itemTypes[index],
         id: item.data.id,
         version: item.data.version,
       },
       props: {
-        type: item.collection,
+        type: itemTypes[index],
         ...item,
       },
-    }));
-  };
-
-  return [...buildPages(services), ...buildPages(events), ...buildPages(commands), ...buildPages(domains), ...buildPages(flows)];
+    }))
+  );
 }
 
 const props = Astro.props;

package/src/types/index.ts

@@ -1,2 +1,4 @@
 export type CollectionTypes = 'commands' | 'events' | 'domains' | 'services' | 'flows';
 export type CollectionMessageTypes = 'commands' | 'events';
+
+export type PageTypes = 'events' | 'commands' | 'services' | 'domains';

package/src/utils/messages.ts

@@ -1,7 +1,13 @@
-// // import type { Domain, Message } from '@eventcatalog/types';
-// import { getCollection,  } from 'astro:content';
+// Exporting getCommands and getEvents directly
+import { getCommands } from '@utils/commands';
+import { getEvents } from '@utils/events';
+export { getCommands } from '@utils/commands';
+export { getEvents } from '@utils/events';
 
-// export const getMessages = async (): Promise<Message[]> => {
-//   const commands = await getCollection('commands');
-//   return commands.map((message: any) => message.data);
-// };
+// Main function that uses the imported functions
+export const getMessages = async () => {
+  const commands = await getCommands();
+  const events = await getEvents();
+
+  return { commands, events };
+};

package/src/utils/pages/pages.ts

@@ -0,0 +1,12 @@
+import type { CollectionTypes, PageTypes } from '@types';
+import { getDomains } from '@utils/domains/domains';
+import { getCommands, getEvents } from '@utils/messages';
+import { getServices } from '@utils/services/services';
+import type { CollectionEntry } from 'astro:content';
+
+export const pageDataLoader: Record<PageTypes, () => Promise<CollectionEntry<CollectionTypes>[]>> = {
+  events: getEvents,
+  commands: getCommands,
+  services: getServices,
+  domains: getDomains,
+};