[Enhancement] Add proxy support (#366)

* Add plugin option for proxy * Read proxy from frontmatter * Pass options to createItems * Add proxy to petstore for testing * Fix linter issues * Update API mustache template to include proxy
PaloAltoNetworks · Dec 14, 2022 · 24f7cdf · 24f7cdf
1 parent 6202806
commit 24f7cdf
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 18 deletions.
diff --git a/demo/api.mustache b/demo/api.mustache
@@ -1,12 +1,12 @@
 ---
 id: {{{id}}}
-title: {{{title}}}
-description: "{{{description}}}"
+title: "{{{title}}}"
+description: "{{{frontMatter.description}}}"
 {{^api}}
 sidebar_label: Introduction
 {{/api}}
 {{#api}}
-sidebar_label: {{{title}}}
+sidebar_label: "{{{title}}}"
 {{/api}}
 {{^api}}
 sidebar_position: 0
@@ -25,6 +25,9 @@ sidebar_class_name: "{{{api.method}}} api-method"
 info_path: {{{infoPath}}}
 {{/infoPath}}
 custom_edit_url: null
+{{#frontMatter.proxy}}
+proxy: {{{frontMatter.proxy}}}
+{{/frontMatter.proxy}}
 ---
 
 {{{markdown}}}
diff --git a/demo/docusaurus.config.js b/demo/docusaurus.config.js
@@ -214,6 +214,7 @@ const config = {
           },
           petstore: {
             specPath: "examples/petstore.yaml",
+            proxy: "https://cors.pan.dev",
             outputDir: "docs/petstore",
             sidebarOptions: {
               groupPathsBy: "tag",

diff --git a/packages/docusaurus-plugin-openapi-docs/src/index.ts b/packages/docusaurus-plugin-openapi-docs/src/index.ts
@@ -106,9 +106,10 @@ export default function pluginOpenAPIDocs(
       : path.resolve(siteDir, specPath);
 
     try {
-      const openapiFiles = await readOpenapiFiles(contentPath, options);
+      const openapiFiles = await readOpenapiFiles(contentPath);
       const [loadedApi, tags] = await processOpenapiFiles(
         openapiFiles,
+        options,
         sidebarOptions!
       );
       if (!fs.existsSync(outputDir)) {
@@ -183,6 +184,9 @@ sidebar_class_name: "{{{api.method}}} api-method"
 info_path: {{{infoPath}}}
 {{/infoPath}}
 custom_edit_url: null
+{{#frontMatter.proxy}}
+proxy: {{{frontMatter.proxy}}}
+{{/frontMatter.proxy}}
 ---
 
 {{{markdown}}}

diff --git a/packages/docusaurus-plugin-openapi-docs/src/openapi/openapi.test.ts b/packages/docusaurus-plugin-openapi-docs/src/openapi/openapi.test.ts
@@ -17,8 +17,7 @@ describe("openapi", () => {
   describe("readOpenapiFiles", () => {
     it("readOpenapiFiles", async () => {
       const results = await readOpenapiFiles(
-        posixPath(path.join(__dirname, "__fixtures__/examples")),
-        { specPath: "./", outputDir: "./" }
+        posixPath(path.join(__dirname, "__fixtures__/examples"))
       );
       const categoryMeta = results.find((x) =>
         x.source.endsWith("_category_.json")

diff --git a/packages/docusaurus-plugin-openapi-docs/src/openapi/openapi.ts b/packages/docusaurus-plugin-openapi-docs/src/openapi/openapi.ts
@@ -80,6 +80,7 @@ type PartialPage<T> = Omit<T, "permalink" | "source" | "sourceDirName">;
 
 function createItems(
   openapiData: OpenApiObject,
+  options: APIOptions,
   sidebarOptions: SidebarOptions
 ): ApiMetadata[] {
   // TODO: Find a better way to handle this
@@ -219,6 +220,7 @@ function createItems(
                 .replace(/((?:^|[^\\])(?:\\{2})*)"/g, "$1'")
                 .replace(/\s+$/, "")
             : "",
+          ...(options?.proxy && { proxy: options.proxy }),
         },
         api: {
           ...defaults,
@@ -319,8 +321,7 @@ interface OpenApiFiles {
 }
 
 export async function readOpenapiFiles(
-  openapiPath: string,
-  options: APIOptions
+  openapiPath: string
 ): Promise<OpenApiFiles[]> {
   if (!isURL(openapiPath)) {
     const stat = await fs.lstat(openapiPath);
@@ -362,11 +363,16 @@ export async function readOpenapiFiles(
 
 export async function processOpenapiFiles(
   files: OpenApiFiles[],
+  options: APIOptions,
   sidebarOptions: SidebarOptions
 ): Promise<[ApiMetadata[], TagObject[][]]> {
   const promises = files.map(async (file) => {
     if (file.data !== undefined) {
-      const processedFile = await processOpenapiFile(file.data, sidebarOptions);
+      const processedFile = await processOpenapiFile(
+        file.data,
+        options,
+        sidebarOptions
+      );
       const itemsObjectsArray = processedFile[0].map((item) => ({
         ...item,
       }));
@@ -403,10 +409,11 @@ export async function processOpenapiFiles(
 
 export async function processOpenapiFile(
   openapiData: OpenApiObject,
+  options: APIOptions,
   sidebarOptions: SidebarOptions
 ): Promise<[ApiMetadata[], TagObject[]]> {
   const postmanCollection = await createPostmanCollection(openapiData);
-  const items = createItems(openapiData, sidebarOptions);
+  const items = createItems(openapiData, options, sidebarOptions);
 
   bindCollectionToApiItems(items, postmanCollection);
 

diff --git a/packages/docusaurus-plugin-openapi-docs/src/options.ts b/packages/docusaurus-plugin-openapi-docs/src/options.ts
@@ -23,6 +23,7 @@ export const OptionsSchema = Joi.object({
       /^/,
       Joi.object({
         specPath: Joi.string().required(),
+        proxy: Joi.string(),
         outputDir: Joi.string().required(),
         template: Joi.string(),
         downloadUrl: Joi.string(),

diff --git a/packages/docusaurus-plugin-openapi-docs/src/types.ts b/packages/docusaurus-plugin-openapi-docs/src/types.ts
@@ -40,6 +40,7 @@ export interface APIOptions {
   versions?: {
     [key: string]: APIVersionOptions;
   };
+  proxy?: string;
 }
 
 export interface SidebarOptions {

diff --git a/packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Request/index.tsx b/packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/Request/index.tsx
@@ -7,8 +7,7 @@
 
 import React from "react";
 
-import { ThemeConfig } from "@docusaurus/types";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { useDoc } from "@docusaurus/theme-common/internal";
 import sdk from "@paloaltonetworks/postman-collection";
 import Accept from "@theme/ApiDemoPanel/Accept";
 import Authorization from "@theme/ApiDemoPanel/Authorization";
@@ -24,10 +23,9 @@ import styles from "./styles.module.css";
 
 function Request({ item }: { item: NonNullable<ApiItem> }) {
   const response = useTypedSelector((state: any) => state.response.value);
-  const { siteConfig } = useDocusaurusContext();
-  const themeConfig = siteConfig.themeConfig as ThemeConfig;
-  const options = themeConfig.api as ApiItem;
   const postman = new sdk.Request(item.postman);
+  const metadata = useDoc();
+  const { proxy } = metadata.frontMatter;
 
   const params = {
     path: [] as ParameterObject[],
@@ -50,9 +48,7 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
         <summary>
           <div className={`details__request-summary`}>
             <h4>Request</h4>
-            {item.servers && (
-              <Execute postman={postman} proxy={options?.proxy} />
-            )}
+            {item.servers && <Execute postman={postman} proxy={proxy} />}
           </div>
         </summary>
         <div className={styles.optionsPanel}>