docusaurus-plugin-openapi-docs 0.0.0-619 → 0.0.0-684

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, extensions, parameters, requestBody, responses, }, frontMatter, }: ApiPageMetadata): string;
+export declare function createApiPageMD({ title, api: { deprecated, "x-deprecated-description": deprecatedDescription, description, method, path, extensions, parameters, requestBody, responses, }, infoPath, frontMatter, }: 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

@@ -8,39 +8,48 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTagPageMD = exports.createInfoPageMD = exports.createApiPageMD = void 0;
 const createAuthentication_1 = require("./createAuthentication");
+const createAuthorization_1 = require("./createAuthorization");
 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 createRequestHeader_1 = require("./createRequestHeader");
 const createStatusCodes_1 = require("./createStatusCodes");
 const createTermsOfService_1 = require("./createTermsOfService");
 const createVendorExtensions_1 = require("./createVendorExtensions");
 const createVersionBadge_1 = require("./createVersionBadge");
 const utils_1 = require("./utils");
-function createApiPageMD({ title, api: { deprecated, "x-deprecated-description": deprecatedDescription, description, extensions, parameters, requestBody, responses, }, frontMatter, }) {
+function createApiPageMD({ title, api: { deprecated, "x-deprecated-description": deprecatedDescription, description, method, path, extensions, parameters, requestBody, responses, }, infoPath, frontMatter, }) {
     return (0, utils_1.render)([
         `import ApiTabs from "@theme/ApiTabs";\n`,
+        `import DiscriminatorTabs from "@theme/DiscriminatorTabs";\n`,
+        `import MethodEndpoint from "@theme/ApiExplorer/MethodEndpoint";\n`,
+        `import SecuritySchemes from "@theme/ApiExplorer/SecuritySchemes";\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),
+        infoPath && (0, createAuthorization_1.createAuthorization)(infoPath),
         frontMatter.show_extensions && (0, createVendorExtensions_1.createVendorExtensions)(extensions),
         (0, createDeprecationNotice_1.createDeprecationNotice)({ deprecated, description: deprecatedDescription }),
         (0, createDescription_1.createDescription)(description),
+        (0, createRequestHeader_1.createRequestHeader)("Request"),
         (0, createParamsDetails_1.createParamsDetails)({ parameters, type: "path" }),
         (0, createParamsDetails_1.createParamsDetails)({ parameters, type: "query" }),
         (0, createParamsDetails_1.createParamsDetails)({ parameters, type: "header" }),
         (0, createParamsDetails_1.createParamsDetails)({ parameters, type: "cookie" }),
         (0, createRequestBodyDetails_1.createRequestBodyDetails)({
-            title: "Request Body",
+            title: "Body",
             body: requestBody,
         }),
         (0, createStatusCodes_1.createStatusCodes)({ responses }),
@@ -52,10 +61,10 @@ function createInfoPageMD({ info: { title, version, description, contact, licens
         `import ApiLogo from "@theme/ApiLogo";\n`,
         `import SchemaTabs from "@theme/SchemaTabs";\n`,
         `import TabItem from "@theme/TabItem";\n`,
-        `import Export from "@theme/ApiDemoPanel/Export";\n\n`,
+        `import Export from "@theme/ApiExplorer/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/openapi/openapi.js

@@ -61,7 +61,7 @@ async function createPostmanCollection(openapiData) {
     return await jsonToCollection(data);
 }
 function createItems(openapiData, options, sidebarOptions) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     // TODO: Find a better way to handle this
     let items = [];
     const infoIdSpaces = openapiData.info.title.replace(" ", "-").toLowerCase();
@@ -132,12 +132,20 @@ function createItems(openapiData, options, sidebarOptions) {
                 }
             }
             let jsonRequestBodyExample;
-            const body = (_o = (_m = operationObject.requestBody) === null || _m === void 0 ? void 0 : _m.content) === null || _o === void 0 ? void 0 : _o["application/json"];
+            const content = (_m = operationObject.requestBody) === null || _m === void 0 ? void 0 : _m.content;
+            let body;
+            for (let key in content) {
+                if (key.toLowerCase() === "application/json" ||
+                    key.toLowerCase() === "application/json; charset=utf-8") {
+                    body = content[key];
+                    break;
+                }
+            }
             if (body === null || body === void 0 ? void 0 : body.schema) {
                 jsonRequestBodyExample = (0, createRequestExample_1.sampleRequestFromSchema)(body.schema);
             }
             // Handle vendor JSON media types
-            const bodyContent = (_p = operationObject.requestBody) === null || _p === void 0 ? void 0 : _p.content;
+            const bodyContent = (_o = operationObject.requestBody) === null || _o === void 0 ? void 0 : _o.content;
             if (bodyContent) {
                 const firstBodyContentKey = Object.keys(bodyContent)[0];
                 if (firstBodyContentKey.endsWith("+json")) {
@@ -204,15 +212,15 @@ function createItems(openapiData, options, sidebarOptions) {
         }
     }
     // Gather x-webhooks endpoints
-    for (let [path, pathObject] of Object.entries((_q = openapiData["x-webhooks"]) !== null && _q !== void 0 ? _q : {})) {
+    for (let [path, pathObject] of Object.entries((_p = openapiData["x-webhooks"]) !== null && _p !== void 0 ? _p : {})) {
         path = "webhook";
         const { $ref, description, parameters, servers, summary, ...rest } = pathObject;
         for (let [method, operationObject] of Object.entries({ ...rest })) {
             method = "event";
-            const title = (_s = (_r = operationObject.summary) !== null && _r !== void 0 ? _r : operationObject.operationId) !== null && _s !== void 0 ? _s : "Missing summary";
+            const title = (_r = (_q = operationObject.summary) !== null && _q !== void 0 ? _q : operationObject.operationId) !== null && _r !== void 0 ? _r : "Missing summary";
             if (operationObject.description === undefined) {
                 operationObject.description =
-                    (_u = (_t = operationObject.summary) !== null && _t !== void 0 ? _t : operationObject.operationId) !== null && _u !== void 0 ? _u : "";
+                    (_t = (_s = operationObject.summary) !== null && _s !== void 0 ? _s : operationObject.operationId) !== null && _t !== void 0 ? _t : "";
             }
             const baseId = operationObject.operationId
                 ? (0, kebabCase_1.default)(operationObject.operationId)
@@ -224,10 +232,10 @@ function createItems(openapiData, options, sidebarOptions) {
                     extensions.push({ key, value });
                 }
             }
-            const servers = (_w = (_v = operationObject.servers) !== null && _v !== void 0 ? _v : pathObject.servers) !== null && _w !== void 0 ? _w : openapiData.servers;
-            const security = (_x = operationObject.security) !== null && _x !== void 0 ? _x : openapiData.security;
+            const servers = (_v = (_u = operationObject.servers) !== null && _u !== void 0 ? _u : pathObject.servers) !== null && _v !== void 0 ? _v : openapiData.servers;
+            const security = (_w = operationObject.security) !== null && _w !== void 0 ? _w : openapiData.security;
             // Add security schemes so we know how to handle security.
-            const securitySchemes = (_y = openapiData.components) === null || _y === void 0 ? void 0 : _y.securitySchemes;
+            const securitySchemes = (_x = openapiData.components) === null || _x === void 0 ? void 0 : _x.securitySchemes;
             // Make sure schemes are lowercase. See: https://github.com/cloud-annotations/docusaurus-plugin-openapi/issues/79
             if (securitySchemes) {
                 for (let securityScheme of Object.values(securitySchemes)) {
@@ -237,12 +245,20 @@ function createItems(openapiData, options, sidebarOptions) {
                 }
             }
             let jsonRequestBodyExample;
-            const body = (_0 = (_z = operationObject.requestBody) === null || _z === void 0 ? void 0 : _z.content) === null || _0 === void 0 ? void 0 : _0["application/json"];
+            const content = (_y = operationObject.requestBody) === null || _y === void 0 ? void 0 : _y.content;
+            let body;
+            for (let key in content) {
+                if (key.toLowerCase() === "application/json" ||
+                    key.toLowerCase() === "application/json; charset=utf-8") {
+                    body = content[key];
+                    break;
+                }
+            }
             if (body === null || body === void 0 ? void 0 : body.schema) {
                 jsonRequestBodyExample = (0, createRequestExample_1.sampleRequestFromSchema)(body.schema);
             }
             // Handle vendor JSON media types
-            const bodyContent = (_1 = operationObject.requestBody) === null || _1 === void 0 ? void 0 : _1.content;
+            const bodyContent = (_z = operationObject.requestBody) === null || _z === void 0 ? void 0 : _z.content;
             if (bodyContent) {
                 const firstBodyContentKey = Object.keys(bodyContent)[0];
                 if (firstBodyContentKey.endsWith("+json")) {
@@ -310,7 +326,7 @@ function createItems(openapiData, options, sidebarOptions) {
     }
     if ((sidebarOptions === null || sidebarOptions === void 0 ? void 0 : sidebarOptions.categoryLinkSource) === "tag") {
         // Get global tags
-        const tags = (_2 = openapiData.tags) !== null && _2 !== void 0 ? _2 : [];
+        const tags = (_0 = openapiData.tags) !== null && _0 !== void 0 ? _0 : [];
         // Get operation tags
         const apiItems = items.filter((item) => {
             return item.type === "api";
@@ -357,7 +373,7 @@ function bindCollectionToApiItems(items, postmanCollection) {
         const method = item.request.method.toLowerCase();
         const path = item.request.url
             .getPath({ unresolved: true }) // unresolved returns "/:variableName" instead of "/<type>"
-            .replace(/:([a-z0-9-_]+)/gi, "{$1}"); // replace "/:variableName" with "/{variableName}"
+            .replace(/(?<![a-z0-9-_]+):([a-z0-9-_]+)/gi, "{$1}"); // replace "/:variableName" with "/{variableName}"
         const apiItem = items.find((item) => {
             if (item.type === "info" || item.type === "tag") {
                 return false;

package/lib/openapi/openapi.test.js

@@ -10,6 +10,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const path_1 = __importDefault(require("path"));
+// eslint-disable-next-line import/no-extraneous-dependencies
 const utils_1 = require("@docusaurus/utils");
 const _1 = require(".");
 // npx jest packages/docusaurus-plugin-openapi/src/openapi/openapi.test.ts --watch

package/lib/options.js

@@ -10,8 +10,7 @@ exports.OptionsSchema = void 0;
 const utils_validation_1 = require("@docusaurus/utils-validation");
 const sidebarOptions = utils_validation_1.Joi.object({
     groupPathsBy: utils_validation_1.Joi.string().valid("tag"),
-    // TODO: Remove "none" in 2.0, make it the default if not specified
-    categoryLinkSource: utils_validation_1.Joi.string().valid("tag", "info", "none"),
+    categoryLinkSource: utils_validation_1.Joi.string().valid("tag", "info", "auto"),
     customProps: utils_validation_1.Joi.object(),
     sidebarCollapsible: utils_validation_1.Joi.boolean(),
     sidebarCollapsed: utils_validation_1.Joi.boolean(),

package/lib/sidebars/index.js

@@ -90,6 +90,7 @@ function groupByTags(items, sidebarOptions, options, tags, docPath) {
             };
         });
         // TODO: perhaps move this into a getLinkConfig() function
+        // Default to no link config (spindowns only)
         let linkConfig = undefined;
         if (taggedInfoObject !== undefined && categoryLinkSource === "info") {
             linkConfig = {
@@ -107,8 +108,7 @@ function groupByTags(items, sidebarOptions, options, tags, docPath) {
                 id: basePath === "" || undefined ? `${tagId}` : `${basePath}/${tagId}`,
             };
         }
-        // Default behavior
-        if (categoryLinkSource === undefined) {
+        if (categoryLinkSource === "auto") {
             linkConfig = {
                 type: "generated-index",
                 title: tag,

package/lib/types.d.ts

@@ -32,7 +32,7 @@ export interface MarkdownGenerator {
 }
 export interface SidebarOptions {
     groupPathsBy?: string;
-    categoryLinkSource?: string;
+    categoryLinkSource?: "info" | "tag" | "auto";
     customProps?: {
         [key: string]: unknown;
     };
@@ -66,6 +66,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": "0.0.0-619",
+  "version": "0.0.0-684",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -28,45 +28,37 @@
     "watch": "tsc --watch"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": ">=2.0.1 <2.3.0",
-    "@docusaurus/types": ">=2.0.1 <2.3.0",
+    "@docusaurus/types": ">=2.4.1 <=2.4.3",
     "@types/fs-extra": "^9.0.13",
-    "@types/js-yaml": "^4.0.5",
     "@types/json-pointer": "^1.0.31",
     "@types/json-schema": "^7.0.9",
     "@types/lodash": "^4.14.176",
-    "@types/mustache": "^4.1.2",
-    "utility-types": "^3.10.0"
+    "@types/mustache": "^4.1.2"
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^10.1.0",
-    "@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/plugin-content-docs": ">=2.4.1 <=2.4.3",
+    "@docusaurus/utils": ">=2.4.1 <=2.4.3",
+    "@docusaurus/utils-validation": ">=2.4.1 <=2.4.3",
     "@paloaltonetworks/openapi-to-postmanv2": "3.1.0-hotfix.1",
     "@paloaltonetworks/postman-collection": "^4.1.0",
     "@redocly/openapi-core": "^1.0.0-beta.125",
     "chalk": "^4.1.2",
     "clsx": "^1.1.1",
     "fs-extra": "^9.0.1",
-    "js-yaml": "^4.1.0",
     "json-pointer": "^0.6.2",
-    "json-refs": "^3.0.15",
     "json-schema-merge-allof": "^0.8.1",
     "lodash": "^4.17.20",
     "mustache": "^4.2.0",
     "slugify": "^1.6.5",
     "swagger2openapi": "^7.0.8",
-    "url-template": "^3.0.0",
-    "webpack": "^5.61.0",
     "xml-formatter": "^2.6.1"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^16.8.4 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "1612ad3eee17e99fa5bad3bd2be5bf4cb079a5a2"
+  "gitHead": "41e64c25b3d3fe78e1ccc9617048c8cd4a4c4019"
 }

package/src/markdown/__snapshots__/createSchema.test.ts.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createNodes should create readable MODs for oneOf primitive properties 1`] = `
+Array [
+  "<SchemaItem collapsible={true} className={\\"schemaItem\\"}>
+  <details style={{}} className={\\"openapi-markdown__details\\"}>
+    <summary style={{}}>
+      <strong>oneOfProperty</strong>
+      <span style={{ opacity: \\"0.6\\" }}> object</span>
+    </summary>
+    <div style={{ marginLeft: \\"1rem\\" }}></div>
+    <div>
+      <span className={\\"badge badge--info\\"}>oneOf</span>
+      <SchemaTabs>
+        <TabItem label={\\"MOD1\\"} value={\\"0-item-properties\\"}>
+          <SchemaItem
+            collapsible={false}
+            name={\\"noseLength\\"}
+            required={true}
+            schemaName={\\"number\\"}
+            qualifierMessage={undefined}
+            schema={{ type: \\"number\\" }}
+          ></SchemaItem>
+        </TabItem>
+        <TabItem label={\\"MOD2\\"} value={\\"1-item-properties\\"}>
+          <li>
+            <div
+              style={{
+                fontSize: \\"var(--ifm-code-font-size)\\",
+                opacity: \\"0.6\\",
+                marginLeft: \\"-.5rem\\",
+                paddingBottom: \\".5rem\\",
+              }}
+            >
+              Array [
+            </div>
+          </li>
+          <div
+            style={{
+              marginTop: \\".5rem\\",
+              marginBottom: \\".5rem\\",
+              marginLeft: \\"1rem\\",
+            }}
+          >
+            string
+          </div>
+          <li>
+            <div
+              style={{
+                fontSize: \\"var(--ifm-code-font-size)\\",
+                opacity: \\"0.6\\",
+                marginLeft: \\"-.5rem\\",
+              }}
+            >
+              ]
+            </div>
+          </li>
+        </TabItem>
+        <TabItem label={\\"MOD3\\"} value={\\"2-item-properties\\"}>
+          <div
+            style={{
+              marginTop: \\".5rem\\",
+              marginBottom: \\".5rem\\",
+              marginLeft: \\"1rem\\",
+            }}
+          >
+            boolean
+          </div>
+        </TabItem>
+        <TabItem label={\\"MOD4\\"} value={\\"3-item-properties\\"}>
+          <div
+            style={{
+              marginTop: \\".5rem\\",
+              marginBottom: \\".5rem\\",
+              marginLeft: \\"1rem\\",
+            }}
+          >
+            number
+          </div>
+        </TabItem>
+        <TabItem label={\\"MOD5\\"} value={\\"4-item-properties\\"}>
+          <div
+            style={{
+              marginTop: \\".5rem\\",
+              marginBottom: \\".5rem\\",
+              marginLeft: \\"1rem\\",
+            }}
+          >
+            string
+          </div>
+        </TabItem>
+      </SchemaTabs>
+    </div>
+  </details>
+</SchemaItem>;
+",
+]
+`;

package/src/markdown/createAuthorization.ts

@@ -0,0 +1,13 @@
+/* ============================================================================
+ * 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 createAuthorization(infoPath: string) {
+  if (!infoPath) return undefined;
+  return [create("SecuritySchemes", { infoPath: infoPath }), "\n\n"];
+}

package/src/markdown/createDeprecationNotice.ts

@@ -24,7 +24,7 @@ export function createDeprecationNotice({
     createAdmonition({
       children:
         description ??
-        "This endpoint has been deprecated and may be removed in future versions of the API.",
+        "This endpoint has been deprecated and may be replaced or removed in future versions of the API.",
     })
   );
 }

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,13 +25,15 @@ export function createParamsDetails({ parameters, type }: Props) {
   }
 
   return createDetails({
+    className: "openapi-markdown__details",
     "data-collapsed": false,
     open: true,
     style: { marginBottom: "1rem" },
     children: [
       createDetailsSummary({
         children: [
-          create("strong", {
+          create("h3", {
+            className: "openapi-markdown__details-summary-header-params",
             children: `${
               type.charAt(0).toUpperCase() + type.slice(1)
             } Parameters`,

package/src/markdown/createRequestHeader.ts

@@ -0,0 +1,10 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+export function createRequestHeader(header: string) {
+  return `## ${header}\n\n`;
+}

package/src/markdown/createRequestSchema.ts

@@ -39,6 +39,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;
@@ -55,21 +56,23 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
           value: `${mimeType}`,
           children: [
             createDetails({
+              className: "openapi-markdown__details mime",
               "data-collapsed": false,
               open: true,
               ...rest,
               children: [
                 createDetailsSummary({
-                  style: { textAlign: "left" },
+                  className: "openapi-markdown__details-summary-mime",
                   children: [
-                    create("strong", { children: `${title}` }),
+                    create("h3", {
+                      className:
+                        "openapi-markdown__details-summary-header-body",
+                      children: `${title}`,
+                    }),
                     guard(body.required && body.required === true, () => [
-                      create("strong", {
-                        style: {
-                          fontSize: "var(--ifm-code-font-size)",
-                          color: "var(--openapi-required)",
-                        },
-                        children: " required",
+                      create("span", {
+                        className: "openapi-schema__required",
+                        children: "required",
                       }),
                     ]),
                   ],
@@ -112,20 +115,25 @@ 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 mime",
             "data-collapsed": false,
             open: true,
             ...rest,
             children: [
               createDetailsSummary({
-                style: { textAlign: "left" },
+                className: "openapi-markdown__details-summary-mime",
                 children: [
-                  create("strong", { children: `${title}` }),
+                  create("h3", {
+                    className: "openapi-markdown__details-summary-header-body",
+                    children: `${title}`,
+                  }),
                   guard(firstBody.type === "array", (format) =>
                     create("span", {
                       style: { opacity: "0.6" },
@@ -134,11 +142,8 @@ export function createRequestSchema({ title, body, ...rest }: Props) {
                   ),
                   guard(body.required, () => [
                     create("strong", {
-                      style: {
-                        fontSize: "var(--ifm-code-font-size)",
-                        color: "var(--openapi-required)",
-                      },
-                      children: " required",
+                      className: "openapi-schema__required",
+                      children: "required",
                     }),
                   ]),
                 ],

package/src/markdown/createResponseSchema.ts

@@ -44,6 +44,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;
@@ -70,6 +71,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: [
@@ -79,23 +81,22 @@ export function createResponseSchema({ title, body, ...rest }: Props) {
                     value: `${title}`,
                     children: [
                       createDetails({
+                        className: "openapi-markdown__details response",
                         "data-collapsed": false,
                         open: true,
                         ...rest,
                         children: [
                           createDetailsSummary({
-                            style: { textAlign: "left" },
+                            className:
+                              "openapi-markdown__details-summary-response",
                             children: [
                               create("strong", { children: `${title}` }),
                               guard(
                                 body.required && body.required === true,
                                 () => [
-                                  create("strong", {
-                                    style: {
-                                      fontSize: "var(--ifm-code-font-size)",
-                                      color: "var(--openapi-required)",
-                                    },
-                                    children: " required",
+                                  create("span", {
+                                    className: "openapi-schema__required",
+                                    children: "required",
                                   }),
                                 ]
                               ),