docusaurus-theme-openapi-docs 2.0.0-beta.2 → 2.0.0-beta.4

package/src/theme/ApiExplorer/Response/_Response.scss

@@ -0,0 +1,81 @@
+.openapi-explorer__response-container {
+  background-color: var(--ifm-pre-background);
+  border-radius: var(--openapi-card-border-radius);
+  border: 1px solid var(--openapi-explorer-border-color);
+  box-shadow: 0 2px 3px hsla(222, 8%, 43%, 0.1),
+    0 8px 16px -10px hsla(222, 8%, 43%, 0.2);
+  color: var(--ifm-pre-color);
+  line-height: var(--ifm-pre-line-height);
+  margin-bottom: var(--ifm-spacing-vertical);
+  margin-top: 0;
+  overflow: auto;
+  transition: 300ms;
+
+  &:hover {
+    box-shadow: 0 0 0 2px rgba(38, 53, 61, 0.15),
+      0 2px 3px hsla(222, 8%, 43%, 0.15),
+      0 16px 16px -10px hsla(222, 8%, 43%, 0.2);
+  }
+
+  .openapi-explorer__code-block code {
+    padding-top: 0;
+  }
+}
+
+.openapi-explorer__response-title-container {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--openapi-explorer-border-color);
+  margin: 0;
+  padding: 0.75rem var(--ifm-pre-padding);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.openapi-explorer__response-placeholder-message {
+  font-size: 12px;
+  padding: 1.25rem;
+  margin-bottom: 0;
+  text-align: center;
+}
+
+.openapi-explorer__response-clear-btn {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.openapi-explorer__loading-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.openapi-response__dot::before {
+  margin-right: 0.2rem;
+  margin-bottom: 0.15rem;
+  content: "⬤";
+  color: var(--ifm-color-primary);
+  font-size: 8px;
+}
+
+.openapi-response__dot--danger::before {
+  color: var(--ifm-color-danger);
+}
+
+.openapi-response__dot--success::before {
+  color: var(--ifm-color-success);
+}
+
+.openapi-response__dot--info::before {
+  color: var(--ifm-color-info);
+}
+
+.openapi-response__status-code {
+  margin-left: -1rem;
+}
+
+.openapi-response__status-headers {
+  margin-left: -1rem;
+}

package/src/theme/{ApiDemoPanel → ApiExplorer}/Response/index.tsx

@@ -8,11 +8,14 @@
 import React from "react";
 
 import { usePrismTheme } from "@docusaurus/theme-common";
+import { useDoc } from "@docusaurus/theme-common/internal";
+import { Loading } from "@nextui-org/react";
+import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
-import CodeBlock from "@theme/CodeBlock";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
 import clsx from "clsx";
+import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
 import { clearResponse, clearCode, clearHeaders } from "./slice";
 
@@ -36,7 +39,9 @@ function formatXml(xml: string) {
   return formatted.substring(1, formatted.length - 3);
 }
 
-function Response() {
+function Response({ item }: { item: NonNullable<ApiItem> }) {
+  const metadata = useDoc();
+  const hideSendButton = metadata.frontMatter.hide_send_button;
   const prismTheme = usePrismTheme();
   const code = useTypedSelector((state: any) => state.response.code);
   const headers = useTypedSelector((state: any) => state.response.headers);
@@ -51,36 +56,37 @@ function Response() {
         ? "openapi-response__dot--success"
         : "openapi-response__dot--info");
 
-  if (response === undefined) {
+  if (!item.servers || hideSendButton) {
     return null;
   }
 
   let prettyResponse: string = response;
-  try {
-    prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
-  } catch {
-    if (response.startsWith("<")) {
-      prettyResponse = formatXml(response);
+
+  if (prettyResponse) {
+    try {
+      prettyResponse = JSON.stringify(JSON.parse(response), null, 2);
+    } catch {
+      if (response.startsWith("<")) {
+        prettyResponse = formatXml(response);
+      }
     }
   }
 
   return (
-    <details className="openapi-demo__details" open={true}>
-      <summary className="openapi-demo__summary-container">
-        <div className="openapi-demo__summary-content">
-          <h4 className="openapi-demo__summary-header">Response</h4>
-          <button
-            className="button button--sm button--secondary"
-            onClick={() => {
-              dispatch(clearResponse());
-              dispatch(clearCode());
-              dispatch(clearHeaders());
-            }}
-          >
-            Clear
-          </button>
-        </div>
-      </summary>
+    <div className="openapi-explorer__response-container">
+      <div className="openapi-explorer__response-title-container">
+        <span className="openapi-explorer__response-title">Response</span>
+        <span
+          className="openapi-explorer__response-clear-btn"
+          onClick={() => {
+            dispatch(clearResponse());
+            dispatch(clearCode());
+            dispatch(clearHeaders());
+          }}
+        >
+          Clear
+        </span>
+      </div>
       <div
         style={{
           backgroundColor: prismTheme.plain.backgroundColor,
@@ -102,28 +108,42 @@ function Response() {
               }}
               default
             >
-              <CodeBlock
-                className="openapi-demo__code-block openapi-response__status-code"
+              {/* @ts-ignore */}
+              <ApiCodeBlock
+                className="openapi-explorer__code-block openapi-response__status-code"
                 language={response.startsWith("<") ? `xml` : `json`}
               >
-                {prettyResponse || "No Response"}
-              </CodeBlock>
+                {prettyResponse || (
+                  <p className="openapi-explorer__response-placeholder-message">
+                    Click the <code>Send API Request</code> button above and see
+                    the response here!
+                  </p>
+                )}
+              </ApiCodeBlock>
             </TabItem>
             {/* @ts-ignore */}
             <TabItem label="Headers" value="headers">
-              <CodeBlock
-                className="openapi-demo__code-block openapi-response__status-headers"
+              {/* @ts-ignore */}
+              <ApiCodeBlock
+                className="openapi-explorer__code-block openapi-response__status-headers"
                 language={response.startsWith("<") ? `xml` : `json`}
               >
                 {JSON.stringify(headers, undefined, 2)}
-              </CodeBlock>
+              </ApiCodeBlock>
             </TabItem>
           </SchemaTabs>
+        ) : prettyResponse === "Fetching..." ? (
+          <div className="openapi-explorer__loading-container">
+            <Loading color="success" />
+          </div>
         ) : (
-          prettyResponse || "No Response"
+          <p className="openapi-explorer__response-placeholder-message">
+            Click the <code>Send API Request</code> button above and see the
+            response here!
+          </p>
         )}
       </div>
-    </details>
+    </div>
   );
 }
 

package/src/theme/{ApiDemoPanel → ApiExplorer}/SecuritySchemes/index.tsx

@@ -23,9 +23,11 @@ function SecuritySchemes(props: any) {
 
   const selectedAuth = options[selected];
   return (
-    <details className="openapi-demo__details" open={false}>
-      <summary className="openapi-demo__summary-container">
-        <h4 className="openapi-demo__summary-header">Authorization</h4>
+    <details className="openapi-security__details" open={false}>
+      <summary className="openapi-security__summary-container">
+        <h4 className="openapi-security__summary-header">
+          Authorization: {selectedAuth[0].name ?? selectedAuth[0].type}
+        </h4>
       </summary>
       {selectedAuth.map((auth: any) => {
         const isHttp = auth.type === "http";

package/{lib-next/theme/ApiDemoPanel → src/theme/ApiExplorer}/Server/_Server.scss

@@ -1,4 +1,4 @@
-.openapi-demo__server-container {
+.openapi-explorer__server-container {
   background: var(--openapi-card-background-color);
   border-radius: var(--openapi-card-border-radius);
   color: var(--ifm-pre-color);
@@ -14,3 +14,13 @@
     display: none;
   }
 }
+
+.openapi-explorer__server-url {
+  font-size: var(--openapi-explorer-font-size-input);
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.openapi-explorer__server-description {
+  padding-left: 0.5rem;
+  font-weight: var(--ifm-font-weight-bold);
+}

package/src/theme/{ApiDemoPanel → ApiExplorer}/Server/index.tsx

@@ -7,10 +7,10 @@
 
 import React, { useState } from "react";
 
-import FloatingButton from "@theme/ApiDemoPanel/FloatingButton";
-import FormItem from "@theme/ApiDemoPanel/FormItem";
-import FormSelect from "@theme/ApiDemoPanel/FormSelect";
-import FormTextInput from "@theme/ApiDemoPanel/FormTextInput";
+import FloatingButton from "@theme/ApiExplorer/FloatingButton";
+import FormItem from "@theme/ApiExplorer/FormItem";
+import FormSelect from "@theme/ApiExplorer/FormSelect";
+import FormTextInput from "@theme/ApiExplorer/FormTextInput";
 import { useTypedDispatch, useTypedSelector } from "@theme/ApiItem/hooks";
 
 import { setServer, setServerVariable } from "./slice";
@@ -58,23 +58,18 @@ function Server() {
     }
     return (
       <FloatingButton onClick={() => setIsEditing(true)} label="Edit">
-        <FormItem label="Base URL">
-          <pre
-            style={{
-              background: "var(--openapi-card-background-color)",
-              paddingLeft: "0px",
-            }}
-          >
-            <code title={url}>{url}</code>
-          </pre>
+        <FormItem>
+          <span className="openapi-explorer__server-url" title={url}>
+            {url}
+          </span>
         </FormItem>
       </FloatingButton>
     );
   }
   return (
-    <div className="openapi-demo__server-container">
+    <div className="openapi-explorer__server-container">
       <FloatingButton onClick={() => setIsEditing(false)} label="Hide">
-        <FormItem label="Base URL">
+        <FormItem>
           <FormSelect
             options={options.map((s: any) => s.url)}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -88,7 +83,9 @@ function Server() {
             }}
             value={value?.url}
           />
-          <small>{value?.description}</small>
+          <small className="openapi-explorer__server-description">
+            {value?.description}
+          </small>
         </FormItem>
         {value?.variables &&
           Object.keys(value.variables).map((key) => {

package/src/theme/{ApiDemoPanel → ApiExplorer}/buildPostmanRequest.ts

@@ -6,8 +6,8 @@
  * ========================================================================== */
 
 import sdk from "@paloaltonetworks/postman-collection";
-import { AuthState, Scheme } from "@theme/ApiDemoPanel/Authorization/slice";
-import { Body, Content } from "@theme/ApiDemoPanel/Body/slice";
+import { AuthState, Scheme } from "@theme/ApiExplorer/Authorization/slice";
+import { Body, Content } from "@theme/ApiExplorer/Body/slice";
 import {
   ParameterObject,
   ServerObject,

package/src/theme/{ApiDemoPanel → ApiExplorer}/index.tsx

@@ -8,13 +8,12 @@
 import React from "react";
 
 import sdk from "@paloaltonetworks/postman-collection";
-import Curl from "@theme/ApiDemoPanel/Curl";
-import Request from "@theme/ApiDemoPanel/Request";
-import Response from "@theme/ApiDemoPanel/Response";
-import SecuritySchemes from "@theme/ApiDemoPanel/SecuritySchemes";
+import CodeSnippets from "@theme/ApiExplorer/CodeSnippets";
+import Request from "@theme/ApiExplorer/Request";
+import Response from "@theme/ApiExplorer/Response";
 import { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
-function ApiDemoPanel({
+function ApiExplorer({
   item,
   infoPath,
 }: {
@@ -24,16 +23,15 @@ function ApiDemoPanel({
   const postman = new sdk.Request(item.postman);
 
   return (
-    <div>
-      <SecuritySchemes infoPath={infoPath} />
-      <Request item={item} />
-      <Response />
-      <Curl
+    <>
+      <CodeSnippets
         postman={postman}
         codeSamples={(item as any)["x-code-samples"] ?? []}
       />
-    </div>
+      <Request item={item} />
+      <Response item={item} />
+    </>
   );
 }
 
-export default ApiDemoPanel;
+export default ApiExplorer;

package/src/theme/{ApiDemoPanel → ApiExplorer}/persistanceMiddleware.ts

@@ -9,7 +9,7 @@ import { Middleware } from "@reduxjs/toolkit";
 import {
   setAuthData,
   setSelectedAuth,
-} from "@theme/ApiDemoPanel/Authorization/slice";
+} from "@theme/ApiExplorer/Authorization/slice";
 import { AppDispatch, RootState } from "@theme/ApiItem/store";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";

package/src/theme/ApiItem/index.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+import zlib from "zlib";
+
 import React from "react";
 
 import BrowserOnly from "@docusaurus/BrowserOnly";
@@ -12,8 +14,8 @@ import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import { createAuth } from "@theme/ApiDemoPanel/Authorization/slice";
-import { createPersistanceMiddleware } from "@theme/ApiDemoPanel/persistanceMiddleware";
+import { createAuth } from "@theme/ApiExplorer/Authorization/slice";
+import { createPersistanceMiddleware } from "@theme/ApiExplorer/persistanceMiddleware";
 import DocItemLayout from "@theme/ApiItem/Layout";
 import type { Props } from "@theme/DocItem";
 import DocItemMetadata from "@theme/DocItem/Metadata";
@@ -32,10 +34,10 @@ import { createStoreWithoutState, createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = (_: { item: any; infoPath: any }) => <div />;
+let ApiExplorer = (_: { item: any; infoPath: any }) => <div />;
 
 if (ExecutionEnvironment.canUseDOM) {
-  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
+  ApiExplorer = require("@theme/ApiExplorer").default;
 }
 
 interface ApiFrontMatter extends DocFrontMatter {
@@ -47,7 +49,14 @@ export default function ApiItem(props: Props): JSX.Element {
   const MDXComponent = props.content;
   const { frontMatter } = MDXComponent;
   const { info_path: infoPath } = frontMatter as DocFrontMatter;
-  const { api } = frontMatter as ApiFrontMatter;
+  let { api } = frontMatter as ApiFrontMatter;
+  // decompress and parse
+  if (api) {
+    api = JSON.parse(
+      zlib.inflateSync(Buffer.from(api as any, "base64")).toString()
+    );
+  }
+
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig as ThemeConfig;
   const options = themeConfig.api;
@@ -134,13 +143,13 @@ export default function ApiItem(props: Props): JSX.Element {
           <DocItemLayout>
             <Provider store={store2}>
               <div className={clsx("row", "theme-api-markdown")}>
-                <div className="col col--7">
+                <div className="col col--7 openapi-left-panel__container">
                   <MDXComponent />
                 </div>
-                <div className="col col--5">
+                <div className="col col--5 openapi-right-panel__container">
                   <BrowserOnly fallback={<div>Loading...</div>}>
                     {() => {
-                      return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                      return <ApiExplorer item={api} infoPath={infoPath} />;
                     }}
                   </BrowserOnly>
                 </div>

package/src/theme/ApiItem/store.ts

@@ -6,13 +6,13 @@
  * ========================================================================== */
 
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
-import accept from "@theme/ApiDemoPanel/Accept/slice";
-import auth from "@theme/ApiDemoPanel/Authorization/slice";
-import body from "@theme/ApiDemoPanel/Body/slice";
-import contentType from "@theme/ApiDemoPanel/ContentType/slice";
-import params from "@theme/ApiDemoPanel/ParamOptions/slice";
-import response from "@theme/ApiDemoPanel/Response/slice";
-import server from "@theme/ApiDemoPanel/Server/slice";
+import accept from "@theme/ApiExplorer/Accept/slice";
+import auth from "@theme/ApiExplorer/Authorization/slice";
+import body from "@theme/ApiExplorer/Body/slice";
+import contentType from "@theme/ApiExplorer/ContentType/slice";
+import params from "@theme/ApiExplorer/ParamOptions/slice";
+import response from "@theme/ApiExplorer/Response/slice";
+import server from "@theme/ApiExplorer/Server/slice";
 
 const rootReducer = combineReducers({
   accept,

package/src/theme/ApiTabs/_ApiTabs.scss

@@ -9,39 +9,44 @@
   margin-bottom: var(--ifm-leading);
 }
 
+.openapi-tabs__response-header {
+  margin-bottom: 0;
+}
+
 .openapi-tabs__response-code-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
+  border: 1px solid transparent;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--ifm-color-primary);
+  padding: 0.35rem 0.85rem;
   border-radius: var(--ifm-global-radius);
-  color: var(--ifm-color-primary);
-  font-weight: var(--ifm-font-weight-normal);
-
-  &.success {
-    .openapi-tabs__response-dot {
-      background-color: var(--ifm-color-success);
-    }
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 12px;
+  transition: 300ms;
+  color: var(--ifm-font-color-secondary);
+
+  &.success.active {
+    background-color: var(--ifm-color-success);
+    color: var(--ifm-color-white);
   }
 
-  &.danger {
-    .openapi-tabs__response-dot {
-      background-color: var(--ifm-color-danger);
-    }
+  &.danger.active {
+    background-color: var(--ifm-color-danger);
+    color: var(--ifm-color-white);
   }
 
-  &.info {
-    .openapi-tabs__response-dot {
-      background-color: var(--ifm-color-info);
-    }
+  &.info.active {
+    background-color: var(--ifm-color-info);
+    color: var(--ifm-color-white);
   }
 
-  &.active {
+  &.active,
+  &:hover {
     opacity: 1;
-    background-color: var(--ifm-color-emphasis-100);
+  }
+
+  &:hover:not(.active) {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
   }
 }
 
@@ -59,7 +64,9 @@
 
 /* Open API Response Code Tabs */
 .openapi-tabs__response-header-section {
+  border-top: 1px solid var(--ifm-toc-border-color);
   margin-top: 2rem;
+  padding-top: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;

package/src/theme/ApiTabs/index.js

@@ -12,6 +12,7 @@ import {
   useTabs,
 } from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import Heading from "@theme/Heading";
 import clsx from "clsx";
 
 function TabList({ className, block, selectedValue, selectValue, tabValues }) {
@@ -83,7 +84,9 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
 
   return (
     <div className="openapi-tabs__response-header-section">
-      <strong>Responses</strong>
+      <Heading as="h2" id="responses" className="openapi-tabs__response-header">
+        Responses
+      </Heading>
       <div className="openapi-tabs__response-container">
         {showTabArrows && (
           <button
@@ -129,7 +132,6 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
                 }
               )}
             >
-              <div className="openapi-tabs__response-dot" />
               {label ?? value}
             </li>
           ))}
@@ -173,7 +175,6 @@ function TabsComponent(props) {
   return (
     <div className="openapi-tabs__container">
       <TabList {...props} {...tabs} />
-      <hr />
       <TabContent {...props} {...tabs} />
     </div>
   );

package/src/theme/DiscriminatorTabs/_DiscriminatorTabs.scss

@@ -8,25 +8,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 1.8rem;
+  padding: 0.35rem 0.7rem;
+  border: 1px solid transparent;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--ifm-color-primary);
-  border-radius: var(--ifm-global-radius);
-  color: var(--ifm-color-primary);
-  font-size: 12px;
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 10px;
+  font-family: var(--ifm-font-family-monospace);
+  white-space: nowrap;
+  transition: 300ms;
 
-  &:not(.active) {
-    opacity: 0.65;
+  &:hover {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
   }
 
   &.active {
-    background-color: var(--ifm-color-emphasis-100);
-  }
-
-  &:hover {
-    opacity: 1;
-    background-color: var(--ifm-color-emphasis-100);
+    border: 1px solid var(--ifm-color-primary);
+    color: var(--ifm-color-primary);
   }
 
   &:last-child {
@@ -78,6 +77,10 @@
   border-left: thin solid var(--openapi-tree-line-color) !important;
 }
 
+.openapi-discriminator__name {
+  padding-left: 1rem;
+}
+
 @media screen and (max-width: 500px) {
   .openapi-tabs__discriminator-top-section {
     flex-direction: column;