@eventcatalog/core 0.0.4 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @eventcatalog/core
 
+## 0.0.8
+
+### Patch Changes
+
+- [`534bec1`](https://github.com/boyney123/eventcatalog/commit/534bec11f57bcabe7f79f40338ae02bef134efc2) [#78](https://github.com/boyney123/eventcatalog/pull/78) Thanks [@thim81](https://github.com/thim81)! - feat: externalLinks for services
+
+* [`b557ff8`](https://github.com/boyney123/eventcatalog/commit/b557ff8f7186b939cbe1e23f2c0e1e9a7254c907) [#79](https://github.com/boyney123/eventcatalog/pull/79) Thanks [@boyney123](https://github.com/boyney123)! - fix: adding keys on maps in react
+
+- [`407d9e0`](https://github.com/boyney123/eventcatalog/commit/407d9e0d7f8d5eab4747ce0af6d5079204b53d21) [#75](https://github.com/boyney123/eventcatalog/pull/75) Thanks [@thim81](https://github.com/thim81)! - feat: optional editUrl config
+
+* [`9eb7463`](https://github.com/boyney123/eventcatalog/commit/9eb7463b32baa09a6dd693e7f0eede63e33cd39c) [#71](https://github.com/boyney123/eventcatalog/pull/71) Thanks [@thim81](https://github.com/thim81)! - feat: link to external event documentation added
+
+## 0.0.7
+
+### Patch Changes
+
+- [`ee17db8`](https://github.com/boyney123/eventcatalog/commit/ee17db8958ac6368f7d833f0d3ebec2604722e42) [#56](https://github.com/boyney123/eventcatalog/pull/56) Thanks [@boyney123](https://github.com/boyney123)! - feat: changelog.md files now belong inside the versioned folders
+
+## 0.0.6
+
+### Patch Changes
+
+- [`ad66a66`](https://github.com/boyney123/eventcatalog/commit/ad66a66b526a167cc8da43dd2371642c9f9029f2) [#49](https://github.com/boyney123/eventcatalog/pull/49) Thanks [@boyney123](https://github.com/boyney123)! - fix: now supports any extension for event examples also added missing docs
+
+## 0.0.5
+
+### Patch Changes
+
+- [`576debd`](https://github.com/boyney123/eventcatalog/commit/576debdfc5dbc2fbbf98e2b3f4d78b84f9a07669) [#46](https://github.com/boyney123/eventcatalog/pull/46) Thanks [@boyney123](https://github.com/boyney123)! - fix: using cross-env to fix issues with windows OS
+
 ## 0.0.4
 
 ### Patch Changes

package/bin/eventcatalog.js

@@ -22,23 +22,18 @@ const copyCoreApplicationCodeIntoUsersProjectDir = () => {
   // remove any files we don't care about
   exclusions.map((path) => {
     try {
-      fs.lstatSync(path).isDirectory()
-        ? fs.rmSync(path, { recursive: true, force: true })
-        : fs.unlinkSync(path);
+      fs.lstatSync(path).isDirectory() ? fs.rmSync(path, { recursive: true, force: true }) : fs.unlinkSync(path);
     } catch (error) {}
   });
 
-  fs.copyFileSync(
-    path.join(projectDIR, 'eventcatalog.config.js'),
-    path.join(eventCatalogLibDir, 'eventcatalog.config.js')
-  );
+  fs.copyFileSync(path.join(projectDIR, 'eventcatalog.config.js'), path.join(eventCatalogLibDir, 'eventcatalog.config.js'));
 };
 
 cli
   .command('start [siteDir]')
   .description('Start the development server.')
   .action(() => {
-    execSync(`PROJECT_DIR=${projectDIR} npm run start`, {
+    execSync(`cross-env PROJECT_DIR=${projectDIR} npm run start`, {
       cwd: eventCatalogLibDir,
       stdio: 'inherit',
     });
@@ -56,7 +51,7 @@ cli
     fs.copySync(path.join(projectDIR, 'public'), path.join(eventCatalogLibDir, 'public'));
 
     // build using nextjs
-    execSync(`PROJECT_DIR=${projectDIR} npm run build`, {
+    execSync(`cross-env PROJECT_DIR=${projectDIR} npm run build`, {
       cwd: eventCatalogLibDir,
       stdio: 'inherit',
     });
@@ -77,12 +72,9 @@ cli
     // copy any public assets over (from users to the lib itself)
     fs.copySync(path.join(projectDIR, 'public'), path.join(eventCatalogLibDir, 'public'));
 
-    fs.copyFileSync(
-      path.join(projectDIR, 'eventcatalog.config.js'),
-      path.join(eventCatalogLibDir, 'eventcatalog.config.js')
-    );
+    fs.copyFileSync(path.join(projectDIR, 'eventcatalog.config.js'), path.join(eventCatalogLibDir, 'eventcatalog.config.js'));
 
-    execSync(`PROJECT_DIR=${projectDIR} npm run dev`, {
+    execSync(`cross-env PROJECT_DIR=${projectDIR} npm run dev`, {
       cwd: eventCatalogLibDir,
       stdio: 'inherit',
     });
@@ -98,12 +90,9 @@ cli
       copyCoreApplicationCodeIntoUsersProjectDir();
     }
 
-    fs.copyFileSync(
-      path.join(projectDIR, 'eventcatalog.config.js'),
-      path.join(eventCatalogLibDir, 'eventcatalog.config.js')
-    );
+    fs.copyFileSync(path.join(projectDIR, 'eventcatalog.config.js'), path.join(eventCatalogLibDir, 'eventcatalog.config.js'));
 
-    execSync(`PROJECT_DIR=${projectDIR} npm run generate`, {
+    execSync(`cross-env PROJECT_DIR=${projectDIR} npm run generate`, {
       cwd: eventCatalogLibDir,
       stdio: 'inherit',
     });

package/components/ContentView.tsx

@@ -39,9 +39,7 @@ export default function ContentView({
             <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 xl:max-w-7xl xl:grid xl:grid-cols-4">
               <div className="xl:col-span-3 xl:pr-8 xl:border-r xl:border-gray-200 flex-col justify-between flex">
                 <div>
-                  {BreadCrumbs && (
-                    <div className="mb-5 border-b border-gray-100 pb-4">{BreadCrumbs}</div>
-                  )}
+                  {BreadCrumbs && <div className="mb-5 border-b border-gray-100 pb-4">{BreadCrumbs}</div>}
                   <div>
                     <div>
                       <div className="xl:border-b pb-4 flex justify-between ">
@@ -70,36 +68,32 @@ export default function ContentView({
                               <>
                                 You are currently viewing an old version of this event ({version}).
                                 <Link href={latestVersionUrl}>
-                                  <a className="block text-sm pl-7 mt-2 text-blue-500 underline">
-                                    Read latest version &rarr;
-                                  </a>
+                                  <a className="block text-sm pl-7 mt-2 text-blue-500 underline">Read latest version &rarr;</a>
                                 </Link>
                               </>
                             </Admonition>
                           )}
                         </div>
                         <div className="mt-4 flex space-x-3 md:mt-0">
-                          <a
-                            href={editUrl}
-                            target="_blank"
-                            type="button"
-                            className="hidden md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
-                            rel="noreferrer"
-                          >
-                            <PencilIcon
-                              className="-ml-1 mr-2 h-5 w-5 text-gray-400"
-                              aria-hidden="true"
-                            />
-                            <span>Edit</span>
-                          </a>
+                          {editUrl && (
+                            <a
+                              href={editUrl}
+                              target="_blank"
+                              type="button"
+                              className="hidden md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+                              rel="noreferrer"
+                            >
+                              <PencilIcon className="-ml-1 mr-2 h-5 w-5 text-gray-400" aria-hidden="true" />
+                              <span>Edit</span>
+                            </a>
+                          )}
                         </div>
                       </div>
                       <div className="py-3 xl:pt-6 xl:pb-0">
                         {isDraft && (
                           <Admonition className="mt-0 pt-0" type="warning">
                             <>
-                              This event is currently in <span className="underline">draft</span>{' '}
-                              mode.
+                              This event is currently in <span className="underline">draft</span> mode.
                             </>
                           </Admonition>
                         )}
@@ -109,14 +103,13 @@ export default function ContentView({
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-between mt-10">
-                  <a href={editUrl} target="_blank" className="flex text-gray-400" rel="noreferrer">
-                    <PencilIcon
-                      className="top-1 mr-2 relative h-4 w-4 text-gray-400"
-                      aria-hidden="true"
-                    />
-                    <span>Edit this page</span>
-                  </a>
+                <div className={`flex mt-10 ${editUrl ? 'justify-between' : 'justify-end'}`}>
+                  {editUrl && (
+                    <a href={editUrl} target="_blank" className="flex text-gray-400" rel="noreferrer">
+                      <PencilIcon className="top-1 mr-2 relative h-4 w-4 text-gray-400" aria-hidden="true" />
+                      <span>Edit this page</span>
+                    </a>
+                  )}
                   <span className="italic text-xs mt-2">Last updated on {lastModifiedDate}</span>
                 </div>
               </div>

package/components/Grids/EventGrid.tsx

@@ -52,26 +52,16 @@ function EventGrid({ events = [], showMermaidDiagrams = false }: EventGridProps)
                     </div>
                     {showMermaidDiagrams && (
                       <div className="h-full items-center flex">
-                        <Mermaid
-                          source="event"
-                          data={event}
-                          rootNodeColor={getBackgroundColor(event.name)}
-                        />
+                        <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.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"
-                        />
+                        <CubeIcon className="h-4 w-4 text-green-400 inline-block mr-2" aria-hidden="true" />
                         Producers ({event.producers.length})
                       </div>
                       <div className=" font-medium text-gray-500">
-                        <CubeIcon
-                          className="h-4 w-4 text-indigo-400 inline-block mr-2"
-                          aria-hidden="true"
-                        />
+                        <CubeIcon className="h-4 w-4 text-indigo-400 inline-block mr-2" aria-hidden="true" />
                         Subscribers ({event.consumers.length})
                       </div>
                     </div>

package/components/Grids/ServiceGrid.tsx

@@ -36,23 +36,15 @@ function ServiceGrid({ services = [] }: ServiceGridProps) {
                           Draft
                         </span>
                       )}
-                      <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">
-                        {service.summary}
-                      </div>
+                      <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">{service.summary}</div>
                     </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"
-                        />
+                        <CubeIcon className="h-4 w-4 text-green-400 inline-block mr-2" aria-hidden="true" />
                         Subscribe Events ({service.subscribes.length})
                       </div>
                       <div className=" font-medium text-gray-500">
-                        <CubeIcon
-                          className="h-4 w-4 text-indigo-400 inline-block mr-2"
-                          aria-hidden="true"
-                        />
+                        <CubeIcon className="h-4 w-4 text-indigo-400 inline-block mr-2" aria-hidden="true" />
                         Publish Events ({service.publishes.length})
                       </div>
                     </div>

package/components/Header.tsx

@@ -38,9 +38,7 @@ export default function Example() {
                   <Link key={item.name} href={item.href}>
                     <a
                       className={classNames(
-                        current
-                          ? 'bg-gray-900 text-white'
-                          : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                        current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                         'px-3 py-2 rounded-md text-sm font-medium'
                       )}
                       aria-current={current ? 'page' : undefined}

package/components/Mdx/Admonition.tsx

@@ -17,7 +17,7 @@ interface AdmonitionProps {
   className?: string;
 }
 
-export default function Admonition({ children, type, className }: AdmonitionProps) {
+export default function Admonition({ children, type, className = '' }: AdmonitionProps) {
   const { color, icon: Icon } = getConfigurationByType(type);
 
   return (

package/components/Mdx/Examples.tsx

@@ -12,12 +12,7 @@ interface ExampleProps {
   showLineNumbers?: boolean;
 }
 
-function Examples({
-  title = 'Examples',
-  description,
-  examples = [],
-  showLineNumbers,
-}: ExampleProps) {
+function Examples({ title = 'Examples', description, examples = [], showLineNumbers }: ExampleProps) {
   const tabs = examples.map((example, index) => ({
     name: example.name || `Example ${index + 1}`,
     content: example.snippet,
@@ -64,9 +59,7 @@ function Examples({
             <SyntaxHighlighter language={selectedTab.langugage} showLineNumbers={showLineNumbers}>
               {selectedTab.content}
             </SyntaxHighlighter>
-            {selectedTab.langugage && (
-              <span className="-mb-2 block text-xs text-right font-bold">{selectedTab.name}</span>
-            )}
+            {selectedTab.langugage && <span className="-mb-2 block text-xs text-right font-bold">{selectedTab.name}</span>}
           </div>
         </div>
       </div>

package/components/NotFound/index.tsx

@@ -18,15 +18,11 @@ export default function Example(props: NotFoundProps) {
         <p className="text-sm font-semibold text-gray-700 text-opacity-50 uppercase tracking-wide blur-xl">
           Failed to find {type}
         </p>
-        <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
-          Missing Documentation
-        </h1>
+        <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>
-        <p className="mt-4 text-xs text-gray-400">
-          Help the eco-system and add the documentation for others ❤️{' '}
-        </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}

package/components/Sidebars/EventSidebar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
-import { CubeIcon, DownloadIcon } from '@heroicons/react/outline';
+import { CubeIcon, DownloadIcon, ExternalLinkIcon } from '@heroicons/react/outline';
 import type { Event } from '@eventcatalog/types';
 import fileDownload from 'js-file-download';
 import { useUser } from '@/hooks/EventCatalog';
@@ -13,7 +13,7 @@ interface EventSideBarProps {
 function EventSideBar({ event, loadedVersion }: EventSideBarProps) {
   const { getUserById } = useUser();
 
-  const { name: eventName, owners, producers, consumers, historicVersions } = event;
+  const { name: eventName, owners, producers, consumers, historicVersions, externalLinks } = event;
 
   const handleDownload = async () => {
     try {
@@ -43,10 +43,7 @@ function EventSideBar({ event, loadedVersion }: EventSideBarProps) {
                 <Link href={`/services/${producer}`}>
                   <a 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-green-500 animate animate-pulse"
-                        aria-hidden="true"
-                      />
+                      <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">{producer}</div>
                   </a>
@@ -66,15 +63,9 @@ function EventSideBar({ event, loadedVersion }: EventSideBarProps) {
             {consumers.map((consumer) => (
               <li className="inline" key={consumer}>
                 <Link href={`/services/${consumer}`}>
-                  <a
-                    href="#"
-                    className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5"
-                  >
+                  <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"
-                      />
+                      <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">{consumer}</div>
                   </a>
@@ -111,7 +102,7 @@ function EventSideBar({ event, loadedVersion }: EventSideBarProps) {
                   ? 'bg-blue-400 text-white shadow-md font-bold underline'
                   : 'bg-blue-100 text-blue-800';
                 return (
-                  <li className="text-sm inline ">
+                  <li className="text-sm inline" key={version}>
                     <Link href={`/events/${eventName}/v/${version}`}>
                       <a>
                         <span
@@ -194,6 +185,20 @@ function EventSideBar({ event, loadedVersion }: EventSideBarProps) {
             </a>
           </Link>
         )}
+        {externalLinks.length > 0 &&
+          externalLinks.map((tag) => (
+            <a
+              href={tag.url}
+              target="_blank"
+              type="button"
+              className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-teal-300 shadow-sm text-sm font-medium rounded-md text-teal-800 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-200"
+              rel="noreferrer"
+              key={tag.url}
+            >
+              <ExternalLinkIcon className="-ml-1 mr-2 h-5 w-5 text-teal-200" aria-hidden="true" />
+              <span>{`${tag.label}`}</span>
+            </a>
+          ))}
       </div>
     </aside>
   );

package/components/Sidebars/ServiceSidebar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import type { Service } from '@eventcatalog/types';
 
-import { CubeIcon, TagIcon } from '@heroicons/react/outline';
+import { CubeIcon, TagIcon, ExternalLinkIcon } from '@heroicons/react/outline';
 import { useUser } from '@/hooks/EventCatalog';
 import getBackgroundColor from '@/utils/random-bg';
 
@@ -15,7 +15,7 @@ interface ServiceSideBarProps {
 function ServiceSidebar({ service }: ServiceSideBarProps) {
   const { getUserById } = useUser();
 
-  const { owners, subscribes, publishes, repository, tags = [] } = service;
+  const { owners, subscribes, publishes, repository, tags = [], externalLinks } = service;
   const { language, url: repositoryUrl } = repository;
 
   let languages = [];
@@ -44,15 +44,9 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
             {publishes.map((event) => (
               <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"
-                  >
+                  <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"
-                      />
+                      <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>
                   </a>
@@ -74,10 +68,7 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
                 <Link href={`/events/${event.name}`}>
                   <a 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-green-500  animate animate-pulse"
-                        aria-hidden="true"
-                      />
+                      <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>
                   </a>
@@ -137,13 +128,9 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
           <div className="space-y-3">
             <h2 className="text-sm font-medium text-gray-500">Language</h2>
             {languages.map((value) => (
-              <div className="relative flex items-center mt-2">
+              <div className="relative flex items-center mt-2" key={value}>
                 <div className="absolute flex-shrink-0 flex items-center justify-center">
-                  <span
-                    className="h-2 w-2 rounded-full"
-                    aria-hidden="true"
-                    style={{ background: getBackgroundColor(value) }}
-                  />
+                  <span className="h-2 w-2 rounded-full" aria-hidden="true" style={{ background: getBackgroundColor(value) }} />
                 </div>
                 <div className="ml-3.5 text-sm font-medium text-gray-900">{value}</div>
               </div>
@@ -151,6 +138,25 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
           </div>
         </div>
       )}
+      {externalLinks.length > 0 && (
+        <div className="border-t border-gray-200 py-6 space-y-8">
+          <div className="space-y-3">
+            {externalLinks.map((tag) => (
+              <a
+                href={tag.url}
+                target="_blank"
+                type="button"
+                className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-teal-300 shadow-sm text-sm font-medium rounded-md text-teal-800 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-200"
+                rel="noreferrer"
+                key={tag.url}
+              >
+                <ExternalLinkIcon className="-ml-1 mr-2 h-5 w-5 text-teal-200" aria-hidden="true" />
+                <span>{`${tag.label}`}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
       {tags.length > 0 && (
         <div className="border-t border-gray-200 py-6 space-y-8">
           <div>
@@ -164,12 +170,7 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
 
                 if (url) {
                   return (
-                    <a
-                      href={url}
-                      className="inline-block underline"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
+                    <a href={url} className="inline-block underline" target="_blank" rel="noreferrer">
                       <span
                         className={`underline inline-block mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-${color}-100 text-${color}-800`}
                       >

package/eventcatalog.config.js

@@ -0,0 +1,40 @@
+module.exports = {
+  title: 'EventCatalog',
+  tagline: 'Discover, Explore and Document your Event Driven Architectures',
+  organizationName: 'Your Company',
+  editUrl: 'https://github.com/boyney123/eventcatalog-demo/edit/master',
+  logo: {
+    alt: 'EventCatalog Logo',
+    src: 'logo.svg',
+  },
+  footerLinks: [
+    { label: 'Events', href: '/events' },
+    { label: 'Services', href: '/services' },
+    { label: '3D Node Graph', href: '/overview' },
+    { label: 'GitHub', href: 'https://github.com/boyney123/eventcatalog-demo/edit/master' }
+  ],
+  generators: [
+    [
+      '@eventcatalog/plugin-doc-generator-asyncapi',
+      {
+        file: './asyncapi.yml',
+      },
+    ]
+  ],
+  users: [
+    {
+      id: 'dboyne',
+      name: 'David Boyne',
+      avatarUrl: 'https://pbs.twimg.com/profile_images/1262283153563140096/DYRDqKg6_400x400.png',
+      role: 'Developer',
+      summary: 'Currently building tools for Event Architectures.'
+    },
+    {
+      id: 'mSmith',
+      name: 'Matthew Smith',
+      avatarUrl: 'https://randomuser.me/api/portraits/lego/3.jpg',
+      role: 'Developer',
+      summary: 'About Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat.'
+    },
+  ],
+}

package/hooks/EventCatalog.tsx

@@ -26,10 +26,10 @@ export const useUser = () => {
 
 export const useUrl = () => {
   const config = useConfig();
-
   const getEditUrl = (url: string) => path.join(config.editUrl, url);
 
   return {
     getEditUrl,
+    hasEditUrl: !!config.editUrl,
   };
 };

package/lib/__tests__/assets/services/Basket Service/index.md

@@ -0,0 +1,19 @@
+---
+name: Basket Service
+summary: |
+  CRUD based API to handle Basket interactions for users of the shopping website.
+owners:
+    - mSmith
+repository:
+  language: JavaScript
+  url: https://github.com/boyney123/pretend-basket-service
+externalLinks:
+    - label: AsyncAPI Specification
+      url: https://studio.asyncapi.com/#schema-lightMeasuredPayload
+---
+
+Simple API that handles interactions between users and their baskets. Use this service to add, remove and query the status of a users basket.
+
+This service will also generate Async events for downstream services.
+
+<Mermaid />