Merge branch 'master' into doc-intro-asyncapi-document

quetzalliwrites · Dec 12, 2023 · adaae21 · adaae21
2 parents 8e3dbd0 + 4599050
commit adaae21
Show file tree

Hide file tree

Showing 82 changed files with 4,940 additions and 17,723 deletions.
diff --git a/README.md b/README.md
@@ -36,7 +36,6 @@ Use the following tools to set up the project:
 - [Node.js](https://nodejs.org/) v16.0.0+
 - [npm](https://www.npmjs.com/) v7.10.0+
 
-
 ## Run locally
 
 1. Fork the repository by clicking on `Fork` option on top right of the main repository.

diff --git a/components/Asyncapi3Comparison.js b/components/Asyncapi3Comparison.js
diff --git a/components/DemoAnimation.js b/components/DemoAnimation.js
@@ -44,7 +44,7 @@ export default function DemoAnimation({ className = '' }) {
     const common = (
       <>
         <div>
-          <span className="text-teal-400">asyncapi:</span> 2.6.0
+          <span className="text-teal-400">asyncapi:</span> 3.0.0
         </div>
         <div>
           <span className="text-teal-400">info:</span>
@@ -85,10 +85,34 @@ export default function DemoAnimation({ className = '' }) {
           <span className="text-teal-400">channels:</span>
         </div>
         <div>
-          <span className="text-yellow-300">&nbsp;&nbsp;user/signedup:</span>
+          <span className="text-yellow-300">&nbsp;&nbsp;userSignedup:</span>
         </div>
         <div>
-          <span className="text-purple-400">&nbsp;&nbsp;&nbsp;&nbsp;subscribe:</span>
+          <span className="text-purple-400">&nbsp;&nbsp;&nbsp;&nbsp;address:</span><span className="text-teal-200">'user/signedup'</span>
+        </div>
+        <div>
+          <span className="text-teal-400">&nbsp;&nbsp;&nbsp;&nbsp;messages:</span>
+        </div>
+        <div>
+          <span className="text-yellow-300">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;userSignedupMessage:</span>
+        </div>
+        <div>
+          <span className="text-teal-200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span><span className="text-teal-200">'#/components/messages/UserSignedUp'</span>
+        </div>
+        <div>
+          <span className="text-teal-400">operations:</span>
+        </div>
+        <div>
+          <span className="text-yellow-300">&nbsp;&nbsp;processUserSignups:</span>
+        </div>
+        <div>
+          <span className="text-purple-400">&nbsp;&nbsp;&nbsp;&nbsp;action:</span><span className="text-teal-200">'receive'</span>
+        </div>
+        <div>
+          <span className="text-teal-400">&nbsp;&nbsp;&nbsp;&nbsp;channel:</span>
+        </div>
+        <div>
+          <span className="text-teal-200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span><span className="text-teal-200"> '#/channels/userSignedup'</span>
         </div>
         <Typing.Delay ms={500} />
       </>,
@@ -99,12 +123,6 @@ export default function DemoAnimation({ className = '' }) {
   function renderUntilMessagePayload(callback) {
     return renderTyping(
       <>
-        <div>
-          <span className="text-teal-400">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message:</span>
-        </div>
-        <div>
-          <span className="text-teal-200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span><span className="text-teal-200"> '#/components/messages/UserSignedUp'</span>
-        </div>
         <div>
           <span className="text-teal-400">components:</span>
         </div>
@@ -242,7 +260,7 @@ export default function DemoAnimation({ className = '' }) {
             </div>
 
             <div className={transitionClassNames(showChannelsAndOperation)}>
-              <span className="px-3 py-2 mr-2 bg-green-500 text-white font-bold rounded">SUB</span> <span className="text-lg text-gray-700">user/signedup</span>
+              <span className="px-3 py-2 mr-2 bg-green-500 text-white font-bold rounded">RECEIVES</span> <span className="text-lg text-gray-700">user/signedup</span>
             </div>
 
             <div className={transitionClassNames(showUntilMessagePayload)}>

diff --git a/components/GeneratorInstallation.js b/components/GeneratorInstallation.js
@@ -27,13 +27,13 @@ export default function GeneratorInstallation({ }) {
   }
 
   function getNpmCode() {
-    return `npm install -g @asyncapi/generator
-ag ${specPath} ${template} ${params}`
+    return `npm install -g @asyncapi/cli
+asyncapi generate fromTemplate ${specPath} ${template} ${params}`
   }
 
   function getDockerCode() {
-    return `docker run --rm -it -v \${PWD}/example:/app/example \\
-asyncapi/generator ${specPath} ${template} ${params}`
+    return `docker run --rm -it -v \${PWD}/example:/app/example -v \${PWD}/output:/app/output \\
+asyncapi/cli generate fromTemplate ${specPath} ${template} ${params}`
   }
 
   return (
@@ -56,10 +56,12 @@ asyncapi/generator ${specPath} ${template} ${params}`
         codeBlocks={[{
           language: 'npm',
           code: getNpmCode(),
-        }, {
+        },
+        {
           language: 'Docker',
           code: getDockerCode(),
-        }]}
+        },
+      ]}
       />
     </div>
   )

diff --git a/components/MDX.js b/components/MDX.js
@@ -60,9 +60,14 @@ export function getMDXComponents() {
     th: props => <th {...props} className={`${props.className || ''} px-6 py-3 border-b border-gray-200 bg-gray-100 text-left text-xs leading-4 font-medium font-body text-gray-900 uppercase tracking-wider`} />,
     tr: props => <tr {...props} className={`${props.className || ''} bg-white`} />,
     td: props => <td {...props} className={`${props.className || ''} px-6 py-4 border-b border-gray-200 text-sm leading-5 text-gray-700 tracking-tight`} />,
-    pre: props => <div {...props} className={`${props.className || ''} my-8`} />,
-    inlineCode: props => <code {...props} className={`${props.className || ''} px-1 py-0.5 bg-gray-200 text-gray-800 rounded font-mono text-sm`} />,
-    code: CodeComponent,
+    pre: props => CodeComponent(props.children.props),
+    code:  props => <code {...props} className={`${props.className || ''} px-1 py-0.5 bg-gray-200 text-gray-800 rounded font-mono text-sm`} />,
+    details: (props) => 
+      <details {...props} className={`${ props.className || ''} mb-1 font-heading antialiased text-gray-900`}/>,
+    summary: (props) => 
+      <summary {...props} className={`${props.className || ''} my-2 font-heading cursor-pointer antialiased font-semibold text-gray-900`}/>,
+    p: (props) => 
+    <p {...props} className={`${props.className || ''} ml-4 cursor-pointer`}/>,
     hr: props => <hr {...props} className={`${props.className || ''} my-8`} />,
     CodeBlock,
     ChapterSuggestions,