docusaurus-theme-openapi-docs 1.1.7 → 1.1.10

package/lib/theme/ApiItem/Layout/styles.module.css

@@ -73,6 +73,8 @@
 
 :global(.theme-api-markdown code) {
   max-width: 600px;
+  max-height: 500px;
+  overflow: auto;
 }
 
 @media (min-width: 997px) {
@@ -159,18 +161,20 @@
   padding-left: 2px;
 }
 
+/* CodeTabs */
+
 :global(.code__tab--python::after) {
   content: "";
-  width: 32px;
-  height: 32px;
-  background: url(./icons/python-original.svg);
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
   margin-block: auto;
 }
 
 :global(.code__tab--python) {
   color: var(--ifm-color-success);
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
 }
 
 :global(.code__tab--python.tabs__item--active) {
@@ -185,16 +189,16 @@
 
 :global(.code__tab--go::after) {
   content: "";
-  width: 32px;
-  height: 32px;
-  background: url(./icons/go-original-wordmark.svg);
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
   margin-block: auto;
 }
 
 :global(.code__tab--go) {
   color: var(--ifm-color-info);
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
 }
 
 :global(.code__tab--go.tabs__item--active) {
@@ -209,16 +213,16 @@
 
 :global(.code__tab--javascript::after) {
   content: "";
-  width: 32px;
-  height: 32px;
-  background: url(./icons/javascript-original.svg);
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
   margin-block: auto;
 }
 
 :global(.code__tab--javascript) {
   color: var(--ifm-color-warning);
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
 }
 
 :global(.code__tab--javascript.tabs__item--active) {
@@ -233,16 +237,16 @@
 
 :global(.code__tab--bash::after) {
   content: "";
-  width: 32px;
-  height: 32px;
-  background: url(./icons/linux-original.svg);
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg");
   margin-block: auto;
 }
 
 :global(.code__tab--bash) {
   color: var(--ifm-color-danger);
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
 }
 
 :global(.code__tab--bash.tabs__item--active) {
@@ -254,3 +258,99 @@
   max-height: 500px;
   overflow: auto;
 }
+
+:global(.code__tab--ruby::after) {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
+  margin-block: auto;
+}
+
+:global(.code__tab--ruby) {
+  color: var(--ifm-color-danger);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+:global(.code__tab--ruby.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-danger);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+:global(.language-ruby) {
+  max-height: 500px;
+  overflow: auto;
+}
+
+:global(.code__tab--csharp::after) {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
+  margin-block: auto;
+}
+
+:global(.code__tab--csharp) {
+  color: var(--ifm-color-gray-500);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+:global(.code__tab--csharp.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-gray-500);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+:global(.language-csharp) {
+  max-height: 500px;
+  overflow: auto;
+}
+
+:global(.code__tab--nodejs::after) {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
+  margin-block: auto;
+}
+
+:global(.code__tab--nodejs) {
+  color: var(--ifm-color-success);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+:global(.code__tab--nodejs.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-success);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+:global(.language-nodejs) {
+  max-height: 500px;
+  overflow: auto;
+}
+
+:global(.code__tab--php::after) {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
+  margin-block: auto;
+}
+
+:global(.code__tab--php) {
+  color: var(--ifm-color-gray-500);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+:global(.code__tab--php.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-gray-500);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+:global(.language-php) {
+  max-height: 500px;
+  overflow: auto;
+}

package/lib/theme/ResponseSamples/index.js

@@ -11,11 +11,11 @@ import CodeBlock from "@theme/CodeBlock";
 
 import styles from "./styles.module.css";
 
-function ResponseSamples({ responseExample }) {
+function ResponseSamples({ responseExample, language }) {
   return (
     <div className={styles.responseSamplesContainer}>
       <CodeBlock
-        language="javascript"
+        language={language ? language : "json"}
         className={styles.responseSamplesCodeBlock}
       >
         {responseExample}

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 import React from "react";
+import format from "xml-formatter";
 import ContentType from "../ContentType";
 import FormSelect from "../FormSelect";
 import { useTypedDispatch, useTypedSelector } from "../hooks";
@@ -188,7 +189,15 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }) {
 
   if (contentType === "application/xml") {
     if (jsonRequestBodyExample) {
-      exampleBodyString = json2xml(jsonRequestBodyExample);
+      try {
+        exampleBodyString = format(json2xml(jsonRequestBodyExample, ""), {
+          indentation: "  ",
+          lineSeparator: "\n",
+          collapseContent: true,
+        });
+      } catch {
+        exampleBodyString = json2xml(jsonRequestBodyExample);
+      }
     }
 
     language = "xml";

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

@@ -7,5 +7,11 @@
 }
 
 .code__tabs {
-  justify-content: space-around;
+  display: table-row-group;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 996px) {
+  .code__tabs {
+    justify-content: space-around;
+  }
 }

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

@@ -15,50 +15,76 @@ import buildPostmanRequest from "./../buildPostmanRequest";
 import styles from "./styles.module.css";
 export const languageSet = [
   {
-    tabName: "cURL",
     highlight: "bash",
     language: "curl",
-    codeLanguage: "bash",
-    variant: "curl",
+    logoClass: "bash",
     options: {
       longFormat: false,
       followRedirect: true,
       trimRequestBody: true,
     },
+    variant: "cURL",
   },
   {
-    tabName: "Python",
     highlight: "python",
     language: "python",
-    codeLanguage: "python",
-    variant: "requests",
+    logoClass: "python",
     options: {
       followRedirect: true,
       trimRequestBody: true,
     },
+    variant: "requests",
   },
   {
-    tabName: "Go",
     highlight: "go",
     language: "go",
-    codeLanguage: "go",
-    variant: "native",
+    logoClass: "go",
     options: {
       followRedirect: true,
       trimRequestBody: true,
     },
+    variant: "native",
   },
   {
-    tabName: "Node",
     highlight: "javascript",
     language: "nodejs",
-    codeLanguage: "javascript",
-    variant: "axios",
+    logoClass: "nodejs",
     options: {
       ES6_enabled: true,
       followRedirect: true,
       trimRequestBody: true,
     },
+    variant: "axios",
+  },
+  {
+    highlight: "ruby",
+    language: "ruby",
+    logoClass: "ruby",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "Net::HTTP",
+  },
+  {
+    highlight: "csharp",
+    language: "csharp",
+    logoClass: "csharp",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "RestSharp",
+  },
+  {
+    highlight: "php",
+    language: "php",
+    logoClass: "php",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "cURL",
   },
 ];
 
@@ -95,9 +121,15 @@ function Curl({ postman, codeSamples }) {
   ];
   const defaultLang = languageSet.filter(
     (lang) =>
-      lang.codeLanguage === localStorage.getItem("docusaurus.tab.code-samples")
+      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
   );
-  const [language, setLanguage] = useState(defaultLang[0] ?? langs[0]);
+  const [language, setLanguage] = useState(() => {
+    if (langs.length === 1) {
+      return langs[0];
+    }
+
+    return defaultLang[0] ?? langs[0];
+  });
   const [codeText, setCodeText] = useState("");
   useEffect(() => {
     if (language && !!language.options) {
@@ -127,6 +159,38 @@ function Curl({ postman, codeSamples }) {
       );
     } else if (language && !!language.source) {
       setCodeText(language.source);
+    } else if (language && !language.options) {
+      const langSource = languageSet.filter(
+        (lang) => lang.language === language.language
+      ); // Merges user-defined language with default languageSet
+      // This allows users to define only the minimal properties necessary in languageTabs
+      // User-defined properties should override languageSet properties
+
+      const mergedLanguage = { ...langSource[0], ...language };
+      const postmanRequest = buildPostmanRequest(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+      codegen.convert(
+        mergedLanguage.language,
+        mergedLanguage.variant,
+        postmanRequest,
+        mergedLanguage.options,
+        (error, snippet) => {
+          if (error) {
+            return;
+          }
+
+          setCodeText(snippet);
+        }
+      );
     } else {
       setCodeText("");
     }
@@ -156,12 +220,16 @@ function Curl({ postman, codeSamples }) {
             <CodeTab
               value={lang.language}
               label={""}
-              key={lang.tabName || lang.label}
+              key={
+                lang.variant
+                  ? `${lang.language}-${lang.variant}`
+                  : lang.language
+              }
               attributes={{
-                className: `code__tab--${lang.codeLanguage}`,
+                className: `code__tab--${lang.logoClass}`,
               }}
             >
-              <CodeBlock language={lang.codeLanguage}>{codeText}</CodeBlock>
+              <CodeBlock language={lang.highlight}>{codeText}</CodeBlock>
             </CodeTab>
           );
         })}