@eventcatalog/core 0.0.7 → 0.0.11

package/lib/__tests__/events.spec.ts

@@ -27,12 +27,12 @@ describe('events lib', () => {
       expect(event).toEqual({
         name: 'AddedItemToCart',
         version: '0.0.1',
-        summary:
-          'Holds information about the cusomer and product when they add an item to the cart.\n',
+        summary: 'Holds information about the cusomer and product when they add an item to the cart.\n',
         producers: ['Shopping API', 'Application API'],
         consumers: ['Customer Portal'],
         owners: ['dboyne', 'mSmith'],
         historicVersions: [],
+        externalLinks: [],
         schema: null,
         examples: [],
       });
@@ -68,23 +68,11 @@ describe('events lib', () => {
       const example2 = event.examples[1];
 
       const example1File = fs.readFileSync(
-        path.join(
-          process.env.PROJECT_DIR,
-          'events',
-          'EventWithSchemaAndExamples',
-          'examples',
-          'Basic.cs'
-        ),
+        path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples', 'examples', 'Basic.cs'),
         { encoding: 'utf-8' }
       );
       const example2File = fs.readFileSync(
-        path.join(
-          process.env.PROJECT_DIR,
-          'events',
-          'EventWithSchemaAndExamples',
-          'examples',
-          'Basic.js'
-        ),
+        path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples', 'examples', 'Basic.js'),
         { encoding: 'utf-8' }
       );
 
@@ -118,11 +106,11 @@ describe('events lib', () => {
         {
           name: 'AddedItemToCart',
           version: '0.0.1',
-          summary:
-            'Holds information about the cusomer and product when they add an item to the cart.\n',
+          summary: 'Holds information about the cusomer and product when they add an item to the cart.\n',
           producers: ['Shopping API', 'Application API'],
           consumers: ['Customer Portal'],
           historicVersions: [],
+          externalLinks: [],
           owners: ['dboyne', 'mSmith'],
         },
         {
@@ -131,6 +119,7 @@ describe('events lib', () => {
           summary: 'Tells us when an email has been sent\n',
           producers: ['Email Platform'],
           historicVersions: [],
+          externalLinks: [],
           consumers: [],
           owners: ['dboyne', 'mSmith'],
         },
@@ -139,6 +128,7 @@ describe('events lib', () => {
           version: '0.0.1',
           summary: 'Example event with schema and examples\n',
           historicVersions: [],
+          externalLinks: [],
           producers: [],
           consumers: [],
           owners: [],
@@ -149,6 +139,7 @@ describe('events lib', () => {
           summary: 'Tells us when an email has been sent\n',
           historicVersions: ['0.0.1'],
           producers: [],
+          externalLinks: [],
           consumers: [],
           owners: [],
         },
@@ -206,12 +197,12 @@ describe('events lib', () => {
         {
           name: 'AddedItemToCart',
           version: '0.0.1',
-          summary:
-            'Holds information about the cusomer and product when they add an item to the cart.\n',
+          summary: 'Holds information about the cusomer and product when they add an item to the cart.\n',
           producers: ['Shopping API', 'Application API'],
           consumers: ['Customer Portal'],
-          historicVersions: [],
           owners: ['dboyne', 'mSmith'],
+          historicVersions: [],
+          externalLinks: [],
         },
         {
           name: 'EmailSent',
@@ -220,6 +211,7 @@ describe('events lib', () => {
           producers: ['Email Platform'],
           consumers: [],
           historicVersions: [],
+          externalLinks: [],
           owners: ['dboyne', 'mSmith'],
         },
       ]);
@@ -232,8 +224,7 @@ describe('events lib', () => {
         {
           name: 'AddedItemToCart',
           version: '0.0.1',
-          summary:
-            'Holds information about the cusomer and product when they add an item to the cart.\n',
+          summary: 'Holds information about the cusomer and product when they add an item to the cart.\n',
           producers: ['Shopping API', 'My Service'],
           consumers: ['Customer Portal'],
           historicVersions: [],
@@ -254,8 +245,7 @@ describe('events lib', () => {
           {
             name: 'AddedItemToCart',
             version: '0.0.1',
-            summary:
-              'Holds information about the cusomer and product when they add an item to the cart.\n',
+            summary: 'Holds information about the cusomer and product when they add an item to the cart.\n',
             producers: ['Shopping API', 'My Service'],
             consumers: ['Customer Portal'],
             historicVersions: [],
@@ -271,8 +261,7 @@ describe('events lib', () => {
         {
           name: 'AddedItemToCart',
           version: '0.0.1',
-          summary:
-            'Holds information about the cusomer and product when they add an item to the cart.\n',
+          summary: 'Holds information about the cusomer and product when they add an item to the cart.\n',
           producers: ['Shopping API', 'Service'],
           consumers: ['Customer Portal'],
           historicVersions: [],

package/lib/__tests__/file-reader.spec.ts

@@ -21,9 +21,7 @@ describe('file-reader lib', () => {
         { encoding: 'utf-8' }
       );
 
-      const result = getSchemaFromDir(
-        path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples')
-      );
+      const result = getSchemaFromDir(path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples'));
 
       expect(result.snippet).toEqual(rawSchemaFile);
       expect(result.language).toEqual('json');
@@ -42,14 +40,10 @@ describe('file-reader lib', () => {
         path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples', 'schema.json')
       );
 
-      const stats = fs.statSync(
-        path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples', 'schema.json')
-      );
+      const stats = fs.statSync(path.join(process.env.PROJECT_DIR, 'events', 'EventWithSchemaAndExamples', 'schema.json'));
 
       const fileData = new Date(stats.mtime);
-      const expectedResult = `${fileData.getFullYear()}/${
-        fileData.getMonth() + 1
-      }/${fileData.getDate()}`;
+      const expectedResult = `${fileData.getFullYear()}/${fileData.getMonth() + 1}/${fileData.getDate()}`;
 
       expect(result).toEqual(expectedResult);
     });

package/lib/__tests__/services.spec.ts

@@ -18,10 +18,27 @@ describe('services', () => {
       const services = await getAllServices();
 
       expect(services).toEqual([
+        {
+          externalLinks: [
+            {
+              label: 'AsyncAPI Specification',
+              url: 'https://studio.asyncapi.com/#schema-lightMeasuredPayload',
+            },
+          ],
+          name: 'Basket Service',
+          owners: ['mSmith'],
+          publishes: [],
+          repository: {
+            language: 'JavaScript',
+            url: 'https://github.com/boyney123/pretend-basket-service',
+          },
+          subscribes: [],
+          summary: 'CRUD based API to handle Basket interactions for users of the shopping website.\n',
+          tags: [],
+        },
         {
           name: 'Email Platform',
-          summary:
-            'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
+          summary: 'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
           owners: ['dboyne'],
           repository: {
             url: 'https://github.com/boyney123/EmailPlatform',
@@ -43,11 +60,13 @@ describe('services', () => {
               summary: 'Tells us when an email has been sent\n',
               producers: ['Email Platform'],
               consumers: [],
+              externalLinks: [],
               historicVersions: [],
               owners: ['dboyne', 'mSmith'],
             },
           ],
           subscribes: [],
+          externalLinks: [],
         },
       ]);
     });
@@ -65,8 +84,7 @@ describe('services', () => {
       expect(services).toEqual([
         {
           name: 'Email Platform',
-          summary:
-            'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
+          summary: 'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
           owners: ['dboyne'],
           repository: {
             url: 'https://github.com/boyney123/EmailPlatform',
@@ -89,10 +107,12 @@ describe('services', () => {
               producers: ['Email Platform'],
               consumers: [],
               historicVersions: [],
+              externalLinks: [],
               owners: ['dboyne', 'mSmith'],
             },
           ],
           subscribes: [],
+          externalLinks: [],
         },
       ]);
     });
@@ -104,8 +124,7 @@ describe('services', () => {
 
       expect(service).toEqual({
         name: 'Email Platform',
-        summary:
-          'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
+        summary: 'Internal Email system. Used to send emails to 1000s of customers. Hosted in AWS\n',
         owners: ['dboyne'],
         repository: {
           url: 'https://github.com/boyney123/EmailPlatform',
@@ -128,10 +147,12 @@ describe('services', () => {
             producers: ['Email Platform'],
             consumers: [],
             historicVersions: [],
+            externalLinks: [],
             owners: ['dboyne', 'mSmith'],
           },
         ],
         subscribes: [],
+        externalLinks: [],
       });
 
       // @ts-ignore

package/lib/events.ts

@@ -11,8 +11,8 @@ import { extentionToLanguageMap } from './file-reader';
 import { getLastModifiedDateOfFile, getSchemaFromDir, readMarkdownFile } from '@/lib/file-reader';
 
 const parseEventFrontMatterIntoEvent = (eventFrontMatter: any): Event => {
-  const { name, version, summary, producers = [], consumers = [], owners = [] } = eventFrontMatter;
-  return { name, version, summary, producers, consumers, owners };
+  const { name, version, summary, producers = [], consumers = [], owners = [], externalLinks = [] } = eventFrontMatter;
+  return { name, version, summary, producers, consumers, owners, externalLinks };
 };
 
 const versionsForEvents = (pathToEvent) => {
@@ -36,9 +36,7 @@ export const getLogsForEvent = (eventName) => {
   }));
 
   // Get the latest version
-  const { data: { version: latestVersion } = {} } = readMarkdownFile(
-    path.join(eventsDir, eventName, 'index.md')
-  );
+  const { data: { version: latestVersion } = {} } = readMarkdownFile(path.join(eventsDir, eventName, 'index.md'));
 
   // Add the current version to the list
   allVersions.unshift({ version: latestVersion, pathToDir: path.join(eventsDir, eventName) });
@@ -143,10 +141,7 @@ export const getAllEvents = (): Event[] => {
   });
 };
 
-export const getEventByName = async (
-  eventName: string,
-  version?: string
-): Promise<{ event: Event; markdown: MarkdownFile }> => {
+export const getEventByName = async (eventName: string, version?: string): Promise<{ event: Event; markdown: MarkdownFile }> => {
   const eventsDir = path.join(process.env.PROJECT_DIR, 'events');
   const eventDirectory = path.join(eventsDir, eventName);
   let versionDirectory = null;

package/lib/file-reader.ts

@@ -46,7 +46,5 @@ export const getSchemaFromDir = (pathToSchemaDir: string): Schema => {
 export const getLastModifiedDateOfFile = (filePath) => {
   const stats = fs.statSync(filePath);
   const lastModifiedDate = new Date(stats.mtime);
-  return `${lastModifiedDate.getFullYear()}/${
-    lastModifiedDate.getMonth() + 1
-  }/${lastModifiedDate.getDate()}`;
+  return `${lastModifiedDate.getFullYear()}/${lastModifiedDate.getMonth() + 1}/${lastModifiedDate.getDate()}`;
 };

package/lib/graphs.ts

@@ -16,10 +16,8 @@ ${rNodes.map((node) => `${nodeValue}:::event-->${node}:::consumer\n`).join('')}
   `;
 };
 
-export const buildMermaidFlowChartForEvent = (
-  { name: eventName, producers, consumers }: Event,
-  rootNodeColor = '#2563eb'
-) => buildMermaid(eventName, producers, consumers, rootNodeColor);
+export const buildMermaidFlowChartForEvent = ({ name: eventName, producers, consumers }: Event, rootNodeColor = '#2563eb') =>
+  buildMermaid(eventName, producers, consumers, rootNodeColor);
 
 export const buildMermaidFlowChartForService = (
   { publishes, subscribes, name: serviceName }: Service,

package/lib/services.ts

@@ -8,17 +8,15 @@ import { MarkdownFile } from '../types/index';
 import { getAllEvents, getAllEventsThatHaveRelationshipWithService } from '@/lib/events';
 
 const buildService = (eventFrontMatter: any): Service => {
-  const { name, summary, owners = [], repository = {}, tags = [] } = eventFrontMatter;
-  return { name, summary, owners, repository, tags };
+  const { name, summary, owners = [], repository = {}, tags = [], externalLinks = [] } = eventFrontMatter;
+  return { name, summary, owners, repository, tags, externalLinks };
 };
 
 export const getAllServices = (): Service[] => {
   const servicesDir = path.join(process.env.PROJECT_DIR, 'services');
 
   const folders = fs.readdirSync(servicesDir);
-  const services = folders.map((folder) =>
-    readMarkdownFile(path.join(servicesDir, folder, 'index.md'))
-  );
+  const services = folders.map((folder) => readMarkdownFile(path.join(servicesDir, folder, 'index.md')));
   const events = getAllEvents();
 
   const parsedServices = services.map((frontMatter) => buildService(frontMatter.data));
@@ -32,17 +30,13 @@ export const getAllServices = (): Service[] => {
 
 export const getAllServicesByOwnerId = async (ownerId): Promise<Service[]> => {
   const services = await getAllServices();
-  const servicesOwnedByUser = services.filter((service) =>
-    service.owners.some((id) => id === ownerId)
-  );
+  const servicesOwnedByUser = services.filter((service) => service.owners.some((id) => id === ownerId));
   return servicesOwnedByUser.map((service) => ({
     ...service,
   }));
 };
 
-export const getServiceByName = async (
-  serviceName
-): Promise<{ service: Service; markdown: MarkdownFile }> => {
+export const getServiceByName = async (serviceName): Promise<{ service: Service; markdown: MarkdownFile }> => {
   try {
     const servicesDir = path.join(process.env.PROJECT_DIR, 'services');
     const serviceDirectory = path.join(servicesDir, serviceName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/core",
-  "version": "0.0.7",
+  "version": "0.0.11",
   "publishConfig": {
     "access": "public"
   },
@@ -37,7 +37,7 @@
     "react-syntax-highlighter": "^15.4.5"
   },
   "devDependencies": {
-    "@eventcatalog/types": "0.0.2",
+    "@eventcatalog/types": "0.0.3",
     "@types/react": "^17.0.36",
     "autoprefixer": "^10.4.0",
     "commander": "^8.3.0",

package/pages/_app.tsx

@@ -18,29 +18,20 @@ export default ({ Component, pageProps }: AppProps) => (
       />
       <meta property="og:url" content="https://eventcatalog.dev/" />
       <meta property="og:type" content="website" />
-      <meta
-        property="og:title"
-        content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."
-      />
+      <meta property="og:title" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures." />
       <meta
         property="og:description"
         content="An open source tool powered by markdown to document your Event Driven Architecture."
       />
       <meta property="og:image" content="https://eventcatalog.dev/img/opengraph.png" />
-      <meta
-        property="og:image:alt"
-        content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."
-      />
+      <meta property="og:image:alt" content="EventCatalog | Discover, Explore and Document your Event Driven Architectures." />
       <meta property="og:image:width" content="1200" />
       <meta property="og:image:height" content="600" />
       <meta property="og:locale" content="en-GB" />
       <meta name="author" content="David Boyne" />
 
       {/* Need to load this before any of the Html2Diff Code */}
-      <link
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"
-      />
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css" />
     </Head>
     <Header />
     <Component {...pageProps} />

package/pages/events/[name]/logs.tsx

@@ -59,17 +59,13 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
                   <BreadCrumbs pages={pages} />
                 </div>
                 <div>
-                  <div>
-                    <div className="border-b pb-4 flex justify-between mb-4">
-                      <div className="space-y-2 w-full">
-                        <h1 className="text-3xl font-bold text-gray-900 relative">EmailSent</h1>
-                      </div>
+                  <div className="border-b pb-4 flex justify-between mb-4">
+                    <div className="space-y-2 w-full">
+                      <h1 className="text-3xl font-bold text-gray-900 relative">{eventName}</h1>
                     </div>
                   </div>
 
-                  {changes.length === 0 && (
-                    <div className="text-gray-400 text-xl">No versions for Event found.</div>
-                  )}
+                  {changes.length === 0 && <div className="text-gray-400 text-xl">No versions for Event found.</div>}
 
                   <div className="flow-root mb-20">
                     <ul className="">
@@ -77,10 +73,7 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
                         <li key={eventIdx} className="">
                           <div className="relative pb-8">
                             {eventIdx !== changes.length - 1 ? (
-                              <span
-                                className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-100"
-                                aria-hidden="true"
-                              />
+                              <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-100" aria-hidden="true" />
                             ) : null}
                             <div className="relative flex space-x-3">
                               <div>
@@ -99,9 +92,7 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
                                     Schema version update
                                     {event.versions.map((version, index) => {
                                       const linkHref =
-                                        version === currentVersion
-                                          ? `/events/${eventName}`
-                                          : `/events/${eventName}/v/${version}`;
+                                        version === currentVersion ? `/events/${eventName}` : `/events/${eventName}/v/${version}`;
                                       return (
                                         <Link key={version} href={linkHref}>
                                           <a className="font-medium">
@@ -127,9 +118,7 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
                                     </>
                                   )}
                                   {!event.changelog.source && (
-                                    <h2 className="text-base text-gray-300 font-bold mt-4">
-                                      No changelog file found.
-                                    </h2>
+                                    <h2 className="text-base text-gray-300 font-bold mt-4">No changelog file found.</h2>
                                   )}
                                 </div>
                                 <div className="text-right text-sm text-gray-500 py-4">

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';
 
@@ -31,11 +30,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
   code: ({ className, ...props }) => {
     const match = /language-(\w+)/.exec(className || '');
 
-    return match ? (
-      <SyntaxHighlighter language={match[1]} {...props} />
-    ) : (
-      <code className={className} {...props} />
-    );
+    return match ? <SyntaxHighlighter language={match[1]} {...props} /> : <code className={className} {...props} />;
   },
   Schema: ({ title = 'Event Schema' }: { title: string }) => {
     if (!schema) return null;
@@ -45,11 +40,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
         <h2 id="activity-title" className="text-lg font-medium text-gray-900 underline">
           {title}
         </h2>
-        <SyntaxHighlighter
-          language={schema.language}
-          showLineNumbers={false}
-          name={`${event.name} Schema (${schema.language})`}
-        >
+        <SyntaxHighlighter language={schema.language} showLineNumbers={false} name={`${event.name} Schema (${schema.language})`}>
           {schema.snippet}
         </SyntaxHighlighter>
       </section>
@@ -75,11 +66,13 @@ export const getComponents = ({ event, schema, examples }: any) => ({
 
 export default function Events(props: EventsPageProps) {
   const { event, markdown, loadedVersion, notFound } = props;
-  const { getEditUrl } = useUrl();
-
-  if (notFound) return <NotFound type="event" name={event.name} editUrl={editUrl} />;
+  const { getEditUrl, hasEditUrl } = useUrl();
 
   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 = [
@@ -97,9 +90,8 @@ export default function Events(props: EventsPageProps) {
         </title>
       </Head>
       <ContentView
-        // {...props}
         title={name}
-        editUrl={getEditUrl(`/events/${name}/index.md`)}
+        editUrl={hasEditUrl ? getEditUrl(`/events/${name}/index.md`) : ''}
         subtitle={summary}
         draft={draft}
         lastModifiedDate={lastModifiedDate}

package/pages/events.tsx

@@ -57,12 +57,8 @@ export default function Page({ events, services }: PageProps) {
     eventsToRender = eventsToRender.filter((event) => {
       const { services: serviceFilters } = selectedFilters;
 
-      const hasConsumersFromFilters = event.consumers.some(
-        (consumerId) => serviceFilters.indexOf(consumerId) > -1
-      );
-      const hasProducersFromFilters = event.producers.some(
-        (producerId) => serviceFilters.indexOf(producerId) > -1
-      );
+      const hasConsumersFromFilters = event.consumers.some((consumerId) => serviceFilters.indexOf(consumerId) > -1);
+      const hasProducersFromFilters = event.producers.some((producerId) => serviceFilters.indexOf(producerId) > -1);
 
       return hasConsumersFromFilters || hasProducersFromFilters;
     });
@@ -75,9 +71,7 @@ export default function Page({ events, services }: PageProps) {
       </Head>
       <main className="max-w-7xl mx-auto min-h-screen px-4 md:px-0">
         <div className="relative z-10 flex items-baseline justify-between pt-8 pb-6 border-b border-gray-200">
-          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">
-            Events ({events.length})
-          </h1>
+          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">Events ({events.length})</h1>
 
           <div className="flex items-center">
             <Menu as="div" className="hidden relative text-left">
@@ -160,10 +154,7 @@ export default function Page({ events, services }: PageProps) {
                             defaultChecked={option.checked}
                             className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
                           />
-                          <label
-                            htmlFor={`filter-${section.id}-${optionIdx}`}
-                            className="ml-3 text-sm text-gray-600"
-                          >
+                          <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
                             {option.label}
                           </label>
                         </div>
@@ -200,9 +191,7 @@ export default function Page({ events, services }: PageProps) {
 
             <div className="col-span-4 lg:col-span-3">
               <div>
-                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
-                  Events ({eventsToRender.length})
-                </h2>
+                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">Events ({eventsToRender.length})</h2>
                 <EventGrid events={eventsToRender} showMermaidDiagrams={showMermaidDiagrams} />
               </div>
             </div>

package/pages/index.tsx

@@ -11,15 +11,8 @@ export default function Example() {
   return (
     <main className="sm:bg-top md:min-h-screen bg-gradient-to-t from-blue-700  to-gray-800">
       <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">
-        <img
-          src={logoToLoad.src}
-          alt={logoToLoad.alt}
-          style={{ height: '85px' }}
-          className="mx-auto"
-        />
-        <h1 className="mt-2 text-4xl font-extrabold text-white tracking-tight sm:text-5xl">
-          {title}
-        </h1>
+        <img src={logoToLoad.src} alt={logoToLoad.alt} style={{ height: '85px' }} className="mx-auto" />
+        <h1 className="mt-2 text-4xl font-extrabold text-white tracking-tight sm:text-5xl">{title}</h1>
         {tagline && <p className="mt-2 text-lg font-medium text-white">{tagline}</p>}
         <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
           <div className="rounded-md shadow">

package/pages/overview.tsx

@@ -6,10 +6,7 @@ import dynamic from 'next/dynamic';
 
 import { getAllEvents, getUniqueServicesNamesFromEvents } from '@/lib/events';
 
-const ForceGraph3D = dynamic(
-  () => import('react-force-graph-3d').then((module) => module.default),
-  { ssr: false }
-);
+const ForceGraph3D = dynamic(() => import('react-force-graph-3d').then((module) => module.default), { ssr: false });
 
 function NodeElement({ node: { id } }: { node: { id: string } }) {
   return <div className={`text-sm text-center p-1 rounded-md `}>{id}</div>;

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';
 
@@ -37,9 +36,12 @@ const getComponents = (service) => ({
 
 export default function Services(props: ServicesPageProps) {
   const { service, markdown, notFound } = props;
-  const { getEditUrl } = useUrl();
+  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;
@@ -58,7 +60,7 @@ export default function Services(props: ServicesPageProps) {
       </Head>
       <ContentView
         title={name}
-        editUrl={getEditUrl(`/services/${name}/index.md`)}
+        editUrl={hasEditUrl ? getEditUrl(`/services/${name}/index.md`) : ''}
         subtitle={summary}
         draft={draft}
         lastModifiedDate={lastModifiedDate}

package/pages/services.tsx

@@ -31,9 +31,7 @@ export default function Page({ services }: PageProps) {
       </Head>
       <main className="max-w-7xl mx-auto md:min-h-screen px-4 md:px-0">
         <div className="relative z-10 flex items-baseline justify-between pt-8 pb-6 border-b border-gray-200">
-          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">
-            Services ({services.length})
-          </h1>
+          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">Services ({services.length})</h1>
 
           <div className="flex items-center">
             <Menu as="div" className="relative hidden text-left">
@@ -99,9 +97,7 @@ export default function Page({ services }: PageProps) {
 
             <div className="col-span-4 lg:col-span-3">
               <div>
-                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
-                  Services
-                </h2>
+                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">Services</h2>
                 <ServiceGrid services={services} />
               </div>
             </div>