@eventcatalog/core 2.5.5 → 2.6.1

package/.all-contributorsrc

@@ -392,6 +392,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "XaaXaaX",
+      "name": "omid eidivandi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13409925?v=4",
+      "profile": "https://github.com/XaaXaaX",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.6.1
+
+### Patch Changes
+
+- 4aecf6a: fix(core): fixed broken images for specifications on the service page
+
+## 2.6.0
+
+### Minor Changes
+
+- 76bebd7: feat(core): added AsyncAPI pages and new specifications frontmatter api. Deprecated the AsyncAPI and OpenAPI MDX components
+
 ## 2.5.5
 
 ### Patch Changes

package/README.md

@@ -29,7 +29,7 @@
 <h4>Features: Documentation generator for Event Driven Architectures, Markdown driven, Document Domains/Services/Messages/Schemas and more, Content versioning, Assign Owners, Schemas, OpenAPI, MDX Components and more...</h4>
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-41-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-42-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [Read the Docs](https://eventcatalog.dev/) | [Edit the Docs](https://github.com/event-catalog/docs) | [View Demo](https://demo.eventcatalog.dev/docs)
@@ -223,6 +223,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://natee.biz"><img src="https://avatars.githubusercontent.com/u/4300215?v=4?s=100" width="100px;" alt="Nathan Birrell"/><br /><sub><b>Nathan Birrell</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=nathanbirrell" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.jacktomlinson.co.uk/"><img src="https://avatars.githubusercontent.com/u/15871032?v=4?s=100" width="100px;" alt="Jack Tomlinson"/><br /><sub><b>Jack Tomlinson</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=jacktomlinson" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/carlosallexandre"><img src="https://avatars.githubusercontent.com/u/20143946?v=4?s=100" width="100px;" alt="Carlos Rodrigues"/><br /><sub><b>Carlos Rodrigues</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=carlosallexandre" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/XaaXaaX"><img src="https://avatars.githubusercontent.com/u/13409925?v=4?s=100" width="100px;" alt="omid eidivandi"/><br /><sub><b>omid eidivandi</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=XaaXaaX" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.5.5",
+  "version": "2.6.1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,6 +35,7 @@
     "@astrojs/mdx": "^3.1.3",
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.0",
+    "@asyncapi/react-component": "^2.2.2",
     "@changesets/cli": "^2.27.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",

package/public/icons/asyncapi.svg

@@ -0,0 +1,2 @@
+
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 155.51 155.51"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:url(#linear-gradient-3);}.cls-4{fill:url(#linear-gradient-4);}.cls-5{fill:#fff;}</style><linearGradient id="linear-gradient" x1="133.74" y1="21.76" x2="24.84" y2="130.67" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2dccfd"/><stop offset="1" stop-color="#ad20e2"/></linearGradient><linearGradient id="linear-gradient-2" x1="6471.36" y1="6969.64" x2="6362.46" y2="7078.54" gradientTransform="translate(7103.38 -6337.62) rotate(90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a829e2"/><stop offset="0.05" stop-color="#a829e2" stop-opacity="0.84"/><stop offset="0.11" stop-color="#a829e2" stop-opacity="0.67"/><stop offset="0.18" stop-color="#a829e2" stop-opacity="0.51"/><stop offset="0.25" stop-color="#a829e2" stop-opacity="0.38"/><stop offset="0.33" stop-color="#a829e2" stop-opacity="0.28"/><stop offset="0.43" stop-color="#a829e2" stop-opacity="0.2"/><stop offset="0.54" stop-color="#a829e2" stop-opacity="0.14"/><stop offset="0.68" stop-color="#a829e2" stop-opacity="0.11"/><stop offset="1" stop-color="#a829e2" stop-opacity="0.1"/></linearGradient><linearGradient id="linear-gradient-3" x1="13419.24" y1="632.02" x2="13310.33" y2="740.92" gradientTransform="translate(13441 765.76) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e50e99"/><stop offset="1" stop-color="#a829e2" stop-opacity="0.1"/></linearGradient><linearGradient id="linear-gradient-4" x1="138.74" y1="-7.39" x2="29.84" y2="101.52" gradientTransform="translate(-5 29.16)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#21d4fd"/><stop offset="0.03" stop-color="#27cdfc" stop-opacity="0.96"/><stop offset="0.23" stop-color="#4e9cf4" stop-opacity="0.7"/><stop offset="0.43" stop-color="#6e73ee" stop-opacity="0.49"/><stop offset="0.61" stop-color="#8753e9" stop-opacity="0.32"/><stop offset="0.77" stop-color="#993ce5" stop-opacity="0.2"/><stop offset="0.9" stop-color="#a42ee3" stop-opacity="0.13"/><stop offset="1" stop-color="#a829e2" stop-opacity="0.1"/></linearGradient></defs><rect class="cls-1" x="8.88" y="8.88" width="137.75" height="137.75" rx="32.58"/><rect class="cls-2" x="8.88" y="8.88" width="137.75" height="137.75" rx="32.58"/><rect class="cls-3" x="8.88" y="8.88" width="137.75" height="137.75" rx="32.58"/><rect class="cls-4" x="8.88" y="8.88" width="137.75" height="137.75" rx="32.58"/><g id="New_lines" data-name="New lines"><polygon class="cls-5" points="53.35 63.21 49.25 68.86 81.27 92.1 81.49 92.26 85.59 86.61 53.57 63.37 53.35 63.21"/><polygon class="cls-5" points="74.27 63.37 74.05 63.21 69.95 68.86 101.97 92.1 102.19 92.26 106.29 86.61 74.27 63.37"/><path class="cls-5" d="M77.78,34.29c-17.35,0-31.48,10.79-31.48,24.06v.27h7v-.27c0-9.42,11-17.08,24.5-17.08s24.51,7.66,24.51,17.08v.27h7v-.27C109.27,45.08,95.14,34.29,77.78,34.29Z"/><path class="cls-5" d="M102.23,97.16c0,9.42-11,17.08-24.51,17.08s-24.5-7.66-24.5-17.08v-.27h-7v.27c0,13.26,14.13,24,31.48,24s31.49-10.79,31.49-24v-.27h-7Z"/></g></svg>

package/public/icons/openapi.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z" fill="#FFFFFF"> </path> <path d="M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z" fill="#49A32B"> </path> <path d="M169.327319,127.956161 C169.042723,133.246373 164.421106,137.639224 159.866213,136.872586 C159.844426,136.872586 159.821277,136.872586 159.798128,136.872586 C154.753021,136.879395 150.658383,132.794288 150.652936,127.749182 C150.824511,122.690458 155.019915,118.703395 160.08,118.789182 C165.125106,118.813692 169.59966,123.077182 169.327319,127.956161 Z M88.2011915,179.220161 C90.1034894,179.27599 92.0071489,179.235139 94.2008511,179.235139 L94.2008511,193.021012 C80.5661277,195.326373 69.3348085,191.455054 66.5787234,179.929607 C65.6350638,175.69199 65.0549787,171.380841 64.8425532,167.04382 C64.5497872,162.452161 65.0563404,157.808756 64.706383,153.225267 C63.7368511,140.613182 62.1028085,136.30748 50,135.711054 L50,120.014714 C50.8674043,119.81182 51.7470638,119.662033 52.6321702,119.562629 C59.2677447,119.23582 62.0646809,117.201437 63.5489362,110.665267 C64.2243404,106.992756 64.6246809,103.275309 64.7431489,99.5428839 C65.268766,92.3258627 65.0822128,84.991735 66.2845957,77.8918201 C68.0221277,67.6245861 74.3962553,62.6366712 84.9249362,62.0783733 C87.9206809,61.9176925 90.9259574,62.0538627 94.3206809,62.0538627 L94.3206809,76.1447563 C92.9235745,76.2441605 91.6435745,76.4470542 90.3717447,76.4089265 C81.7916596,76.146118 81.3477447,79.0683308 80.7213617,86.1709691 C80.3305532,90.6250967 80.8697872,95.1554797 80.5661277,99.6245861 C80.2488511,104.071905 79.6537872,108.496075 78.7850213,112.869863 C77.547234,119.208586 73.6500426,123.922799 68.2495319,127.92348 C78.7332766,134.745607 79.9261277,145.346458 80.6069787,156.110714 C80.9732766,161.895224 80.8057872,167.720586 81.3926809,173.476501 C81.8502128,177.944246 83.5877447,179.08399 88.2011915,179.220161 Z M97.0372766,118.789182 C97.0917447,118.789182 97.1448511,118.789182 97.1993191,118.789182 C102.211745,118.872246 106.209702,123.002288 106.126638,128.016075 C106.126638,128.180841 106.121191,128.344246 106.11166,128.50765 C105.829787,133.407054 101.630298,137.149012 96.7308936,136.867139 C96.5334468,136.871224 96.3373617,136.867139 96.1399149,136.857607 C91.1506383,136.609778 87.3065532,132.36399 87.554383,127.374714 C87.8022128,122.385437 92.048,118.541352 97.0372766,118.789182 Z M128.273362,118.789182 C133.755574,118.746969 137.396766,122.29965 137.425362,127.719224 C137.455319,133.284501 134.003404,136.845352 128.556596,136.868501 C123.017191,136.893012 119.370553,133.389352 119.340596,128.002458 C119.324255,127.727395 119.32017,127.452331 119.32834,127.177267 C119.482213,122.390884 123.486979,118.635309 128.273362,118.789182 Z M193.673191,111.92348 C195.131574,117.370288 197.970723,119.284841 203.704851,119.546288 C204.644426,119.589863 205.579915,119.749182 206.868085,119.892161 L206.868085,135.584416 C206.170894,135.813182 205.456,135.984756 204.730213,136.096416 C197.046128,136.574373 193.54383,139.726714 192.76766,147.431224 C192.272,152.349692 192.312851,157.322629 191.972426,162.258799 C191.829447,167.678373 191.336511,173.082969 190.49634,178.438544 C188.535489,188.142033 182.477277,192.982884 172.467404,193.573863 C169.245617,193.764501 166.000681,193.60382 162.526979,193.60382 L162.526979,179.578288 C164.396596,179.462544 166.046979,179.303224 167.701447,179.263735 C173.682043,179.120756 175.796766,177.192586 176.089532,171.252841 C176.413617,164.727565 176.555234,158.194118 176.846638,151.66748 C177.270128,142.233607 179.853277,133.806033 188.641702,127.922118 C183.612936,124.336756 179.575489,119.994288 178.529702,114.138969 C177.264681,107.041778 176.85617,99.7879903 176.175319,92.5913946 C175.838979,88.9937776 175.855319,85.3648414 175.504,81.7699478 C175.125447,77.8890967 172.459234,76.5464584 168.926979,76.4593095 C166.903489,76.4102882 164.87183,76.4497776 162.284596,76.4497776 L162.284596,62.7537776 C178.793872,60.0126712 190.198128,65.5057776 191.257532,81.3015222 C191.701447,87.9343733 191.636085,94.5985435 192.060936,101.231395 C192.247489,104.839905 192.786723,108.421182 193.673191,111.92348 Z" fill="#FFFFFF"> </path> </g> </g></svg>

package/src/components/Lists/SpecificationsList.astro

@@ -0,0 +1,40 @@
+---
+import type { CollectionTypes } from '@types';
+import { buildUrl } from '@utils/url-builder';
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  collectionItem: CollectionEntry<CollectionTypes>;
+}
+
+const { collectionItem } = Astro.props;
+
+const specVersions = collectionItem.data.specifications || {};
+const numberOfSpecifications = Object.keys(specVersions).length;
+---
+
+<div class="space-y-2 my-2 mb-8">
+  <span class="font-light text-black group-data-[hover]:text-black/80 capitalize">Specifications ({numberOfSpecifications})</span>
+  {
+    collectionItem.data.specifications?.openapiPath && (
+      <a
+        href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/spec`)}
+        class="text-sm flex items-center space-x-1 hover:underline hover:text-purple-500"
+      >
+        <img src={buildUrl('/icons/openapi.svg')} class="h-4 w-4" />
+        <span>OpenAPI spec</span>
+      </a>
+    )
+  }
+  {
+    collectionItem.data.specifications?.asyncapiPath && (
+      <a
+        href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}/asyncapi`)}
+        class="text-sm flex items-center space-x-1 hover:underline hover:text-purple-500"
+      >
+        <img src={buildUrl('/icons/asyncapi.svg')} class="h-4 w-4" />
+        <span>AsyncAPI spec</span>
+      </a>
+    )
+  }
+</div>

package/src/components/MDX/AsyncAPI/AsyncAPI.astro

@@ -0,0 +1,16 @@
+---
+import Admonition from '../Admonition';
+---
+
+<div class="mb-4">
+  <Admonition type="warning">
+    <>
+      <span class="block font-bold">{`<AsyncAPI/>`} component now deprecated</span>
+      <span class="block"
+        >Use the new specifications frontmatter api. <a href="https://www.eventcatalog.dev/docs/api/service-api"
+          >Read more here.</a
+        ></span
+      >
+    </>
+  </Admonition>
+</div>

package/src/components/MDX/OpenAPI/OpenAPI.astro

@@ -0,0 +1,16 @@
+---
+import Admonition from '../Admonition';
+---
+
+<div class="mb-4">
+  <Admonition type="warning">
+    <>
+      <span class="block font-bold">{`<OpenAPI/>`} component now deprecated</span>
+      <span class="block"
+        >Use the new specifications frontmatter api. <a href="https://www.eventcatalog.dev/docs/api/service-api"
+          >Read more here.</a
+        ></span
+      >
+    </>
+  </Admonition>
+</div>

package/src/components/MDX/components.tsx

@@ -5,7 +5,8 @@ import Accordion from '@components/MDX/Accordion/Accordion.astro';
 import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
 import Flow from '@components/MDX/Flow/Flow.astro';
 import Admonition from '@components/MDX/Admonition';
-import OpenAPI from '@components/MDX/OpenAPI/OpenAPI';
+import OpenAPI from '@components/MDX/OpenAPI/OpenAPI.astro';
+import AsyncAPI from '@components/MDX/AsyncAPI/AsyncAPI.astro';
 
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
@@ -16,11 +17,12 @@ const components = (props: any) => {
     Accordion,
     AccordionGroup,
     Flow,
+    OpenAPI,
+    AsyncAPI,
     Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
     SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
-    OpenAPI: (mdxProp: any) => <OpenAPI {...mdxProp} {...props} />,
     Schema: (mdxProp: any) => Schema({ ...props, ...mdxProp }),
   };
 };

package/src/components/SideBars/ServiceSideBar.astro

@@ -1,6 +1,7 @@
 ---
 import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
+import SpecificationsList from '@components/Lists/SpecificationsList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
 import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
@@ -72,6 +73,7 @@ const schemaURL = join(publicPath, schemaFilePath || '');
     />
 
     {service.data.versions && <VersionList versions={service.data.versions} collectionItem={service} />}
+    {service.data.specifications && <SpecificationsList collectionItem={service} />}
 
     <div class="space-y-2">
       {
@@ -107,12 +109,6 @@ const schemaURL = join(publicPath, schemaFilePath || '');
         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"
@@ -121,14 +117,3 @@ const schemaURL = join(publicPath, schemaFilePath || '');
     </div>
   </div>
 </aside>
-
-<script>
-  // If openapi-component is in the dom then show the button, when dom has loaded
-  document.addEventListener('DOMContentLoaded', () => {
-    const openApiComponent = document.getElementById('openapi-component');
-    const openApiButton = document.getElementById('open-api-button');
-    if (openApiComponent && openApiButton) {
-      openApiButton.style.display = 'block';
-    }
-  });
-</script>

package/src/content/config.ts

@@ -49,6 +49,12 @@ const baseSchema = z.object({
   badges: z.array(badge).optional(),
   owners: z.array(ownerReference).optional(),
   schemaPath: z.string().optional(),
+  specifications: z
+    .object({
+      openapiPath: z.string().optional(),
+      asyncapiPath: z.string().optional(),
+    })
+    .optional(),
   hidden: z.boolean().optional(),
   // Used by eventcatalog
   versions: z.array(z.string()).optional(),

package/src/pages/docs/[type]/[id]/[version]/asyncapi/index.astro

@@ -0,0 +1,83 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionTypes } from '@types';
+import path from 'path';
+import { readFileSync } from 'fs';
+
+import PlainPage from '@layouts/PlainPage.astro';
+
+import { createElement } from 'react';
+import { renderToString } from 'react-dom/server';
+
+import { Parser } from '@asyncapi/parser';
+
+import { getEvents } from '@utils/events';
+import { getServices } from '@utils/services/services';
+import { getCommands } from '@utils/commands';
+import { getDomains } from '@utils/domains/domains';
+
+import '@asyncapi/react-component/styles/default.min.css';
+import js from '@asyncapi/react-component/browser/standalone/without-parser.js?url';
+import { AsyncApiComponentWP, type ConfigInterface } from '@asyncapi/react-component';
+
+export async function getStaticPaths() {
+  const events = await getEvents();
+  const commands = await getCommands();
+  const services = await getServices();
+  const domains = await getDomains();
+
+  const hasAsyncAPISpec = (item: CollectionEntry<CollectionTypes>) => item.data.specifications?.asyncapiPath !== undefined;
+
+  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
+    const filteredCollection = collection.filter(hasAsyncAPISpec);
+
+    return filteredCollection.map((item) => ({
+      params: {
+        type: item.collection,
+        id: item.data.id,
+        version: item.data.version,
+      },
+      props: {
+        type: item.collection,
+        ...item,
+      },
+    }));
+  };
+
+  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands)];
+}
+
+// @ts-ignore
+const { catalog, data } = Astro.props;
+const fileName = data.specifications?.asyncapiPath || 'asyncapi.yaml';
+const pathToSpec = path.join(catalog.publicPath, fileName);
+const pathOnDisk = path.join(process.cwd(), 'public', pathToSpec);
+const fileContent = readFileSync(pathOnDisk, 'utf-8');
+
+const parsed = await new Parser().parse(fileContent);
+const stringified = parsed.document?.json();
+const config: ConfigInterface = { show: { sidebar: true, errors: true } };
+
+const component = createElement(AsyncApiComponentWP, { schema: { stringified }, config });
+const renderedComponent = renderToString(component);
+---
+
+<PlainPage title="AsyncApi Spec">
+  <div id="asyncapi" class="md:pr-14" set:html={renderedComponent} />
+</PlainPage>
+
+<script is:inline src={js}></script>
+<script define:vars={{ schema: stringified, config }}>
+  const root = document.getElementById('asyncapi');
+  AsyncApiStandalone.hydrate({ schema, config }, root);
+</script>
+
+<style>
+  #asyncapi {
+    @media screen and (min-width: 1417px) {
+      .sidebar {
+        z-index: 1 !important;
+      }
+    }
+  }
+</style>

package/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -81,7 +81,39 @@ const getBadge = () => {
   return { backgroundColor: 'teal', textColor: 'teal', content: '', icon: QueueListIcon, class: 'text-gray' };
 };
 
-const badges = [getBadge(), ...contentBadges];
+const getSpecificationBadges = () => {
+  const badges = [];
+  const hasOpenAPISpec = !!props.data.specifications?.openapiPath;
+  const hasAsyncAPISpec = !!props.data.specifications?.asyncapiPath;
+
+  if (hasOpenAPISpec) {
+    badges.push({
+      backgroundColor: 'white',
+      textColor: 'gray',
+      content: 'OpenAPI Spec',
+      iconURL: buildUrl('/icons/openapi.svg'),
+      class: 'text-black hover:underline',
+      id: 'open-api-badge',
+      url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}/spec`),
+    });
+  }
+
+  if (hasAsyncAPISpec) {
+    badges.push({
+      backgroundColor: 'white',
+      textColor: 'gray',
+      content: 'AsyncAPI Spec',
+      iconURL: buildUrl('/icons/asyncapi.svg'),
+      class: 'text-black hover:underline',
+      id: 'asyncapi-badge',
+      url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}/asyncapi`),
+    });
+  }
+
+  return badges;
+};
+
+const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
 ---
 
 <DocsLayout title={pageTitle} description={props.data.summary}>
@@ -98,14 +130,20 @@ const badges = [getBadge(), ...contentBadges];
           {
             badges && (
               <div class="flex flex-wrap py-2 pt-4">
-                {badges.map((badge: any) => (
-                  <span
-                    class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
-                  >
-                    {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
-                    <span>{badge.content}</span>
-                  </span>
-                ))}
+                {badges.map((badge: any) => {
+                  return (
+                    <a href={badge.url || '#'}>
+                      <span
+                        id={badge.id || ''}
+                        class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
+                      >
+                        {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
+                        {badge.iconURL && <img src={badge.iconURL} class="w-5 h-5 inline-block " />}
+                        <span>{badge.content}</span>
+                      </span>
+                    </a>
+                  );
+                })}
               </div>
             )
           }

package/src/pages/docs/[type]/[id]/[version]/spec/index.astro

@@ -18,8 +18,12 @@ export async function getStaticPaths() {
   const services = await getServices();
   const domains = await getDomains();
 
+  const hasOpenAPISpec = (item: CollectionEntry<CollectionTypes>) => item.data.specifications?.openapiPath !== undefined;
+
   const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
-    return collection.map((item) => ({
+    const filteredCollection = collection.filter(hasOpenAPISpec);
+
+    return filteredCollection.map((item) => ({
       params: {
         type: item.collection,
         id: item.data.id,
@@ -37,7 +41,8 @@ export async function getStaticPaths() {
 
 // @ts-ignore
 const { data, catalog } = Astro.props;
-const pathToSpec = path.join(catalog.publicPath, 'openapi.yml');
+const fileName = data.specifications?.openapiPath || 'openapi.yml';
+const pathToSpec = path.join(catalog.publicPath, fileName);
 const pathOnDisk = path.join(process.cwd(), 'public', pathToSpec);
 const fileExists = fs.existsSync(pathOnDisk);
 ---

package/src/components/MDX/OpenAPI/OpenAPI.tsx

@@ -1,36 +0,0 @@
-import type { CollectionTypes } from '@types';
-import type { CollectionEntry } from 'astro:content';
-import * as path from 'path';
-import { existsSync } from 'node:fs';
-import { buildUrl } from '@utils/url-builder';
-
-const OpenAPI = (props: CollectionEntry<CollectionTypes>) => {
-  // @ts-ignore
-  const collectionPath = props?.catalog?.path;
-  // @ts-ignore
-  const publicPath = props?.catalog?.publicPath;
-  const fileName = 'openapi.yml';
-
-  const fileExists = existsSync(path.join(process.cwd(), 'public', publicPath, fileName));
-
-  return (
-    <div className="mb-4" id="openapi-component">
-      <span className="text-3xl font-bold">OpenAPI</span>
-      {!fileExists && (
-        <div className="text-sm text-red-500">
-          OpenAPI file not found. Put your OpenAPI file inside your {collectionPath} directory.
-        </div>
-      )}
-      {fileExists && (
-        <div>
-          This {props.collection.slice(0, -1)} has an OpenAPI file{' '}
-          <a className="text-purple-500" href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}/spec`)}>
-            you can view here.
-          </a>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default OpenAPI;