feat(docs): API sandbox

gatsby-node.js

@@ -78,7 +78,8 @@ exports.createPages = async ({ graphql, actions }) => {
   })
 }
 
-exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
+exports.onCreateWebpackConfig = ({ stage, actions, loaders, getConfig }) => {
+  const { setWebpackConfig } = actions
   if (stage === 'build-javascript') {
     const config = getConfig()
     const miniCssExtractPlugin = config.plugins.find(
@@ -89,4 +90,17 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
     }
     actions.replaceWebpackConfig(config)
   }
+
+  if (stage === 'build-html') {
+    setWebpackConfig({
+      module: {
+        rules: [
+          {
+            test: /swagger-ui/,
+            use: loaders.null(),
+          },
+        ],
+      },
+    })
+  }
 }

package.json

@@ -73,6 +73,7 @@
     "react-helmet": "^5.2.1",
     "react-typography": "^0.16.19",
     "slugify": "^1.4.0",
+    "swagger-ui": "^3.25.0",
     "typography": "^0.16.19",
     "understory": "^1.11.0"
   },

src/__tests__/components/common/__snapshots__/swagger-sandbox.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components : Common: Swagger sandbox renders correctly 1`] = `
+<div
+  id="swaggerWrapper"
+/>
+`;

src/__tests__/components/common/swagger-sandbox.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import SwaggerUI from 'swagger-ui'
+import SwaggerSandbox from '../../../components/common/swagger-sandbox'
+
+beforeEach(() => {
+  window.SwaggerUI = SwaggerUI
+})
+
+describe('Components : Common: Swagger sandbox', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<SwaggerSandbox />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
+
+afterEach(() => {
+  delete window.SwaggerUI
+})

src/components/common/swagger-sandbox.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useRef } from 'react'
+import 'swagger-ui/dist/swagger-ui.css'
+import './swagger-sandbox.scss'
+import SwaggerUI from 'swagger-ui'
+
+const SwaggerSandbox = () => {
+  const swaggerRef = useRef(null)
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+    SwaggerUI({
+      domNode: swaggerRef.current,
+      url: '/api-docs/COVID-tracking-endpoints-1.0-docs.json',
+      defaultModelExpandDepth: 10,
+      docExpansion: 'list',
+    })
+  }, [])
+
+  return <div ref={swaggerRef} id="swaggerWrapper" />
+}
+
+export default SwaggerSandbox

src/components/common/swagger-sandbox.scss

@@ -0,0 +1,114 @@
+@import '../../scss/colors.module.scss';
+@import '../../scss/breakpoints.module.scss';
+
+#swaggerWrapper {
+  .swagger-ui {
+    pre.microlight {
+      line-height: 1rem;
+    }
+
+    .wrapper {
+      padding: 0px;
+    }
+
+    .download-contents {
+      font-size: 0.7rem;
+      line-height: 1.2rem;
+    }
+
+    .model {
+      border:0px;
+
+      td, tr {
+        border-top: none;
+        border-bottom: none;
+        padding-top:20px;
+        padding-bottom:20px;
+      }
+
+      tbody tr {
+        border-top:1px solid rgb(200, 200, 200);
+      }
+    }
+
+    table, th, td {
+      border-color: rgb(175, 175, 175);
+      border-left: none;
+      border-right: none;
+    }
+
+    td {
+      font-size: 0.8rem;
+    }
+
+    tr {
+      line-height: 1.5rem;
+    }
+
+    ul {
+      margin: auto;
+    }
+
+    .url {
+      display: none;
+    }
+
+    .scheme-container {
+      box-shadow: none;
+      padding-top: 0px;
+      margin-top: 0px;
+    }
+
+    select.content-type {
+      border-color: $color-plum-600;
+    }
+
+    .opblock-title span:after,
+    .opblock-summary-method {
+      background-color: $color-plum-600;
+    }
+
+    .btn.execute {
+      background-color: $color-plum-600;
+      border-color: $color-plum-600;
+    }
+
+    .btn.execute:active,
+    .btn.execute:hover {
+      background-color: $color-plum-700;
+    }
+
+    .response-control-media-type__accept-message,
+    .model .prop-type {
+      color: $color-plum-600;
+    }
+
+    .opblock-summary,
+    .opblock-get {
+      background-color: $color-plum-200;
+      border-color: $color-plum-300;
+      border-radius: 2px;
+    }
+
+    @media (max-width: $viewport-ms) {
+      .responses-table,
+      .model {
+        table-layout: fixed;
+      }
+      .col_header.response-col_description {
+        width: 55%;
+      }
+
+      .model td {
+        display: block;
+        padding: 0px;
+        max-width: 100%;
+      }
+
+      .model td:nth-child(2) {
+        margin-bottom: 30px;
+        border-bottom: 0px;
+      }
+    }
+  }
+}

src/pages/data/api-sandbox.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import SwaggerSandbox from '../../components/common/swagger-sandbox'
+import Layout from '../../components/layout'
+
+export default ({ data }) => (
+  <Layout
+    title="API Sandbox"
+    navigation={data.allContentfulNavigationGroup.edges[0].node.pages}
+  >
+    Below, you can explore each of our endpoints, try out API requests, and
+    learn about our schema.
+    <SwaggerSandbox />
+  </Layout>
+)
+
+export const query = graphql`
+  query {
+    allContentfulNavigationGroup(filter: { slug: { eq: "data" } }) {
+      edges {
+        node {
+          pages {
+            ... on ContentfulPage {
+              title
+              link: slug
+            }
+            ... on ContentfulNavigationLink {
+              title
+              link: url
+            }
+          }
+        }
+      }
+    }
+  }
+`