@eventcatalog/core 2.2.6 → 2.3.0

package/src/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -3,19 +3,19 @@ const { catalog, id } = Astro.props;
 import fs from 'node:fs/promises';
 import { existsSync } from 'fs';
 import path from 'path';
-import SchemaViewerClient from './SchemaViewer'
+import SchemaViewerClient from './SchemaViewer';
 import Admonition from '../Admonition';
 let schemas = [];
 
 function findSchemaViewers(document: string) {
   // Define regex pattern to match <SchemaViewer ... />
   const pattern = /<SchemaViewer\s+([^>]*)\/>/g;
-  
+
   // Find all matches of the pattern
   const matches = [...document.matchAll(pattern)];
-  
+
   // Extract the properties of each SchemaViewer
-  const schemaViewers = matches.map(match => {
+  const schemaViewers = matches.map((match) => {
     const propsString = match[1];
     const props = {};
 
@@ -36,59 +36,54 @@ function findSchemaViewers(document: string) {
 }
 
 try {
-    const file = await fs.readFile(catalog.absoluteFilePath, 'utf-8');
-    const schemaViewers = findSchemaViewers(file);
-
-    // Loop around all the possible SchemaViewers in the file.
-    const getAllComponents = schemaViewers.map(async (schemaViewerProps: any) => {
+  const file = await fs.readFile(catalog.absoluteFilePath, 'utf-8');
+  const schemaViewers = findSchemaViewers(file);
 
-      const schemaPath = path.join(catalog.filePath, schemaViewerProps.file)
-      const exists = existsSync(schemaPath);
-      let schema;
+  // Loop around all the possible SchemaViewers in the file.
+  const getAllComponents = schemaViewers.map(async (schemaViewerProps: any) => {
+    const schemaPath = path.join(catalog.filePath, schemaViewerProps.file);
+    const exists = existsSync(schemaPath);
+    let schema;
 
-      if(exists) {
-        // Load the schema for the component
-        schema = await fs.readFile(schemaPath, 'utf-8');
-        schema = JSON.parse(schema);
-      }
+    if (exists) {
+      // Load the schema for the component
+      schema = await fs.readFile(schemaPath, 'utf-8');
+      schema = JSON.parse(schema);
+    }
 
-      return {
-        id: schemaViewerProps.id || id,
-        exists,
-        schema,
-        schemaPath,
-        ...schemaViewerProps
-      }
-    });
-    
-    schemas = await Promise.all(getAllComponents);
+    return {
+      id: schemaViewerProps.id || id,
+      exists,
+      schema,
+      schemaPath,
+      ...schemaViewerProps,
+    };
+  });
 
+  schemas = await Promise.all(getAllComponents);
 } catch (error) {
-    console.log('Failed to process schemas')
-    console.log(error);
+  console.log('Failed to process schemas');
+  console.log(error);
 }
-
 ---
-<section class="space-y-4">
-{schemas.length > 0 &&
-  schemas.map((schema) => (
-    <div>
-      
-      {schema.exists && 
-        <SchemaViewerClient {...schema} client:load />
-      }
 
-      {/* User has tried to load the schema, but it was not found on file system */}
-      {!schema.exists && (
-        <Admonition type="warning">
-          <>
-            <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
-            <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
-          </>
-        </Admonition>
-      )}
+<section class="space-y-4">
+  {
+    schemas.length > 0 &&
+      schemas.map((schema) => (
+        <div>
+          {schema.exists && <SchemaViewerClient {...schema} client:load />}
 
-    </div>
-  ))
-}
+          {/* User has tried to load the schema, but it was not found on file system */}
+          {!schema.exists && (
+            <Admonition type="warning">
+              <>
+                <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
+                <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
+              </>
+            </Admonition>
+          )}
+        </div>
+      ))
+  }
 </section>

package/src/components/Search.astro

@@ -21,10 +21,21 @@ import PageFindSearch from 'astro-pagefind/components/Search';
 <div id="search-dialog" class="hidden relative z-10" role="dialog" aria-modal="true">
   <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity search-background backdrop-blur-sm bg-black/10"></div>
   <div id="search-background" class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
-    <div id="command-pal" class="mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+    <div
+      id="command-pal"
+      class="mx-auto max-w-xl divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"
+    >
       <div class="relative">
-        <svg class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path>
+        <svg
+          class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+            clip-rule="evenodd"></path>
         </svg>
         <PageFindSearch id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />
       </div>
@@ -42,8 +53,8 @@ import PageFindSearch from 'astro-pagefind/components/Search';
       event.preventDefault();
       dummyInput?.click();
     }
-    if(event.key === 'Escape') {
-      if(dialog){
+    if (event.key === 'Escape') {
+      if (dialog) {
         dialog.style.display = 'none';
       }
     }

package/src/components/Seo.astro

@@ -4,12 +4,7 @@ import config from '@config';
 import defaultImageFile from '../../public/opengraph.png';
 import { buildUrl } from '@utils/url-builder';
 
-const {
-	title = config.title,
-	description = config.tagline,
-	ogTitle = title,
-	ogType = 'website',
-} = Astro.props;
+const { title = config.title, description = config.tagline, ogTitle = title, ogType = 'website' } = Astro.props;
 
 const siteBaseURL = new URL(Astro.url);
 const defaultImage = new URL(defaultImageFile.src, siteBaseURL);
@@ -19,13 +14,12 @@ _image = _image || defaultImage;
 
 let image = null;
 if (typeof _image === 'string') {
-    image = new URL(_image, siteBaseURL);
+  image = new URL(_image, siteBaseURL);
 } else if (_image && typeof _image['href'] !== 'undefined') {
-    image = new URL(_image['href'], siteBaseURL);
+  image = new URL(_image['href'], siteBaseURL);
 } else {
-	image = defaultImage;
+  image = defaultImage;
 }
-
 ---
 
 <meta charset="UTF-8" />
@@ -34,47 +28,47 @@ if (typeof _image === 'string') {
 <link rel="icon" type="image/svg+xml" href={buildUrl('/favicon.ico', true)} />
 
 <SEO
-	title={title}
-	description={description}
-	openGraph={{
-		basic: {
-			url: config.homepageLink,
-			title: ogTitle,
-			type: ogType,
-			image: _image?.src ? _image.src : defaultImage.toString(),
-		},
-		image: {
-			url: image.toString(),
-			secureUrl: image.toString(),
-			alt: ogTitle,
-			height: _image?.height,
-			width: _image?.width,
-			type: _image?.format && `image/${_image.format}`,
-		},
-	}}
-	twitter={{
-		creator: '@liran_tal',
-		image: image ? image.toString() : undefined,
-		imageAlt: ogTitle,
-		title: ogTitle,
-		site: '@liran_tal',
-		description: description,
-		card: image ? 'summary_large_image' : 'summary',
-	}}
-	extend={{
-		meta: [
-			{
-				name: 'og:locale',
-				content: 'en_US',
-			},
-			{
-				name: 'og:description',
-				content: description,
-			},
-			{
-				name: 'og:site_name',
-				content: config.homepageLink,
-			}
-		]
-	}}
-/>
+  title={title}
+  description={description}
+  openGraph={{
+    basic: {
+      url: config.homepageLink,
+      title: ogTitle,
+      type: ogType,
+      image: _image?.src ? _image.src : defaultImage.toString(),
+    },
+    image: {
+      url: image.toString(),
+      secureUrl: image.toString(),
+      alt: ogTitle,
+      height: _image?.height,
+      width: _image?.width,
+      type: _image?.format && `image/${_image.format}`,
+    },
+  }}
+  twitter={{
+    creator: '@liran_tal',
+    image: image ? image.toString() : undefined,
+    imageAlt: ogTitle,
+    title: ogTitle,
+    site: '@liran_tal',
+    description: description,
+    card: image ? 'summary_large_image' : 'summary',
+  }}
+  extend={{
+    meta: [
+      {
+        name: 'og:locale',
+        content: 'en_US',
+      },
+      {
+        name: 'og:description',
+        content: description,
+      },
+      {
+        name: 'og:site_name',
+        content: config.homepageLink,
+      },
+    ],
+  }}
+/>

package/src/components/SideBars/DomainSideBar.astro

@@ -11,7 +11,7 @@ interface Props {
 const { domain } = Astro.props;
 
 // @ts-ignore
-const services = domain.data.services as CollectionEntry<'services'>[] || [];
+const services = (domain.data.services as CollectionEntry<'services'>[]) || [];
 
 const ownersRaw = domain.data?.owners || [];
 const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
@@ -30,17 +30,35 @@ const ownersList = owners.map((o) => ({
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
-
 ---
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
   <div>
-    <PillList title={`Services (${services.length})`} pills={serviceList} emptyMessage={`This domain does not contain any services.`} color="pink" client:load />
-    <OwnersList title={`Service owners (${ownersList.length})`} owners={ownersList} emptyMessage={`This domain does not have any documented owners.`} client:load />
+    <PillList
+      title={`Services (${services.length})`}
+      pills={serviceList}
+      emptyMessage={`This domain does not contain any services.`}
+      color="pink"
+      client:load
+    />
+    <OwnersList
+      title={`Service owners (${ownersList.length})`}
+      owners={ownersList}
+      emptyMessage={`This domain does not have any documented owners.`}
+      client:load
+    />
     {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
     <div class="space-y-2">
-      <a href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
-      <a href={buildUrl(`/docs/${domain.collection}/${domain.data.id}/${domain.data.version}/changelog`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">Changelog</a>
+      <a
+        href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        >View in Visualiser</a
+      >
+      <a
+        href={buildUrl(`/docs/${domain.collection}/${domain.data.id}/${domain.data.version}/changelog`)}
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        >Changelog</a
+      >
     </div>
   </div>
 </aside>

package/src/components/SideBars/MessageSideBar.astro

@@ -43,15 +43,31 @@ const type = message.collection.slice(0, -1);
 // @ts-ignore
 const publicPath = message?.catalog?.publicPath;
 const schemaFilePath = message?.data?.schemaPath;
-const schemaURL = path.join(publicPath, schemaFilePath || '')
-
+const schemaURL = path.join(publicPath, schemaFilePath || '');
 ---
 
-<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto pb-20 ">
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto pb-20">
   <div class="">
-    <PillList color="pink" title={`${type} Producers (${producerList.length})`} pills={producerList} emptyMessage={`This ${type} does not get produced by any services.`} client:load />
-    <PillList color="pink" title={`${type} Consumers (${consumerList.length})`} pills={consumerList} emptyMessage={`This ${type} does not get consumed by any services.`} client:load />
-    <OwnersList title={`${type} owners (${ownersList.length})`} owners={ownersList} emptyMessage={`This ${type} does not have any documented owners.`} client:load />
+    <PillList
+      color="pink"
+      title={`${type} Producers (${producerList.length})`}
+      pills={producerList}
+      emptyMessage={`This ${type} does not get produced by any services.`}
+      client:load
+    />
+    <PillList
+      color="pink"
+      title={`${type} Consumers (${consumerList.length})`}
+      pills={consumerList}
+      emptyMessage={`This ${type} does not get consumed by any services.`}
+      client:load
+    />
+    <OwnersList
+      title={`${type} owners (${ownersList.length})`}
+      owners={ownersList}
+      emptyMessage={`This ${type} does not have any documented owners.`}
+      client:load
+    />
 
     {message.data.versions && <VersionList versions={message.data.versions} collectionItem={message} />}
 
@@ -64,8 +80,20 @@ const schemaURL = path.join(publicPath, schemaFilePath || '')
             class="hidden w-full 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-200 bg-gray-800 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
           >
             <>
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="-ml-1 mr-2 h-5 w-5 text-gray-200">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                aria-hidden="true"
+                class="-ml-1 mr-2 h-5 w-5 text-gray-200"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                />
               </svg>
               <span>Download Schema</span>
             </>
@@ -78,8 +106,11 @@ const schemaURL = path.join(publicPath, schemaFilePath || '')
         >View in Visualiser</a
       >
 
-      <a href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}/changelog`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">Changelog</a>
-     
+      <a
+        href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}/changelog`)}
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        >Changelog</a
+      >
     </div>
   </div>
 </aside>

package/src/components/SideBars/ServiceSideBar.astro

@@ -4,7 +4,7 @@ import PillList from '@components/Lists/PillList';
 import VersionList from '@components/Lists/VersionList.astro';
 import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
-import { join } from 'node:path'
+import { join } from 'node:path';
 interface Props {
   service: CollectionEntry<'services'>;
 }
@@ -12,9 +12,9 @@ interface Props {
 const { service } = Astro.props;
 
 // @ts-ignore
-const sends = service.data.sends as CollectionEntry<'events'>[] || [];
+const sends = (service.data.sends as CollectionEntry<'events'>[]) || [];
 // @ts-ignore
-const receives = service.data.receives as CollectionEntry<'events'>[] || [];
+const receives = (service.data.receives as CollectionEntry<'events'>[]) || [];
 
 const ownersRaw = service.data?.owners || [];
 const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
@@ -45,14 +45,31 @@ const ownersList = owners.map((o) => ({
 // @ts-ignore
 const publicPath = service?.catalog?.publicPath;
 const schemaFilePath = service?.data?.schemaPath;
-const schemaURL = join(publicPath, schemaFilePath || '')
+const schemaURL = join(publicPath, schemaFilePath || '');
 ---
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
   <div id="sidebar-cta-portal">
-    <PillList title={`Receives Messages (${receivesList.length})`} pills={receivesList} emptyMessage={`This service does not receive any messages.`} color="orange" client:load />
-    <PillList title={`Sends Messages (${sendsList.length})`} pills={sendsList} emptyMessage={`This service does not send any messages.`} color="orange" client:load />
-    <OwnersList title={`Service owners (${ownersList.length})`} owners={ownersList} emptyMessage={`This service does not have any documented owners.`} client:load />
+    <PillList
+      title={`Receives Messages (${receivesList.length})`}
+      pills={receivesList}
+      emptyMessage={`This service does not receive any messages.`}
+      color="orange"
+      client:load
+    />
+    <PillList
+      title={`Sends Messages (${sendsList.length})`}
+      pills={sendsList}
+      emptyMessage={`This service does not send any messages.`}
+      color="orange"
+      client:load
+    />
+    <OwnersList
+      title={`Service owners (${ownersList.length})`}
+      owners={ownersList}
+      emptyMessage={`This service does not have any documented owners.`}
+      client:load
+    />
 
     {service.data.versions && <VersionList versions={service.data.versions} collectionItem={service} />}
 
@@ -65,17 +82,42 @@ const schemaURL = join(publicPath, schemaFilePath || '')
             class="hidden w-full 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-200 bg-gray-800 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
           >
             <>
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="-ml-1 mr-2 h-5 w-5 text-gray-200">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                aria-hidden="true"
+                class="-ml-1 mr-2 h-5 w-5 text-gray-200"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                />
               </svg>
               <span>Download Schema</span>
             </>
           </a>
         )
       }
-      <a href={buildUrl(`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
-      <a id="open-api-button" href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/spec`)} class="hidden text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View API spec</a>
-      <a href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/changelog`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">Changelog</a>
+      <a
+        href={buildUrl(`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`)}
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        >View in Visualiser</a
+      >
+      <a
+        id="open-api-button"
+        href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/spec`)}
+        class="hidden text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        >View API spec</a
+      >
+      <a
+        href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/changelog`)}
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        >Changelog</a
+      >
     </div>
   </div>
 </aside>
@@ -89,5 +131,4 @@ const schemaURL = join(publicPath, schemaFilePath || '')
       openApiButton.style.display = 'block';
     }
   });
-
 </script>

package/src/layouts/CustomDocsPageLayout.astro

@@ -33,44 +33,91 @@ import { buildUrl } from '@utils/url-builder';
         <div class="pl-0 sm:pl-56 xl:pl-80 w-full pt-8 pb-40">
           <div class="prose prose-sm">
             <div class="bg-white">
-              <div class="mx-auto max-w-7xl ">
+              <div class="mx-auto max-w-7xl">
                 <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
                   <h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-0">EventCatalog</h1>
-                  <div class=" grid max-w-xl grid-cols-1 md:gap-8 text-base leading-7 text-gray-700 lg:max-w-none lg:grid-cols-1">
+                  <div class="grid max-w-xl grid-cols-1 md:gap-8 text-base leading-7 text-gray-700 lg:max-w-none lg:grid-cols-1">
                     <div>
                       <p>
-                        Welcome to <a href="https://www.eventcatalog.dev/">EventCatalog</a>. 
+                        Welcome to <a href="https://www.eventcatalog.dev/">EventCatalog</a>.
                       </p>
                       <p>
-                        This open-source project is designed to help you and your teams
-                        bring discoverability and clarity to your event-driven architectures (EDA). 
+                        This open-source project is designed to help you and your teams bring discoverability and clarity to your
+                        event-driven architectures (EDA).
                       </p>
                       <p>
-                        To get started you can read the following guides: 
+                        To get started you can read the following guides:
                         <ul>
-                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/getting-started/introduction">Getting started with EventCatalog</a></li>
-                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/guides/domains/adding-domains">Creating domains</a></li>
-                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/guides/services/adding-services">Creating services</a></li>
-                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/guides/messages/commands/introduction">Creating commands</a></li>
-                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/guides/messages/events/introduction">Creating events</a></li>
-                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/owners">Assigning owners to resources</a></li>
-                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/components/using-components">Using components in your pages (Schemas, OpenAPI, etc)</a></li>
-                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/deployment">Deploying and hosting your EventCatalog</a></li>
+                          <li>
+                            <a
+                              class="text-purple-500"
+                              href="https://eventcatalog.dev/docs/development/getting-started/introduction"
+                              >Getting started with EventCatalog</a
+                            >
+                          </li>
+                          <li>
+                            <a
+                              class="text-purple-500"
+                              href="https://eventcatalog.dev/docs/development/guides/domains/adding-domains">Creating domains</a
+                            >
+                          </li>
+                          <li>
+                            <a
+                              class="text-purple-500"
+                              href="https://eventcatalog.dev/docs/development/guides/services/adding-services"
+                              >Creating services</a
+                            >
+                          </li>
+                          <li>
+                            <a
+                              class="text-purple-500"
+                              href="https://eventcatalog.dev/docs/development/guides/messages/commands/introduction"
+                              >Creating commands</a
+                            >
+                          </li>
+                          <li>
+                            <a
+                              class="text-purple-500"
+                              href="https://eventcatalog.dev/docs/development/guides/messages/events/introduction"
+                              >Creating events</a
+                            >
+                          </li>
+                          <li>
+                            <a class="text-purple-500" href="https://eventcatalog.dev/docs/owners"
+                              >Assigning owners to resources</a
+                            >
+                          </li>
+                          <li>
+                            <a
+                              class="text-purple-500"
+                              href="https://eventcatalog.dev/docs/development/components/using-components"
+                              >Using components in your pages (Schemas, OpenAPI, etc)</a
+                            >
+                          </li>
+                          <li>
+                            <a class="text-purple-500" href="https://eventcatalog.dev/docs/development/deployment"
+                              >Deploying and hosting your EventCatalog</a
+                            >
+                          </li>
                         </ul>
                       </p>
-                      <h3>
-                        Join the community
-                      </h3>
-                      <p>Got questions about EventCatalog? Feature requests or need support? <a class="text-purple-500" href="https://discord.gg/3rjaZMmrAm">Join our community on Discord.</a></p>
-                      <h3>
-                        Enterprise support
-                      </h3>
+                      <h3>Join the community</h3>
                       <p>
-                        Using EventCatalog and needs enterprise support? Work with us, find out what we offer on our <a class="text-purple-500" href="https://eventcatalog.dev/enterprise">enterprise page</a>.
+                        Got questions about EventCatalog? Feature requests or need support? <a
+                          class="text-purple-500"
+                          href="https://discord.gg/3rjaZMmrAm">Join our community on Discord.</a
+                        >
+                      </p>
+                      <h3>Enterprise support</h3>
+                      <p>
+                        Using EventCatalog and needs enterprise support? Work with us, find out what we offer on our <a
+                          class="text-purple-500"
+                          href="https://eventcatalog.dev/enterprise">enterprise page</a
+                        >.
                       </p>
                     </div>
                   </div>
-                
+
                   <Footer />
                 </div>
               </div>

package/src/layouts/DiscoverLayout.astro

@@ -76,7 +76,9 @@ const tabs = [
                   class={` text-black  group inline-flex items-center py-4 px-1 text-sm font-light ${tab.isActive ? `border-${tab.activeColor}-500 border-b-[2px] text-${tab.activeColor}-500` : 'opacity-80'} ${!tab.enabled ? 'disabled' : ''}`}
                   aria-current="page"
                 >
-                  <tab.icon className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`} />
+                  <tab.icon
+                    className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`}
+                  />
                   <span>{tab.label}</span>
                 </a>
               ))