docusaurus-theme-openapi-docs 2.0.0-beta.0 → 2.0.0-beta.2

package/lib/index.js

@@ -27,9 +27,37 @@ function docusaurusThemeOpenAPI() {
     getTypeScriptThemePath() {
       return _path.default.resolve(__dirname, "..", "src", "theme");
     },
-    configureWebpack() {
+    configureWebpack(_, isServer, utils) {
+      const {
+        getStyleLoaders
+      } = utils;
+      const isProd = process.env.NODE_ENV === "production";
       return {
-        plugins: [new NodePolyfillPlugin()]
+        plugins: [new NodePolyfillPlugin()],
+        module: {
+          rules: [{
+            test: /\.s[ca]ss$/,
+            oneOf: [{
+              test: /\.module\.s[ca]ss$/,
+              use: [...getStyleLoaders(isServer, {
+                modules: {
+                  localIdentName: isProd ? `[local]_[hash:base64:4]` : `[local]_[path][name]`,
+                  exportOnlyLocals: isServer
+                },
+                importLoaders: 2,
+                sourceMap: !isProd
+              }), {
+                loader: require.resolve("sass-loader"),
+                options: {}
+              }]
+            }, {
+              use: [...getStyleLoaders(isServer, {}), {
+                loader: require.resolve("sass-loader"),
+                options: {}
+              }]
+            }]
+          }]
+        }
       };
     }
   };

package/lib/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss

@@ -209,6 +209,28 @@
   }
 }
 
+.language-powershell {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--powershell {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-success);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
 @media only screen and (min-width: 768px) and (max-width: 996px) {
   .openapi-tabs__code-list {
     justify-content: space-around;

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

@@ -96,6 +96,15 @@ const languageSet = [{
     trimRequestBody: true
   },
   variant: "OkHttp"
+}, {
+  highlight: "powershell",
+  language: "powershell",
+  logoClass: "powershell",
+  options: {
+    followRedirect: true,
+    trimRequestBody: true
+  },
+  variant: "RestMethod"
 }];
 exports.languageSet = languageSet;
 function CodeTab({
@@ -217,7 +226,7 @@ function Curl({
         return <CodeTab value={lang.language} label={""} key={lang.variant ? `${lang.language}-${lang.variant}` : lang.language} attributes={{
           className: `openapi-tabs__code-item--${lang.logoClass}`
         }}>
-              <_CodeBlock.default language={lang.highlight} className="openapi-demo__code-block">
+              <_CodeBlock.default language={lang.highlight} className="openapi-demo__code-block" title={`${lang.language} / ${lang.variant}`}>
                 {codeText}
               </_CodeBlock.default>
             </CodeTab>;

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

@@ -69,7 +69,6 @@ function Response() {
           </button>
         </div>
       </summary>
-
       <div style={{
       backgroundColor: prismTheme.plain.backgroundColor,
       paddingLeft: "1rem",
@@ -83,13 +82,13 @@ function Response() {
             <_TabItem.default label={` ${code}`} value="body" attributes={{
           className: (0, _clsx.default)("openapi-response__dot", responseStatusClass)
         }} default>
-              <_CodeBlock.default className="openapi-response__status-code" language={response.startsWith("<") ? `xml` : `json`}>
+              <_CodeBlock.default className="openapi-demo__code-block openapi-response__status-code" language={response.startsWith("<") ? `xml` : `json`}>
                 {prettyResponse || "No Response"}
               </_CodeBlock.default>
             </_TabItem.default>
             {/* @ts-ignore */}
             <_TabItem.default label="Headers" value="headers">
-              <_CodeBlock.default className="openapi-response__status-headers" language={response.startsWith("<") ? `xml` : `json`}>
+              <_CodeBlock.default className="openapi-demo__code-block openapi-response__status-headers" language={response.startsWith("<") ? `xml` : `json`}>
                 {JSON.stringify(headers, undefined, 2)}
               </_CodeBlock.default>
             </_TabItem.default>

package/lib/theme/DiscriminatorTabs/_DiscriminatorTabs.scss

@@ -75,7 +75,7 @@
   position: relative;
   margin: 0 !important;
   padding: 5px 0 5px 0 !important;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
 }
 
 @media screen and (max-width: 500px) {

package/lib/theme/Markdown/Details/_Details.scss

@@ -2,7 +2,6 @@
 
 .openapi-markdown__details {
   margin: unset !important;
-  max-width: 600px;
   background-color: transparent;
   color: var(--ifm-font-color-base);
   padding: unset;
@@ -34,3 +33,8 @@
 .openapi-markdown__details p {
   margin-bottom: 0;
 }
+
+/* Hide defaul details marker by default */
+details summary::-webkit-details-marker {
+  display: none;
+}

package/lib/theme/ParamsItem/_ParamsItem.scss

@@ -2,7 +2,7 @@
   margin: 0 0 0 1rem !important;
   position: relative;
   padding-left: 1rem;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
   margin-top: unset !important;
 
   // Horizonal line styling for param attributes
@@ -15,7 +15,7 @@
     height: 0.5rem;
     /* vertical position of line */
     vertical-align: top;
-    border-bottom: thin solid var(--ifm-color-gray-500);
+    border-bottom: thin solid var(--openapi-tree-line-color);
     content: "";
     display: inline-block;
   }

package/lib/theme/SchemaItem/_SchemaItem.scss

@@ -3,7 +3,7 @@
   position: relative;
   margin: 0 !important;
   padding: 5px 0 5px 1rem;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
 
   // Horizontal line styling for schema properties
   &::before {
@@ -15,7 +15,7 @@
     height: 0.5rem;
     /* vertical position of line */
     vertical-align: top;
-    border-bottom: thin solid var(--ifm-color-gray-500);
+    border-bottom: thin solid var(--openapi-tree-line-color);
     content: "";
     display: inline-block;
   }

package/lib/theme/styles.scss

@@ -43,6 +43,7 @@
   --openapi-card-border-radius: var(--ifm-pre-border-radius);
   --openapi-input-border: var(--ifm-color-primary);
   --openapi-input-background: var(--openapi-card-background-color);
+  --openapi-tree-line-color: var(--ifm-toc-border-color);
 }
 
 [data-theme="dark"] {
@@ -115,3 +116,8 @@
 .openapi__heading {
   font-size: var(--ifm-h1-font-size);
 }
+
+.openapi-demo__code-block code {
+  max-height: 500px;
+  overflow: auto;
+}

package/lib-next/index.js

@@ -20,9 +20,48 @@ export default function docusaurusThemeOpenAPI() {
     getTypeScriptThemePath() {
       return path.resolve(__dirname, "..", "src", "theme");
     },
-    configureWebpack() {
+    configureWebpack(_, isServer, utils) {
+      const { getStyleLoaders } = utils;
+      const isProd = process.env.NODE_ENV === "production";
       return {
         plugins: [new NodePolyfillPlugin()],
+        module: {
+          rules: [
+            {
+              test: /\.s[ca]ss$/,
+              oneOf: [
+                {
+                  test: /\.module\.s[ca]ss$/,
+                  use: [
+                    ...getStyleLoaders(isServer, {
+                      modules: {
+                        localIdentName: isProd
+                          ? `[local]_[hash:base64:4]`
+                          : `[local]_[path][name]`,
+                        exportOnlyLocals: isServer,
+                      },
+                      importLoaders: 2,
+                      sourceMap: !isProd,
+                    }),
+                    {
+                      loader: require.resolve("sass-loader"),
+                      options: {},
+                    },
+                  ],
+                },
+                {
+                  use: [
+                    ...getStyleLoaders(isServer, {}),
+                    {
+                      loader: require.resolve("sass-loader"),
+                      options: {},
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
       };
     },
   };

package/lib-next/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss

@@ -209,6 +209,28 @@
   }
 }
 
+.language-powershell {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--powershell {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-success);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
 @media only screen and (min-width: 768px) and (max-width: 996px) {
   .openapi-tabs__code-list {
     justify-content: space-around;

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

@@ -96,6 +96,16 @@ export const languageSet = [
     },
     variant: "OkHttp",
   },
+  {
+    highlight: "powershell",
+    language: "powershell",
+    logoClass: "powershell",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "RestMethod",
+  },
 ];
 function CodeTab({ children, hidden, className, onClick }) {
   return (
@@ -257,6 +267,7 @@ function Curl({ postman, codeSamples }) {
               <CodeBlock
                 language={lang.highlight}
                 className="openapi-demo__code-block"
+                title={`${lang.language} / ${lang.variant}`}
               >
                 {codeText}
               </CodeBlock>

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

@@ -74,7 +74,6 @@ function Response() {
           </button>
         </div>
       </summary>
-
       <div
         style={{
           backgroundColor: prismTheme.plain.backgroundColor,
@@ -97,7 +96,7 @@ function Response() {
               default
             >
               <CodeBlock
-                className="openapi-response__status-code"
+                className="openapi-demo__code-block openapi-response__status-code"
                 language={response.startsWith("<") ? `xml` : `json`}
               >
                 {prettyResponse || "No Response"}
@@ -106,7 +105,7 @@ function Response() {
             {/* @ts-ignore */}
             <TabItem label="Headers" value="headers">
               <CodeBlock
-                className="openapi-response__status-headers"
+                className="openapi-demo__code-block openapi-response__status-headers"
                 language={response.startsWith("<") ? `xml` : `json`}
               >
                 {JSON.stringify(headers, undefined, 2)}

package/lib-next/theme/DiscriminatorTabs/_DiscriminatorTabs.scss

@@ -75,7 +75,7 @@
   position: relative;
   margin: 0 !important;
   padding: 5px 0 5px 0 !important;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
 }
 
 @media screen and (max-width: 500px) {

package/lib-next/theme/Markdown/Details/_Details.scss

@@ -2,7 +2,6 @@
 
 .openapi-markdown__details {
   margin: unset !important;
-  max-width: 600px;
   background-color: transparent;
   color: var(--ifm-font-color-base);
   padding: unset;
@@ -34,3 +33,8 @@
 .openapi-markdown__details p {
   margin-bottom: 0;
 }
+
+/* Hide defaul details marker by default */
+details summary::-webkit-details-marker {
+  display: none;
+}

package/lib-next/theme/ParamsItem/_ParamsItem.scss

@@ -2,7 +2,7 @@
   margin: 0 0 0 1rem !important;
   position: relative;
   padding-left: 1rem;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
   margin-top: unset !important;
 
   // Horizonal line styling for param attributes
@@ -15,7 +15,7 @@
     height: 0.5rem;
     /* vertical position of line */
     vertical-align: top;
-    border-bottom: thin solid var(--ifm-color-gray-500);
+    border-bottom: thin solid var(--openapi-tree-line-color);
     content: "";
     display: inline-block;
   }

package/lib-next/theme/SchemaItem/_SchemaItem.scss

@@ -3,7 +3,7 @@
   position: relative;
   margin: 0 !important;
   padding: 5px 0 5px 1rem;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
 
   // Horizontal line styling for schema properties
   &::before {
@@ -15,7 +15,7 @@
     height: 0.5rem;
     /* vertical position of line */
     vertical-align: top;
-    border-bottom: thin solid var(--ifm-color-gray-500);
+    border-bottom: thin solid var(--openapi-tree-line-color);
     content: "";
     display: inline-block;
   }

package/lib-next/theme/styles.scss

@@ -43,6 +43,7 @@
   --openapi-card-border-radius: var(--ifm-pre-border-radius);
   --openapi-input-border: var(--ifm-color-primary);
   --openapi-input-background: var(--openapi-card-background-color);
+  --openapi-tree-line-color: var(--ifm-toc-border-color);
 }
 
 [data-theme="dark"] {
@@ -115,3 +116,8 @@
 .openapi__heading {
   font-size: var(--ifm-h1-font-size);
 }
+
+.openapi-demo__code-block code {
+  max-height: 500px;
+  overflow: auto;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -45,13 +45,13 @@
   "dependencies": {
     "@docusaurus/theme-common": "^2.3.0",
     "@mdx-js/react": "^1.6.21",
-    "@paloaltonetworks/postman-code-generators": "^1.1.15",
+    "@paloaltonetworks/postman-code-generators": "1.1.15-patch.2",
     "@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": "^2.0.0-beta.0",
+    "docusaurus-plugin-openapi-docs": "^2.0.0-beta.2",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "immer": "^9.0.7",
@@ -76,5 +76,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "ef8b94ff1654153646f3616afb17fab7e267c51f"
+  "gitHead": "ba8fd77e6b9e90e0bca5e169fbc1c71ac50f44e0"
 }

package/src/index.ts

@@ -28,9 +28,48 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
       return path.resolve(__dirname, "..", "src", "theme");
     },
 
-    configureWebpack() {
+    configureWebpack(_, isServer, utils) {
+      const { getStyleLoaders } = utils;
+      const isProd = process.env.NODE_ENV === "production";
       return {
         plugins: [new NodePolyfillPlugin()],
+        module: {
+          rules: [
+            {
+              test: /\.s[ca]ss$/,
+              oneOf: [
+                {
+                  test: /\.module\.s[ca]ss$/,
+                  use: [
+                    ...getStyleLoaders(isServer, {
+                      modules: {
+                        localIdentName: isProd
+                          ? `[local]_[hash:base64:4]`
+                          : `[local]_[path][name]`,
+                        exportOnlyLocals: isServer,
+                      },
+                      importLoaders: 2,
+                      sourceMap: !isProd,
+                    }),
+                    {
+                      loader: require.resolve("sass-loader"),
+                      options: {},
+                    },
+                  ],
+                },
+                {
+                  use: [
+                    ...getStyleLoaders(isServer, {}),
+                    {
+                      loader: require.resolve("sass-loader"),
+                      options: {},
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
       };
     },
   };

package/src/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss

@@ -209,6 +209,28 @@
   }
 }
 
+.language-powershell {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.openapi-tabs__code-item--powershell {
+  color: var(--ifm-color-info);
+
+  &::after {
+    content: "";
+    width: 28px;
+    height: 28px;
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg");
+    margin-block: auto;
+  }
+
+  &.active {
+    border-bottom-color: var(--ifm-color-success);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+
 @media only screen and (min-width: 768px) and (max-width: 996px) {
   .openapi-tabs__code-list {
     justify-content: space-around;

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

@@ -108,6 +108,16 @@ export const languageSet: Language[] = [
     },
     variant: "OkHttp",
   },
+  {
+    highlight: "powershell",
+    language: "powershell",
+    logoClass: "powershell",
+    options: {
+      followRedirect: true,
+      trimRequestBody: true,
+    },
+    variant: "RestMethod",
+  },
 ];
 
 export interface Props {
@@ -278,6 +288,7 @@ function Curl({ postman, codeSamples }: Props) {
               <CodeBlock
                 language={lang.highlight}
                 className="openapi-demo__code-block"
+                title={`${lang.language} / ${lang.variant}`}
               >
                 {codeText}
               </CodeBlock>

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

@@ -81,7 +81,6 @@ function Response() {
           </button>
         </div>
       </summary>
-
       <div
         style={{
           backgroundColor: prismTheme.plain.backgroundColor,
@@ -104,7 +103,7 @@ function Response() {
               default
             >
               <CodeBlock
-                className="openapi-response__status-code"
+                className="openapi-demo__code-block openapi-response__status-code"
                 language={response.startsWith("<") ? `xml` : `json`}
               >
                 {prettyResponse || "No Response"}
@@ -113,7 +112,7 @@ function Response() {
             {/* @ts-ignore */}
             <TabItem label="Headers" value="headers">
               <CodeBlock
-                className="openapi-response__status-headers"
+                className="openapi-demo__code-block openapi-response__status-headers"
                 language={response.startsWith("<") ? `xml` : `json`}
               >
                 {JSON.stringify(headers, undefined, 2)}

package/src/theme/DiscriminatorTabs/_DiscriminatorTabs.scss

@@ -75,7 +75,7 @@
   position: relative;
   margin: 0 !important;
   padding: 5px 0 5px 0 !important;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
 }
 
 @media screen and (max-width: 500px) {

package/src/theme/Markdown/Details/_Details.scss

@@ -2,7 +2,6 @@
 
 .openapi-markdown__details {
   margin: unset !important;
-  max-width: 600px;
   background-color: transparent;
   color: var(--ifm-font-color-base);
   padding: unset;
@@ -34,3 +33,8 @@
 .openapi-markdown__details p {
   margin-bottom: 0;
 }
+
+/* Hide defaul details marker by default */
+details summary::-webkit-details-marker {
+  display: none;
+}

package/src/theme/ParamsItem/_ParamsItem.scss

@@ -2,7 +2,7 @@
   margin: 0 0 0 1rem !important;
   position: relative;
   padding-left: 1rem;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
   margin-top: unset !important;
 
   // Horizonal line styling for param attributes
@@ -15,7 +15,7 @@
     height: 0.5rem;
     /* vertical position of line */
     vertical-align: top;
-    border-bottom: thin solid var(--ifm-color-gray-500);
+    border-bottom: thin solid var(--openapi-tree-line-color);
     content: "";
     display: inline-block;
   }

package/src/theme/SchemaItem/_SchemaItem.scss

@@ -3,7 +3,7 @@
   position: relative;
   margin: 0 !important;
   padding: 5px 0 5px 1rem;
-  border-left: thin solid var(--ifm-color-gray-500) !important;
+  border-left: thin solid var(--openapi-tree-line-color) !important;
 
   // Horizontal line styling for schema properties
   &::before {
@@ -15,7 +15,7 @@
     height: 0.5rem;
     /* vertical position of line */
     vertical-align: top;
-    border-bottom: thin solid var(--ifm-color-gray-500);
+    border-bottom: thin solid var(--openapi-tree-line-color);
     content: "";
     display: inline-block;
   }

package/src/theme/styles.scss

@@ -43,6 +43,7 @@
   --openapi-card-border-radius: var(--ifm-pre-border-radius);
   --openapi-input-border: var(--ifm-color-primary);
   --openapi-input-background: var(--openapi-card-background-color);
+  --openapi-tree-line-color: var(--ifm-toc-border-color);
 }
 
 [data-theme="dark"] {
@@ -115,3 +116,8 @@
 .openapi__heading {
   font-size: var(--ifm-h1-font-size);
 }
+
+.openapi-demo__code-block code {
+  max-height: 500px;
+  overflow: auto;
+}