docusaurus-theme-openapi-docs 1.5.1 → 1.6.0

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

@@ -17,6 +17,10 @@ function SecuritySchemes(props: any) {
 
   if (selected === undefined) return null;
 
+  if (options[selected]?.[0]?.type === undefined) {
+    return null;
+  }
+
   const selectedAuth = options[selected];
   return (
     <details className={`details__demo-panel`} open={false}>
@@ -24,11 +28,94 @@ function SecuritySchemes(props: any) {
         <h4>Authorization</h4>
       </summary>
       {selectedAuth.map((auth: any) => {
+        const isHttp = auth.type === "http";
         const isApiKey = auth.type === "apiKey";
-        const isBearer = auth.type === "http" && auth.key === "Bearer";
         const isOauth2 = auth.type === "oauth2";
+        const isOpenId = auth.type === "openIdConnect";
 
-        if (isApiKey || isBearer) {
+        if (isHttp) {
+          if (auth.scheme === "bearer") {
+            const { name, key, type, scopes, ...rest } = auth;
+            return (
+              <React.Fragment key={auth.key}>
+                <pre
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    background: "var(--openapi-card-background-color)",
+                  }}
+                >
+                  <span>
+                    <strong>name:</strong>{" "}
+                    <Link to={infoAuthPath}>{name ?? key}</Link>
+                  </span>
+                  <span>
+                    <strong>type: </strong>
+                    {type}
+                  </span>
+                  {scopes && scopes.length > 0 && (
+                    <span>
+                      <strong>scopes: </strong>
+                      <code>
+                        {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                      </code>
+                    </span>
+                  )}
+                  {Object.keys(rest).map((k, i) => {
+                    return (
+                      <span key={k}>
+                        <strong>{k}: </strong>
+                        {typeof rest[k] === "object"
+                          ? JSON.stringify(rest[k], null, 2)
+                          : String(rest[k])}
+                      </span>
+                    );
+                  })}
+                </pre>
+              </React.Fragment>
+            );
+          }
+          if (auth.scheme === "basic") {
+            const { name, key, type, scopes, ...rest } = auth;
+            return (
+              <React.Fragment key={auth.key}>
+                <pre
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    background: "var(--openapi-card-background-color)",
+                  }}
+                >
+                  <span>
+                    <strong>name:</strong>{" "}
+                    <Link to={infoAuthPath}>{name ?? key}</Link>
+                  </span>
+                  <span>
+                    <strong>type: </strong>
+                    {type}
+                  </span>
+                  {scopes && scopes.length > 0 && (
+                    <span>
+                      <strong>scopes: </strong>
+                      <code>
+                        {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                      </code>
+                    </span>
+                  )}
+                  {Object.keys(rest).map((k, i) => {
+                    return (
+                      <span key={k}>
+                        <strong>{k}: </strong>
+                        {typeof rest[k] === "object"
+                          ? JSON.stringify(rest[k], null, 2)
+                          : String(rest[k])}
+                      </span>
+                    );
+                  })}
+                </pre>
+              </React.Fragment>
+            );
+          }
           return (
             <React.Fragment key={auth.key}>
               <pre
@@ -38,17 +125,67 @@ function SecuritySchemes(props: any) {
                   background: "var(--openapi-card-background-color)",
                 }}
               >
-                <span>type: {auth.type}</span>
                 <span>
-                  name: <Link to={infoAuthPath}>{auth.name}</Link>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{auth.name ?? auth.key}</Link>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {auth.type}
+                </span>
+                <span>
+                  <strong>in: </strong>
+                  {auth.in}
                 </span>
-                <span>in: {auth.in}</span>
+              </pre>
+            </React.Fragment>
+          );
+        }
+
+        if (isApiKey) {
+          const { name, key, type, scopes, ...rest } = auth;
+          return (
+            <React.Fragment key={auth.key}>
+              <pre
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  background: "var(--openapi-card-background-color)",
+                }}
+              >
+                <span>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {Object.keys(rest).map((k, i) => {
+                  return (
+                    <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object"
+                        ? JSON.stringify(rest[k], null, 2)
+                        : String(rest[k])}
+                    </span>
+                  );
+                })}
               </pre>
             </React.Fragment>
           );
         }
 
         if (isOauth2) {
+          const { name, key, type, scopes, flows, ...rest } = auth;
           return (
             <React.Fragment key={selected}>
               <pre
@@ -59,14 +196,81 @@ function SecuritySchemes(props: any) {
                 }}
               >
                 <span>
-                  type: <Link to={infoAuthPath}>{auth.type}</Link>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
+                </span>
+                <span>
+                  <strong>type: </strong>
+                  {type}
                 </span>
-                {Object.keys(auth.flows).map((flow) => {
-                  return <span key={flow}>flow: {flow}</span>;
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {Object.keys(rest).map((k, i) => {
+                  return (
+                    <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object"
+                        ? JSON.stringify(rest[k], null, 2)
+                        : String(rest[k])}
+                    </span>
+                  );
                 })}
+                {flows && (
+                  <span>
+                    <code>
+                      <strong>flows: </strong>
+                      {JSON.stringify(flows, null, 2)}
+                    </code>
+                  </span>
+                )}
+              </pre>
+            </React.Fragment>
+          );
+        }
+
+        if (isOpenId) {
+          const { name, key, scopes, type, ...rest } = auth;
+          return (
+            <React.Fragment key={auth.key}>
+              <pre
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  background: "var(--openapi-card-background-color)",
+                }}
+              >
                 <span>
-                  scopes: <code>{auth.scopes.toString()}</code>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
                 </span>
+                <span>
+                  <strong>type: </strong>
+                  {type}
+                </span>
+                {scopes && scopes.length > 0 && (
+                  <span>
+                    <strong>scopes: </strong>
+                    <code>
+                      {auth.scopes.length > 0 ? auth.scopes.toString() : "[]"}
+                    </code>
+                  </span>
+                )}
+                {Object.keys(rest).map((k, i) => {
+                  return (
+                    <span key={k}>
+                      <strong>{k}: </strong>
+                      {typeof rest[k] === "object"
+                        ? JSON.stringify(rest[k], null, 2)
+                        : String(rest[k])}
+                    </span>
+                  );
+                })}
               </pre>
             </React.Fragment>
           );

package/src/theme/ApiLogo/index.tsx

@@ -8,18 +8,45 @@
 import React from "react";
 
 import { useColorMode } from "@docusaurus/theme-common";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ThemedImage from "@theme/ThemedImage";
 
-export default function ApiLogo(props: any): JSX.Element {
+export default function ApiLogo(props: any): JSX.Element | undefined {
   const { colorMode } = useColorMode();
   const { logo, darkLogo } = props;
+  const altText = () => {
+    if (colorMode === "dark") {
+      return darkLogo?.altText ?? logo?.altText;
+    }
+    return logo?.altText;
+  };
+  const lightLogoUrl = useBaseUrl(logo?.url);
+  const darkLogoUrl = useBaseUrl(darkLogo?.url);
 
-  return logo ? (
-    <img
-      alt={colorMode === "dark" && darkLogo ? darkLogo.altText : logo.altText}
-      src={colorMode === "dark" && darkLogo ? darkLogo.url : logo.url}
-      width="250px"
-    />
-  ) : (
-    <div />
-  );
+  if (logo && darkLogo) {
+    return (
+      <ThemedImage
+        alt={altText()}
+        sources={{
+          light: lightLogoUrl,
+          dark: darkLogoUrl,
+        }}
+        className="openapi__logo"
+      />
+    );
+  }
+  if (logo || darkLogo) {
+    return (
+      <ThemedImage
+        alt={altText()}
+        sources={{
+          light: lightLogoUrl ?? darkLogoUrl,
+          dark: lightLogoUrl ?? darkLogoUrl,
+        }}
+        className="openapi__logo"
+      />
+    );
+  }
+
+  return undefined;
 }

package/src/theme/ParamsItem/index.js

@@ -8,6 +8,8 @@
 import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
+import SchemaTabs from "@theme/SchemaTabs";
+import TabItem from "@theme/TabItem";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
@@ -16,7 +18,10 @@ import {
   getSchemaName,
 } from "docusaurus-theme-openapi-docs/lib/markdown/schema";
 /* eslint-disable import/no-extraneous-dependencies*/
-import { guard } from "docusaurus-theme-openapi-docs/lib/markdown/utils";
+import {
+  guard,
+  toString,
+} from "docusaurus-theme-openapi-docs/lib/markdown/utils";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
@@ -25,6 +30,10 @@ import styles from "./styles.module.css";
 function ParamsItem({
   param: { description, example, examples, name, required, schema },
 }) {
+  if (!schema || !schema?.type) {
+    schema = { type: "any" };
+  }
+
   const renderSchemaName = guard(schema, (schema) => (
     <span className={styles.schemaName}> {getSchemaName(schema)}</span>
   ));
@@ -76,17 +85,35 @@ function ParamsItem({
     )
   );
 
-  const renderExample = guard(example, (example) => (
-    <div>{`Example: ${example}`}</div>
+  const renderExample = guard(toString(example), (example) => (
+    <div>
+      <strong>Example: </strong>
+      {example}
+    </div>
   ));
 
   const renderExamples = guard(examples, (examples) => {
     const exampleEntries = Object.entries(examples);
     return (
       <>
-        {exampleEntries.map(([k, v]) => (
-          <div>{`Example (${k}): ${v.value}`}</div>
-        ))}
+        <strong>Examples:</strong>
+        <SchemaTabs>
+          {exampleEntries.map(([exampleName, exampleProperties]) => (
+            <TabItem value={exampleName} label={exampleName}>
+              {exampleProperties.summary && <p>{exampleProperties.summary}</p>}
+              {exampleProperties.description && (
+                <p>
+                  <strong>Description: </strong>
+                  <span>{exampleProperties.description}</span>
+                </p>
+              )}
+              <p>
+                <strong>Example: </strong>
+                <code>{exampleProperties.value}</code>
+              </p>
+            </TabItem>
+          ))}
+        </SchemaTabs>
       </>
     );
   });

package/src/theme/SchemaItem/index.js

@@ -11,7 +11,10 @@ import CodeBlock from "@theme/CodeBlock";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
-import { guard } from "docusaurus-theme-openapi-docs/lib/markdown/utils";
+import {
+  guard,
+  toString,
+} from "docusaurus-theme-openapi-docs/lib/markdown/utils";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
@@ -23,11 +26,20 @@ function SchemaItem({
   name,
   qualifierMessage,
   required,
-  deprecated,
-  schemaDescription,
   schemaName,
-  defaultValue,
+  schema,
 }) {
+  let deprecated;
+  let schemaDescription;
+  let defaultValue;
+  let nullable;
+  if (schema) {
+    deprecated = schema.deprecated;
+    schemaDescription = schema.description;
+    defaultValue = schema.default;
+    nullable = schema.nullable;
+  }
+
   const renderRequired = guard(
     Array.isArray(required) ? required.includes(name) : required,
     () => <strong className={styles.required}> required</strong>
@@ -37,6 +49,10 @@ function SchemaItem({
     <strong className={styles.deprecated}> deprecated</strong>
   ));
 
+  const renderNullable = guard(nullable, () => (
+    <strong className={styles.nullable}> nullable</strong>
+  ));
+
   const renderSchemaDescription = guard(schemaDescription, (description) => (
     <div>
       <ReactMarkdown
@@ -67,19 +83,17 @@ function SchemaItem({
     </div>
   ));
 
-  const renderDefaultValue = guard(
-    typeof defaultValue === "boolean" ? defaultValue.toString() : defaultValue,
-    (value) => (
-      <div className={styles.schemaQualifierMessage}>
-        <ReactMarkdown children={`**Default value:** \`${value}\``} />
-      </div>
-    )
-  );
+  const renderDefaultValue = guard(toString(defaultValue), (value) => (
+    <div className={styles.schemaQualifierMessage}>
+      <ReactMarkdown children={`**Default value:** \`${value}\``} />
+    </div>
+  ));
 
   const schemaContent = (
     <div>
       <strong className={deprecated && styles.strikethrough}>{name}</strong>
       <span className={styles.schemaName}> {schemaName}</span>
+      {renderNullable}
       {!deprecated && renderRequired}
       {renderDeprecated}
       {renderQualifierMessage}

package/src/theme/SchemaItem/styles.module.css

@@ -28,6 +28,11 @@
   color: var(--openapi-deprecated);
 }
 
+.nullable {
+  font-size: var(--ifm-code-font-size);
+  color: var(--openapi-nullable);
+}
+
 .strikethrough {
   text-decoration: line-through;
 }

package/src/theme/SchemaTabs/index.js

@@ -241,11 +241,11 @@ function SchemaTabsComponent(props) {
               (tabItem) => tabItem.props.value === defaultValue
             )[0],
           {
-            className: "margin-vert--md",
+            className: styles.marginVertical,
           }
         )
       ) : (
-        <div className="margin-vert--md">
+        <div className={styles.marginVertical}>
           {children.map((tabItem, i) =>
             cloneElement(tabItem, {
               key: i,

package/src/theme/SchemaTabs/styles.module.css

@@ -103,3 +103,8 @@
     width: 100%;
   }
 }
+
+.marginVertical {
+  margin-top: 1rem !important;
+  margin-bottom: unset !important;
+}

package/src/theme/styles.css

@@ -8,6 +8,7 @@
 :root {
   --openapi-required: var(--ifm-color-danger);
   --openapi-deprecated: var(--ifm-color-warning);
+  --openapi-nullable: var(--ifm-color-info);
   --openapi-code-blue: var(--ifm-color-info);
   --openapi-code-red: var(--ifm-color-danger);
   --openapi-code-orange: var(--ifm-color-warning);
@@ -77,10 +78,14 @@
 
 .theme-api-markdown details li {
   list-style: none;
-  padding-bottom: 5px;
   padding-top: 5px;
 }
 
+.theme-api-markdown .tabs__item {
+  padding-bottom: unset;
+  padding-top: unset;
+}
+
 .theme-api-markdown details > div > div {
   padding-top: unset !important;
   border-top: unset !important;
@@ -244,6 +249,8 @@
   color: var(--ifm-color-success);
   padding-left: 1.4rem;
   padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .code__tab--python.tabs__item--active {
@@ -268,6 +275,8 @@
   color: var(--ifm-color-info);
   padding-left: 1.4rem;
   padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .code__tab--go.tabs__item--active {
@@ -292,6 +301,8 @@
   color: var(--ifm-color-warning);
   padding-left: 1.4rem;
   padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .code__tab--javascript.tabs__item--active {
@@ -316,6 +327,8 @@
   color: var(--ifm-color-danger);
   padding-left: 1.4rem;
   padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .code__tab--bash.tabs__item--active {
@@ -340,6 +353,8 @@
   color: var(--ifm-color-danger);
   padding-left: 1.4rem;
   padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .code__tab--ruby.tabs__item--active {
@@ -364,6 +379,8 @@
   color: var(--ifm-color-gray-500);
   padding-left: 1.4rem;
   padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .code__tab--csharp.tabs__item--active {
@@ -388,6 +405,8 @@
   color: var(--ifm-color-success);
   padding-left: 1.4rem;
   padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .code__tab--nodejs.tabs__item--active {
@@ -412,6 +431,8 @@
   color: var(--ifm-color-gray-500);
   padding-left: 1.4rem;
   padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
 }
 
 .code__tab--php.tabs__item--active {
@@ -424,7 +445,41 @@
   overflow: auto;
 }
 
+.code__tab--java::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
+  margin-block: auto;
+}
+
+.code__tab--java {
+  color: var(--ifm-color-warning);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.code__tab--java.tabs__item--active {
+  border-bottom-color: var(--ifm-color-warning);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-java {
+  max-height: 500px;
+  overflow: auto;
+}
+
 /* Prism code styles */
-.prism-code.language-json {
+.prism-code.language-java {
   white-space: pre !important;
 }
+
+.openapi__logo {
+  width: 250px;
+}
+
+div:has(> ul.openapi-tabs__security-schemes) {
+  max-width: 100%;
+}