@eventcatalog/core 2.0.12 → 2.0.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.0.14
+
+### Patch Changes
+
+- 9d61581: feat(core): added support for base url and slashes
+
+## 2.0.13
+
+### Patch Changes
+
+- 1e4c805: feat(core): Adding <SchemaViewer /> component
+
 ## 2.0.12
 
 ### Patch Changes

package/astro.config.mjs

@@ -9,12 +9,13 @@ import remarkGFM from 'remark-gfm';
 import pagefind from "astro-pagefind";
 import { mermaid } from "./src/remark-plugins/mermaid"
 
+
 import expressiveCode from 'astro-expressive-code';
 import config from './eventcatalog.config';
 
 // https://astro.build/config
 export default defineConfig({
-  base: '/',
+  base: config.base || '/',
   server: { port: 3000 },
 
   // https://docs.astro.build/en/reference/configuration-reference/#site

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

@@ -7,6 +7,7 @@ interface Config {
     organizationName: string;
     homepageLink: string;
     editUrl: string;
+    base?: string;
     logo: {
         alt: string;
         src: string;

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

@@ -7,6 +7,7 @@ interface Config {
     organizationName: string;
     homepageLink: string;
     editUrl: string;
+    base?: string;
     logo: {
         alt: string;
         src: string;

package/bin/eventcatalog.config.ts

@@ -8,6 +8,7 @@ export interface Config {
   organizationName: string;
   homepageLink: string;
   editUrl: string;
+  base?: string;
   logo: {
     alt: string;
     src: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,7 @@
     "astro": "astro",
     "scripts:hydrate-content": "node scripts/catalog-to-astro-content-directory.js",
     "start:catalog": "node scripts/start-catalog-locally.js",
-    "verify-build:catalog": "rimraf packages/eventcatalog/dist && npm run build:cd",
+    "verify-build:catalog": "rimraf dist && npm run build:cd",
     "changeset": "changeset",
     "release": "changeset publish",
     "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,json}\"",
@@ -36,6 +36,8 @@
     "@changesets/cli": "^2.27.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "@stoplight/json-schema-viewer": "^4.7.0",
+    "@stoplight/mosaic": "^1.53.2",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@types/dagre": "^0.7.52",

package/src/components/DocsNavigation.astro

@@ -6,6 +6,7 @@ import { getServices } from '@utils/services/services';
 import { getTeams } from '@utils/teams';
 import { getUsers } from '@utils/users';
 import config, { type CatalogConfig } from '@eventcatalog';
+import { buildUrl } from '@utils/url-builder';
 
 const events = await getEvents({ getAllVersions: false });
 const commands = await getCommands({ getAllVersions: false });
@@ -59,7 +60,7 @@ const sideNav = withHeadings.reduce((acc, item) => {
     items: item.collection === 'users' ? [] : item.headings,
     visible: visibleCollections[item.collection],
     // @ts-ignore
-    href: item.data.version ? `/docs/${item.collection}/${item.data.id}/${item.data.version}` : `/docs/${item.collection}/${item.data.id}`,
+    href: item.data.version ? buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`) : buildUrl(`/docs/${item.collection}/${item.data.id}`),
   };
 
   group.push(navigationItem);

package/src/components/Header.astro

@@ -2,31 +2,31 @@
 import catalog from '@eventcatalog';
 // import Search from 'astro-pagefind/components/Search';
 import Search from '@components/Search.astro';
+import { buildUrl } from '@utils/url-builder';
 
 const currentPath = Astro.url.pathname;
 
 const navItems = [
   {
     label: 'Docs',
-    href: '/docs',
+    href: buildUrl('/docs'),
   },
   {
     label: 'Visualiser',
-    href: '/visualiser',
+    href: buildUrl('/visualiser'),
   },
   {
     label: 'Discover',
-    href: '/discover/events',
+    href: buildUrl('/discover/events'),
   }
 ];
 
 ---
-
 <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="/docs" class="flex space-x-2 items-center">
-        <img src="/logo.png" class="w-8" />
+      <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>
       </a>
     </div>

package/src/components/MDX/Admonition.tsx

@@ -25,8 +25,8 @@ export default function Admonition({ children, type = 'info', className = '' }:
     <div className={`bg-${color}-50 border-l-4 border-${color}-400 my-4 ${className}`}>
       <div className="flex">
         <div className="ml-3 py-2 text-sm flex items-center">
-          <Icon className={`inline-block mr-2 h-5 w-5 text-${color}-400`} aria-hidden="true" />
-          {children}
+          <Icon className={`block mr-2 h-7 w-7 text-${color}-400`} aria-hidden="true" />
+          <div>{children}</div>
         </div>
       </div>
     </div>

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -9,6 +9,7 @@ import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
 import DownloadButton from './DownloadButton';
+import { buildUrl } from '@utils/url-builder';
 
 interface Props {
   nodes: any;
@@ -21,10 +22,10 @@ interface Props {
 }
 
 const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
-  return `/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`;
+  return buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
 };
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
-  return `/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`;
+  return buildUrl(`/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
 };
 
 // const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {

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

@@ -0,0 +1,94 @@
+---
+const { catalog, id } = Astro.props;
+import fs from 'node:fs/promises';
+import { existsSync } from 'fs';
+import path from 'path';
+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 propsString = match[1];
+    const props = {};
+
+    // Use regex to extract key-value pairs from propsString
+    const propsPattern = /(\w+)=["']([^"']+)["']/g;
+    let propMatch;
+    while ((propMatch = propsPattern.exec(propsString)) !== null) {
+      const key = propMatch[1];
+      const value = propMatch[2];
+      // @ts-ignore
+      props[key] = value;
+    }
+
+    return props;
+  });
+
+  return schemaViewers;
+}
+
+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 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);
+      }
+
+      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);
+}
+
+---
+<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>
+      )}
+
+    </div>
+  ))
+}
+</section>

package/src/components/MDX/SchemaViewer/SchemaViewer.module.css

@@ -0,0 +1,9 @@
+/* Custom styling for the schema viewer */
+.schemaViewer :global(.svg-inline--fa) {
+  width: 1.25em;
+  height: 1em;
+}
+
+.schemaViewer p, span {
+  color: rgb(111, 111, 111) !important;
+}

package/src/components/MDX/SchemaViewer/SchemaViewer.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+
+// @ts-ignore
+import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
+import styles from './SchemaViewer.module.css';
+
+import '@stoplight/mosaic/styles.css';
+import { createPortal } from 'react-dom';
+
+type Props = {
+  id: string;
+  file: string;
+  renderRootTreeLines?: boolean;
+  hideExamples?: boolean;
+  defaultExpandedDepth?: number;
+  maxHeight?: string;
+  schema: any;
+  catalog: any;
+  title?: string;
+};
+
+const SchemaViewer = ({
+  id,
+  maxHeight = '500',
+  renderRootTreeLines = true,
+  hideExamples = false,
+  defaultExpandedDepth = 3,
+  title,
+  schema,
+}: Props) => {
+  const [elem, setElem] = useState(null);
+  useEffect(() => {
+    // @ts-ignore
+    setElem(document.getElementById(`${id}-SchemaViewer-portal`));
+  }, []);
+
+  if (!elem) return null;
+
+  return (
+    <div>
+      {createPortal(
+        <section className="not-prose space-y-2 ">
+          {title && <h2 className="text-3xl font-bold">{title}</h2>}
+          <div className="border border-gray-100 p-2 schemaViewer">
+            <JsonSchemaViewer
+              schema={schema}
+              emptyText="No schema defined"
+              maxHeight={parseInt(maxHeight, 10)}
+              defaultExpandedDepth={defaultExpandedDepth}
+              renderRootTreeLines={renderRootTreeLines}
+              hideExamples={hideExamples}
+              className={styles.schemaViewer}
+            />
+          </div>
+        </section>,
+        elem
+      )}
+    </div>
+  );
+};
+
+export default SchemaViewer;

package/src/components/MDX/SchemaViewer/SchemaViewerPortal.tsx

@@ -0,0 +1,5 @@
+const SchemaViewerPortal = (props: any) => {
+  return <div id={`${props.id}-SchemaViewer-portal`} />;
+};
+
+export default SchemaViewerPortal;

package/src/components/MDX/components.tsx

@@ -1,23 +1,25 @@
-// Astro components
-
 // React components
 import Schema from '@components/MDX/Schema';
 import File from '@components/MDX/File';
 import Accordion from '@components/MDX/Accordion/Accordion.astro';
 import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
 import Admonition from '@components/MDX/Admonition';
-import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI';
 
+//  Portals: required for server/client components
+import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
+import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
+
 const components = (props: any) => {
   return {
-    AccordionGroup,
     Accordion,
-    OpenAPI: (mdxProp: any) => <OpenAPI {...mdxProp} {...props} />,
+    AccordionGroup,
     Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
-    Schema: (mdxProp: any) => Schema({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
+    SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
+    OpenAPI: (mdxProp: any) => <OpenAPI {...mdxProp} {...props} />,
+    Schema: (mdxProp: any) => Schema({ ...props, ...mdxProp }),
   };
 };
 

package/src/components/Seo.astro

@@ -30,7 +30,7 @@ if (typeof _image === 'string') {
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta name="viewport" content="width=device-width" />
-<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.ico`} />
 
 <SEO
 	title={title}

package/src/components/Tables/columns/DomainTableColumns.tsx

@@ -3,6 +3,7 @@ import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
 
 const columnHelper = createColumnHelper<CollectionEntry<'domains'>>();
 
@@ -16,7 +17,7 @@ export const columns = () => [
       return (
         <div className=" group ">
           <a
-            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`)}
             className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
           >
             <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
@@ -74,7 +75,7 @@ export const columns = () => [
             return (
               <li key={consumer.data.id} className="py-1 group ">
                 <a
-                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 rounded-md`}>
@@ -104,7 +105,7 @@ export const columns = () => [
       return (
         <a
           className="hover:text-purple-500 hover:underline px-4 font-light"
-          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+          href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;
         </a>

package/src/components/Tables/columns/MessageTableColumns.tsx

@@ -5,6 +5,7 @@ import type { CollectionMessageTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
 
 const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
 
@@ -19,7 +20,7 @@ export const columns = () => [
       return (
         <div className=" group ">
           <a
-            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`)}
             className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
           >
             <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
@@ -75,7 +76,7 @@ export const columns = () => [
             return (
               <li className="py-2 group flex items-center space-x-2" key={producer.data.id}>
                 <a
-                  href={`/docs/${producer.collection}/${producer.data.id}/${producer.data.version}`}
+                  href={buildUrl(`/docs/${producer.collection}/${producer.data.id}/${producer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
@@ -115,7 +116,7 @@ export const columns = () => [
             return (
               <li key={consumer.data.id} className="py-1 group font-light ">
                 <a
-                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
@@ -145,7 +146,7 @@ export const columns = () => [
       return (
         <a
           className="hover:text-purple-500 hover:underline px-4 font-light"
-          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+          href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;
         </a>

package/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -4,6 +4,7 @@ import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
 
 const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
 
@@ -18,7 +19,7 @@ export const columns = () => [
       return (
         <div className="group font-light">
           <a
-            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`)}
             className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
           >
             <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
@@ -76,7 +77,7 @@ export const columns = () => [
             return (
               <li key={consumer.data.id} className="py-1 group font-light ">
                 <a
-                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
@@ -118,7 +119,7 @@ export const columns = () => [
             return (
               <li key={consumer.data.id} className="py-1 group font-light">
                 <a
-                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
@@ -148,7 +149,7 @@ export const columns = () => [
       return (
         <a
           className="hover:text-purple-500 hover:underline px-4 font-light"
-          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+          href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;
         </a>

package/src/layouts/CustomDocsPageLayout.astro

@@ -16,7 +16,7 @@ import catalog from '@eventcatalog';
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.ico`} />
     <meta name="generator" content={Astro.generator} />
     <title>EventCatalog</title>
   </head>

package/src/layouts/DiscoverLayout.astro

@@ -8,6 +8,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';
 
 const events = await getEvents();
 const commands = await getCommands();
@@ -20,7 +21,7 @@ const currentPath = Astro.url.pathname;
 const tabs = [
   {
     label: `Events (${events.length})`,
-    href: '/discover/events',
+    href: buildUrl('/discover/events'),
     isActive: currentPath === '/discover/events',
     icon: EnvelopeIcon,
     activeColor: 'orange',
@@ -28,7 +29,7 @@ const tabs = [
   },
   {
     label: `Commands (${commands.length})`,
-    href: '/discover/commands',
+    href: buildUrl('/discover/commands'),
     isActive: currentPath === '/discover/commands',
     icon: EnvelopeIcon,
     activeColor: 'blue',
@@ -36,7 +37,7 @@ const tabs = [
   },
   {
     label: `Services (${services.length})`,
-    href: '/discover/services',
+    href: buildUrl('/discover/services'),
     isActive: currentPath === '/discover/services',
     icon: ServerIcon,
     activeColor: 'pink',
@@ -44,7 +45,7 @@ const tabs = [
   },
   {
     label: `Domains (${domains.length})`,
-    href: '/discover/domains',
+    href: buildUrl('/discover/domains'),
     isActive: currentPath === '/discover/domains',
     icon: RectangleGroupIcon,
     activeColor: 'yellow',

package/src/layouts/VisualiserLayout.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';
 import { ViewTransitions } from 'astro:transitions';
 
@@ -55,7 +56,7 @@ const getColor = (collection: string) => {
                 label: item.data.name,
                 version: item.data.version,
                 color: getColor(item.collection),
-                href: `/visualiser/${item.collection}/${item.data.id}/${item.data.version}`,
+                href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
                 active: isCurrent
               }
             });

package/src/pages/discover/[type]/index.astro

@@ -11,7 +11,7 @@ export async function getStaticPaths() {
   const events = await getEvents();
   const commands = await getCommands();
   const services = await getServices();
-    const domains = await getDomains();
+  const domains = await getDomains();
 
   const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
     return collection.map((item) => ({

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

@@ -16,6 +16,7 @@ import { EnvelopeIcon, PencilIcon, RectangleGroupIcon, ServerIcon } from '@heroi
 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';
 
 export async function getStaticPaths() {
   const events = await getEvents();
@@ -67,6 +68,7 @@ const badges = [
   getBadge(),
   ...contentBadges
 ];
+
 ---
 
 <DocsLayout title={pageTitle} description={props.data.summary}>
@@ -90,13 +92,6 @@ const badges = [
             )
           }
         </div>
-
-        <!-- <div class="hidden md:block opacity-50 md:pr-10">
-          {props.collection === 'services' && <ServerIcon className="w-20 h-20 text-pink-500" />}
-          {props.collection === 'events' && <EnvelopeIcon className="w-20 h-20 text-orange-500" />}
-          {props.collection === 'commands' && <EnvelopeIcon className="w-20 h-20 text-blue-500" />}
-          {props.collection === 'domains' && <RectangleGroupIcon className="w-20 h-20 text-yellow-500" />}
-        </div> -->
       </div>
 
       <div>
@@ -131,9 +126,11 @@ const badges = [
       </div>
 
       <div class="prose prose-md py-4 w-full">
-        <Content components={components(props)} />
+          <Content components={components(props)} />
       </div>
       <div>
+        <!-- @ts-ignore -->
+        <SchemaViewer id={props.data.id} catalog={props.catalog}  />
         <NodeGraph id={props.data.id} collection={props.collection} version={props.data.version} mode="simple" href={{ label: 'Open in Visualiser', url: `/visualiser/${props.collection}/${props.data.id}/${props.data.version}`}} />
       </div>
       <footer class="py-4 space-y-8 divide-y divide-gray-200/60">
@@ -177,7 +174,16 @@ const badges = [
 
 </style>
 
+
+<script define:vars={{ props }}>
+  // Fix to pass information to componets that are client side only
+  // and require catalog information
+  window.eventcatalog = {};
+  window.eventcatalog[`${props.collection}-${props.data.id}`] = props.catalog;
+</script>
+
 <script>
+
   /**
    * @params {HTMLCollectionOf<HTMLElement>} graphs
    */

package/src/utils/commands.ts

@@ -1,7 +1,9 @@
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-import { getVersionForCollectionItem, getVersions } from './collections/util';
+import { getVersionForCollectionItem } from './collections/util';
+
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 type Command = CollectionEntry<'commands'> & {
   catalog: {
@@ -51,6 +53,7 @@ export const getCommands = async ({ getAllVersions = true }: Props = {}): Promis
       },
       catalog: {
         path: path.join(command.collection, command.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, command.collection, command.id.replace('/index.mdx', '/index.md')),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', command.collection, command.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', command.collection, command.id.replace('/index.mdx', '')),
         type: 'command',

package/src/utils/domains/domains.ts

@@ -3,6 +3,8 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
+
 export type Domain = CollectionEntry<'domains'>;
 
 interface Props {
@@ -41,6 +43,7 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
       },
       catalog: {
         path: path.join(domain.collection, domain.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, domain.collection, domain.id.replace('/index.mdx', '/index.md')),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', domain.collection, domain.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', domain.collection, domain.id.replace('/index.mdx', '')),
         type: 'service',

package/src/utils/events.ts

@@ -1,7 +1,9 @@
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-import { getVersionForCollectionItem, getVersions } from './collections/util';
+import { getVersionForCollectionItem } from './collections/util';
+
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 type Event = CollectionEntry<'events'> & {
   catalog: {
@@ -53,6 +55,7 @@ export const getEvents = async ({ getAllVersions = true }: Props = {}): Promise<
       },
       catalog: {
         path: path.join(event.collection, event.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, event.collection, event.id.replace('/index.mdx', '/index.md')),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', event.collection, event.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', event.collection, event.id.replace('/index.mdx', '')),
         type: 'event',

package/src/utils/services/services.ts

@@ -2,10 +2,8 @@ import { getVersionForCollectionItem, getVersions } from '@utils/collections/uti
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-// import { getEvents } from './events';
-// import { getCommands } from './commands';
 
-// import type { Service as ServiceInterface } from '../types/index'
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 export type Service = CollectionEntry<'services'>;
 
@@ -79,6 +77,7 @@ export const getServices = async ({ getAllVersions = true }: Props = {}): Promis
       },
       catalog: {
         path: path.join(service.collection, service.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, service.collection, service.id.replace('/index.mdx', '/index.md')),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', service.collection, service.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', service.collection, service.id.replace('/index.mdx', '')),
         type: 'service',

package/src/utils/url-builder.ts

@@ -0,0 +1,26 @@
+import config from '@eventcatalog';
+
+const cleanUrl = (url: string) => {
+  return url.replace(/\/+/g, '/');
+};
+
+// Custom URL builder as Astro does not support this stuff out the box
+export const buildUrl = (url: string, ignoreTrailingSlash = false) => {
+  // Should a trailingSlash be added to urls?
+  const trailingSlash = config.trailingSlash || false;
+
+  let newUrl = url;
+
+  // If the base URL is not the root, we need to append it
+  if (import.meta.env.BASE_URL !== '/') {
+    newUrl = `${import.meta.env.BASE_URL}${url}`;
+  }
+
+  // Should we add a trailing slash to the url?
+  if (trailingSlash && !ignoreTrailingSlash) {
+    if (url.endsWith('/')) return newUrl;
+    return cleanUrl(`${newUrl}/`);
+  }
+
+  return cleanUrl(newUrl);
+};