@eventcatalog/core 0.0.10 → 0.0.14

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @eventcatalog/core
 
+## 0.0.14
+
+### Patch Changes
+
+- [`7c23703`](https://github.com/boyney123/eventcatalog/commit/7c237039535d7f5d6f229396cf59eb5cbf5b0645) [#109](https://github.com/boyney123/eventcatalog/pull/109) Thanks [@boyney123](https://github.com/boyney123)! - fix: issue with long names for services and events rendering incorrectly
+
+## 0.0.13
+
+### Patch Changes
+
+- [`732dac2`](https://github.com/boyney123/eventcatalog/commit/732dac24c1de62537732083a53c2218c2794773a) [#102](https://github.com/boyney123/eventcatalog/pull/102) Thanks [@boyney123](https://github.com/boyney123)! - feat: allow default frontmatter when creating events
+
+## 0.0.12
+
+### Patch Changes
+
+- [`dd1b29f`](https://github.com/boyney123/eventcatalog/commit/dd1b29f81658a3c5bea9ed92c1cf54265c7feb0b) [#98](https://github.com/boyney123/eventcatalog/pull/98) Thanks [@boyney123](https://github.com/boyney123)! - feat: adding more mermaid support in mdx
+
+## 0.0.11
+
+### Patch Changes
+
+- [`97e447a`](https://github.com/boyney123/eventcatalog/commit/97e447aa0ec255b2c879eac7fa83d7b705230790) [#95](https://github.com/boyney123/eventcatalog/pull/95) Thanks [@boyney123](https://github.com/boyney123)! - fix: edit url is now optional in not found pages and no longer fetche…
+
 ## 0.0.10
 
 ### Patch Changes

package/components/Grids/EventGrid.tsx

@@ -38,7 +38,7 @@ function EventGrid({ events = [], showMermaidDiagrams = false }: EventGridProps)
                 />
                 <div className="w-full border-t border-r border-b border-gray-200 bg-white rounded-r-md ">
                   <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
-                    <div className="text-gray-900 font-bold hover:text-gray-600">
+                    <div className="text-gray-900 font-bold hover:text-gray-600 break-all">
                       {event.name}
                       <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                         v{event.version}

package/components/Grids/ServiceGrid.tsx

@@ -4,14 +4,16 @@ import Link from 'next/link';
 import { CubeIcon } from '@heroicons/react/outline';
 
 import { Service } from '@eventcatalog/types';
+import Mermaid from '@/components/Mermaid';
 
 import getBackgroundColor from '@/utils/random-bg';
 
 interface ServiceGridProps {
   services: Service[];
+  showMermaidDiagrams?: boolean;
 }
 
-function ServiceGrid({ services = [] }: ServiceGridProps) {
+function ServiceGrid({ services = [], showMermaidDiagrams = false }: ServiceGridProps) {
   return (
     <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
       {services.map((service) => {
@@ -38,6 +40,11 @@ function ServiceGrid({ services = [] }: ServiceGridProps) {
                       )}
                       <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">{service.summary}</div>
                     </div>
+                    {showMermaidDiagrams && (
+                      <div className="h-full items-center flex">
+                        <Mermaid source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} />
+                      </div>
+                    )}
                     <div className="flex space-x-4 text-xs pt-2 relative bottom-0 left-0">
                       <div className=" font-medium text-gray-500">
                         <CubeIcon className="h-4 w-4 text-green-400 inline-block mr-2" aria-hidden="true" />

package/components/Mermaid/index.tsx

@@ -30,17 +30,30 @@ interface MermaidProps {
   data: Event | Service;
   source: 'event' | 'service';
   rootNodeColor?: string;
+  charts?: string[];
 }
 
-function Mermaid({ data, source = 'event', rootNodeColor }: MermaidProps) {
+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);
 
-  useEffect(() => {
-    mermaid.contentLoaded();
-  }, []);
   return <div className="mermaid">{mermaidChart}</div>;
 }
 

package/components/NotFound/index.tsx

@@ -1,17 +1,14 @@
 import { DocumentAddIcon } from '@heroicons/react/solid';
-import url from 'url';
 
 interface NotFoundProps {
   type: 'service' | 'event';
   name: string;
-  editUrl: string;
+  editUrl?: string;
 }
 
 export default function Example(props: NotFoundProps) {
   const { type, name, editUrl } = props;
 
-  const urlToAddPage = url.resolve(editUrl, `${type}/${name}`);
-
   return (
     <main className="min-h-full bg-cover bg-top sm:bg-top h-screen">
       <div className="max-w-7xl mx-auto px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8 lg:py-48">
@@ -19,21 +16,24 @@ export default function Example(props: NotFoundProps) {
           Failed to find {type}
         </p>
         <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">Missing Documentation</h1>
-        <p className="mt-2 text-lg font-medium text-gray-700 text-opacity-50">
-          Documentation for {type} <span className="underline">{name}</span> is missing!
+        <p className="mt-2 text-lg font-medium text-gray-700 text-opacity-50 text-center ">
+          Documentation for {type} is missing!
+          <span className="block font-bold text-gray-800 underline break-all max-w-2xl mx-auto py-4">{name}</span>
         </p>
         <p className="mt-4 text-xs text-gray-400">Help the eco-system and add the documentation for others ❤️ </p>
-        <div className="mt-12">
-          <a
-            href={urlToAddPage}
-            target="_blank"
-            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-black bg-opacity-75 "
-            rel="noreferrer"
-          >
-            <DocumentAddIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
-            Add <span className="underline px-1">{name}</span> documentation
-          </a>
-        </div>
+        {editUrl && (
+          <div className="mt-12">
+            <a
+              href={editUrl}
+              target="_blank"
+              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-black bg-opacity-75 "
+              rel="noreferrer"
+            >
+              <DocumentAddIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+              Add missing <span className="underline px-1">{type}</span> documentation
+            </a>
+          </div>
+        )}
       </div>
     </main>
   );

package/components/Sidebars/ServiceSidebar.tsx

@@ -42,13 +42,13 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
           </h2>
           <ul className="mt-2 leading-8">
             {publishes.map((event) => (
-              <li className="inline" key={event.name}>
+              <li className="inline " key={event.name}>
                 <Link href={`/events/${event.name}`}>
                   <a href="#" className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
                     <div className="absolute flex-shrink-0 flex items-center justify-center">
                       <span className="h-1.5 w-1.5 rounded-full bg-indigo-500 animate animate-pulse" aria-hidden="true" />
                     </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900">{event.name}</div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900 truncate max-w-xs">{event.name}</div>
                   </a>
                 </Link>
               </li>
@@ -70,7 +70,7 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
                     <div className="absolute flex-shrink-0 flex items-center justify-center">
                       <span className="h-1.5 w-1.5 rounded-full bg-green-500  animate animate-pulse" aria-hidden="true" />
                     </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900">{event.name}</div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900 truncate max-w-xs">{event.name}</div>
                   </a>
                 </Link>
               </li>

package/components/SyntaxHighlighter.tsx

@@ -23,7 +23,7 @@ function SyntaxHighlighter({ language, name = '', ...props }: any) {
       >
         {showCopied ? 'Copied' : 'Copy'}
       </button>
-      <PrismSyntaxHighlighter style={codeStyle} language={language} {...props} wrapLines>
+      <PrismSyntaxHighlighter style={codeStyle} language={language} {...props} wrapLines className="max-h-96 overflow-auto">
         {props.children.replace(regex, '\n')}
       </PrismSyntaxHighlighter>
       {name && <span className="-mb-2 block text-xs text-right font-bold">{name}</span>}

package/lib/graphs.ts

@@ -1,11 +1,15 @@
 import type { Event, Service } from '@eventcatalog/types';
 
+const MAX_LENGTH_FOR_NODES = '50';
+
+const truncateNode = (value) => (value.length > MAX_LENGTH_FOR_NODES ? `${value.substring(0, MAX_LENGTH_FOR_NODES)}...` : value);
+
 const buildMermaid = (centerNode, leftNodes, rightNodes, rootNodeColor) => {
   // mermaid does not work with spaces in nodes
   const removeSpacesInNames = (nodes) => nodes.map((node) => node.replace(/ /g, '_'));
-  const lNodes = removeSpacesInNames(leftNodes);
-  const rNodes = removeSpacesInNames(rightNodes);
-  const nodeValue = centerNode.replace(/ /g, '_');
+  const lNodes = removeSpacesInNames(leftNodes).map(truncateNode);
+  const rNodes = removeSpacesInNames(rightNodes).map(truncateNode);
+  const nodeValue = truncateNode(centerNode.replace(/ /g, '_'));
 
   return `flowchart LR
 ${lNodes.map((node) => `${node}:::producer-->${nodeValue}:::event\n`).join('')}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/core",
-  "version": "0.0.10",
+  "version": "0.0.14",
   "publishConfig": {
     "access": "public"
   },

package/pages/_app.tsx

@@ -12,6 +12,8 @@ export default ({ Component, pageProps }: AppProps) => (
       <script src="//unpkg.com/three" />
       <script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js" />
 
+      <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" />
+
       <meta
         name="description"
         content="An open source project to Discover, Explore and Document your Event Driven Architectures."

package/pages/events/[name].tsx

@@ -2,7 +2,6 @@ import Head from 'next/head';
 import { MDXRemote } from 'next-mdx-remote';
 
 import { Event } from '@eventcatalog/types';
-import { editUrl } from '../../eventcatalog.config';
 import Admonition from '@/components/Mdx/Admonition';
 import Examples from '@/components/Mdx/Examples';
 
@@ -57,10 +56,10 @@ export const getComponents = ({ event, schema, examples }: any) => ({
     );
     return null;
   },
-  Mermaid: ({ title }: { title: string }) => (
+  Mermaid: ({ title, charts }: { title: string; charts?: string[] }) => (
     <div className="mx-auto w-full py-10">
       {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
-      <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} />
+      <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} charts={charts} />
     </div>
   ),
 });
@@ -69,9 +68,11 @@ export default function Events(props: EventsPageProps) {
   const { event, markdown, loadedVersion, notFound } = props;
   const { getEditUrl, hasEditUrl } = useUrl();
 
-  if (notFound) return <NotFound type="event" name={event.name} editUrl={editUrl} />;
-
   const { name, summary, draft, schema, examples, version } = event;
+
+  if (notFound)
+    return <NotFound type="event" name={event.name} editUrl={hasEditUrl ? getEditUrl(`/events/${name}/index.md`) : ''} />;
+
   const { lastModifiedDate } = markdown;
 
   const pages = [

package/pages/events.tsx

@@ -2,8 +2,6 @@ import { Fragment, useState } from 'react';
 import Head from 'next/head';
 import type { Event, Service } from '@eventcatalog/types';
 
-import Link from 'next/link';
-
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/solid';
 import EventGrid from '@/components/Grids/EventGrid';
@@ -28,7 +26,7 @@ export default function Page({ events, services }: PageProps) {
   const filters = [
     {
       id: 'services',
-      name: 'Services',
+      name: 'Filter by Services',
       options: services.map((service) => ({
         value: service,
         label: service,
@@ -123,19 +121,8 @@ export default function Page({ events, services }: PageProps) {
           <div className="grid grid-cols-4 gap-x-8 gap-y-10">
             {/* Filters */}
             <form className="hidden lg:block">
-              <span className="text-sm font-bold text-gray-900 mb-4 block">Events</span>
-              <ul className=" text-sm text-gray-600 space-y-4 pb-6 border-b border-gray-200 items-stretch">
-                {events.map((event) => (
-                  <li key={event.name}>
-                    <Link href={`/events/${event.name}`}>
-                      <a>{event.name}</a>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-
               {filters.map((section: any) => (
-                <div key={section.id} className="border-b border-gray-200 py-6">
+                <div key={section.id} className="border-b border-gray-200 pb-6">
                   <h3 className="-my-3 flow-root">
                     <div className="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500">
                       <span className="font-medium text-gray-900">{section.name}</span>

package/pages/overview.tsx

@@ -12,15 +12,18 @@ function NodeElement({ node: { id } }: { node: { id: string } }) {
   return <div className={`text-sm text-center p-1 rounded-md `}>{id}</div>;
 }
 
+const MAX_LENGTH_FOR_NODES = 30;
+const truncateNode = (value) => (value.length > MAX_LENGTH_FOR_NODES ? `${value.substring(0, MAX_LENGTH_FOR_NODES)}...` : value);
+
 const graph = ({ events, services }) => {
-  const eventNodes = events.map(({ name: event }) => ({ id: event, group: 1, type: 'event' }));
-  const serviceNodes = services.map((service) => ({ id: service, group: 2, type: 'service' }));
+  const eventNodes = events.map(({ name: event }) => ({ id: truncateNode(event), group: 1, type: 'event' }));
+  const serviceNodes = services.map((service) => ({ id: truncateNode(service), group: 2, type: 'service' }));
 
   // Create all links
   const links = events.reduce((nodes, event) => {
     const { consumers = [], producers = [], name } = event;
-    const consumerNodes = consumers.map((consumer) => ({ source: name, target: consumer }));
-    const producerNodes = producers.map((producer) => ({ source: producer, target: name }));
+    const consumerNodes = consumers.map((consumer) => ({ source: truncateNode(name), target: truncateNode(consumer) }));
+    const producerNodes = producers.map((producer) => ({ source: truncateNode(producer), target: truncateNode(name) }));
     return nodes.concat(consumerNodes).concat(producerNodes);
   }, []);
 

package/pages/services/[name].tsx

@@ -1,7 +1,6 @@
 import Head from 'next/head';
 import { MDXRemote } from 'next-mdx-remote';
 import { Service } from '@eventcatalog/types';
-import { editUrl } from '../../eventcatalog.config.js';
 import ContentView from '@/components/ContentView';
 import { getAllServices, getServiceByName } from '@/lib/services';
 
@@ -21,25 +20,30 @@ interface ServicesPageProps {
   notFound?: boolean;
 }
 
-function MermaidComponent({ title, service }: { title: string; service: Service }) {
+function MermaidComponent({ title, service, charts }: { title: string; service: Service; charts?: string[] }) {
   return (
     <div className="mx-auto w-full py-10">
       {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
-      <Mermaid source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} />
+      <Mermaid source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} charts={charts} />
     </div>
   );
 }
 
 const getComponents = (service) => ({
   Admonition,
-  Mermaid: ({ title }: { title: string }) => <MermaidComponent service={service} title={title} />,
+  Mermaid: ({ title, charts }: { title: string; charts?: string[] }) => (
+    <MermaidComponent service={service} title={title} charts={charts} />
+  ),
 });
 
 export default function Services(props: ServicesPageProps) {
   const { service, markdown, notFound } = props;
   const { getEditUrl, hasEditUrl } = useUrl();
 
-  if (notFound) return <NotFound type="service" name={service.name} editUrl={editUrl} />;
+  if (notFound)
+    return (
+      <NotFound type="service" name={service.name} editUrl={hasEditUrl ? getEditUrl(`/services/${service.name}/index.md`) : ''} />
+    );
 
   const { name, summary, draft } = service;
   const { lastModifiedDate } = markdown;

package/pages/services.tsx

@@ -1,9 +1,7 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import Head from 'next/head';
 import { Service } from '@eventcatalog/types';
 
-import Link from 'next/link';
-
 import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/solid';
 import ServiceGrid from '@/components/Grids/ServiceGrid';
@@ -24,6 +22,8 @@ export interface PageProps {
 }
 
 export default function Page({ services }: PageProps) {
+  const [showMermaidDiagrams, setShowMermaidDiagrams] = useState(false);
+
   return (
     <>
       <Head>
@@ -83,22 +83,35 @@ export default function Page({ services }: PageProps) {
           <div className="grid grid-cols-4 gap-x-8 gap-y-10">
             {/* Filters */}
             <form className="hidden lg:block">
-              <span className="text-sm font-bold text-gray-900 mb-4 block">Services</span>
-              <ul className=" text-sm font-medium text-gray-900 space-y-4 pb-6 border-b border-gray-200 items-stretch">
-                {services.map((service) => (
-                  <li key={service.name}>
-                    <Link href={`/services/${service.name}`}>
-                      <a>{service.name}</a>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+              <div className="border-b border-gray-200 pb-6">
+                <h3 className="-my-3 flow-root">
+                  <div className="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500">
+                    <span className="font-medium text-gray-900">Features</span>
+                  </div>
+                </h3>
+                <div className="pt-6">
+                  <div className="space-y-4">
+                    <div className="flex items-center">
+                      <input
+                        id="show-mermaid"
+                        type="checkbox"
+                        onChange={(e) => setShowMermaidDiagrams(e.target.checked)}
+                        defaultChecked={showMermaidDiagrams}
+                        className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
+                      />
+                      <label htmlFor="show-mermaid" className="ml-3 text-sm text-gray-600">
+                        Show Mermaid Diagrams
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </form>
 
             <div className="col-span-4 lg:col-span-3">
               <div>
                 <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">Services</h2>
-                <ServiceGrid services={services} />
+                <ServiceGrid services={services} showMermaidDiagrams={showMermaidDiagrams} />
               </div>
             </div>
           </div>