From 13c4863797ed4f939272c60eefce306837a15d53 Mon Sep 17 00:00:00 2001 From: Nawed Ali Date: Mon, 13 Mar 2023 22:43:28 +0530 Subject: [PATCH] docs: add interactive comparison w/ openapi (#1055) Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>%0ACo-authored-by: Alejandra Quetzalli --- components/OpenAPIComparison.js | 337 +++++++++++++++++--------------- 1 file changed, 176 insertions(+), 161 deletions(-) diff --git a/components/OpenAPIComparison.js b/components/OpenAPIComparison.js index 2cef96918658..a556c7b6a173 100644 --- a/components/OpenAPIComparison.js +++ b/components/OpenAPIComparison.js @@ -1,125 +1,56 @@ -export default function OpenAPIComparison({ className = '' }) { - return ( -
-
-

OpenAPI 3.0

- -
-
- Info -
-
-
- Servers -
-
- Security -
-
-
- Paths -
-
- Path Item +import React, { useState } from 'react'; -
-
- Summary and description -
-
-
- Operation (GET, PUT, POST, etc.) +export default function OpenAPIComparison({ 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 + }); -
-
- Request -
-
- Responses -
-
-
-
-
-
-
-
-
-
- Tags -
-
- External Docs -
-
-
- Components + return ( +
+
+

OpenAPI 3.0

-
-
- Definitions -
-
- Responses -
-
- Parameters -
-
- Response Headers -
-
- Security Definitions -
-
- Callbacks -
-
- Links -
-
-
-
-
- -
-

AsyncAPI 2.0

- -
-
- Info -
-
-
- Servers (hosts + security) +
+
setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Info: false })}> + Info
-
-
- Channel -
-
- Channel Item - -
-
-
- Operation (Publish and Subscribe) - -
-
- Summary, description, tags, etc. -
-
-
- Message +
setHoverState(prevState => ({ ...prevState, Servers: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Servers: false })}> + Servers +
+
+ Security +
+
+
setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Paths: false })}> + Paths +
+
{ return setHoverState(prevState => ({ ...prevState, PathItem: true })) }} onMouseLeave={() => { return setHoverState({ ...hoverState, PathItem: false }) }}> + Path Item -
- Headers -
-
- Payload -
+
+
setHoverState(prevState => ({ ...prevState, Summary: true }))} onMouseLeave={() => { return setHoverState({ ...hoverState, Summary: false }) }}> + Summary and description +
+
+
setHoverState(prevState => ({ ...prevState, Operation: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Operation: false })}> + Operation (GET, PUT, POST, etc.) + +
+
setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Message: false })}> + Request +
+
setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ ...hoverState, Message: false })}> + Responses
@@ -128,61 +59,145 @@ export default function OpenAPIComparison({ className = '' }) {
-
-
-
- Id (application identifier) -
-
-
-
- Tags -
-
- External Docs -
-
-
- Components - -
-
- Schemas -
-
- Messages -
-
- Security Schemes +
+
setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}> +

Tags

-
- Parameters +
setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}> +

External Docs

-
- Correlation Ids +
+
setHoverState(prevState => ({ ...prevState, Components: true }))} onMouseLeave={() => setHoverState({ Components: false })}> + Components + +
+
+ Definitions +
+
+ Responses +
+
+ Parameters +
+
+ Response Headers +
+
+ Security Definitions +
+
+ Callbacks +
+
+ Links +
-
- Operation Traits +
+
+
+ +
+

AsyncAPI 2.0

+ +
+
setHoverState(prevState => ({ ...prevState, Info: true }))} onMouseLeave={() => setHoverState({ Info: false })}> + Info +
+
+
setHoverState(prevState => ({ ...prevState, Servers: true }))} onMouseLeave={() => setHoverState({ Servers: false })}> + Servers (hosts + security)
-
- Message Traits +
+
setHoverState(prevState => ({ ...prevState, Paths: true }))} onMouseLeave={() => setHoverState({ Paths: false })}> + Channel + +
+
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, Summary: true }))} onMouseLeave={() => setHoverState({ Summary: false })} > + Summary, description, tags, etc. +
+
+
setHoverState(prevState => ({ ...prevState, Message: true }))} onMouseLeave={() => setHoverState({ Message: false })}> + Message + +
+ Headers +
+
+ Payload +
+
+
+
+
+
+
+
-
- Server Bindings +
+
+
+ Id (application identifier)
-
- Channel Bindings +
+
+
setHoverState(prevState => ({ ...prevState, Tags: true }))} onMouseLeave={() => setHoverState({ Tags: false })}> +

Tags

-
- Operation Bindings +
setHoverState(prevState => ({ ...prevState, External: true }))} onMouseLeave={() => setHoverState({ External: false })}> +

External Docs

-
- Message Bindings +
+
setHoverState(prevState => ({ ...prevState, Components: true }))} onMouseLeave={() => setHoverState({ Components: false })}> + Components + +
+
+ Schemas +
+
+ Messages +
+
+ Security Schemes +
+
+ Parameters +
+
+ Correlation Ids +
+
+ Operation Traits +
+
+ Message Traits +
+
+ Server Bindings +
+
+ Channel Bindings +
+
+ Operation Bindings +
+
+ Message Bindings +
-
-
- ) +
+ ) }