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

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

@@ -1,3 +1,57 @@
+.openapi-demo__response-container {
+  background-color: var(--ifm-pre-background);
+  border-radius: var(--openapi-card-border-radius);
+  border: 1px solid var(--openapi-demo-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-demo__code-block code {
+    padding-top: 0;
+  }
+}
+
+.openapi-demo__response-title-container {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--openapi-demo-border-color);
+  margin: 0;
+  padding: 0.75rem var(--ifm-pre-padding);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.openapi-demo__response-placeholder-message {
+  font-size: 12px;
+  padding: 1.25rem;
+  margin-bottom: 0;
+  text-align: center;
+}
+
+.openapi-demo__response-clear-btn {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.openapi-demo__loading-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
 .openapi-response__dot::before {
   margin-right: 0.2rem;
   margin-bottom: 0.15rem;

package/src/theme/ApiDemoPanel/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/ApiDemoPanel/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-demo__response-container">
+      <div className="openapi-demo__response-title-container">
+        <span className="openapi-demo__response-title">Response</span>
+        <span
+          className="openapi-demo__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
+              {/* @ts-ignore */}
+              <ApiCodeBlock
                 className="openapi-demo__code-block openapi-response__status-code"
                 language={response.startsWith("<") ? `xml` : `json`}
               >
-                {prettyResponse || "No Response"}
-              </CodeBlock>
+                {prettyResponse || (
+                  <p className="openapi-demo__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
+              {/* @ts-ignore */}
+              <ApiCodeBlock
                 className="openapi-demo__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-demo__loading-container">
+            <Loading color="success" />
+          </div>
         ) : (
-          prettyResponse || "No Response"
+          <p className="openapi-demo__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/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/src/theme/ApiDemoPanel/Server/_Server.scss

@@ -14,3 +14,13 @@
     display: none;
   }
 }
+
+.openapi-demo__server-url {
+  font-size: var(--openapi-demo-font-size-input);
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.openapi-demo__server-description {
+  padding-left: 0.5rem;
+  font-weight: var(--ifm-font-weight-bold);
+}

package/src/theme/ApiDemoPanel/Server/index.tsx

@@ -58,15 +58,10 @@ 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-demo__server-url" title={url}>
+            {url}
+          </span>
         </FormItem>
       </FloatingButton>
     );
@@ -74,7 +69,7 @@ function Server() {
   return (
     <div className="openapi-demo__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-demo__server-description">
+            {value?.description}
+          </small>
         </FormItem>
         {value?.variables &&
           Object.keys(value.variables).map((key) => {

package/src/theme/ApiDemoPanel/index.tsx

@@ -11,7 +11,6 @@ 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 { ApiItem } from "docusaurus-plugin-openapi-docs/src/types";
 
 function ApiDemoPanel({
@@ -24,15 +23,14 @@ function ApiDemoPanel({
   const postman = new sdk.Request(item.postman);
 
   return (
-    <div>
-      <SecuritySchemes infoPath={infoPath} />
-      <Request item={item} />
-      <Response />
+    <>
       <Curl
         postman={postman}
         codeSamples={(item as any)["x-code-samples"] ?? []}
       />
-    </div>
+      <Request item={item} />
+      <Response item={item} />
+    </>
   );
 }
 

package/src/theme/ApiItem/index.tsx

@@ -134,10 +134,10 @@ 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} />;

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;

package/src/theme/Markdown/Details/_Details.scss

@@ -1,5 +1,34 @@
 /* Markdown Details Styling */
 
+/* Top-Level Details Styling */
+.openapi-left-panel__container > .openapi-markdown__details > summary,
+.openapi-markdown__details.mime > summary,
+.openapi-markdown__details.response > summary {
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.openapi-left-panel__container > .openapi-markdown__details,
+.openapi-markdown__details.mime,
+.openapi-markdown__details.response {
+  margin-bottom: 1rem !important;
+}
+
+.openapi-markdown__details-summary-header-params,
+.openapi-markdown__details-summary-header-body {
+  font-size: 12px;
+  margin-bottom: 0;
+}
+/* End of Top-Level Details Styling */
+
+/* Top-Level Details Caret Styling */
+.openapi-left-panel__container > .openapi-markdown__details > summary::before,
+.openapi-markdown__details.mime > summary::before,
+.openapi-markdown__details.response > summary::before {
+  top: 0.1rem;
+}
+/* End of Top-Level Details Caret Styling */
+
 .openapi-markdown__details {
   margin: unset !important;
   background-color: transparent;
@@ -10,6 +39,19 @@
   --docusaurus-details-decoration-color: var(--ifm-font-color-base) !important;
 }
 
+.openapi-markdown__details > summary::before {
+  content: "";
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>')
+    50% / 1.2rem 1.2rem;
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+  height: 0.75rem;
+  transform: rotate(90deg) !important;
+  width: 0.75rem;
+  transition: transform var(--ifm-transition-fast) linear !important;
+  border: none !important;
+  transform-origin: unset !important;
+}
+
 .openapi-markdown__details ul {
   padding-left: 0;
   font-size: 14px;
@@ -20,9 +62,8 @@
   padding-top: 5px;
 }
 
-.theme-api-markdown .tabs__item {
-  padding-bottom: unset;
-  padding-top: unset;
+.theme-api-markdown details[data-collapsed="false"] > summary::before {
+  transform: rotate(180deg) !important;
 }
 
 .openapi-markdown__details > div > div {
@@ -34,7 +75,45 @@
   margin-bottom: 0;
 }
 
+.openapi-markdown__details-summary-mime {
+  display: flex;
+}
+
 /* Hide defaul details marker by default */
 details summary::-webkit-details-marker {
   display: none;
 }
+
+.openapi-security__details {
+  font-size: 12px;
+  margin-bottom: 1rem;
+  background-color: transparent;
+  color: var(--ifm-font-color-base);
+  padding: unset;
+  border: thin solid var(--ifm-toc-border-color);
+  border-radius: var(--ifm-pre-border-radius);
+  box-shadow: unset !important;
+  --docusaurus-details-decoration-color: var(--ifm-font-color-base) !important;
+}
+
+.openapi-security__details pre {
+  margin-bottom: unset;
+  border-top-left-radius: 0;
+  border-top: thin solid var(--ifm-toc-border-color);
+  border-top-right-radius: 0;
+}
+
+.openapi-security__summary-header {
+  font-size: 12px;
+  text-transform: uppercase;
+  margin-bottom: unset;
+}
+
+.openapi-security__summary-container {
+  padding: 1rem;
+  list-style-type: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

package/src/theme/MimeTabs/_MimeTabs.scss

@@ -8,7 +8,7 @@
 .openapi-tabs__mime-container {
   display: flex;
   align-items: center;
-  max-width: 390px;
+  margin-top: 1rem;
   overflow: hidden;
 }
 
@@ -16,18 +16,23 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2rem;
+  padding: 0.35rem 0.7rem;
+  border: 1px solid transparent;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  font-weight: var(--ifm-font-weight-normal);
-  font-size: 12px;
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 10px;
+  text-transform: uppercase;
   white-space: nowrap;
+  transition: 300ms;
+
+  &:hover {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
+  }
 
   &.active {
-    background-color: var(--ifm-color-emphasis-100);
-    border-bottom-color: var(--ifm-tabs-color-active-border);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border: 1px solid var(--ifm-tabs-color-active-border);
     color: var(--ifm-tabs-color-active);
   }
 

package/src/theme/ParamsItem/_ParamsItem.scss

@@ -19,21 +19,36 @@
     content: "";
     display: inline-block;
   }
-}
-
-.openapi-params__list-item:hover {
-  background-color: var(--ifm-menu-color-background-active);
-}
 
-.openapi-params__list-item:focus {
-  background-color: var(--ifm-menu-color-background-active);
+  &:hover {
+    .openapi-schema__property {
+      color: var(--ifm-color-primary);
+    }
+  }
 }
 
 .openapi-schema__type {
   opacity: 0.6;
+  padding-left: 0.3rem;
 }
 
 .openapi-schema__required {
-  font-size: var(--ifm-code-font-size);
+  display: inline-flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
   color: var(--openapi-required);
+  margin-left: 1%;
+  background-color: transparent;
+  text-transform: uppercase;
+}
+
+.openapi-schema__divider {
+  flex-grow: 1;
+  border-bottom: thin solid var(--ifm-toc-border-color);
+  margin: 10px;
+}
+
+.openapi-schema__container {
+  display: flex;
 }