docusaurus-theme-openapi-docs 1.5.1 → 1.6.0

package/lib/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%;
+}

package/lib-next/index.js

@@ -6,7 +6,7 @@
  * ========================================================================== */
 
 import path from "path";
-import { ProvidePlugin } from "webpack";
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 export default function docusaurusThemeOpenAPI() {
   return {
     name: "docusaurus-theme-openapi",
@@ -22,18 +22,7 @@ export default function docusaurusThemeOpenAPI() {
     },
     configureWebpack() {
       return {
-        plugins: [
-          new ProvidePlugin({
-            Buffer: [require.resolve("buffer/"), "Buffer"],
-            process: require.resolve("process/browser"),
-          }),
-        ],
-        resolve: {
-          fallback: {
-            buffer: require.resolve("buffer/"),
-            process: require.resolve("process/browser"),
-          },
-        },
+        plugins: [new NodePolyfillPlugin()],
       };
     },
   };

package/lib-next/markdown/utils.js

@@ -14,7 +14,7 @@ export function create(tag, props) {
   return `<${tag}${propString}>${render(children)}</${tag}>`;
 }
 export function guard(value, cb) {
-  if (value) {
+  if (value !== undefined) {
     const children = cb(value);
     return render(children);
   }
@@ -26,3 +26,19 @@ export function render(children) {
   }
   return children ?? "";
 }
+export function toString(value) {
+  // Return as-is if already string
+  if (typeof value === "string") {
+    return value;
+  }
+  // Return undefined if null or undefined
+  if (value == null) {
+    return undefined;
+  }
+  // Return formatted array if Array
+  if (Array.isArray(value)) {
+    return `[${value.join(", ")}]`;
+  }
+  // Coerce to string in all other cases,
+  return value + "";
+}

package/lib-next/theme/ApiDemoPanel/Curl/index.js

@@ -13,6 +13,7 @@ import CodeTabs from "@theme/ApiDemoPanel/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
 import CodeBlock from "@theme/CodeBlock";
 import clsx from "clsx";
+import merge from "lodash/merge";
 import styles from "./styles.module.css";
 export const languageSet = [
   {
@@ -87,6 +88,16 @@ export const languageSet = [
     },
     variant: "cURL",
   },
+  {
+    highlight: "java",
+    language: "java",
+    logoClass: "java",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "OkHttp",
+  },
 ];
 function CodeTab({ children, hidden, className, onClick }) {
   return (
@@ -115,20 +126,35 @@ function Curl({ postman, codeSamples }) {
   const headerParams = useTypedSelector((state) => state.params.header);
   const auth = useTypedSelector((state) => state.auth);
 
-  // TODO
+  // User-defined languages array
+  // Can override languageSet, change order of langs, override options and variants
   const langs = [
     ...(siteConfig?.themeConfig?.languageTabs ?? languageSet),
     ...codeSamples,
   ];
-  const defaultLang = languageSet.filter(
+
+  // Filter languageSet by user-defined langs
+  const filteredLanguageSet = languageSet.filter((ls) => {
+    return langs.some((lang) => {
+      return lang.language === ls.language;
+    });
+  });
+
+  // Merge user-defined langs into languageSet
+  const mergedLangs = merge(filteredLanguageSet, langs);
+
+  // Read defaultLang from localStorage
+  const defaultLang = mergedLangs.filter(
     (lang) =>
       lang.language === localStorage.getItem("docusaurus.tab.code-samples")
   );
   const [language, setLanguage] = useState(() => {
-    if (langs.length === 1) {
-      return langs[0];
+    // Return first index if only 1 user-defined language exists
+    if (mergedLangs.length === 1) {
+      return mergedLangs[0];
     }
-    return defaultLang[0] ?? langs[0];
+    // Fall back to language in localStorage or first user-defined language
+    return defaultLang[0] ?? mergedLangs[0];
   });
   const [codeText, setCodeText] = useState("");
   useEffect(() => {
@@ -159,7 +185,7 @@ function Curl({ postman, codeSamples }) {
     } else if (language && !!language.source) {
       setCodeText(language.source);
     } else if (language && !language.options) {
-      const langSource = languageSet.filter(
+      const langSource = mergedLangs.filter(
         (lang) => lang.language === language.language
       );
 
@@ -208,6 +234,7 @@ function Curl({ postman, codeSamples }) {
     queryParams,
     server,
     auth,
+    mergedLangs,
   ]);
   if (language === undefined) {
     return null;
@@ -215,7 +242,7 @@ function Curl({ postman, codeSamples }) {
   return (
     <>
       <CodeTabs groupId="code-samples" action={setLanguage}>
-        {langs.map((lang) => {
+        {mergedLangs.map((lang) => {
           return (
             <CodeTab
               value={lang.language}
@@ -229,7 +256,9 @@ function Curl({ postman, codeSamples }) {
                 className: `code__tab--${lang.logoClass}`,
               }}
             >
-              <CodeBlock language={lang.highlight}>{codeText}</CodeBlock>
+              <CodeBlock language={lang.highlight} className={styles.codeBlock}>
+                {codeText}
+              </CodeBlock>
             </CodeTab>
           );
         })}

package/lib-next/theme/ApiDemoPanel/Curl/styles.module.css

@@ -82,3 +82,8 @@
   background: var(--ifm-menu-color-background-active);
   color: var(--ifm-menu-color-active);
 }
+
+.codeBlock code {
+  max-width: revert;
+  max-height: revert;
+}

package/lib-next/theme/ApiDemoPanel/Request/index.js

@@ -20,7 +20,7 @@ function Request({ item }) {
   const response = useTypedSelector((state) => state.response.value);
   const postman = new sdk.Request(item.postman);
   const metadata = useDoc();
-  const { proxy } = metadata.frontMatter;
+  const { proxy, hide_send_button } = metadata.frontMatter;
   const params = {
     path: [],
     query: [],
@@ -38,7 +38,9 @@ function Request({ item }) {
         <summary>
           <div className={`details__request-summary`}>
             <h4>Request</h4>
-            {item.servers && <Execute postman={postman} proxy={proxy} />}
+            {item.servers && !hide_send_button && (
+              <Execute postman={postman} proxy={proxy} />
+            )}
           </div>
         </summary>
         <div className={styles.optionsPanel}>

package/lib-next/theme/ApiDemoPanel/SecuritySchemes/index.js

@@ -13,6 +13,9 @@ function SecuritySchemes(props) {
   const selected = useTypedSelector((state) => state.auth.selected);
   const infoAuthPath = `/${props.infoPath}#authentication`;
   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}>
@@ -20,10 +23,93 @@ function SecuritySchemes(props) {
         <h4>Authorization</h4>
       </summary>
       {selectedAuth.map((auth) => {
+        const isHttp = auth.type === "http";
         const isApiKey = auth.type === "apiKey";
-        const isBearer = auth.type === "http" && auth.key === "Bearer";
         const isOauth2 = auth.type === "oauth2";
-        if (isApiKey || isBearer) {
+        const isOpenId = auth.type === "openIdConnect";
+        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
@@ -33,16 +119,65 @@ function SecuritySchemes(props) {
                   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>in: {auth.in}</span>
+                <span>
+                  <strong>type: </strong>
+                  {auth.type}
+                </span>
+                <span>
+                  <strong>in: </strong>
+                  {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
@@ -53,14 +188,80 @@ function SecuritySchemes(props) {
                 }}
               >
                 <span>
-                  type: <Link to={infoAuthPath}>{auth.type}</Link>
+                  <strong>name:</strong>{" "}
+                  <Link to={infoAuthPath}>{name ?? key}</Link>
                 </span>
-                {Object.keys(auth.flows).map((flow) => {
-                  return <span key={flow}>flow: {flow}</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>
+                  );
                 })}
+                {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/lib-next/theme/ApiLogo/index.js

@@ -7,16 +7,42 @@
 
 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) {
   const { colorMode } = useColorMode();
   const { logo, darkLogo } = props;
-  return logo ? (
-    <img
-      alt={colorMode === "dark" && darkLogo ? darkLogo.altText : logo.altText}
-      src={colorMode === "dark" && darkLogo ? darkLogo.url : logo.url}
-      width="250px"
-    />
-  ) : (
-    <div />
-  );
+  const altText = () => {
+    if (colorMode === "dark") {
+      return darkLogo?.altText ?? logo?.altText;
+    }
+    return logo?.altText;
+  };
+  const lightLogoUrl = useBaseUrl(logo?.url);
+  const darkLogoUrl = useBaseUrl(darkLogo?.url);
+  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;
 }