diff --git a/components/Asyncapi3Comparison.js b/components/Asyncapi3Comparison.js
new file mode 100644
index 00000000000..c4e8800204b
--- /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/data/buckets.js b/components/data/buckets.js
index a171d271885..8ecab700fa1 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 00000000000..77180efeba8
--- /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 c46a89deb77..9f43fdcb633 100644
--- a/components/icons/Users.js
+++ b/components/icons/Users.js
@@ -1,14 +1,14 @@
export default function IconUsers({ ...rest }) {
return (
-