docusaurus-theme-openapi-docs 0.0.0-546 → 0.0.0-550

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

@@ -12,6 +12,7 @@ var _CodeTabs = _interopRequireDefault(require("@theme/ApiDemoPanel/CodeTabs"));
 var _hooks = require("@theme/ApiItem/hooks");
 var _CodeBlock = _interopRequireDefault(require("@theme/CodeBlock"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _merge = _interopRequireDefault(require("lodash/merge"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -88,6 +89,15 @@ const languageSet = [{
     trimRequestBody: true
   },
   variant: "cURL"
+}, {
+  highlight: "java",
+  language: "java",
+  logoClass: "java",
+  options: {
+    followRedirect: true,
+    trimRequestBody: true
+  },
+  variant: "OkHttp"
 }];
 exports.languageSet = languageSet;
 function CodeTab({
@@ -122,15 +132,30 @@ function Curl({
   const headerParams = (0, _hooks.useTypedSelector)(state => state.params.header);
   const auth = (0, _hooks.useTypedSelector)(state => state.auth);
 
-  // TODO
+  // User-defined languages array
+  // Can override languageSet, change order of langs, override options and variants
   const langs = [...((_ref = siteConfig === null || siteConfig === void 0 ? void 0 : (_siteConfig$themeConf = siteConfig.themeConfig) === null || _siteConfig$themeConf === void 0 ? void 0 : _siteConfig$themeConf.languageTabs) !== null && _ref !== void 0 ? _ref : languageSet), ...codeSamples];
-  const defaultLang = languageSet.filter(lang => lang.language === localStorage.getItem("docusaurus.tab.code-samples"));
+
+  // 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 = (0, _merge.default)(filteredLanguageSet, langs);
+
+  // Read defaultLang from localStorage
+  const defaultLang = mergedLangs.filter(lang => lang.language === localStorage.getItem("docusaurus.tab.code-samples"));
   const [language, setLanguage] = (0, _react.useState)(() => {
     var _defaultLang$;
-    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$ = defaultLang[0]) !== null && _defaultLang$ !== void 0 ? _defaultLang$ : langs[0];
+    // Fall back to language in localStorage or first user-defined language
+    return (_defaultLang$ = defaultLang[0]) !== null && _defaultLang$ !== void 0 ? _defaultLang$ : mergedLangs[0];
   });
   const [codeText, setCodeText] = (0, _react.useState)("");
   (0, _react.useEffect)(() => {
@@ -155,7 +180,7 @@ function Curl({
     } else if (language && !!language.source) {
       setCodeText(language.source);
     } else if (language && !language.options) {
-      const langSource = languageSet.filter(lang => lang.language === language.language);
+      const langSource = mergedLangs.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
@@ -184,13 +209,13 @@ function Curl({
     } else {
       setCodeText("");
     }
-  }, [accept, body, contentType, cookieParams, headerParams, language, pathParams, postman, queryParams, server, auth]);
+  }, [accept, body, contentType, cookieParams, headerParams, language, pathParams, postman, queryParams, server, auth, mergedLangs]);
   if (language === undefined) {
     return null;
   }
   return <>
       <_CodeTabs.default groupId="code-samples" action={setLanguage}>
-        {langs.map(lang => {
+        {mergedLangs.map(lang => {
         return <CodeTab value={lang.language} label={""} key={lang.variant ? `${lang.language}-${lang.variant}` : lang.language} attributes={{
           className: `code__tab--${lang.logoClass}`
         }}>

package/lib/theme/ParamsItem/index.js

@@ -8,6 +8,8 @@
 import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
+import SchemaTabs from "@theme/SchemaTabs";
+import TabItem from "@theme/TabItem";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
@@ -77,16 +79,34 @@ function ParamsItem({
   );
 
   const renderExample = guard(example, (example) => (
-    <div>{`Example: ${example}`}</div>
+    <>
+      <strong>Example: </strong>
+      {example}
+    </>
   ));
 
   const renderExamples = guard(examples, (examples) => {
     const exampleEntries = Object.entries(examples);
     return (
       <>
-        {exampleEntries.map(([k, v]) => (
-          <div>{`Example (${k}): ${v.value}`}</div>
-        ))}
+        <strong>Examples:</strong>
+        <SchemaTabs>
+          {exampleEntries.map(([exampleName, exampleProperties]) => (
+            <TabItem value={exampleName} label={exampleName}>
+              {exampleProperties.summary && <p>{exampleProperties.summary}</p>}
+              {exampleProperties.description && (
+                <p>
+                  <strong>Description: </strong>
+                  <span>{exampleProperties.description}</span>
+                </p>
+              )}
+              <p>
+                <strong>Example: </strong>
+                <code>{exampleProperties.value}</code>
+              </p>
+            </TabItem>
+          ))}
+        </SchemaTabs>
       </>
     );
   });

package/lib/theme/styles.css

@@ -445,7 +445,33 @@
   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;
 }

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}

package/lib-next/theme/ParamsItem/index.js

@@ -8,6 +8,8 @@
 import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
+import SchemaTabs from "@theme/SchemaTabs";
+import TabItem from "@theme/TabItem";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
@@ -77,16 +79,34 @@ function ParamsItem({
   );
 
   const renderExample = guard(example, (example) => (
-    <div>{`Example: ${example}`}</div>
+    <>
+      <strong>Example: </strong>
+      {example}
+    </>
   ));
 
   const renderExamples = guard(examples, (examples) => {
     const exampleEntries = Object.entries(examples);
     return (
       <>
-        {exampleEntries.map(([k, v]) => (
-          <div>{`Example (${k}): ${v.value}`}</div>
-        ))}
+        <strong>Examples:</strong>
+        <SchemaTabs>
+          {exampleEntries.map(([exampleName, exampleProperties]) => (
+            <TabItem value={exampleName} label={exampleName}>
+              {exampleProperties.summary && <p>{exampleProperties.summary}</p>}
+              {exampleProperties.description && (
+                <p>
+                  <strong>Description: </strong>
+                  <span>{exampleProperties.description}</span>
+                </p>
+              )}
+              <p>
+                <strong>Example: </strong>
+                <code>{exampleProperties.value}</code>
+              </p>
+            </TabItem>
+          ))}
+        </SchemaTabs>
       </>
     );
   });

package/lib-next/theme/styles.css

@@ -445,7 +445,33 @@
   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;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-546",
+  "version": "0.0.0-550",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -45,13 +45,13 @@
   "dependencies": {
     "@docusaurus/theme-common": "^2.0.1",
     "@mdx-js/react": "^1.6.21",
-    "@paloaltonetworks/postman-code-generators": "^1.1.12",
+    "@paloaltonetworks/postman-code-generators": "^1.1.15",
     "@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": "0.0.0-546",
+    "docusaurus-plugin-openapi-docs": "^1.5.2",
     "file-saver": "^2.0.5",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
@@ -73,5 +73,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "046657762bb71c14e7b629e94cbfb1cf1443ddae"
+  "gitHead": "a5a66956330a8dad1705e3f9e281b5ecc6c3c42f"
 }

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

@@ -15,6 +15,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";
 
@@ -100,6 +101,16 @@ export const languageSet: Language[] = [
     },
     variant: "cURL",
   },
+  {
+    highlight: "java",
+    language: "java",
+    logoClass: "java",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "OkHttp",
+  },
 ];
 
 export interface Props {
@@ -136,23 +147,37 @@ function Curl({ postman, codeSamples }: Props) {
 
   const auth = useTypedSelector((state: any) => state.auth);
 
-  // TODO
+  // User-defined languages array
+  // Can override languageSet, change order of langs, override options and variants
   const langs = [
     ...((siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
       languageSet),
     ...codeSamples,
   ];
 
-  const defaultLang: Language[] = 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: Language[] = 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("");
@@ -186,7 +211,7 @@ function Curl({ postman, codeSamples }: Props) {
     } 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
       );
 
@@ -233,6 +258,7 @@ function Curl({ postman, codeSamples }: Props) {
     queryParams,
     server,
     auth,
+    mergedLangs,
   ]);
 
   if (language === undefined) {
@@ -242,7 +268,7 @@ function Curl({ postman, codeSamples }: Props) {
   return (
     <>
       <CodeTabs groupId="code-samples" action={setLanguage}>
-        {langs.map((lang) => {
+        {mergedLangs.map((lang) => {
           return (
             <CodeTab
               value={lang.language}

package/src/theme/ParamsItem/index.js

@@ -8,6 +8,8 @@
 import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
+import SchemaTabs from "@theme/SchemaTabs";
+import TabItem from "@theme/TabItem";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
@@ -77,16 +79,34 @@ function ParamsItem({
   );
 
   const renderExample = guard(example, (example) => (
-    <div>{`Example: ${example}`}</div>
+    <>
+      <strong>Example: </strong>
+      {example}
+    </>
   ));
 
   const renderExamples = guard(examples, (examples) => {
     const exampleEntries = Object.entries(examples);
     return (
       <>
-        {exampleEntries.map(([k, v]) => (
-          <div>{`Example (${k}): ${v.value}`}</div>
-        ))}
+        <strong>Examples:</strong>
+        <SchemaTabs>
+          {exampleEntries.map(([exampleName, exampleProperties]) => (
+            <TabItem value={exampleName} label={exampleName}>
+              {exampleProperties.summary && <p>{exampleProperties.summary}</p>}
+              {exampleProperties.description && (
+                <p>
+                  <strong>Description: </strong>
+                  <span>{exampleProperties.description}</span>
+                </p>
+              )}
+              <p>
+                <strong>Example: </strong>
+                <code>{exampleProperties.value}</code>
+              </p>
+            </TabItem>
+          ))}
+        </SchemaTabs>
       </>
     );
   });

package/src/theme/styles.css

@@ -445,7 +445,33 @@
   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;
 }