Add generated API docs to website (#537)

* Add dependencies for openapi-page component

* Add openapi-page component

* Use openapi-page component for /api-docs page

* add /api link to nav  (#570)

* website: remove superflous netlify config file

* website: misc clean up website/readme
- remove netlify badge
- run through prettier markdown fmt

* website: add /api docs to nav
- adds /api-docs => /api rewrite
- updates open-api component base api path to be /api
- adds .html rewrite for good measure

* Fix currentPath highlight issue in subnav

* Clean up inline styles in operation-object

* Remove React imports

* Remove api-docs rewrite

Co-authored-by: Kyle MacDonald <kylemac@users.noreply.github.com>

website/components/openapi-page/partials/operation-object/operation-object.module.css

@@ -0,0 +1,145 @@
+.root {
+  border-bottom: 1px solid var(--gray-6);
+  margin: 0;
+  margin-top: -1px;
+  position: relative;
+  transition: border-color 0.2s;
+
+  &[data-is-hovered='true'] {
+    border-bottom-color: var(--brand);
+    z-index: 1;
+  }
+}
+
+.header {
+  display: flex;
+  position: relative;
+  padding: 16px 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.meta {
+  width: 100%;
+}
+
+.title {
+  position: relative;
+  display: inline-block;
+  composes: g-type-body-x-strong from global;
+  color: var(--gray-2);
+  margin: 0 0 4px 0;
+  padding: 0;
+
+  &[data-is-highlighted='true'] {
+    &::before {
+      content: '\200B';
+      position: absolute;
+      top: -4px;
+      left: -8px;
+      right: -8px;
+      bottom: -4px;
+      background: var(--warning-l1);
+      z-index: -1;
+      border-radius: 8px;
+    }
+  }
+
+  &[data-is-hovered='true'] {
+    color: var(--brand);
+  }
+}
+
+.endpoint {
+  composes: g-type-code from global;
+
+  & .method {
+    color: var(--gray-4);
+
+    &[data-is-hovered='true'] {
+      color: var(--brand);
+    }
+  }
+
+  & .path {
+    color: var(--gray-3);
+  }
+}
+
+.toggleButton {
+  border: none;
+  color: var(--brand);
+  background: none;
+  display: flex;
+  align-items: center;
+  font-size: inherit;
+  margin: 0;
+  padding: 0 0 0 24px;
+  transition: color 0.2s;
+
+  & .toggleIcon {
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
+    position: relative;
+    top: 1px;
+    transition: transform 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & svg {
+      & [fill] {
+        fill: var(--brand);
+      }
+      & [stroke] {
+        stroke: var(--brand);
+      }
+    }
+
+    &[data-is-collapsed='false'] {
+      transform: rotate(-180deg);
+    }
+  }
+
+  &[data-is-hovered='true'] {
+    color: var(--brand);
+  }
+}
+
+.details {
+  padding-bottom: 80px;
+
+  & .summary {
+    color: var(--gray-2);
+    margin: 8px 0 24px 0;
+  }
+
+  & .columnHeading {
+    margin: 0 0 1em 0;
+    font-weight: bold;
+  }
+
+  & .columnSectionHeading {
+    margin: 0 !important; /* Needed to override ".g-content p" margins */
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--gray-6);
+    color: var(--gray-4);
+  }
+}
+
+.twoColumnLayout {
+  display: flex;
+
+  & > div:nth-child(1),
+  & > div:nth-child(3) {
+    position: relative;
+    width: calc(50% - 16px);
+  }
+
+  & > div:nth-child(2) {
+    width: 32px;
+  }
+}