docusaurus-plugin-openapi-docs 1.6.1 → 2.0.0-beta.1

package/lib/markdown/createHeading.d.ts

@@ -0,0 +1 @@
+export declare function createHeading(heading: string): string[];

package/lib/markdown/createHeading.js

@@ -0,0 +1,20 @@
+"use strict";
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHeading = void 0;
+const utils_1 = require("./utils");
+function createHeading(heading) {
+    return [
+        (0, utils_1.create)("h1", {
+            className: "openapi__heading",
+            children: `${heading}`,
+        }),
+        `\n\n`,
+    ];
+}
+exports.createHeading = createHeading;

package/lib/markdown/createMethodEndpoint.d.ts

@@ -0,0 +1 @@
+export declare function createMethodEndpoint(method: String, path: String): string[];

package/lib/markdown/createMethodEndpoint.js

@@ -0,0 +1,14 @@
+"use strict";
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMethodEndpoint = void 0;
+const utils_1 = require("./utils");
+function createMethodEndpoint(method, path) {
+    return [(0, utils_1.create)("MethodEndpoint", { method: method, path: path }), "\n\n"];
+}
+exports.createMethodEndpoint = createMethodEndpoint;

package/lib/markdown/createParamsDetails.js

@@ -19,6 +19,7 @@ function createParamsDetails({ parameters, type }) {
         return undefined;
     }
     return (0, createDetails_1.createDetails)({
+        className: "openapi-markdown__details",
         "data-collapsed": false,
         open: true,
         style: { marginBottom: "1rem" },

package/lib/markdown/createRequestSchema.js

@@ -327,7 +327,7 @@ function createItems(schema) {
 //     }
 //   }
 //   return create("div", {
-//     className: "discriminatorItem",
+//     className: "openapi-discriminator__item",
 //     children: create("div", {
 //       children: [
 //         create("strong", {
@@ -392,6 +392,7 @@ function createDetailsNode(name, schemaName, schema, required, nullable) {
         className: "schemaItem",
         children: [
             (0, createDetails_1.createDetails)({
+                className: "openapi-markdown__details",
                 children: [
                     (0, createDetailsSummary_1.createDetailsSummary)({
                         children: [
@@ -454,7 +455,7 @@ function createPropertyDiscriminator(name, schemaName, schema, discriminator, re
         return undefined;
     }
     return (0, utils_1.create)("div", {
-        className: "discriminatorItem",
+        className: "openapi-discriminator__item",
         children: (0, utils_1.create)("div", {
             children: [
                 (0, utils_1.create)("strong", { style: { paddingLeft: "1rem" }, children: name }),
@@ -484,17 +485,14 @@ function createPropertyDiscriminator(name, schemaName, schema, discriminator, re
                     children: (0, createDescription_1.createDescription)(description),
                 })),
                 (0, utils_1.create)("DiscriminatorTabs", {
+                    className: "openapi-tabs__discriminator",
                     children: Object.keys(discriminator === null || discriminator === void 0 ? void 0 : discriminator.mapping).map((key, index) => {
                         const label = key;
                         return (0, utils_1.create)("TabItem", {
+                            // className: "openapi-tabs__discriminator-item",
                             label: label,
                             value: `${index}-item-discriminator`,
-                            children: [
-                                (0, utils_1.create)("div", {
-                                    style: { marginLeft: "-4px" },
-                                    children: createNodes(discriminator === null || discriminator === void 0 ? void 0 : discriminator.mapping[key]),
-                                }),
-                            ],
+                            children: [createNodes(discriminator === null || discriminator === void 0 ? void 0 : discriminator.mapping[key])],
                         });
                     }),
                 }),
@@ -638,6 +636,7 @@ function createRequestSchema({ title, body, ...rest }) {
     const mimeTypes = Object.keys(body.content);
     if (mimeTypes && mimeTypes.length > 1) {
         return (0, utils_1.create)("MimeTabs", {
+            className: "openapi-tabs__mime",
             schemaType: "request",
             children: mimeTypes.map((mimeType) => {
                 const firstBody = body.content[mimeType].schema;
@@ -654,6 +653,7 @@ function createRequestSchema({ title, body, ...rest }) {
                     value: `${mimeType}`,
                     children: [
                         (0, createDetails_1.createDetails)({
+                            className: "openapi-markdown__details",
                             "data-collapsed": false,
                             open: true,
                             ...rest,
@@ -707,12 +707,14 @@ function createRequestSchema({ title, body, ...rest }) {
         }
     }
     return (0, utils_1.create)("MimeTabs", {
+        className: "openapi-tabs__mime",
         children: [
             (0, utils_1.create)("TabItem", {
                 label: randomFirstKey,
                 value: `${randomFirstKey}-schema`,
                 children: [
                     (0, createDetails_1.createDetails)({
+                        className: "openapi-markdown__details",
                         "data-collapsed": false,
                         open: true,
                         ...rest,

package/lib/markdown/createResponseSchema.js

@@ -55,6 +55,7 @@ function createAnyOneOf(schema) {
                 children: type,
             }),
             (0, utils_1.create)("SchemaTabs", {
+                className: "openapi-tabs__schema",
                 children: schema[type].map((anyOneSchema, index) => {
                     const label = anyOneSchema.title
                         ? anyOneSchema.title
@@ -328,7 +329,7 @@ function createItems(schema) {
 //     }
 //   }
 //   return create("div", {
-//     className: "discriminatorItem",
+//     className: "openapi-discriminator__item",
 //     children: create("div", {
 //       children: [
 //         create("strong", {
@@ -393,6 +394,7 @@ function createDetailsNode(name, schemaName, schema, required, nullable) {
         className: "schemaItem",
         children: [
             (0, createDetails_1.createDetails)({
+                className: "openapi-markdown__details",
                 children: [
                     (0, createDetailsSummary_1.createDetailsSummary)({
                         children: [
@@ -455,7 +457,7 @@ function createPropertyDiscriminator(name, schemaName, schema, discriminator, re
         return undefined;
     }
     return (0, utils_1.create)("div", {
-        className: "discriminatorItem",
+        className: "openapi-discriminator__item",
         children: (0, utils_1.create)("div", {
             children: [
                 (0, utils_1.create)("strong", { style: { paddingLeft: "1rem" }, children: name }),
@@ -485,17 +487,14 @@ function createPropertyDiscriminator(name, schemaName, schema, discriminator, re
                     children: (0, createDescription_1.createDescription)(description),
                 })),
                 (0, utils_1.create)("DiscriminatorTabs", {
+                    className: "openapi-tabs__discriminator",
                     children: Object.keys(discriminator === null || discriminator === void 0 ? void 0 : discriminator.mapping).map((key, index) => {
                         const label = key;
                         return (0, utils_1.create)("TabItem", {
+                            // className: "openapi-tabs__discriminator-item",
                             label: label,
                             value: `${index}-item-discriminator`,
-                            children: [
-                                (0, utils_1.create)("div", {
-                                    style: { marginLeft: "-4px" },
-                                    children: createNodes(discriminator === null || discriminator === void 0 ? void 0 : discriminator.mapping[key]),
-                                }),
-                            ],
+                            children: [createNodes(discriminator === null || discriminator === void 0 ? void 0 : discriminator.mapping[key])],
                         });
                     }),
                 }),
@@ -640,6 +639,7 @@ function createResponseSchema({ title, body, ...rest }) {
     const mimeTypes = Object.keys(body.content);
     if (mimeTypes && mimeTypes.length) {
         return (0, utils_1.create)("MimeTabs", {
+            className: "openapi-tabs__mime",
             schemaType: "response",
             children: mimeTypes.map((mimeType) => {
                 var _a;
@@ -661,6 +661,7 @@ function createResponseSchema({ title, body, ...rest }) {
                     value: `${mimeType}`,
                     children: [
                         (0, utils_1.create)("SchemaTabs", {
+                            className: "openapi-tabs__schema",
                             // TODO: determine if we should persist this
                             // groupId: "schema-tabs",
                             children: [
@@ -670,6 +671,7 @@ function createResponseSchema({ title, body, ...rest }) {
                                         value: `${title}`,
                                         children: [
                                             (0, createDetails_1.createDetails)({
+                                                className: "openapi-markdown__details",
                                                 "data-collapsed": false,
                                                 open: true,
                                                 ...rest,

package/lib/markdown/createStatusCodes.js

@@ -258,45 +258,48 @@ function createStatusCodes({ responses }) {
     }
     return (0, utils_1.create)("div", {
         children: [
-            (0, utils_1.create)("ApiTabs", {
-                // TODO: determine if we should persist status code selection
-                // groupId: "api-tabs",
-                children: codes.map((code) => {
-                    const responseHeaders = responses[code].headers;
-                    return (0, utils_1.create)("TabItem", {
-                        label: code,
-                        value: code,
-                        children: [
-                            (0, utils_1.create)("div", {
-                                children: (0, createDescription_1.createDescription)(responses[code].description),
-                            }),
-                            responseHeaders &&
-                                (0, createDetails_1.createDetails)({
-                                    "data-collaposed": true,
-                                    open: false,
-                                    style: { textAlign: "left", marginBottom: "1rem" },
-                                    children: [
-                                        (0, createDetailsSummary_1.createDetailsSummary)({
+            (0, utils_1.create)("div", {
+                children: [
+                    (0, utils_1.create)("ApiTabs", {
+                        children: codes.map((code) => {
+                            const responseHeaders = responses[code].headers;
+                            return (0, utils_1.create)("TabItem", {
+                                label: code,
+                                value: code,
+                                children: [
+                                    (0, utils_1.create)("div", {
+                                        children: (0, createDescription_1.createDescription)(responses[code].description),
+                                    }),
+                                    responseHeaders &&
+                                        (0, createDetails_1.createDetails)({
+                                            className: "openapi-markdown__details",
+                                            "data-collaposed": true,
+                                            open: false,
+                                            style: { textAlign: "left", marginBottom: "1rem" },
                                             children: [
-                                                (0, utils_1.create)("strong", {
-                                                    children: "Response Headers",
+                                                (0, createDetailsSummary_1.createDetailsSummary)({
+                                                    children: [
+                                                        (0, utils_1.create)("strong", {
+                                                            children: "Response Headers",
+                                                        }),
+                                                    ],
                                                 }),
+                                                createResponseHeaders(responseHeaders),
                                             ],
                                         }),
-                                        createResponseHeaders(responseHeaders),
-                                    ],
-                                }),
-                            (0, utils_1.create)("div", {
-                                children: (0, createResponseSchema_1.createResponseSchema)({
-                                    title: "Schema",
-                                    body: {
-                                        content: responses[code].content,
-                                    },
-                                }),
-                            }),
-                        ],
-                    });
-                }),
+                                    (0, utils_1.create)("div", {
+                                        children: (0, createResponseSchema_1.createResponseSchema)({
+                                            title: "Schema",
+                                            body: {
+                                                content: responses[code].content,
+                                            },
+                                        }),
+                                    }),
+                                ],
+                            });
+                        }),
+                    }),
+                ],
             }),
         ],
     });

package/lib/markdown/index.d.ts

@@ -1,4 +1,4 @@
 import { ApiPageMetadata, InfoPageMetadata, TagPageMetadata } from "../types";
-export declare function createApiPageMD({ title, api: { deprecated, "x-deprecated-description": deprecatedDescription, description, parameters, requestBody, responses, }, }: ApiPageMetadata): string;
+export declare function createApiPageMD({ title, api: { deprecated, "x-deprecated-description": deprecatedDescription, description, method, path, parameters, requestBody, responses, }, }: ApiPageMetadata): string;
 export declare function createInfoPageMD({ info: { title, version, description, contact, license, termsOfService, logo, darkLogo, }, securitySchemes, downloadUrl, }: InfoPageMetadata): string;
 export declare function createTagPageMD({ tag: { description } }: TagPageMetadata): string;

package/lib/markdown/index.js

@@ -12,25 +12,29 @@ const createContactInfo_1 = require("./createContactInfo");
 const createDeprecationNotice_1 = require("./createDeprecationNotice");
 const createDescription_1 = require("./createDescription");
 const createDownload_1 = require("./createDownload");
+const createHeading_1 = require("./createHeading");
 const createLicense_1 = require("./createLicense");
 const createLogo_1 = require("./createLogo");
+const createMethodEndpoint_1 = require("./createMethodEndpoint");
 const createParamsDetails_1 = require("./createParamsDetails");
 const createRequestBodyDetails_1 = require("./createRequestBodyDetails");
 const createStatusCodes_1 = require("./createStatusCodes");
 const createTermsOfService_1 = require("./createTermsOfService");
 const createVersionBadge_1 = require("./createVersionBadge");
 const utils_1 = require("./utils");
-function createApiPageMD({ title, api: { deprecated, "x-deprecated-description": deprecatedDescription, description, parameters, requestBody, responses, }, }) {
+function createApiPageMD({ title, api: { deprecated, "x-deprecated-description": deprecatedDescription, description, method, path, parameters, requestBody, responses, }, }) {
     return (0, utils_1.render)([
         `import ApiTabs from "@theme/ApiTabs";\n`,
+        `import DiscriminatorTabs from "@theme/DiscriminatorTabs";\n`,
+        `import MethodEndpoint from "@theme/ApiDemoPanel/MethodEndpoint";\n`,
         `import MimeTabs from "@theme/MimeTabs";\n`,
         `import ParamsItem from "@theme/ParamsItem";\n`,
         `import ResponseSamples from "@theme/ResponseSamples";\n`,
         `import SchemaItem from "@theme/SchemaItem";\n`,
         `import SchemaTabs from "@theme/SchemaTabs";\n`,
-        `import DiscriminatorTabs from "@theme/DiscriminatorTabs";\n`,
         `import TabItem from "@theme/TabItem";\n\n`,
-        `## ${title.replace(utils_1.lessThan, "<").replace(utils_1.greaterThan, ">")}\n\n`,
+        (0, createHeading_1.createHeading)(title.replace(utils_1.lessThan, "<").replace(utils_1.greaterThan, ">")),
+        (0, createMethodEndpoint_1.createMethodEndpoint)(method, path),
         (0, createDeprecationNotice_1.createDeprecationNotice)({ deprecated, description: deprecatedDescription }),
         (0, createDescription_1.createDescription)(description),
         (0, createParamsDetails_1.createParamsDetails)({ parameters, type: "path" }),
@@ -53,7 +57,7 @@ function createInfoPageMD({ info: { title, version, description, contact, licens
         `import Export from "@theme/ApiDemoPanel/Export";\n\n`,
         (0, createVersionBadge_1.createVersionBadge)(version),
         (0, createDownload_1.createDownload)(downloadUrl),
-        `# ${title.replace(utils_1.lessThan, "<").replace(utils_1.greaterThan, ">")}\n\n`,
+        (0, createHeading_1.createHeading)(title.replace(utils_1.lessThan, "<").replace(utils_1.greaterThan, ">")),
         (0, createLogo_1.createLogo)(logo, darkLogo),
         (0, createDescription_1.createDescription)(description),
         (0, createAuthentication_1.createAuthentication)(securitySchemes),

package/lib/markdown/utils.js

@@ -35,6 +35,6 @@ function render(children) {
 }
 exports.render = render;
 // Regex to selectively URL-encode '>' and '<' chars
-exports.lessThan = /<(?!(=|button|\s?\/button|details|\s?\/details|summary|\s?\/summary|hr|\s?\/hr|br|\s?\/br|span|\s?\/span|strong|\s?\/strong|small|\s?\/small|table|\s?\/table|td|\s?\/td|tr|\s?\/tr|th|\s?\/th|h1|\s?\/h1|h2|\s?\/h2|h3|\s?\/h3|h4|\s?\/h4|h5|\s?\/h5|h6|\s?\/h6|title|\s?\/title|p|\s?\/p|em|\s?\/em|b|\s?\/b|i|\s?\/i|u|\s?\/u|strike|\s?\/strike|a|\s?\/a|li|\s?\/li|ol|\s?\/ol|ul|\s?\/ul|img|\s?\/img|div|\s?\/div|center|\s?\/center))/gu;
-exports.greaterThan = /(?<!(button|code|details|summary|hr|br|span|strong|small|table|thead|tbody|td|tr|th|h1|h2|h3|h4|h5|h6|title|p|em|b|i|u|strike|a|tag|li|ol|ul|img|div|center|\/|\s|"|'))>/gu;
+exports.lessThan = /<(?!(=|button|\s?\/button|code|\s?\/code|details|\s?\/details|summary|\s?\/summary|hr|\s?\/hr|br|\s?\/br|span|\s?\/span|strong|\s?\/strong|small|\s?\/small|table|\s?\/table|thead|\s?\/thead|tbody|\s?\/tbody|td|\s?\/td|tr|\s?\/tr|th|\s?\/th|h1|\s?\/h1|h2|\s?\/h2|h3|\s?\/h3|h4|\s?\/h4|h5|\s?\/h5|h6|\s?\/h6|title|\s?\/title|p|\s?\/p|em|\s?\/em|b|\s?\/b|i|\s?\/i|u|\s?\/u|strike|\s?\/strike|bold|\s?\/bold|a|\s?\/a|table|\s?\/table|li|\s?\/li|ol|\s?\/ol|ul|\s?\/ul|img|\s?\/img|svg|\s?\/svg|div|\s?\/div|center|\s?\/center))/gu;
+exports.greaterThan = /(?<!(button|code|details|summary|hr|br|span|strong|small|table|thead|tbody|td|tr|th|h1|h2|h3|h4|h5|h6|title|p|em|b|i|u|strike|bold|a|li|ol|ul|img|svg|div|center|\/|\s|"|'))>/gu;
 exports.codeFence = /`{1,3}[\s\S]*?`{1,3}/g;

package/lib/types.d.ts

@@ -59,6 +59,8 @@ export interface ApiMetadataBase {
     permalink: string;
     sidebarPosition?: number;
     frontMatter: Record<string, unknown>;
+    method?: string;
+    path?: string;
 }
 export interface ApiPageMetadata extends ApiMetadataBase {
     json?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-plugin-openapi-docs",
   "description": "OpenAPI plugin for Docusaurus.",
-  "version": "1.6.1",
+  "version": "2.0.0-beta.1",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -28,8 +28,8 @@
     "watch": "tsc --watch"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": ">=2.0.1 <2.3.0",
-    "@docusaurus/types": ">=2.0.1 <2.3.0",
+    "@docusaurus/module-type-aliases": "^2.3.0",
+    "@docusaurus/types": "^2.3.0",
     "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.5",
     "@types/json-pointer": "^1.0.31",
@@ -40,10 +40,10 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",
-    "@docusaurus/mdx-loader": ">=2.0.1 <2.3.0",
-    "@docusaurus/plugin-content-docs": ">=2.0.1 <2.3.0",
-    "@docusaurus/utils": ">=2.0.1 <2.3.0",
-    "@docusaurus/utils-validation": ">=2.0.1 <2.3.0",
+    "@docusaurus/mdx-loader": "^2.3.0",
+    "@docusaurus/plugin-content-docs": "^2.3.0",
+    "@docusaurus/utils": "^2.3.0",
+    "@docusaurus/utils-validation": "^2.3.0",
     "@paloaltonetworks/openapi-to-postmanv2": "3.1.0-hotfix.1",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@redocly/openapi-core": "^1.0.0-beta.103",
@@ -68,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "68f648d80d41b82a607215bac0a082f931f80b7c"
+  "gitHead": "adcd05075257f6d00321dc289445d0306306b7ee"
 }

package/src/markdown/createHeading.ts

@@ -0,0 +1,18 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import { create } from "./utils";
+
+export function createHeading(heading: string) {
+  return [
+    create("h1", {
+      className: "openapi__heading",
+      children: `${heading}`,
+    }),
+    `\n\n`,
+  ];
+}

package/src/markdown/createMethodEndpoint.ts

@@ -0,0 +1,12 @@
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
+import { create } from "./utils";
+
+export function createMethodEndpoint(method: String, path: String) {
+  return [create("MethodEndpoint", { method: method, path: path }), "\n\n"];
+}

package/src/markdown/createParamsDetails.ts

@@ -25,6 +25,7 @@ export function createParamsDetails({ parameters, type }: Props) {
   }
 
   return createDetails({
+    className: "openapi-markdown__details",
     "data-collapsed": false,
     open: true,
     style: { marginBottom: "1rem" },

package/src/markdown/createRequestSchema.ts

@@ -391,7 +391,7 @@ function createItems(schema: SchemaObject) {
 //   }
 
 //   return create("div", {
-//     className: "discriminatorItem",
+//     className: "openapi-discriminator__item",
 //     children: create("div", {
 //       children: [
 //         create("strong", {
@@ -465,6 +465,7 @@ function createDetailsNode(
     className: "schemaItem",
     children: [
       createDetails({
+        className: "openapi-markdown__details",
         children: [
           createDetailsSummary({
             children: [
@@ -546,7 +547,7 @@ function createPropertyDiscriminator(
   }
 
   return create("div", {
-    className: "discriminatorItem",
+    className: "openapi-discriminator__item",
     children: create("div", {
       children: [
         create("strong", { style: { paddingLeft: "1rem" }, children: name }),
@@ -582,17 +583,14 @@ function createPropertyDiscriminator(
           })
         ),
         create("DiscriminatorTabs", {
+          className: "openapi-tabs__discriminator",
           children: Object.keys(discriminator?.mapping!).map((key, index) => {
             const label = key;
             return create("TabItem", {
+              // className: "openapi-tabs__discriminator-item",
               label: label,
               value: `${index}-item-discriminator`,
-              children: [
-                create("div", {
-                  style: { marginLeft: "-4px" },
-                  children: createNodes(discriminator?.mapping[key]),
-                }),
-              ],
+              children: [createNodes(discriminator?.mapping[key])],
             });
           }),
         }),
@@ -861,6 +859,7 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
 
   if (mimeTypes && mimeTypes.length > 1) {
     return create("MimeTabs", {
+      className: "openapi-tabs__mime",
       schemaType: "request",
       children: mimeTypes.map((mimeType) => {
         const firstBody = body.content![mimeType].schema;
@@ -877,6 +876,7 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
           value: `${mimeType}`,
           children: [
             createDetails({
+              className: "openapi-markdown__details",
               "data-collapsed": false,
               open: true,
               ...rest,
@@ -934,12 +934,14 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
     }
   }
   return create("MimeTabs", {
+    className: "openapi-tabs__mime",
     children: [
       create("TabItem", {
         label: randomFirstKey,
         value: `${randomFirstKey}-schema`,
         children: [
           createDetails({
+            className: "openapi-markdown__details",
             "data-collapsed": false,
             open: true,
             ...rest,

package/src/markdown/createResponseSchema.ts

@@ -65,6 +65,7 @@ function createAnyOneOf(schema: SchemaObject): any {
         children: type,
       }),
       create("SchemaTabs", {
+        className: "openapi-tabs__schema",
         children: schema[type]!.map((anyOneSchema, index) => {
           const label = anyOneSchema.title
             ? anyOneSchema.title
@@ -397,7 +398,7 @@ function createItems(schema: SchemaObject) {
 //   }
 
 //   return create("div", {
-//     className: "discriminatorItem",
+//     className: "openapi-discriminator__item",
 //     children: create("div", {
 //       children: [
 //         create("strong", {
@@ -471,6 +472,7 @@ function createDetailsNode(
     className: "schemaItem",
     children: [
       createDetails({
+        className: "openapi-markdown__details",
         children: [
           createDetailsSummary({
             children: [
@@ -552,7 +554,7 @@ function createPropertyDiscriminator(
   }
 
   return create("div", {
-    className: "discriminatorItem",
+    className: "openapi-discriminator__item",
     children: create("div", {
       children: [
         create("strong", { style: { paddingLeft: "1rem" }, children: name }),
@@ -588,17 +590,14 @@ function createPropertyDiscriminator(
           })
         ),
         create("DiscriminatorTabs", {
+          className: "openapi-tabs__discriminator",
           children: Object.keys(discriminator?.mapping!).map((key, index) => {
             const label = key;
             return create("TabItem", {
+              // className: "openapi-tabs__discriminator-item",
               label: label,
               value: `${index}-item-discriminator`,
-              children: [
-                create("div", {
-                  style: { marginLeft: "-4px" },
-                  children: createNodes(discriminator?.mapping[key]),
-                }),
-              ],
+              children: [createNodes(discriminator?.mapping[key])],
             });
           }),
         }),
@@ -869,6 +868,7 @@ export function createResponseSchema({ title, body, ...rest }: Props) {
 
   if (mimeTypes && mimeTypes.length) {
     return create("MimeTabs", {
+      className: "openapi-tabs__mime",
       schemaType: "response",
       children: mimeTypes.map((mimeType: any) => {
         const responseExamples = body.content![mimeType].examples;
@@ -895,6 +895,7 @@ export function createResponseSchema({ title, body, ...rest }: Props) {
           value: `${mimeType}`,
           children: [
             create("SchemaTabs", {
+              className: "openapi-tabs__schema",
               // TODO: determine if we should persist this
               // groupId: "schema-tabs",
               children: [
@@ -904,6 +905,7 @@ export function createResponseSchema({ title, body, ...rest }: Props) {
                     value: `${title}`,
                     children: [
                       createDetails({
+                        className: "openapi-markdown__details",
                         "data-collapsed": false,
                         open: true,
                         ...rest,

package/src/markdown/createStatusCodes.ts

@@ -266,45 +266,48 @@ export function createStatusCodes({ responses }: Props) {
 
   return create("div", {
     children: [
-      create("ApiTabs", {
-        // TODO: determine if we should persist status code selection
-        // groupId: "api-tabs",
-        children: codes.map((code) => {
-          const responseHeaders: any = responses[code].headers;
-          return create("TabItem", {
-            label: code,
-            value: code,
-            children: [
-              create("div", {
-                children: createDescription(responses[code].description),
-              }),
-              responseHeaders &&
-                createDetails({
-                  "data-collaposed": true,
-                  open: false,
-                  style: { textAlign: "left", marginBottom: "1rem" },
-                  children: [
-                    createDetailsSummary({
+      create("div", {
+        children: [
+          create("ApiTabs", {
+            children: codes.map((code) => {
+              const responseHeaders: any = responses[code].headers;
+              return create("TabItem", {
+                label: code,
+                value: code,
+                children: [
+                  create("div", {
+                    children: createDescription(responses[code].description),
+                  }),
+                  responseHeaders &&
+                    createDetails({
+                      className: "openapi-markdown__details",
+                      "data-collaposed": true,
+                      open: false,
+                      style: { textAlign: "left", marginBottom: "1rem" },
                       children: [
-                        create("strong", {
-                          children: "Response Headers",
+                        createDetailsSummary({
+                          children: [
+                            create("strong", {
+                              children: "Response Headers",
+                            }),
+                          ],
                         }),
+                        createResponseHeaders(responseHeaders),
                       ],
                     }),
-                    createResponseHeaders(responseHeaders),
-                  ],
-                }),
-              create("div", {
-                children: createResponseSchema({
-                  title: "Schema",
-                  body: {
-                    content: responses[code].content,
-                  },
-                }),
-              }),
-            ],
-          });
-        }),
+                  create("div", {
+                    children: createResponseSchema({
+                      title: "Schema",
+                      body: {
+                        content: responses[code].content,
+                      },
+                    }),
+                  }),
+                ],
+              });
+            }),
+          }),
+        ],
       }),
     ],
   });

package/src/markdown/index.ts

@@ -17,8 +17,10 @@ import { createContactInfo } from "./createContactInfo";
 import { createDeprecationNotice } from "./createDeprecationNotice";
 import { createDescription } from "./createDescription";
 import { createDownload } from "./createDownload";
+import { createHeading } from "./createHeading";
 import { createLicense } from "./createLicense";
 import { createLogo } from "./createLogo";
+import { createMethodEndpoint } from "./createMethodEndpoint";
 import { createParamsDetails } from "./createParamsDetails";
 import { createRequestBodyDetails } from "./createRequestBodyDetails";
 import { createStatusCodes } from "./createStatusCodes";
@@ -43,6 +45,8 @@ export function createApiPageMD({
     deprecated,
     "x-deprecated-description": deprecatedDescription,
     description,
+    method,
+    path,
     parameters,
     requestBody,
     responses,
@@ -50,14 +54,16 @@ export function createApiPageMD({
 }: ApiPageMetadata) {
   return render([
     `import ApiTabs from "@theme/ApiTabs";\n`,
+    `import DiscriminatorTabs from "@theme/DiscriminatorTabs";\n`,
+    `import MethodEndpoint from "@theme/ApiDemoPanel/MethodEndpoint";\n`,
     `import MimeTabs from "@theme/MimeTabs";\n`,
     `import ParamsItem from "@theme/ParamsItem";\n`,
     `import ResponseSamples from "@theme/ResponseSamples";\n`,
     `import SchemaItem from "@theme/SchemaItem";\n`,
     `import SchemaTabs from "@theme/SchemaTabs";\n`,
-    `import DiscriminatorTabs from "@theme/DiscriminatorTabs";\n`,
     `import TabItem from "@theme/TabItem";\n\n`,
-    `## ${title.replace(lessThan, "<").replace(greaterThan, ">")}\n\n`,
+    createHeading(title.replace(lessThan, "<").replace(greaterThan, ">")),
+    createMethodEndpoint(method, path),
     createDeprecationNotice({ deprecated, description: deprecatedDescription }),
     createDescription(description),
     createParamsDetails({ parameters, type: "path" }),
@@ -94,7 +100,7 @@ export function createInfoPageMD({
 
     createVersionBadge(version),
     createDownload(downloadUrl),
-    `# ${title.replace(lessThan, "<").replace(greaterThan, ">")}\n\n`,
+    createHeading(title.replace(lessThan, "<").replace(greaterThan, ">")),
     createLogo(logo, darkLogo),
     createDescription(description),
     createAuthentication(securitySchemes as unknown as SecuritySchemeObject),

package/src/markdown/utils.ts

@@ -43,7 +43,7 @@ export function render(children: Children): string {
 
 // Regex to selectively URL-encode '>' and '<' chars
 export const lessThan =
-  /<(?!(=|button|\s?\/button|details|\s?\/details|summary|\s?\/summary|hr|\s?\/hr|br|\s?\/br|span|\s?\/span|strong|\s?\/strong|small|\s?\/small|table|\s?\/table|td|\s?\/td|tr|\s?\/tr|th|\s?\/th|h1|\s?\/h1|h2|\s?\/h2|h3|\s?\/h3|h4|\s?\/h4|h5|\s?\/h5|h6|\s?\/h6|title|\s?\/title|p|\s?\/p|em|\s?\/em|b|\s?\/b|i|\s?\/i|u|\s?\/u|strike|\s?\/strike|a|\s?\/a|li|\s?\/li|ol|\s?\/ol|ul|\s?\/ul|img|\s?\/img|div|\s?\/div|center|\s?\/center))/gu;
+  /<(?!(=|button|\s?\/button|code|\s?\/code|details|\s?\/details|summary|\s?\/summary|hr|\s?\/hr|br|\s?\/br|span|\s?\/span|strong|\s?\/strong|small|\s?\/small|table|\s?\/table|thead|\s?\/thead|tbody|\s?\/tbody|td|\s?\/td|tr|\s?\/tr|th|\s?\/th|h1|\s?\/h1|h2|\s?\/h2|h3|\s?\/h3|h4|\s?\/h4|h5|\s?\/h5|h6|\s?\/h6|title|\s?\/title|p|\s?\/p|em|\s?\/em|b|\s?\/b|i|\s?\/i|u|\s?\/u|strike|\s?\/strike|bold|\s?\/bold|a|\s?\/a|table|\s?\/table|li|\s?\/li|ol|\s?\/ol|ul|\s?\/ul|img|\s?\/img|svg|\s?\/svg|div|\s?\/div|center|\s?\/center))/gu;
 export const greaterThan =
-  /(?<!(button|code|details|summary|hr|br|span|strong|small|table|thead|tbody|td|tr|th|h1|h2|h3|h4|h5|h6|title|p|em|b|i|u|strike|a|tag|li|ol|ul|img|div|center|\/|\s|"|'))>/gu;
+  /(?<!(button|code|details|summary|hr|br|span|strong|small|table|thead|tbody|td|tr|th|h1|h2|h3|h4|h5|h6|title|p|em|b|i|u|strike|bold|a|li|ol|ul|img|svg|div|center|\/|\s|"|'))>/gu;
 export const codeFence = /`{1,3}[\s\S]*?`{1,3}/g;

package/src/types.ts

@@ -84,6 +84,8 @@ export interface ApiMetadataBase {
   permalink: string;
   sidebarPosition?: number;
   frontMatter: Record<string, unknown>;
+  method?: string;
+  path?: string;
 }
 
 export interface ApiPageMetadata extends ApiMetadataBase {