docusaurus-theme-openapi-docs 1.1.9 → 1.1.12

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

@@ -8,11 +8,13 @@ import React from "react";
 import styles from "./styles.module.css";
 
 function FormTextInput({ value, placeholder, password, onChange }) {
+  placeholder = placeholder?.split("\n")[0];
   return (
     <input
       className={styles.input}
       type={password ? "password" : "text"}
       placeholder={placeholder}
+      title={placeholder}
       value={value}
       onChange={onChange}
       autoComplete="off"

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

@@ -161,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) {
@@ -187,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) {
@@ -211,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) {
@@ -235,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) {
@@ -256,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/SchemaTabs/index.js

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

package/lib-next/theme/SchemaTabs/styles.module.css

@@ -59,7 +59,10 @@
 }
 
 .schemaTabsContainer {
+  display: flex;
+  align-items: center;
   max-width: 600px;
+  overflow: hidden;
 }
 
 /* Tab Arrows */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.1.9",
+  "version": "1.1.12",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -42,15 +42,15 @@
     "concurrently": "^5.2.0"
   },
   "dependencies": {
-    "@docusaurus/theme-common": "2.0.1",
+    "@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.9",
+    "docusaurus-plugin-openapi-docs": "^1.1.12",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
     "process": "^0.11.10",
@@ -69,5 +69,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "c9153730f9f180dbd199fbc9cb66f8470339c877"
+  "gitHead": "a45dcbd12f26156147a50f5f61026c3adee4b1c8"
 }

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>
           );
         })}