@eventcatalog/core 1.2.6 → 2.0.0

package/src/layouts/DiscoverLayout.astro

@@ -0,0 +1,120 @@
+---
+import { Table } from '@components/Tables/Table';
+import { RectangleGroupIcon } from '@heroicons/react/24/outline';
+import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon';
+import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
+import PlainPage from '@layouts/PlainPage.astro';
+import { getCommands } from '@utils/commands';
+import { getDomains } from '@utils/domains/domains';
+import { getEvents } from '@utils/events';
+import { getServices } from '@utils/services/services';
+
+const events = await getEvents();
+const commands = await getCommands();
+const services = await getServices();
+const domains = await getDomains();
+
+const { title, subtitle, data, type } = Astro.props;
+const currentPath = Astro.url.pathname;
+
+const tabs = [
+  {
+    label: `Events (${events.length})`,
+    href: '/discover/events',
+    isActive: currentPath === '/discover/events',
+    icon: EnvelopeIcon,
+    activeColor: 'orange',
+    enabled: events.length > 0,
+  },
+  {
+    label: `Commands (${commands.length})`,
+    href: '/discover/commands',
+    isActive: currentPath === '/discover/commands',
+    icon: EnvelopeIcon,
+    activeColor: 'blue',
+    enabled: commands.length > 0,
+  },
+  {
+    label: `Services (${services.length})`,
+    href: '/discover/services',
+    isActive: currentPath === '/discover/services',
+    icon: ServerIcon,
+    activeColor: 'pink',
+    enabled: services.length > 0,
+  },
+  {
+    label: `Domains (${domains.length})`,
+    href: '/discover/domains',
+    isActive: currentPath === '/discover/domains',
+    icon: RectangleGroupIcon,
+    activeColor: 'yellow',
+    enabled: services.length > 0,
+  },
+];
+---
+
+<PlainPage title={`Explore | ${title}`}>
+  <main>
+    <div>
+      <!-- <div class="sm:hidden">
+        <label for="tabs" class="sr-only">Select a tab</label>
+        <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
+          <option>My Account</option>
+          <option>Company</option>
+          <option selected>Team Members</option>
+          <option>Billing</option>
+        </select>
+      </div> -->
+      <div class="hidden sm:block">
+        <div class="border-b border-gray-200">
+          <nav class="flex space-x-8 -mb-0.5" aria-label="Tabs">
+            {
+              tabs.map((tab) => (
+                <a
+                  href={tab.href}
+                  class={` text-black  group inline-flex items-center py-4 px-1 text-sm font-light ${tab.isActive ? `border-${tab.activeColor}-500 border-b-[2px] text-${tab.activeColor}-500` : 'opacity-80'} ${!tab.enabled ? 'disabled' : ''}`}
+                  aria-current="page"
+                >
+                  <tab.icon className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`} />
+                  <span>{tab.label}</span>
+                </a>
+              ))
+            }
+          </nav>
+        </div>
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div class="pb-20">
+      <div>
+        <div class="sm:flex sm:items-center py-8 pb-4">
+          <div class="sm:flex-auto space-y-2">
+            <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
+            <p class="text-md text-gray-700">{subtitle}</p>
+          </div>
+        </div>
+        <div class="mt-4 flow-root">
+          <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div class="inline-block min-w-full align-middle sm:px-6 lg:px-8">
+              <!-- @ts-ignore -->
+              <Table data={data} collection={type} client:load />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</PlainPage>
+
+<style>
+  .ec-align-top {
+    vertical-align: top !important;
+  }
+
+  a.disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.25;
+  }
+</style>

package/src/layouts/DocsLayout.astro

@@ -0,0 +1,59 @@
+---
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+
+import SideBar from '../components/DocsNavigation.astro';
+import Header from '../components/Header.astro';
+import SEO from '../components/Seo.astro';
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
+  </head>
+<body>
+    <div class="px-10 max-w-[96em] mx-auto">
+      <Header />
+
+      <div class="md:pt-20">
+        <nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full py-2 ">
+          <div class="w-full ">
+            <SideBar />
+          </div>
+        </nav>
+
+        <div class="pl-0 sm:pl-64 lg:pl-72 xl:pl-80 w-full pt-0 pb-40">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
+<style is:global>
+  .expressive-code {
+    margin: 1.2em 0;
+  }
+  html {
+    scroll-behavior: smooth;
+  }
+  h1,
+  h2,
+  h3 {
+    scroll-behavior: smooth;
+    scroll-margin: 70px;
+  }
+
+  .react-flow__handle {
+    opacity: 0;
+  }
+
+  .react-flow__attribution {
+    opacity: 0.1;
+  }
+</style>

package/src/layouts/PlainPage.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+
+import Header from '@components/Header.astro';
+import SEO from '@components/Seo.astro';
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
+  </head>
+  <body>
+    <div class="px-10 max-w-[96em] mx-auto">
+      <Header />
+
+      <div class="md:pt-20">
+        <div>
+          <slot />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/src/layouts/VisualiserLayout.astro

@@ -0,0 +1,73 @@
+---
+import BasicList from '@components/Lists/BasicList';
+import PlainPage from '@layouts/PlainPage.astro';
+import type { CollectionTypes } from '@types';
+import { getCommands } from '@utils/commands';
+import { getDomains } from '@utils/domains/domains';
+import { getEvents } from '@utils/events';
+import { getServices } from '@utils/services/services';
+import type { CollectionEntry } from 'astro:content';
+import { ViewTransitions } from 'astro:transitions';
+
+const [services, events, commands, domains] = await Promise.all([getServices(), getEvents(), getCommands(), getDomains()]);
+const navItems = [...domains, ...services, ...events, ...commands];
+
+
+const navigation = navItems.reduce((acc, item) => {
+  //  @ts-ignore
+  const group = acc[item.collection] || [];
+
+  return {
+    ...acc,
+    [item.collection]: [...group, item],
+  };
+}, {}) as any;
+
+const currentPath = Astro.url.pathname;
+const { title, description } = Astro.props;
+
+const getColor = (collection: string) => {
+  switch (collection) {
+    case 'services':
+      return 'green';
+    case 'events':
+      return 'red';
+    case 'commands':
+      return 'yellow';
+    case 'domains':
+      return 'blue';
+    default:
+      return 'gray';
+  }
+};
+
+---
+
+<PlainPage title={title} description={description}>
+  <div class="flex min-h-full flex-row md:flex-col">
+    <div class="mx-auto flex flex-col-reverse md:flex-row w-full items-start">
+      <aside class="md:sticky mt-14 md:mt-0 top-0 w-full md:w-60 xl:w-[19em] shrink-0 lg:block font-light pr-10" id="visualiser-navigation">
+        {
+          Object.keys(navigation).map((key: any) => {
+            const items = navigation[key].map((item: any) => {
+              const isCurrent = currentPath.includes(`${item.collection}/${item.data.id}/${item.data.version}`);
+              return {
+                label: item.data.name,
+                version: item.data.version,
+                color: getColor(item.collection),
+                href: `/visualiser/${item.collection}/${item.data.id}/${item.data.version}`,
+                active: isCurrent
+              }
+            });
+            return <BasicList title={`${key} (${navigation[key].length})`} items={items} emptyMessage='Nothing to show' color="gray" client:load />
+          })
+        }
+      </aside>
+
+      <main class="flex-1 h-full w-full " >
+        <slot />
+      </main>
+    </div>
+    <ViewTransitions />
+  </div>
+</PlainPage>

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

@@ -0,0 +1,36 @@
+---
+import { getEvents } from '@utils/events';
+import DiscoverLayout from '@layouts/DiscoverLayout.astro';
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionTypes } from '@types';
+import { getCommands } from '@utils/commands';
+import { getServices } from '@utils/services/services';
+import { getDomains } from '@utils/domains/domains';
+
+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,
+      },
+      props: {
+        type: item.collection,
+        data: collection,
+      },
+    }));
+  };
+
+  const pages = [events, commands, services, domains];
+  return pages.flatMap(buildPages);
+
+}
+
+const { type, data } = Astro.props;
+---
+
+<DiscoverLayout title={`${type} (${data.length})`} subtitle={`Find, filter and search for any ${type} in your system.`} data={data} type={type} />

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

@@ -0,0 +1,215 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import DocsLayout from '@layouts/DocsLayout.astro';
+
+import components from '@components/MDX/components';
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.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, 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';
+
+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 { Content } = await props.render();
+
+// Capitalize the first letter of a string
+const pageTitle = `${props.collection} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
+const contentBadges = props.data.badges || [];
+
+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(),
+  ...contentBadges
+];
+---
+
+<DocsLayout title={pageTitle} description={props.data.summary}>
+  <!-- <main class="flex py-8 sm:px-8 docs-layout"> -->
+  <div class="flex min-h-screen docs-layout">
+    <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 md:py-8 md:pb-6">
+        <div>
+          <h2 class="text-2xl md:text-4xl font-bold">{props.data.name} <span class="text-gray-300">(v{props.data.version})</span></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 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>
+        {
+          props.data.version !== props.data.latestVersion && (
+            <div class="rounded-md bg-yellow-50 p-4 not-prose my-4">
+              <div class="flex">
+                <div class="flex-shrink-0">
+                  <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path
+                      fill-rule="evenodd"
+                      d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div class="ml-3">
+                  <h3 class="text-sm font-medium text-yellow-800">New version found</h3>
+                  <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}`}>
+                        The latest version of this {props.collection.slice(0, props.collection.length - 1)} is v{props.data.latestVersion} &rarr;
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        }
+      </div>
+
+      <div class="prose prose-md py-4 w-full">
+        <Content components={components(props)} />
+      </div>
+      <div>
+        <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">
+        <a href="#" class="flex space-x-2 items-center text-gray-500 hover:text-purple-500 hover:underline"><PencilIcon className="w-4 h-4" /><span>Edit this page</span></a>
+        <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/boyney123/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("/icons/github.svg"); 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("/icons/x-twitter.svg"); mask-repeat: no-repeat; mask-position: center center;'></svg></a
+            >
+          </div>
+          <a target="_blank" class="hover:text-purple-500 hover:underline" href="https://eventcatalog.dev">Powered by EventCatalog</a>
+        </div>
+      </footer>
+    </main>
+    <aside class="hidden lg:block sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
+      <!-- @ts-ignore -->
+      {(props?.collection === 'events' || props.collection === 'commands') && <MessageSideBar message={props} />}
+      {props?.collection === 'services' && <ServiceSideBar service={props} />}
+      {props?.collection === 'domains' && <DomainSideBar domain={props} />}
+    </aside>
+  </div>
+</DocsLayout>
+
+<style is:global>
+  .docs-layout .prose {
+    max-width: none;
+  }
+
+  .mermaid svg {
+    margin: 1em auto 2em;
+  }
+
+  .mermaid tspan {
+    font-size: 8em;
+  }
+
+</style>
+
+<script>
+  /**
+   * @params {HTMLCollectionOf<HTMLElement>} graphs
+   */
+  async function renderDiagrams(graphs: any) {
+    const { default: mermaid } = await import('mermaid');
+    mermaid.initialize({
+      fontSize: 2,
+      flowchart: {
+        curve: 'linear',
+        rankSpacing: 0,
+        nodeSpacing: 0,
+      },
+      startOnLoad: false,
+      fontFamily: 'var(--sans-font)',
+      // @ts-ignore This works, but TS expects a enum for some reason
+      theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default',
+    });
+
+    for (const graph of graphs) {
+      const content = graph.getAttribute('data-content');
+      if (!content) continue;
+      let svg = document.createElement('svg');
+      const id = (svg.id = 'mermaid-' + Math.round(Math.random() * 100000));
+      graph.appendChild(svg);
+      mermaid.render(id, content).then((result) => {
+        graph.innerHTML = result.svg;
+      });
+    }
+  }
+
+  const graphs = document.getElementsByClassName('mermaid');
+  if (document.getElementsByClassName('mermaid').length > 0) {
+    renderDiagrams(graphs);
+  }
+</script>

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

@@ -0,0 +1,93 @@
+---
+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 PlainPage from '@layouts/PlainPage.astro';
+import { DocumentMinusIcon } from '@heroicons/react/24/outline';
+
+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)];
+}
+
+// @ts-ignore
+const { data, catalog } = Astro.props;
+const pathToSpec = path.join(catalog.publicPath, 'openapi.yml');
+const pathOnDisk = path.join(process.cwd(), 'public', pathToSpec);
+const fileExists = fs.existsSync(pathOnDisk);
+---
+
+<PlainPage title="OpenAPI Spec">
+  <!-- {fileExists && <div>Here</div>} -->
+  {
+    !fileExists && (
+      <div class="text-center h-screen  flex flex-col justify-center ">
+       <DocumentMinusIcon className="mx-auto h-12 w-12 text-gray-400" />
+        <h3 class="mt-2 text-sm font-semibold text-gray-900">No OpenAPI spec file found</h3>
+        <p class="mt-1 text-xs text-gray-400">Could not find OpenAPI file for {data.name} in {`/${catalog.path}`}</p>
+        
+      </div>
+    )
+  }
+
+  {
+    fileExists && (
+      <rapi-doc
+        spec-url={pathToSpec}
+        render-style="table"
+        show-header="false"
+        allow-authentication="false"
+        allow-try="false"
+        style={{ height: '100vh', width: '100%' }}
+        class="py-4"
+        nav-bg-color="#fff"
+        schema-style="table"
+        primary-color="#e0baff"
+        bg-color="#fff"
+      />
+    )
+  }
+</PlainPage>
+
+<script>
+  // @ts-ignore
+  await import('rapidoc');
+</script>
+
+<style>
+  rapi-doc::part(section-servers) {
+    /* <<< targets the server div */
+    background: #6b5b95;
+    color: #d1c2e4;
+    margin: 0 24px 0 24px;
+    border-radius: 5px;
+  }
+  rapi-doc::part(label-selected-server) {
+    /* <<< targets selected server label */
+    color: #fff;
+  }
+</style>

package/src/pages/docs/index.md

@@ -0,0 +1,4 @@
+---
+layout: ../../layouts/CustomDocsPageLayout.astro
+---
+