docusaurus-theme-openapi-docs 1.1.9 → 1.1.12

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

@@ -23,7 +23,10 @@ function FormTextInput({
   password,
   onChange
 }) {
-  return <input className={_stylesModule.default.input} type={password ? "password" : "text"} placeholder={placeholder} value={value} onChange={onChange} autoComplete="off" />;
+  var _placeholder;
+
+  placeholder = (_placeholder = placeholder) === null || _placeholder === void 0 ? void 0 : _placeholder.split("\n")[0];
+  return <input className={_stylesModule.default.input} type={password ? "password" : "text"} placeholder={placeholder} title={placeholder} value={value} onChange={onChange} autoComplete="off" />;
 }
 
 var _default = FormTextInput;

package/lib/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/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/theme/SchemaTabs/styles.module.css

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

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