feat: asyncapi specification visualization integration (#2898)

Co-authored-by: Quetzalli <[email protected]>
Co-authored-by: akshatnema <[email protected]>
Co-authored-by: Akshat Nema <[email protected]>

components/MDX/MDX.tsx

@@ -27,6 +27,7 @@ import Button from '../buttons/Button';
 import ChapterSuggestions from '../buttons/ChapterSuggestions';
 import Caption from '../Caption';
 import DocsCards from '../docs/DocsCards';
+import Visualizer from '../docs/Visualizer';
 import CodeBlock from '../editor/CodeBlock';
 import Figure from '../Figure';
 import GeneratorInstallation from '../GeneratorInstallation';
@@ -324,7 +325,8 @@ export function getMDXComponents() {
     TwitterDMButton,
     TwitterVideoEmbed,
     TwitterOnAirButton,
-    Profiles
+    Profiles,
+    Visualizer
   };
 }
 

components/data/buckets.ts

@@ -1,3 +1,4 @@
+import IconExplorer from '../icons/Explorer';
 import IconGettingStarted from '../icons/GettingStarted';
 import IconGuide from '../icons/Guide';
 import IconMigration from '../icons/Migration';
@@ -87,6 +88,15 @@ export const buckets: Bucket[] = [
     borderClassName: 'border-orange-200',
     href: '/docs/community',
     icon: IconUsers
+  },
+  {
+    name: 'Explorer',
+    title: 'Specification Explorer',
+    description: 'Simplifying our Specification JSON Schema like a pro.',
+    link: '/docs/reference/specification/v3.0.0-Explorer',
+    className: 'bg-teal-200',
+    borderClassName: 'border-orange-200',
+    icon: IconExplorer
   }
 ].map((bucket) => {
   return {

components/docs/Visualizer.tsx

@@ -0,0 +1,26 @@
+import 'schyma/dist/esm/style.css';
+
+import type { JSONSchema7Object } from 'json-schema';
+import React from 'react';
+import Schyma from 'schyma';
+
+import schema from '../../config/3.0.0.json';
+
+const typeSchema = schema as unknown as JSONSchema7Object;
+
+/**
+ * @description This component renders the spec explorer.
+ */
+function Visualizer() {
+  return (
+    <div>
+      <Schyma
+        title='AsyncAPI Specification'
+        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={typeSchema}
+      />
+    </div>
+  );
+}
+
+export default Visualizer;

components/icons/CenterMenu.tsx

@@ -0,0 +1,10 @@
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconMenuCenter({ className = '' }) {
+  return (
+    <svg fill='#000000' width='800px' height='800px' viewBox='-5 -7 24 24' className={className}>
+      <path d='M3 0h8a1 1 0 0 1 0 2H3a1 1 0 1 1 0-2zm0 8h8a1 1 0 0 1 0 2H3a1 1 0 1 1 0-2zM1 4h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z' />
+    </svg>
+  );
+}

components/icons/Explorer.tsx

@@ -0,0 +1,27 @@
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconExplorer({ className = '' }) {
+  return (
+    <svg
+      fill='#000000'
+      className={className}
+      width='35px'
+      height='35px'
+      viewBox='-2.4 -2.4 28.80 28.80'
+      stroke='#000000'
+      strokeWidth='0.1'
+      transform='matrix(1, 0, 0, 1, 0, 0)rotate(0)'
+    >
+      <g id='SVGRepo_bgCarrier' strokeWidth='0'></g>
+      <g
+        id='SVGRepo_tracerCarrier'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        stroke='#CCCCCC'
+        strokeWidth='0.384'
+      ></g>
+      <path d='M6,6H4A1,1,0,0,1,4,4H6V2A1,1,0,0,1,8,2V4h2a1,1,0,0,1,0,2H8V8A1,1,0,0,1,6,8Zm15,4v4a1,1,0,0,1-1,1H16a1,1,0,0,1-1-1V13H8v6h7V18a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4a1,1,0,0,1-1,1H16a1,1,0,0,1-1-1V21H7a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1h8V10a1,1,0,0,1,1-1h4A1,1,0,0,1,21,10ZM17,21h2V19H17Zm2-10H17v2h2Z'></path>
+    </svg>
+  );
+}