Feature: Render example JSON response

2024-11-02 16:25:37 +01:00 · 2021-08-07 17:14:31 +02:00 · 2021-08-07 17:14:31 +02:00 · b97539a51f
commit b97539a51f
parent 08e7004fe2
5 changed files with 157 additions and 12 deletions
--- a/data/sidebars/references.yml
+++ b/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
--- a/gatsby-node.js
+++ b/gatsby-node.js
@ -161,12 +161,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)

--- a/package-lock.json
+++ b/package-lock.json
@ -6124,6 +6124,11 @@
        }
      }
    },
+    "base16": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
+      "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
+    },
    "base64-arraybuffer": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
@ -11128,6 +11133,33 @@
        "websocket-driver": ">=0.5.1"
      }
    },
+    "fbemitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz",
+      "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==",
+      "requires": {
+        "fbjs": "^3.0.0"
+      }
+    },
+    "fbjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz",
+      "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==",
+      "requires": {
+        "cross-fetch": "^3.0.4",
+        "fbjs-css-vars": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
+    "fbjs-css-vars": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
+    },
    "fd": {
      "version": "0.0.3",
      "resolved": "https://registry.npmjs.org/fd/-/fd-0.0.3.tgz",
@ -11336,6 +11368,15 @@
        "readable-stream": "^2.3.6"
      }
    },
+    "flux": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.1.tgz",
+      "integrity": "sha512-emk4RCvJ8RzNP2lNpphKnG7r18q8elDYNAPx7xn+bDeOIo9FFfxEfIQ2y6YbQNmnsGD3nH1noxtLE64Puz1bRQ==",
+      "requires": {
+        "fbemitter": "^3.0.0",
+        "fbjs": "^3.0.0"
+      }
+    },
    "follow-redirects": {
      "version": "1.13.1",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
@ -17051,6 +17092,11 @@
      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
    },
+    "lodash.curry": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
+    },
    "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -17082,6 +17128,11 @@
      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI="
    },
+    "lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
+    },
    "lodash.foreach": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
@ -20810,6 +20861,11 @@
        "escape-goat": "^2.0.0"
      }
    },
+    "pure-color": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
+      "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
+    },
    "q": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@ -20923,6 +20979,17 @@
        "object-assign": "^4.1.1"
      }
    },
+    "react-base16-styling": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",
+      "integrity": "sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=",
+      "requires": {
+        "base16": "^1.0.0",
+        "lodash.curry": "^4.0.1",
+        "lodash.flow": "^3.3.0",
+        "pure-color": "^1.2.0"
+      }
+    },
    "react-dev-utils": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-4.2.3.tgz",
@ -21207,6 +21274,17 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz",
      "integrity": "sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA=="
    },
+    "react-json-view": {
+      "version": "1.21.3",
+      "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.21.3.tgz",
+      "integrity": "sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==",
+      "requires": {
+        "flux": "^4.0.1",
+        "react-base16-styling": "^0.6.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "react-textarea-autosize": "^8.3.2"
+      }
+    },
    "react-lifecycles-compat": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@ -21232,6 +21310,26 @@
      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
      "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
    },
+    "react-textarea-autosize": {
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz",
+      "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "use-composed-ref": "^1.0.0",
+        "use-latest": "^1.0.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.8",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
+          "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
    "read": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@ -24165,6 +24263,11 @@
      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-2.2.1.tgz",
      "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q=="
    },
+    "ts-essentials": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
+      "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w=="
+    },
    "ts-invariant": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.6.0.tgz",
@ -24292,6 +24395,11 @@
        "is-typedarray": "^1.0.0"
      }
    },
+    "ua-parser-js": {
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
+    },
    "uc.micro": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@ -24856,6 +24964,27 @@
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
    },
+    "use-composed-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
+      "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
+      "requires": {
+        "ts-essentials": "^2.0.3"
+      }
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ=="
+    },
+    "use-latest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
+      "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      }
+    },
    "username-sync": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/username-sync/-/username-sync-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -51,6 +51,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": "^6.2.0",
    "remark": "^13.0.0",
--- a/src/templates/Swagger/Paths.jsx
+++ b/src/templates/Swagger/Paths.jsx
@ -4,6 +4,7 @@ import slugify from 'slugify'
 import { cleanPathKey } from './utils'
 import styles from './Paths.module.scss'
 import stylesDoc from '../Doc.module.scss'
+import ReactJson from 'react-json-view'

 const ParameterExample = ({ properties }) => (
  //
@ -34,10 +35,10 @@ const ParameterExample = ({ properties }) => (
            )}
            {(properties[key].type === 'integer' ||
              properties[key].type === 'number') && (
-              <span className="token number">
-                {`${properties[key].example}`}
-              </span>
-            )}
+                <span className="token number">
+                  {`${properties[key].example}`}
+                </span>
+              )}
            {(properties[key].type === 'array' ||
              properties[key].type === 'object') &&
              JSON.stringify(properties[key].example, null, 2)}
@ -94,6 +95,8 @@ const Responses = ({ responses }) => (
    {Object.keys(responses).map((key) => (
      <div key={key} className={styles.response}>
        <code>{key}</code> {responses[key].description}
+        <br />
+        <ResponseExample examples={responses[key].example} />
      </div>
    ))}
  </>
@ -103,9 +106,28 @@ Responses.propTypes = {
  responses: PropTypes.object.isRequired
 }

+const ResponseExample = (({ examples }) => {
+
+  if (!examples) return null
+  const jsonExample = examples["application/json"]
+  if (jsonExample) {
+    return (
+      <div>
+        <b>Example</b>
+        <br />
+        <code> <ReactJson name={null} src={jsonExample} collapsed={true} enableClipboard={false} /></code>
+      </div>
+    )
+  }
+})
+
+ResponseExample.propTypes = {
+  example: PropTypes.object
+}
+
+
 const Method = ({ keyName, value }) => {
  const { summary, description, parameters, responses } = value
-
  return (
    <div className={styles.method}>
      <h3 className={styles.pathMethod} data-type={keyName}>