docusaurus-theme-openapi-docs 1.1.7 → 1.1.10

package/lib-next/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-next/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.1.7",
+  "version": "1.1.10",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -44,13 +44,13 @@
   "dependencies": {
     "@docusaurus/theme-common": "2.0.1",
     "@mdx-js/react": "^1.6.21",
-    "@paloaltonetworks/postman-code-generators": "1.1.5-hotfix.5",
+    "@paloaltonetworks/postman-code-generators": "^1.1.9",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@reduxjs/toolkit": "^1.7.1",
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.1.6",
+    "docusaurus-plugin-openapi-docs": "^1.1.9",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -59,7 +59,8 @@
     "react-markdown": "^8.0.1",
     "react-redux": "^7.2.0",
     "redux-devtools-extension": "^2.13.8",
-    "webpack": "^5.61.0"
+    "webpack": "^5.61.0",
+    "xml-formatter": "^2.6.1"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
@@ -68,5 +69,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "604cd3723c770fd306318d594e8fb4e68c39724c"
+  "gitHead": "507eaaaf45e1fff8cb95bfdcd097a4fa4ba1ea05"
 }

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

@@ -8,6 +8,7 @@
 import React from "react";
 
 import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+import format from "xml-formatter";
 
 import ContentType from "../ContentType";
 import FormSelect from "../FormSelect";
@@ -197,7 +198,15 @@ function Body({ requestBodyMetadata, jsonRequestBodyExample }: Props) {
 
   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/src/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/src/theme/ApiDemoPanel/Curl/index.tsx

@@ -19,61 +19,86 @@ import buildPostmanRequest from "./../buildPostmanRequest";
 import styles from "./styles.module.css";
 
 interface Language {
-  tabName: string;
-  highlight: string;
+  highlight?: string;
   language: string;
-  codeLanguage?: string;
-  variant: string;
-  options: { [key: string]: boolean };
+  logoClass?: string;
+  variant?: string;
+  options?: { [key: string]: boolean };
   source?: string;
 }
 
 export const languageSet: Language[] = [
   {
-    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",
   },
 ];
 
@@ -120,10 +145,15 @@ function Curl({ postman, codeSamples }: Props) {
 
   const defaultLang: Language[] = 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("");
 
@@ -155,6 +185,39 @@ function Curl({ postman, codeSamples }: Props) {
       );
     } 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: any, snippet: string) => {
+          if (error) {
+            return;
+          }
+          setCodeText(snippet);
+        }
+      );
     } else {
       setCodeText("");
     }
@@ -184,10 +247,14 @@ function Curl({ postman, codeSamples }: Props) {
             <CodeTab
               value={lang.language}
               label={""}
-              key={lang.tabName || lang.label}
-              attributes={{ className: `code__tab--${lang.codeLanguage}` }}
+              key={
+                lang.variant
+                  ? `${lang.language}-${lang.variant}`
+                  : lang.language
+              }
+              attributes={{ className: `code__tab--${lang.logoClass}` }}
             >
-              <CodeBlock language={lang.codeLanguage}>{codeText}</CodeBlock>
+              <CodeBlock language={lang.highlight}>{codeText}</CodeBlock>
             </CodeTab>
           );
         })}