feat: asyncapi specification visualization integration

components/MDX.js

@@ -18,7 +18,8 @@ import Figure from '../components/Figure'
 import Profile from '../components/Profile'
 import GeneratorInstallation from '../components/GeneratorInstallation'
 import NewsletterSubscribe from '../components/NewsletterSubscribe'
-import { DocsCards } from '../components/docs/DocsCards'
+import { DocsCards } from '../components/docs/DocsCards';
+import Visualizer from "./docs/Visualizer";
 
 let mermaidInitialized = false;
 initializeMermaid();
@@ -75,6 +76,7 @@ export function getMDXComponents() {
     Column,
     Figure,
     DocsCards,
+    Visualizer,
     GeneratorInstallation,
     NewsletterSubscribe,
     TwitterTimelineEmbed,

components/docs/Visualizer.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import Schyma from 'schyma';
+import 'schyma/dist/esm/style.css'
+import schema from '../../config/3.0.0.json';
+
+function Visualizer() {
+    return (
+        <Schyma title="AsyncAPI" description="The AsyncAPI Specification defines a set of fields that can be used in an AsyncAPI document to describe an application's API. The document may reference other files for additional details or shared fields, but it is typically a single, primary document that encapsulates the API description." schema={schema} />
+  )
+}
+
+export default Visualizer

components/layout/DocsLayout.js

@@ -67,7 +67,11 @@ export default function DocsLayout({ post, navItems = {}, children }) {
 
   const [showMenu, setShowMenu] = useState(false);
   const navigation = posts['docsTree'];
-
+  if (router.pathname.includes('v3.0.0-explorer')) {
+    return <article className="">
+      {children}
+    </article>
+  }
   return (
     <DocsContext.Provider value={{ post, navItems }}>
       <div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
@@ -180,6 +184,24 @@ export default function DocsLayout({ post, navItems = {}, children }) {
                         </Link>
                         .
                       </div>
+                      <div>
+                        <span className="text-sm font-sans antialiased text-gray-800">
+                          Want to interactively navigate the new v3.0.0?&nbsp;
+                        </span>
+                        <span className="text-sm font-sans antialiased text-gray-800">
+                          Check&nbsp;
+                          <Link href="/spec-json-schema">
+                            <a
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className={`cursor-pointer font-body text-sm leading-6 underline font-medium text-secondary-500 hover:text-secondary-600 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150`}
+                            >
+                              Version 3 visualizer
+                            </a>
+                          </Link>
+                          .
+                        </span>
+                      </div>
                       <div>
                         <span className="text-sm font-sans antialiased text-gray-800">
                           Interested in release notes of other versions of the

components/navigation/EventPostItem.js

@@ -28,7 +28,7 @@ function EventPostItem({ post, className, id }) {
     type = 'WORKSHOP';
   }
 
-  const defaultCover = '/img/homepage/confBlurBg.webp';
+  const defaultCover = 'https://github.com/asyncapi/community/assets/40604284/01c2b8de-fa5c-44dd-81a5-70cb96df4813';
   let active = true;
   let postDate = moment(post.date); // Convert post.date to a moment object if necessary