diff --git a/components/Asyncapi3Comparison.js b/components/Asyncapi3Comparison.js
new file mode 100644
index 000000000000..c4e8800204bf
--- /dev/null
+++ b/components/Asyncapi3Comparison.js
@@ -0,0 +1,562 @@
+import React, { useState } from 'react';
+
+/**
+ * Main comparison that shows the full picture between v2 and v3
+ */
+export function Asyncapi3Comparison({ className = '' }) {
+ const [hoverState, setHoverState] = useState({
+ Info: false,
+ Servers: false,
+ Paths: false,
+ PathItem: true,
+ Summary: false,
+ Operation: false,
+ Message: false,
+ Tags: false,
+ External: false,
+ Components: false,
+ Id: false,
+ Path: false,
+ Host: false
+ });
+
+ return (
+
+
+
AsyncAPI 2.x
+
+
+
setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}>
+ Info
+
+
+
setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
+
Tags
+
+
setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
+
External Docs
+
+
+
+ Servers
+
+
+ Server
+
+
setHoverState(prevState => ({ ...prevState, Host: true, Path: true }))} onMouseLeave={() => setHoverState({ Host: false, Path: false })}>
+
Url
+
+
+
+
+
+
setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
+ Channels
+
+
+
setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
+ Channel Item
+
+
+
setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ Operation: false })}>
+ Operation (Publish and Subscribe)
+
+
+
+
setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}>
+ Messages
+
+ Message
+
+
+ Headers
+
+
+ Payload
+
+
+
+
+
+
+
+
+
+
+
+
+
+
AsyncAPI 3.0
+
+
+
setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}>
+ Info
+
+
setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
+
Tags
+
+
setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
+
External Docs
+
+
+
+
+ Servers
+
+
+ Server
+
+
setHoverState(prevState => ({ ...prevState, Host: true }))} onMouseLeave={() => setHoverState({ Host: false })}>
+
Host
+
+
setHoverState(prevState => ({ ...prevState, Path: true }))} onMouseLeave={() => setHoverState({ Path: false })}>
+
Pathname
+
+
+
+
+
+
setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
+ Channels
+
+
setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
+ Channel Item
+
+
+ address
+
+
+
setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}>
+ Messages
+
+ Message
+
+
+ Headers
+
+
+ Payload
+
+
+
+
+
+
+
+
setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ Operation: false })}>
+ Operations
+
+
+ Operation
+
+
+
+ action (send or receive)
+
+
+ channel
+
+
+ messages
+
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * Used to compare how channels, operations and messages have changed
+ */
+export function Asyncapi3ChannelComparison({ className = '' }) {
+ const [hoverState, setHoverState] = useState({
+ Paths: false,
+ PathItem: false,
+ Operation: false,
+ Message: false,
+ });
+
+ return (
+
+
+
AsyncAPI 2.x
+
+
+
setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
+ Channels
+
+
+
setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
+ Channel Item
+
+
+
setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ Operation: false })}>
+ Operation (Publish and Subscribe)
+
+
+
+
setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}>
+ Messages
+
+ Message
+
+
+ Headers
+
+
+ Payload
+
+
+
+
+
+
+
+
+
+
+
+
+
+
AsyncAPI 3.0
+
+
+
setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
+ Channels
+
+
setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
+ Channel Item
+
+
setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}>
+ Messages
+
+ Message
+
+
+ Headers
+
+
+ Payload
+
+
+
+
+
+
+
setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ Operation: false })}>
+ Operations
+
+
+ Operation
+
+
+ action (send or receive)
+
+
+ channel
+
+
+ messages
+
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * Shows the comparison between v2 and v3 for the channel IDs and channel address
+ */
+export function Asyncapi3IdAndAddressComparison({ className = '' }) {
+ const [hoverState, setHoverState] = useState({
+ Paths: false,
+ PathItem: false,
+ });
+
+ return (
+
+
+
AsyncAPI 2.x
+
+
+
setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
+ Channels
+
setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
+ Channel Item
+
+
+
+
+
+
AsyncAPI 3.0
+
+
+
setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}>
+ Channels
+
+
setHoverState(prevState => ({ ...prevState, PathItem: true }))} onMouseLeave={() => setHoverState({ PathItem: false })}>
+ Channel Item
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * Compares how the server object changes from v2 to v3.
+ */
+export function Asyncapi3ServerComparison({ className = '' }) {
+ const [hoverState, setHoverState] = useState({
+ Host: false,
+ path: false,
+ Servers: false,
+ });
+
+ return (
+
+
+
AsyncAPI 2.x
+
+
+
+ Servers
+
+
+ Server
+
+
setHoverState(prevState => ({ ...prevState, Host: true, Path: true }))} onMouseLeave={() => setHoverState({ Host: false, Path: false })}>
+
Url
+
+
+
+
+
+
+
+
+
AsyncAPI 3.0
+
+
+
+ Servers
+
+
+ Server
+
+
setHoverState(prevState => ({ ...prevState, Host: true }))} onMouseLeave={() => setHoverState({ Host: false })}>
+
Host
+
+
setHoverState(prevState => ({ ...prevState, Path: true }))} onMouseLeave={() => setHoverState({ Path: false })}>
+
Pathname
+
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * Compare how the meta data moved place between v2 and v3
+ */
+export function Asyncapi3MetaComparison({ className = '' }) {
+ const [hoverState, setHoverState] = useState({
+ Info: false,
+ Tags: false,
+ External: false
+ });
+
+ return (
+
+
+
AsyncAPI 2.x
+
+
+
setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}>
+ Info
+
+
+
setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
+
Tags
+
+
setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
+
External Docs
+
+
+
+
+
+
AsyncAPI 3.0
+
+
+
setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}>
+ Info
+
+
setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}>
+
Tags
+
+
setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}>
+
External Docs
+
+
+
+
+
+
+ )
+}
+
+/**
+ * Compares how operations changed from v2 to v3
+ */
+export function Asyncapi3OperationComparison({ className = '' }) {
+ return (
+
+
+
AsyncAPI 2.x
+
+
+
+ Channels
+
+
+
+ Channel Item
+
+
+
+ Operation (Publish and Subscribe)
+
+
+
+
+
+
+
+
+
AsyncAPI 3.0
+
+
+
+ Operations
+
+
+ Operation
+
+
+
+ action (send or receive)
+
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * Compares how the schema and schemaFormat changed location from v2 to v3
+ */
+export function Asyncapi3SchemaFormatComparison({ className = '' }) {
+ const [hoverState, setHoverState] = useState({
+ SchemaFormat: false,
+ Payload: false
+ });
+
+ return (
+
+
+
AsyncAPI 2.x
+
+
+
+ components | channels
+
+
+
+ messages
+
+
+
+ message
+
+
setHoverState(prevState => ({ ...prevState, SchemaFormat: true }))} onMouseLeave={() => setHoverState({ SchemaFormat: false })}>
+ schemaFormat
+
+
+
setHoverState(prevState => ({ ...prevState, Payload: true }))} onMouseLeave={() => setHoverState({ Payload: false })}>
+ payload
+
+
+
+
+
+
+
+
+
+
+
+
AsyncAPI 3.0
+
+
+
+ components | channels
+
+
+
+ messages
+
+
+
+ message
+
+
setHoverState(prevState => ({ ...prevState, Payload: true }))} onMouseLeave={() => setHoverState({ Payload: false })}>
+ payload
+
+
+
setHoverState(prevState => ({ ...prevState, SchemaFormat: true }))} onMouseLeave={() => setHoverState({ SchemaFormat: false })}>
+ schemaFormat
+
+
+ schema
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/components/DemoAnimation.js b/components/DemoAnimation.js
index 107e483c6b56..6e302c74d358 100644
--- a/components/DemoAnimation.js
+++ b/components/DemoAnimation.js
@@ -44,7 +44,7 @@ export default function DemoAnimation({ className = '' }) {
const common = (
<>
- asyncapi: 2.6.0
+ asyncapi: 3.0.0
info:
@@ -85,10 +85,34 @@ export default function DemoAnimation({ className = '' }) {
channels:
- user/signedup:
+ userSignedup:
- subscribe:
+ address:'user/signedup'
+
+
+ messages:
+
+
+ userSignedupMessage:
+
+
+ $ref:'#/components/messages/UserSignedUp'
+
+
+ operations:
+
+
+ processUserSignups:
+
+
+ action:'receive'
+
+
+ channel:
+
+
+ $ref: '#/channels/userSignedup'
>,
@@ -99,12 +123,6 @@ export default function DemoAnimation({ className = '' }) {
function renderUntilMessagePayload(callback) {
return renderTyping(
<>
-
- message:
-
-
- $ref: '#/components/messages/UserSignedUp'
-
components:
@@ -242,7 +260,7 @@ export default function DemoAnimation({ className = '' }) {
- SUB user/signedup
+ RECEIVES user/signedup
diff --git a/components/data/buckets.js b/components/data/buckets.js
index a171d2718858..8ecab700fa10 100644
--- a/components/data/buckets.js
+++ b/components/data/buckets.js
@@ -4,6 +4,7 @@ import IconUseCases from '../icons/UseCases'
import IconGuide from '../icons/Guide'
import IconSpec from '../icons/Spec'
import IconUsers from '../icons/Users'
+import IconMigration from '../icons/Migration'
export const buckets = [
{
@@ -51,7 +52,16 @@ export const buckets = [
borderClassName: 'border-yellow-200',
Icon: IconSpec,
},
- {
+ {
+ name: 'migration',
+ title: 'Migration',
+ description: 'Our migration guides on how to upgrade to newer AsyncAPI versions.',
+ link: '/docs/migration',
+ className: 'bg-blue-400',
+ borderClassName: 'border-blue-400',
+ Icon: IconMigration,
+ },
+ {
name: 'community',
title: 'Community',
description: 'Our Community section documents the community guidelines and resources.',
@@ -61,7 +71,7 @@ export const buckets = [
Icon: IconUsers,
},
].map(bucket => {
- // we need such a mapping for some parts of website, e.g navigation blocks use the `icon` property, not `Icon` etc.
+ // we need such a mapping for some parts of website, e.g navigation blocks use the `icon` property, not `Icon` etc.
return {
...bucket,
href: bucket.link,
diff --git a/components/icons/Migration.js b/components/icons/Migration.js
new file mode 100644
index 000000000000..77180efeba87
--- /dev/null
+++ b/components/icons/Migration.js
@@ -0,0 +1,15 @@
+export default function IconUsers({ ...rest }) {
+ //
+ return (
+
+ );
+}
diff --git a/components/icons/Users.js b/components/icons/Users.js
index c46a89deb774..9f43fdcb633d 100644
--- a/components/icons/Users.js
+++ b/components/icons/Users.js
@@ -1,14 +1,14 @@
export default function IconUsers({ ...rest }) {
return (
-