@eventcatalog/core 0.0.9 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @eventcatalog/core
 
+## 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
+
+- [`df372c6`](https://github.com/boyney123/eventcatalog/commit/df372c675e76a4a5980740222ccf8268c0c71540) [#91](https://github.com/boyney123/eventcatalog/pull/91) Thanks [@boyney123](https://github.com/boyney123)! - feat: fix-generator
+
 ## 0.0.9
 
 ### Patch Changes

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">
@@ -23,17 +20,19 @@ export default function Example(props: NotFoundProps) {
           Documentation for {type} <span className="underline">{name}</span> is missing!
         </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 <span className="underline px-1">{name}</span> documentation
+            </a>
+          </div>
+        )}
       </div>
     </main>
   );

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/core",
-  "version": "0.0.9",
+  "version": "0.0.13",
   "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/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/scripts/generate.js

@@ -19,7 +19,7 @@ const generate = async () => {
   await Promise.all(plugins);
 };
 
-if (!process.env.NODE_ENV === 'test') {
+if (process.env.NODE_ENV !== 'test') {
   generate();
 }