Feature: Render example JSON response

data/sidebars/references.yml

@@ -13,11 +13,6 @@
     - title: API Reference
       link: /references/aquarius/
 
-- group: Aquarius Py Module
-  items:
-    - title: API Reference
-      link: /references/read-the-docs/aquarius/
-
 - group: provider REST API
   items:
     - title: API Reference

gatsby-node.js

@@ -162,12 +162,10 @@ exports.createPages = ({ graphql, actions }) => {
 
         const markdowns = result.data.allRepoMarkdown.edges
         const oceanPyList = filterMarkdownList(markdowns, 'ocean.py')
-        const aquariusList = filterMarkdownList(markdowns, 'aquarius')
         const providerList = filterMarkdownList(markdowns, 'provider')
         const subgraphList = filterMarkdownList(markdowns, 'ocean-subgraph')
 
         await createReadTheDocsPage(createPage, 'ocean-py', oceanPyList)
-        await createReadTheDocsPage(createPage, 'aquarius', aquariusList)
         await createReadTheDocsPage(createPage, 'provider', providerList)
         await createReadTheDocsPage(createPage, 'ocean-subgraph', subgraphList)
 

package.json

@@ -56,6 +56,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-json-view": "^1.21.3",
     "react-scrollspy": "^3.4.3",
     "rehype-react": "^7.0.2",
     "remark": "^13.0.0",

src/templates/Swagger/Paths.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import slugify from 'slugify'
 import styles from './Paths.module.scss'
 import stylesDoc from '../Doc.module.scss'
-
+const ResponseExample = React.lazy(() => import('./ResponseExample'))
 const ParameterExample = ({ properties }) => (
   //
   // HEADS UP!
@@ -87,24 +87,35 @@ Parameters.propTypes = {
   parameters: PropTypes.array.isRequired
 }
 
-const Responses = ({ responses }) => (
-  <>
-    <h4 className={styles.subHeading}>Responses</h4>
-    {Object.keys(responses).map((key) => (
-      <div key={key} className={styles.response}>
-        <code>{key}</code> {responses[key].description}
-      </div>
-    ))}
-  </>
-)
+const Responses = ({ responses }) => {
+  const isSSR = typeof window === 'undefined'
+
+  return (
+    <>
+      <h4 className={styles.subHeading}>Responses</h4>
+      {Object.keys(responses).map((key) => (
+        <div key={key} className={styles.response}>
+          <code>{key}</code> {responses[key].description}
+          <br />
+          <>
+            {!isSSR && (
+              <React.Suspense fallback={<div />}>
+                <ResponseExample examples={responses[key].example} />
+              </React.Suspense>
+            )}
+          </>
+        </div>
+      ))}
+    </>
+  )
+}
 
 Responses.propTypes = {
   responses: PropTypes.object.isRequired
 }
 
 const Method = ({ keyName, value }) => {
   const { summary, description, parameters, responses } = value
-
   return (
     <div className={styles.method}>
       <h3 className={styles.pathMethod} data-type={keyName}>

src/templates/Swagger/ResponseExample.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactJson from 'react-json-view'
+
+const ResponseExample = ({ examples }) => {
+  if (!examples) return null
+  const jsonExample = examples['application/json']
+  const plainText = examples['text/plain']
+
+  if (jsonExample) {
+    return (
+      <div>
+        <b>Example</b>
+        <br />
+        <code>
+          {typeof jsonExample === 'boolean' ? (
+            <code>{JSON.stringify(jsonExample)}</code>
+          ) : (
+            <ReactJson
+              name={null}
+              src={jsonExample}
+              collapsed
+              enableClipboard={false}
+            />
+          )}
+        </code>
+      </div>
+    )
+  } else if (plainText) {
+    return (
+      <div>
+        <b>Example</b>
+        <code>{plainText}</code>
+      </div>
+    )
+  }
+
+  return null
+}
+
+ResponseExample.propTypes = {
+  examples: PropTypes.object
+}
+
+export default ResponseExample