Configurations and scripts for CI-powered EventCatalog.

build-eventcatalog.sh

#!/bin/bash

# Orchestrate the functionality
main() {
  clean
  moveUpdatedComponent
  pullSchemas
  configBuild
  npx eventcatalog generate
  configRun
  configCore
  npx eventcatalog build
}

# Erase any garbage and previous output and configurations
clean() {
  find . -name '.DS_Store' -type f -delete
  rm -rf domains && rm -rf events && rm -rf services
  cleanConfig
}

# At the time of EventCatalog 0.6.0, the Mermaid component is broken - fix this
moveUpdatedComponent() {
  cp UpdatedMermaidComponent.tsx node_modules/@eventcatalog/core/components/Mermaid/index.tsx
}

# This is where you can dynamically pull schemas - in our demo case, let's just take them from a few Gist files
pullSchemas() {
  mkdir -p schemas

  # GreetService demo
  curl -L https://gist.github.com/mikaelvesavuori/25c68c5733fafd2e71e0eeb217c99821/raw -o schemas/Greetings.Hospitality.GreetService.json

  # UserService demo
  curl -L https://gist.github.com/mikaelvesavuori/2a0ccf603028017c5d599ca05d8bdfa9/raw -o schemas/User.UserManagement.UserService.json
}

# Erase root-level configuration
cleanConfig() {
  rm -f eventcatalog.config.js
}

# Write configuration contents to start of EventCatalog config
configUpdate() {
  cat configs/config.js | cat - eventcatalog.config.js >temp && mv temp eventcatalog.config.js
}

# Use the "build" configuration
configBuild() {
  cleanConfig
  cp configs/eventcatalog.config.build.js eventcatalog.config.js
  configUpdate
}

# Use the regular "run" configuration
configRun() {
  cleanConfig
  touch eventcatalog.config.js
  configUpdate
}

# Update the EventCatalog "core" configuration with our "run" configuration
configCore() {
  rm -f .eventcatalog-core/eventcatalog.config.js
  cp configs/config.js .eventcatalog-core/eventcatalog.config.js
}

# Start
main
exit

config.js

const eventCatalogConfig = {
  title: 'EventCatalog',
  tagline: 'Discover, Explore and Document your Event Driven Architectures',
  organizationName: 'ACME Corp',
  projectName: 'Event Catalog',
  editUrl: 'https://www.acmecorp.xyz',
  trailingSlash: true,
  logo: {
    alt: 'ACME Corp Logo',
    src: 'logo.svg',
  },
  footerLinks: [
    { label: 'Events', href: '/events' },
    { label: 'Services', href: '/services' },
    { label: 'Domains', href: '/domains' },
    { label: 'Visualiser', href: '/visualiser' },
    { label: 'Node graph overview', href: '/overview' },
  ]
}

module.exports = eventCatalogConfig;

create-eventcatalog.sh

CATALOG="$1"

if [ -z $CATALOG ]
then
  echo "Missing catalog name!"
  exit 1
fi

npx @eventcatalog/create-eventcatalog@latest $CATALOG && cd $CATALOG
rm -rf domains && rm -rf events && rm -rf services

eventcatalog.config.build.js

const path = require('path');
const fs = require('fs');

/**
 * @description This is the configuration for each schema and generator.
 */
const config = {
  versionEvents: true,
  renderMermaidDiagram: false,
  renderNodeGraph: true
}

/**
 * @description Produce the generators needed dynamically.
 */
const createGenerators = (schemaFolder = 'schemas') => {
  const schemasOnDisk = fs.readdirSync(path.join(__dirname, schemaFolder));
  const schemas = schemasOnDisk.filter((fileName) => fileName.includes('.json'));
  if (!schemas) return [];

  return schemas.map((schemaName) => {
    return [
      '@eventcatalog/plugin-doc-generator-asyncapi',
      {
        ...config,
        domainName: schemaName.split('.')[0],
        pathToSpec: path.join(__dirname, `${schemaFolder}/${schemaName}`),
      },
    ]
  });
}

/**
 * @description Create all users to be referenced in EventCatalog.
 */
const createUsers = () => {
  return [
    {
      id: 'Sam Person',
      name: 'Sam Person',
      role: 'Some Person Somewhere',
      avatarUrl: ''
    },
    {
      id: 'John Doe',
      name: 'John Doe',
      role: 'Some Person Somewhere',
      avatarUrl: ''
    },
  ]
}

/**
 * @description Export the configuration.
 * @note The "undefined" `eventCatalogConfig` here is added at runtime by one of the packaging scripts.
 */
module.exports = {
  ...eventCatalogConfig,
  users: createUsers(),
  generators: createGenerators('schemas')
}

UpdatedMermaidComponent.tsx

import React, { useEffect } from 'react';
import mermaid from 'mermaid';
import { Service, Event } from '@eventcatalog/types';
import { buildMermaidFlowChartForEvent, buildMermaidFlowChartForService } from '@/lib/graphs';

mermaid.initialize({
  startOnLoad: true,
  theme: 'forest',
  securityLevel: 'loose',
  flowchart: {
    useMaxWidth: false,
  },
  themeCSS: `
  .node {
      filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .2))
  }
  .mermaid svg {
      width: 10000px
  }
  .node rect {
      fill: white
  }
    `,
  fontFamily: 'Fira Code',
});

interface MermaidProps {
  data: Event | Service;
  source: 'event' | 'service';
  rootNodeColor?: string;
  charts?: string[];
}

function Mermaid({ data, source = 'event', rootNodeColor, charts }: MermaidProps) {
  useEffect(() => {
    mermaid.contentLoaded();
  }, []);

  if (charts) {
    return (
      <>
        {charts.map((content, index) => (
          <div key={`chart-${index}`} className="mermaid">
            {content}
          </div>
        ))}
      </>
    );
  }
  const mermaidChart =
    source === 'event'
      ? buildMermaidFlowChartForEvent(data as Event, rootNodeColor)
      : buildMermaidFlowChartForService(data as Service, rootNodeColor);

  return <div className="mermaid">{mermaidChart}</div>;
}

export default Mermaid;