@eventcatalog/core 1.2.6 → 2.0.0

package/src/pages/docs/teams/[id]/index.astro

@@ -0,0 +1,127 @@
+---
+import DocsLayout from '@layouts/DocsLayout.astro';
+
+import components from '@components/MDX/components';
+
+// SideBars
+import { getTeams } from '@utils/teams';
+import { getEntry } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import OwnersList from '@components/Lists/OwnersList';
+import PillList from '@components/Lists/PillList';
+import EnvelopeIcon from '@heroicons/react/16/solid/EnvelopeIcon';
+
+export async function getStaticPaths() {
+  const teams = await getTeams();
+
+  return teams.map((team) => ({
+    params: {
+      type: 'teams',
+      id: team.data.id,
+    },
+    props: {
+      type: 'team',
+      ...team,
+    },
+  }));
+}
+
+const { render, ...props } = Astro.props;
+
+const { Content } = await render();
+
+const membersRaw = props.data.members || [];
+const members = await Promise.all(membersRaw.map((m) => getEntry(m)));
+
+const services = props.data.ownedServices as CollectionEntry<'services'>[];
+const events = props.data.ownedEvents as CollectionEntry<'events'>[];
+const commands = props.data.ownedCommands as CollectionEntry<'commands'>[];
+
+const membersList = members.map((o) => ({
+  label: o.data.name,
+  type: o.collection,
+  badge: o.collection === 'users' ? o.data.role : 'Team',
+  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
+  href: `/docs/${o.collection}/${o.data.id}`,
+}));
+
+const ownedServicesList = services.map((p) => ({
+  label: `${p.data.name} (service)`,
+href: `/docs/${p.collection}/${p.data.id}`,
+  tag: `v${p.data.version}`
+}));
+
+const ownedEventsList = [...events, ...commands].map((p) => ({
+  label: `${p.data.name} (${p.collection.slice(0, -1)})`,
+  href: `/docs/${p.collection}/${p.data.id}`,
+  color: p.collection === 'events' ? 'orange' : 'blue',
+  tag: `v${p.data.version}`
+}));
+---
+
+<DocsLayout title={`Team | ${props.data.name}`} description={props.data.summary}>
+  <div class="flex min-h-screen docs-layout">
+    <main class="flex-1 w-full pr-10 pt-4">
+      <!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
+    
+      <div class="border-b border-gray-200  py-4 pb-2">
+        <div class="flex justify-start">
+          <!-- <span class="shadow-md text-center flex items-center justify-center text-white text-4xl bg-red-500 h-28 w-28 rounded-full">{props.data.name.charAt(0)}</span> -->
+          <div class="flex flex-col justify-between space-y-2">
+            <div>
+              <h2 class="text-4xl font-bold">{props.data.name} <span class="text-gray-300">(Team)</span></h2>
+            </div>
+            <div class="space-y-2">
+              {
+                props.data.email && (
+                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-purple-500">
+                    <EnvelopeIcon className="w-4 h-4 text-purple-400" />
+                    <a href={`mailto:${props.data.email}`}>Email</a>
+                  </div>
+                )
+              }
+              {
+                props.data.slackDirectMessageUrl && (
+                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-purple-500">
+                    <img src="/slack-icon.svg" class="w-4 h-3" />
+                    <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
+                  </div>
+                )
+              }
+            </div>
+          </div>
+        </div>
+        <!-- {
+          props.data.badges && (
+            <div class="flex flex-wrap py-2">
+              {props.data.badges.map((badge) => (
+                <span class={`text-sm  text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-200 text-${badge.textColor}-800`}>{badge.content}</span>
+              ))}
+            </div>
+          )
+        } -->
+        <h2 class="text-xl py-2 text-gray-500">{props.data.summary}</h2>
+      </div>
+      <div class="prose prose-md py-4 w-full">
+        <Content components={components(props)} />
+      </div>
+      <!-- <div class="h-full w-full">
+        <NodeGraph id={props.data.id} type={props?.catalog?.type} nodes={props.nodes} masterNode={{ name: props.data.name, id: props.data.id }} client:load />
+      </div> -->
+    </main>
+    <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
+      <div class="divide-y-2 divide-gray-100">
+        <PillList color="blue" title={`Owned services (${ownedServicesList.length})`} pills={ownedServicesList} emptyMessage={`This team does not own any services .`} client:load/>
+        <PillList color="red" title={`Owned messages (${ownedEventsList.length})`} pills={ownedEventsList} emptyMessage={`This team does not own any messages .`} client:load/>
+        <OwnersList title={`Team members (${membersList.length})`} owners={membersList} emptyMessage={`This team does not have any members.`} client:load/>
+      </div>
+      <!-- {props?.collection === 'events' && <MessageSideBar message={props} />} -->
+    </aside>
+  </div>
+</DocsLayout>
+
+<style>
+  .docs-layout .prose {
+    max-width: none;
+  }
+</style>

package/src/pages/docs/users/[id]/index.astro

@@ -0,0 +1,132 @@
+---
+import DocsLayout from '@layouts/DocsLayout.astro';
+import components from '@components/MDX/components';
+
+// SideBars
+import type { CollectionEntry } from 'astro:content';
+import OwnersList from '@components/Lists/OwnersList';
+import PillList from '@components/Lists/PillList';
+import { getUsers } from '@utils/users';
+import EnvelopeIcon from '@heroicons/react/16/solid/EnvelopeIcon';
+
+export async function getStaticPaths() {
+  const teams = await getUsers();
+
+  return teams.map((team) => ({
+    params: {
+      type: team.collection,
+      id: team.data.id,
+    },
+    props: {
+      type: 'team',
+      ...team,
+    },
+  }));
+}
+
+const { render, ...props } = Astro.props;
+
+const { Content } = await render();
+
+const services = props.data.ownedServices as CollectionEntry<'services'>[];
+const events = props.data.ownedEvents as CollectionEntry<'events'>[];
+const commands = props.data.ownedCommands as CollectionEntry<'commands'>[];
+const teams = props.data.associatedTeams as CollectionEntry<'teams'>[];
+
+const ownedServicesList = services.map((p) => ({
+  label: `${p.data.name} (service)`,
+  href: `/docs/${p.collection}/${p.data.id}`,
+  tag: `v${p.data.version}`,
+}));
+
+const ownedMessageList = [...events, ...commands].map((p) => ({
+  label: `${p.data.name} (${p.collection.slice(0, -1)})`,
+  color: p.collection === 'events' ? 'orange' : 'blue',
+  tag: `v${p.data.version}`,
+  href: `/docs/${p.collection}/${p.data.id}`,
+}));
+
+const associatedTeams = teams.map((o) => ({
+  label: o.data.name,
+  type: o.collection,
+  badge: 'Team',
+  href: `/docs/${o.collection}/${o.data.id}`,
+}));
+---
+
+<DocsLayout title={`User | ${props.data.name}`}>
+  <div class="flex min-h-screen docs-layout">
+    <main class="flex-1 w-full pr-10 pt-4">
+      <!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
+      <div class="border-b border-gray-200 pb-4 py-4">
+        <div class="flex justify-start space-x-8">
+          <img src={props.data.avatarUrl} alt="Profile picture" class="shadow-md w-28 rounded-md" />
+          <div class="flex flex-col justify-between">
+            <div>
+              <h2 class="text-4xl font-bold">{props.data.name}</h2>
+              <span class="text-xl font-bold text-gray-500">{props.data.role}</span>
+            </div>
+            <div class="space-y-1">
+              {
+                props.data.email && (
+                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-purple-500">
+                    <EnvelopeIcon className="w-4 h-4 text-purple-400" />
+                    <a href={`mailto:${props.data.email}`}>Email</a>
+                  </div>
+                )
+              }
+              {
+                props.data.slackDirectMessageUrl && (
+                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-purple-500">
+                    <img src="/slack-icon.svg" class="w-4 h-3" />
+                    <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
+                  </div>
+                )
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="border-b border-gray-200">
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+          <div class="mx-auto max-w-2xl lg:max-w-none">
+            <dl class="grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
+              <div class="flex flex-col bg-gray-400/5 p-8">
+                <dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
+              </div>
+              <div class="flex flex-col bg-gray-400/5 p-8">
+                <dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessageList.length}</dd>
+              </div>
+              <div class="flex flex-col bg-gray-400/5 p-8">
+                <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">2</dd>
+              </div>
+              <div class="flex flex-col bg-gray-400/5 p-8">
+                <dt class="text-sm font-semibold leading-6 text-gray-600"># teams joined</dt>
+                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{associatedTeams.length}</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <div class="prose prose-md py-4 w-full">
+        <Content components={components(props)} />
+      </div>
+    </main>
+    <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
+      <div class="divide-y-2 divide-gray-100">
+        <PillList color="pink" title={`Owned services (${ownedServicesList.length})`} pills={ownedServicesList} emptyMessage={`${props.data.name} does not own any services .`} client:load/>
+        <PillList color="orange" title={`Owned messages (${ownedMessageList.length})`} pills={ownedMessageList} emptyMessage={`${props.data.name} does not own any messages .`} client:load/>
+        <OwnersList title={`Member of team (${associatedTeams.length})`} owners={associatedTeams} emptyMessage={`${props.data.name} is not part of any documented team.`} client:load/>
+      </div>
+    </aside>
+  </div>
+</DocsLayout>
+
+<style>
+  .docs-layout .prose {
+    max-width: none;
+  }
+</style>

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

@@ -0,0 +1,46 @@
+---
+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 { getServices } from '@utils/services/services';
+import type { CollectionEntry } from 'astro:content';
+
+export async function getStaticPaths() {
+  const [services, events, commands, domains] = await Promise.all([getServices(), getEvents(), getCommands(), 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(services), ...buildPages(events), ...buildPages(commands), ...buildPages(domains)];
+}
+
+const props = Astro.props;
+
+console.log('TEST');
+
+const {
+  data: { id },
+  collection,
+} = props;
+---
+
+<VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
+  <div class="bg-gray-100/50">
+    <div class="h-[calc(100vh-110px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
+    <NodeGraph id={id} collection={collection} title={`${props.data.name} (v${props.data.version})`} mode="full" linkTo="visualiser" version={props.data.version} href={{ label: `Open documentation for ${props.data.name} v${props.data.version}`, url: `/docs/${props.collection}/${props.data.id}/${props.data.version}`}} />
+  </div>
+</VisualiserLayout>

package/src/pages/visualiser/index.astro

@@ -0,0 +1,25 @@
+---
+import Layout from '../../layouts/VisualiserLayout.astro'
+---
+
+<Layout>
+    <div class="hidden no-items py-56 text-center -ml-52 text-gray-400">No data loaded into your catalog. Please add some data to your to see visuals.</div>
+</Layout>
+
+<script is:inline>
+
+    // Find the total anchor links
+    const totalAnchorLinks = document.getElementById('visualiser-navigation').querySelectorAll('a');
+
+    console.log('totalAnchorLinks.length', totalAnchorLinks.length)
+
+    // Show no-items if there are none
+    if(totalAnchorLinks.length === 0) {
+        document.querySelector('.no-items').classList.remove('hidden');
+    }
+
+    // Find the element with the id visualiser-navigation and the first a link in there and click it
+    if(document.getElementById('visualiser-navigation').querySelector('a')){
+        document.getElementById('visualiser-navigation').querySelector('a').click();
+    }
+</script>

package/src/remark-plugins/mermaid.ts

@@ -0,0 +1,27 @@
+import type { RemarkPlugin } from '@astrojs/markdown-remark';
+import { visit } from 'unist-util-visit';
+// import dedent from "ts-dedent"
+
+const escapeMap: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+
+const escapeHtml = (str: string) => str.replace(/[&<>"']/g, (c) => escapeMap[c]);
+
+export const mermaid: RemarkPlugin<[]> = () => (tree) => {
+  visit(tree, 'code', (node) => {
+    if (node.lang !== 'mermaid') return;
+
+    // @ts-ignore
+    node.type = 'html';
+    node.value = `
+      <div class="mermaid" data-content="${escapeHtml(node.value)}">
+        <p>Loading graph...</p>
+      </div>
+    `;
+  });
+};

package/src/remark-plugins/remark-modified-time.mjs

@@ -0,0 +1,9 @@
+import { execSync } from "child_process";
+
+export function remarkModifiedTime() {
+  return function (_, file) {
+    const filepath = file.history[0];
+    const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`);
+    file.data.astro.frontmatter.lastModified = result.toString();
+  };
+}

package/src/types/index.ts

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

package/src/utils/collections/util.ts

@@ -0,0 +1,22 @@
+import type { CollectionTypes } from '@types';
+import type { CollectionEntry } from 'astro:content';
+
+export const getVersions = (data: CollectionEntry<CollectionTypes>[]) => {
+  const allVersions = data.map((item) => item.data.version).sort();
+  const versions = [...new Set(allVersions)].reverse();
+  const latestVersion = versions[0];
+  return { versions, latestVersion };
+};
+
+export const getVersionForCollectionItem = (
+  item: CollectionEntry<CollectionTypes>,
+  collection: CollectionEntry<CollectionTypes>[]
+) => {
+  const allVersionsForItem = collection
+    .filter((i) => i.data.id === item.data.id)
+    .map((i) => i.data.version)
+    .sort();
+  const versions = [...new Set(allVersionsForItem)].reverse();
+  const latestVersion = versions[0];
+  return { versions, latestVersion };
+};

package/src/utils/colors.ts

@@ -0,0 +1,14 @@
+export const getColor = (type: string) => {
+  switch (type) {
+    case 'event':
+      return 'green';
+    case 'domain':
+      return 'pink';
+    case 'command':
+      return 'blue';
+    case 'service':
+      return 'purple';
+    default:
+      return 'gray';
+  }
+};

package/src/utils/commands/node-graph.ts

@@ -0,0 +1,107 @@
+import { getCommands } from '@utils/commands';
+import { calculatedNodes, createDagreGraph, generateIdForNode, generatedIdForEdge } from '@utils/node-graph-utils/utils';
+import { type CollectionEntry } from 'astro:content';
+import dagre from 'dagre';
+
+type DagreGraph = any;
+
+interface Props {
+  id: string;
+  version: string;
+  defaultFlow?: DagreGraph;
+  mode?: 'simple' | 'full';
+}
+
+export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
+  const flow = defaultFlow || createDagreGraph({ ranksep: 180, nodesep: 50 });
+  const nodes = [] as any,
+    edges = [] as any;
+
+  const commands = await getCommands();
+
+  const command = commands.find((command) => command.data.id === id && command.data.version === version);
+
+  // Nothing found...
+  if (!command) {
+    return {
+      nodes: [],
+      edges: [],
+    };
+  }
+
+  const producers = (command.data.producers as CollectionEntry<'services'>[]) || [];
+  const consumers = (command.data.consumers as CollectionEntry<'services'>[]) || [];
+
+  if (producers && producers.length > 0) {
+    producers.forEach((producer, index) => {
+      nodes.push({
+        id: generateIdForNode(producer),
+        type: producer?.collection,
+        sourcePosition: 'right',
+        targetPosition: 'left',
+        data: { mode, service: producer, showTarget: false },
+        position: { x: 250, y: 0 },
+      });
+      edges.push({
+        id: generatedIdForEdge(producer, command),
+        source: generateIdForNode(producer),
+        target: generateIdForNode(command),
+        type: 'smoothstep',
+        label: 'invokes',
+        animated: false,
+        markerEnd: {
+          type: 'arrow',
+        },
+      });
+    });
+  }
+
+  // The service itself
+  nodes.push({
+    id: generateIdForNode(command),
+    sourcePosition: 'right',
+    targetPosition: 'left',
+    data: { mode, message: command, showTarget: producers.length > 0, showSource: consumers.length > 0 },
+    position: { x: 0, y: 0 },
+    type: command.collection,
+  });
+
+  // The messages the service sends
+  consumers.forEach((consumer) => {
+    nodes.push({
+      id: generateIdForNode(consumer),
+      sourcePosition: 'right',
+      targetPosition: 'left',
+      data: { title: consumer?.data.id, mode, service: consumer, showSource: false },
+      position: { x: 0, y: 0 },
+      type: consumer?.collection,
+    });
+    edges.push({
+      id: generatedIdForEdge(command, consumer),
+      source: generateIdForNode(command),
+      target: generateIdForNode(consumer),
+      type: 'smoothstep',
+      label: 'accepts',
+      animated: false,
+      markerEnd: {
+        type: 'arrow',
+      },
+    });
+  });
+
+  nodes.forEach((node: any) => {
+    flow.setNode(node.id, { width: 150, height: 100 });
+  });
+
+  edges.forEach((edge: any) => {
+    flow.setEdge(edge.source, edge.target);
+  });
+
+  // Render the diagram in memory getting hte X and Y
+  dagre.layout(flow);
+
+  return {
+    nodes: calculatedNodes(flow, nodes),
+    edges: edges,
+  };
+};

package/src/utils/commands.ts

@@ -0,0 +1,60 @@
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import path from 'path';
+import { getVersionForCollectionItem, getVersions } from './collections/util';
+
+type Command = CollectionEntry<'commands'> & {
+  catalog: {
+    path: string;
+    filePath: string;
+    type: string;
+  };
+};
+
+interface Props {
+  getAllVersions?: boolean;
+}
+
+export const getCommands = async ({ getAllVersions = true }: Props = {}): Promise<Command[]> => {
+  const commands = await getCollection('commands', (command) => {
+    return (getAllVersions || !command.slug.includes('versioned')) && command.data.hidden !== true;
+  });
+  const services = await getCollection('services');
+
+  return commands.map((command) => {
+    const { latestVersion, versions } = getVersionForCollectionItem(command, commands);
+
+    const producers = services.filter((service) => {
+      if (!service.data.sends) return false;
+      return service.data.sends.find((item) => {
+        if (item.version) return item.id === command.data.id && item.version === command.data.version;
+        return item.id == command.data.id;
+      });
+    });
+
+    const consumers = services.filter((service) => {
+      if (!service.data.receives) return false;
+      return service.data.receives.find((item) => {
+        if (item.version) return item.id === command.data.id && item.version === command.data.version;
+        return item.id == command.data.id;
+      });
+    });
+
+    return {
+      ...command,
+      data: {
+        ...command.data,
+        producers,
+        consumers,
+        versions,
+        latestVersion,
+      },
+      catalog: {
+        path: path.join(command.collection, command.id.replace('/index.mdx', '')),
+        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/config/catalog.ts

@@ -0,0 +1,2 @@
+import * as config from '@config';
+export default config.default;

package/src/utils/domains/domains.ts

@@ -0,0 +1,50 @@
+import { getVersionForCollectionItem, getVersions } from '@utils/collections/util';
+import { getCollection } from 'astro:content';
+import type { CollectionEntry } from 'astro:content';
+import path from 'path';
+
+export type Domain = CollectionEntry<'domains'>;
+
+interface Props {
+  getAllVersions?: boolean;
+}
+
+export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise<Domain[]> => {
+  // Get all the domains that are not versioned
+  const domains = await getCollection('domains', (domain) => {
+    return (getAllVersions || !domain.slug.includes('versioned')) && domain.data.hidden !== true;
+  });
+
+  // Get all the services that are not versioned
+  const servicesCollection = await getCollection('services');
+
+  // @ts-ignore // TODO: Fix this type
+  return domains.map((domain) => {
+    const { latestVersion, versions } = getVersionForCollectionItem(domain, domains);
+
+    // const receives = service.data.receives || [];
+    const servicesInDomain = domain.data.services || [];
+
+    const services = servicesInDomain
+      .map((_service) => {
+        return servicesCollection.find((service) => _service.id === service.data.id);
+      })
+      .filter((e) => e !== undefined);
+
+    return {
+      ...domain,
+      data: {
+        ...domain.data,
+        services,
+        latestVersion,
+        versions,
+      },
+      catalog: {
+        path: path.join(domain.collection, domain.id.replace('/index.mdx', '')),
+        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',
+      },
+    };
+  });
+};