docusaurus-theme-openapi-docs 3.0.0-beta.5 → 3.0.0-beta.7

package/lib/markdown/utils.js

@@ -17,7 +17,7 @@ function create(tag, props) {
 }
 exports.create = create;
 function guard(value, cb) {
-    if (!!value) {
+    if (!!value || value === 0) {
         const children = cb(value);
         return render(children);
     }

package/lib/markdown/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/markdown/utils.test.js

@@ -0,0 +1,43 @@
+"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 });
+const utils_1 = require("./utils");
+describe("guard", () => {
+    it("should guard empty strings", () => {
+        const actual = (0, utils_1.guard)("", (_) => {
+            throw new Error("Should not be called");
+        });
+        expect(actual).toBe("");
+    });
+    it("should guard undefined", () => {
+        const actual = (0, utils_1.guard)(undefined, (value) => {
+            throw new Error("Should not be called");
+        });
+        expect(actual).toBe("");
+    });
+    it("should guard false booleans", () => {
+        const actual = (0, utils_1.guard)(false, (value) => `${value}`);
+        expect(actual).toBe("");
+    });
+    it("should not guard strings", () => {
+        const actual = (0, utils_1.guard)("hello", (value) => value);
+        expect(actual).toBe("hello");
+    });
+    it("should not guard numbers", () => {
+        const actual = (0, utils_1.guard)(1, (value) => `${value}`);
+        expect(actual).toBe("1");
+    });
+    it("should not guard numbers equals to 0", () => {
+        const actual = (0, utils_1.guard)(0, (value) => `${value}`);
+        expect(actual).toBe("0");
+    });
+    it("should not guard true booleans", () => {
+        const actual = (0, utils_1.guard)(true, (value) => `${value}`);
+        expect(actual).toBe("true");
+    });
+});

package/lib/theme/ApiExplorer/CodeSnippets/index.js

@@ -246,19 +246,14 @@ function CodeSnippets({ postman, codeSamples }) {
     return defaultLang[0] ?? mergedLangs[0];
   });
   const [codeText, setCodeText] = (0, react_1.useState)("");
-  const [codeSampleCodeText, setCodeSampleCodeText] = (0, react_1.useState)("");
+  const [codeSampleCodeText, setCodeSampleCodeText] = (0, react_1.useState)(
+    () => (0, languages_1.getCodeSampleSourceFromLanguage)(language)
+  );
   (0, react_1.useEffect)(() => {
-    // initial active language is custom code sample
-    if (
-      language &&
-      language.sample &&
-      language.samples &&
-      language.samplesSources
-    ) {
-      const sampleIndex = language.samples.findIndex(
-        (smp) => smp === language.sample
+    if (language && !!language.sample) {
+      setCodeSampleCodeText(
+        (0, languages_1.getCodeSampleSourceFromLanguage)(language)
       );
-      setCodeSampleCodeText(language.samplesSources[sampleIndex]);
     }
     if (language && !!language.options) {
       const postmanRequest = (0, buildPostmanRequest_1.default)(postman, {
@@ -388,7 +383,9 @@ function CodeSnippets({ postman, codeSamples }) {
         action: {
           setLanguage: setLanguage,
           setSelectedVariant: setSelectedVariant,
+          setSelectedSample: setSelectedSample,
         },
+        languageSet: mergedLangs,
         lazy: true,
       },
       mergedLangs.map((lang) => {
@@ -414,6 +411,7 @@ function CodeSnippets({ postman, codeSamples }) {
                 includeSample: true,
                 currentLanguage: lang.language,
                 defaultValue: selectedSample,
+                languageSet: mergedLangs,
                 lazy: true,
               },
               lang.samples.map((sample, index) => {
@@ -452,6 +450,7 @@ function CodeSnippets({ postman, codeSamples }) {
               includeVariant: true,
               currentLanguage: lang.language,
               defaultValue: selectedVariant,
+              languageSet: mergedLangs,
               lazy: true,
             },
             lang.variants.map((variant, index) => {

package/lib/theme/ApiExplorer/CodeSnippets/languages.d.ts

@@ -1,2 +1,3 @@
 import { CodeSample, Language } from "./code-snippets-types";
 export declare function mergeCodeSampleLanguage(languages: Language[], codeSamples: CodeSample[]): Language[];
+export declare function getCodeSampleSourceFromLanguage(language: Language): string;

package/lib/theme/ApiExplorer/CodeSnippets/languages.js

@@ -6,7 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeCodeSampleLanguage = void 0;
+exports.getCodeSampleSourceFromLanguage = exports.mergeCodeSampleLanguage =
+  void 0;
 function mergeCodeSampleLanguage(languages, codeSamples) {
   return languages.map((language) => {
     const languageCodeSamples = codeSamples.filter(
@@ -30,3 +31,18 @@ function mergeCodeSampleLanguage(languages, codeSamples) {
   });
 }
 exports.mergeCodeSampleLanguage = mergeCodeSampleLanguage;
+function getCodeSampleSourceFromLanguage(language) {
+  if (
+    language &&
+    language.sample &&
+    language.samples &&
+    language.samplesSources
+  ) {
+    const sampleIndex = language.samples.findIndex(
+      (smp) => smp === language.sample
+    );
+    return language.samplesSources[sampleIndex];
+  }
+  return "";
+}
+exports.getCodeSampleSourceFromLanguage = getCodeSampleSourceFromLanguage;

package/lib/theme/ApiExplorer/CodeTabs/index.d.ts

@@ -6,9 +6,10 @@ export interface Props {
         [key: string]: React.Dispatch<any>;
     };
     currentLanguage: Language;
+    languageSet: Language[];
     includeVariant: boolean;
 }
-export interface TabListProps extends Props, TabProps {
+export interface CodeTabsProps extends Props, TabProps {
     includeSample?: boolean;
 }
-export default function CodeTabs(props: TabProps & Props): React.JSX.Element;
+export default function CodeTabs(props: CodeTabsProps & Props): React.JSX.Element;

package/lib/theme/ApiExplorer/CodeTabs/index.js

@@ -58,11 +58,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const internal_1 = require("@docusaurus/theme-common/internal");
 const useIsBrowser_1 = __importDefault(require("@docusaurus/useIsBrowser"));
-const CodeSnippets_1 = require("@theme/ApiExplorer/CodeSnippets");
 const clsx_1 = __importDefault(require("clsx"));
 function TabList({
   action,
   currentLanguage,
+  languageSet,
   includeVariant,
   includeSample,
   className,
@@ -85,20 +85,23 @@ function TabList({
     if (action) {
       let newLanguage;
       if (currentLanguage && includeVariant) {
-        newLanguage = CodeSnippets_1.languageSet.filter(
+        newLanguage = languageSet.filter(
           (lang) => lang.language === currentLanguage
         )[0];
         newLanguage.variant = newTabValue;
         action.setSelectedVariant(newTabValue.toLowerCase());
+      } else if (currentLanguage && includeSample) {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === currentLanguage
+        )[0];
+        newLanguage.sample = newTabValue;
+        action.setSelectedSample(newTabValue);
       } else {
-        newLanguage = CodeSnippets_1.languageSet.filter(
+        newLanguage = languageSet.filter(
           (lang) => lang.language === newTabValue
         )[0];
         action.setSelectedVariant(newLanguage.variant.toLowerCase());
-      }
-      if (currentLanguage && includeSample) {
-        newLanguage.sample = newTabValue;
-        action.setSelectedSample(newTabValue.toLowerCase());
+        action.setSelectedSample(newLanguage.sample);
       }
       action.setLanguage(newLanguage);
     }

package/lib/theme/ApiItem/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="@docusaurus/plugin-content-docs" />
-import React from "react";
+/// <reference types="react" />
 import type { Props } from "@theme/DocItem";
-export default function ApiItem(props: Props): React.JSX.Element;
+export default function ApiItem(props: Props): JSX.Element;

package/lib/theme/ApiItem/index.js

@@ -41,6 +41,7 @@ function ApiItem(props) {
   const { frontMatter } = MDXComponent;
   const { info_path: infoPath } = frontMatter;
   let { api } = frontMatter;
+  const { schema } = frontMatter;
   // decompress and parse
   if (api) {
     api = JSON.parse(
@@ -164,6 +165,29 @@ function ApiItem(props) {
         )
       )
     );
+  } else if (schema) {
+    return react_1.default.createElement(
+      internal_1.DocProvider,
+      { content: props.content },
+      react_1.default.createElement(
+        theme_common_1.HtmlClassNameProvider,
+        { className: docHtmlClassName },
+        react_1.default.createElement(Metadata_1.default, null),
+        react_1.default.createElement(
+          Layout_1.default,
+          null,
+          react_1.default.createElement(
+            "div",
+            { className: (0, clsx_1.default)("row", "theme-api-markdown") },
+            react_1.default.createElement(
+              "div",
+              { className: "col col--12" },
+              react_1.default.createElement(MDXComponent, null)
+            )
+          )
+        )
+      )
+    );
   }
   // Non-API docs
   return react_1.default.createElement(

package/lib/theme/ApiTabs/_ApiTabs.scss

@@ -10,7 +10,9 @@
 }
 
 .openapi-tabs__response-header {
-  margin-bottom: 0;
+  &.openapi-tabs__heading {
+    margin-bottom: 0;
+  }
 }
 
 .openapi-tabs__response-code-item {

package/lib/theme/ApiTabs/index.js

@@ -131,7 +131,11 @@ function TabList({
     { className: "openapi-tabs__response-header-section" },
     react_1.default.createElement(
       Heading_1.default,
-      { as: "h2", id: id, className: "openapi-tabs__response-header" },
+      {
+        as: "h2",
+        id: id,
+        className: "openapi-tabs__heading openapi-tabs__response-header",
+      },
       label
     ),
     react_1.default.createElement(

package/lib/theme/OperationTabs/_OperationTabs.scss

@@ -8,10 +8,13 @@
 .openapi-tabs__operation-container {
   display: flex;
   align-items: center;
-  margin-top: 1rem;
   overflow: hidden;
 }
 
+.openapi-tabs__operation-header {
+  margin-bottom: 0;
+}
+
 .openapi-tabs__operation-item {
   display: flex;
   align-items: center;

package/lib/theme/ParamsItem/index.d.ts

@@ -15,8 +15,9 @@ export interface Props {
         examples: Map<ExampleObject>;
         name: string;
         required: boolean;
+        deprecated: boolean;
         schema: any;
     };
 }
-declare function ParamsItem({ param: { description, example, examples, name, required, schema }, }: Props): React.JSX.Element;
+declare function ParamsItem({ param: { description, example, examples, name, required, schema, deprecated }, }: Props): React.JSX.Element;
 export default ParamsItem;

package/lib/theme/ParamsItem/index.js

@@ -15,13 +15,15 @@ const react_1 = __importDefault(require("react"));
 const CodeBlock_1 = __importDefault(require("@theme/CodeBlock"));
 const SchemaTabs_1 = __importDefault(require("@theme/SchemaTabs"));
 const TabItem_1 = __importDefault(require("@theme/TabItem"));
+/* eslint-disable import/no-extraneous-dependencies*/
+const clsx_1 = __importDefault(require("clsx"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const rehype_raw_1 = __importDefault(require("rehype-raw"));
 const createDescription_1 = require("../../markdown/createDescription");
 const schema_1 = require("../../markdown/schema");
 const utils_1 = require("../../markdown/utils");
 function ParamsItem({
-  param: { description, example, examples, name, required, schema },
+  param: { description, example, examples, name, required, schema, deprecated },
 }) {
   if (!schema || !schema?.type) {
     schema = { type: "any" };
@@ -41,6 +43,13 @@ function ParamsItem({
       "required"
     )
   );
+  const renderDeprecated = (0, utils_1.guard)(deprecated, () =>
+    react_1.default.createElement(
+      "span",
+      { className: "openapi-schema__deprecated" },
+      "deprecated"
+    )
+  );
   const renderSchema = (0, utils_1.guard)(
     (0, schema_1.getQualifierMessage)(schema),
     (message) =>
@@ -161,15 +170,20 @@ function ParamsItem({
       { className: "openapi-schema__container" },
       react_1.default.createElement(
         "strong",
-        { className: "openapi-schema__property" },
+        {
+          className: (0, clsx_1.default)("openapi-schema__property", {
+            "openapi-schema__strikethrough": deprecated,
+          }),
+        },
         name
       ),
       renderSchemaName,
-      required &&
+      (required || deprecated) &&
         react_1.default.createElement("span", {
           className: "openapi-schema__divider",
         }),
-      renderSchemaRequired
+      renderSchemaRequired,
+      renderDeprecated
     ),
     renderSchema,
     renderDefaultValue,

package/lib/theme/SchemaItem/index.js

@@ -103,16 +103,14 @@ function SchemaItem({
         })
       )
   );
-  const renderDefaultValue = (0, utils_1.guard)(
-    typeof defaultValue === "boolean" ? defaultValue.toString() : defaultValue,
-    (value) =>
-      react_1.default.createElement(
-        "div",
-        { className: "" },
-        react_1.default.createElement(react_markdown_1.default, {
-          children: `**Default value:** \`${value}\``,
-        })
-      )
+  const renderDefaultValue = (0, utils_1.guard)(defaultValue, (value) =>
+    react_1.default.createElement(
+      "div",
+      { className: "" },
+      react_1.default.createElement(react_markdown_1.default, {
+        children: `**Default value:** \`${value}\``,
+      })
+    )
   );
   const schemaContent = react_1.default.createElement(
     "div",
@@ -140,7 +138,7 @@ function SchemaItem({
           className: "openapi-schema__divider",
         }),
       renderNullable,
-      !deprecated && renderRequired,
+      renderRequired,
       renderDeprecated
     ),
     renderQualifierMessage,

package/lib/theme/SchemaTabs/_SchemaTabs.scss

@@ -5,10 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.openapi-tabs__schema-container {
-  margin-top: 1rem;
-}
-
 .openapi-tabs__schema-item {
   display: flex;
   align-items: center;

package/lib/theme/styles.scss

@@ -159,3 +159,7 @@
 .openapi-left-panel__container {
   border-right: thin solid var(--ifm-toc-border-color);
 }
+
+.openapi-tabs__heading {
+  margin-bottom: 1rem;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.7",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -44,7 +44,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^3.0.0-beta.5",
+    "docusaurus-plugin-openapi-docs": "^3.0.0-beta.7",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -69,5 +69,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "1f9c9fa811c1e9d42f3c3740a8f7407e3659d629"
+  "gitHead": "effd6b9afc0c416618002189e3823dcfc4356f30"
 }

package/src/markdown/utils.test.ts

@@ -0,0 +1,49 @@
+/* ============================================================================
+ * 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 { guard } from "./utils";
+
+describe("guard", () => {
+  it("should guard empty strings", () => {
+    const actual = guard("", (_) => {
+      throw new Error("Should not be called");
+    });
+    expect(actual).toBe("");
+  });
+
+  it("should guard undefined", () => {
+    const actual = guard(undefined, (value) => {
+      throw new Error("Should not be called");
+    });
+    expect(actual).toBe("");
+  });
+
+  it("should guard false booleans", () => {
+    const actual = guard(false, (value) => `${value}`);
+    expect(actual).toBe("");
+  });
+
+  it("should not guard strings", () => {
+    const actual = guard("hello", (value) => value);
+    expect(actual).toBe("hello");
+  });
+
+  it("should not guard numbers", () => {
+    const actual = guard(1, (value) => `${value}`);
+    expect(actual).toBe("1");
+  });
+
+  it("should not guard numbers equals to 0", () => {
+    const actual = guard(0, (value) => `${value}`);
+    expect(actual).toBe("0");
+  });
+
+  it("should not guard true booleans", () => {
+    const actual = guard(true, (value) => `${value}`);
+    expect(actual).toBe("true");
+  });
+});

package/src/markdown/utils.ts

@@ -26,7 +26,7 @@ export function guard<T>(
   value: T | undefined | string,
   cb: (value: T) => Children
 ): string {
-  if (!!value) {
+  if (!!value || value === 0) {
     const children = cb(value as T);
     return render(children);
   }

package/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -17,7 +17,10 @@ import { useTypedSelector } from "@theme/ApiItem/hooks";
 import merge from "lodash/merge";
 
 import { CodeSample, Language } from "./code-snippets-types";
-import { mergeCodeSampleLanguage } from "./languages";
+import {
+  getCodeSampleSourceFromLanguage,
+  mergeCodeSampleLanguage,
+} from "./languages";
 
 export const languageSet: Language[] = [
   {
@@ -198,20 +201,13 @@ function CodeSnippets({ postman, codeSamples }: Props) {
     return defaultLang[0] ?? mergedLangs[0];
   });
   const [codeText, setCodeText] = useState<string>("");
-  const [codeSampleCodeText, setCodeSampleCodeText] = useState<string>("");
+  const [codeSampleCodeText, setCodeSampleCodeText] = useState<
+    string | (() => string)
+  >(() => getCodeSampleSourceFromLanguage(language));
 
   useEffect(() => {
-    // initial active language is custom code sample
-    if (
-      language &&
-      language.sample &&
-      language.samples &&
-      language.samplesSources
-    ) {
-      const sampleIndex = language.samples.findIndex(
-        (smp) => smp === language.sample
-      );
-      setCodeSampleCodeText(language.samplesSources[sampleIndex]);
+    if (language && !!language.sample) {
+      setCodeSampleCodeText(getCodeSampleSourceFromLanguage(language));
     }
 
     if (language && !!language.options) {
@@ -344,7 +340,9 @@ function CodeSnippets({ postman, codeSamples }: Props) {
         action={{
           setLanguage: setLanguage,
           setSelectedVariant: setSelectedVariant,
+          setSelectedSample: setSelectedSample,
         }}
+        languageSet={mergedLangs}
         lazy
       >
         {mergedLangs.map((lang) => {
@@ -367,6 +365,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
                   includeSample={true}
                   currentLanguage={lang.language}
                   defaultValue={selectedSample}
+                  languageSet={mergedLangs}
                   lazy
                 >
                   {lang.samples.map((sample, index) => {
@@ -406,6 +405,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
                 includeVariant={true}
                 currentLanguage={lang.language}
                 defaultValue={selectedVariant}
+                languageSet={mergedLangs}
                 lazy
               >
                 {lang.variants.map((variant, index) => {

package/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -35,3 +35,19 @@ export function mergeCodeSampleLanguage(
     return language;
   });
 }
+
+export function getCodeSampleSourceFromLanguage(language: Language) {
+  if (
+    language &&
+    language.sample &&
+    language.samples &&
+    language.samplesSources
+  ) {
+    const sampleIndex = language.samples.findIndex(
+      (smp) => smp === language.sample
+    );
+    return language.samplesSources[sampleIndex];
+  }
+
+  return "";
+}

package/src/theme/ApiExplorer/CodeTabs/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "@docusaurus/theme-common/internal";
 import { TabItemProps } from "@docusaurus/theme-common/lib/utils/tabsUtils";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import { Language, languageSet } from "@theme/ApiExplorer/CodeSnippets";
+import { Language } from "@theme/ApiExplorer/CodeSnippets";
 import clsx from "clsx";
 
 export interface Props {
@@ -23,16 +23,18 @@ export interface Props {
     [key: string]: React.Dispatch<any>;
   };
   currentLanguage: Language;
+  languageSet: Language[];
   includeVariant: boolean;
 }
 
-export interface TabListProps extends Props, TabProps {
+export interface CodeTabsProps extends Props, TabProps {
   includeSample?: boolean;
 }
 
 function TabList({
   action,
   currentLanguage,
+  languageSet,
   includeVariant,
   includeSample,
   className,
@@ -40,7 +42,7 @@ function TabList({
   selectedValue,
   selectValue,
   tabValues,
-}: TabListProps & ReturnType<typeof useTabs>) {
+}: CodeTabsProps & ReturnType<typeof useTabs>) {
   const tabRefs: (HTMLLIElement | null)[] = [];
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
@@ -68,15 +70,18 @@ function TabList({
         )[0];
         newLanguage.variant = newTabValue;
         action.setSelectedVariant(newTabValue.toLowerCase());
+      } else if (currentLanguage && includeSample) {
+        newLanguage = languageSet.filter(
+          (lang: Language) => lang.language === currentLanguage
+        )[0];
+        newLanguage.sample = newTabValue;
+        action.setSelectedSample(newTabValue);
       } else {
         newLanguage = languageSet.filter(
           (lang: Language) => lang.language === newTabValue
         )[0];
         action.setSelectedVariant(newLanguage.variant.toLowerCase());
-      }
-      if (currentLanguage && includeSample) {
-        newLanguage.sample = newTabValue;
-        action.setSelectedSample(newTabValue.toLowerCase());
+        action.setSelectedSample(newLanguage.sample);
       }
       action.setLanguage(newLanguage);
     }
@@ -151,7 +156,7 @@ function TabContent({
   lazy,
   children,
   selectedValue,
-}: TabProps & ReturnType<typeof useTabs>): React.JSX.Element | null {
+}: CodeTabsProps & ReturnType<typeof useTabs>): React.JSX.Element | null {
   const childTabs = (Array.isArray(children) ? children : [children]).filter(
     Boolean
   ) as ReactElement<TabItemProps>[];
@@ -177,7 +182,7 @@ function TabContent({
   );
 }
 
-function TabsComponent(props: TabProps & Props): React.JSX.Element {
+function TabsComponent(props: CodeTabsProps & Props): React.JSX.Element {
   const tabs = useTabs(props);
   const { className } = props;
 
@@ -191,7 +196,9 @@ function TabsComponent(props: TabProps & Props): React.JSX.Element {
   );
 }
 
-export default function CodeTabs(props: TabProps & Props): React.JSX.Element {
+export default function CodeTabs(
+  props: CodeTabsProps & Props
+): React.JSX.Element {
   const isBrowser = useIsBrowser();
   return (
     <TabsComponent

package/src/theme/ApiItem/index.tsx

@@ -42,13 +42,18 @@ interface ApiFrontMatter extends DocFrontMatter {
   readonly api?: ApiItemType;
 }
 
+interface SchemaFrontMatter extends DocFrontMatter {
+  readonly schema?: boolean;
+}
+
 // @ts-ignore
-export default function ApiItem(props: Props): React.JSX.Element {
+export default function ApiItem(props: Props): JSX.Element {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.id}`;
   const MDXComponent = props.content;
   const { frontMatter } = MDXComponent;
   const { info_path: infoPath } = frontMatter as DocFrontMatter;
   let { api } = frontMatter as ApiFrontMatter;
+  const { schema } = frontMatter as SchemaFrontMatter;
   // decompress and parse
   if (api) {
     api = JSON.parse(
@@ -158,6 +163,21 @@ export default function ApiItem(props: Props): React.JSX.Element {
         </HtmlClassNameProvider>
       </DocProvider>
     );
+  } else if (schema) {
+    return (
+      <DocProvider content={props.content}>
+        <HtmlClassNameProvider className={docHtmlClassName}>
+          <DocItemMetadata />
+          <DocItemLayout>
+            <div className={clsx("row", "theme-api-markdown")}>
+              <div className="col col--12">
+                <MDXComponent />
+              </div>
+            </div>
+          </DocItemLayout>
+        </HtmlClassNameProvider>
+      </DocProvider>
+    );
   }
 
   // Non-API docs

package/src/theme/ApiTabs/_ApiTabs.scss

@@ -10,7 +10,9 @@
 }
 
 .openapi-tabs__response-header {
-  margin-bottom: 0;
+  &.openapi-tabs__heading {
+    margin-bottom: 0;
+  }
 }
 
 .openapi-tabs__response-code-item {

package/src/theme/ApiTabs/index.tsx

@@ -114,7 +114,11 @@ function TabList({
 
   return (
     <div className="openapi-tabs__response-header-section">
-      <Heading as="h2" id={id} className="openapi-tabs__response-header">
+      <Heading
+        as="h2"
+        id={id}
+        className="openapi-tabs__heading openapi-tabs__response-header"
+      >
         {label}
       </Heading>
       <div className="openapi-tabs__response-container">

package/src/theme/OperationTabs/_OperationTabs.scss

@@ -8,10 +8,13 @@
 .openapi-tabs__operation-container {
   display: flex;
   align-items: center;
-  margin-top: 1rem;
   overflow: hidden;
 }
 
+.openapi-tabs__operation-header {
+  margin-bottom: 0;
+}
+
 .openapi-tabs__operation-item {
   display: flex;
   align-items: center;

package/src/theme/ParamsItem/index.tsx

@@ -10,6 +10,8 @@ import React from "react";
 import CodeBlock from "@theme/CodeBlock";
 import SchemaTabs from "@theme/SchemaTabs";
 import TabItem from "@theme/TabItem";
+/* eslint-disable import/no-extraneous-dependencies*/
+import clsx from "clsx";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
@@ -35,12 +37,13 @@ export interface Props {
     examples: Map<ExampleObject>;
     name: string;
     required: boolean;
+    deprecated: boolean;
     schema: any;
   };
 }
 
 function ParamsItem({
-  param: { description, example, examples, name, required, schema },
+  param: { description, example, examples, name, required, schema, deprecated },
 }: Props) {
   if (!schema || !schema?.type) {
     schema = { type: "any" };
@@ -54,6 +57,10 @@ function ParamsItem({
     <span className="openapi-schema__required">required</span>
   ));
 
+  const renderDeprecated = guard(deprecated, () => (
+    <span className="openapi-schema__deprecated">deprecated</span>
+  ));
+
   const renderSchema = guard(getQualifierMessage(schema), (message) => (
     <div>
       <ReactMarkdown
@@ -134,10 +141,19 @@ function ParamsItem({
   return (
     <div className="openapi-params__list-item">
       <span className="openapi-schema__container">
-        <strong className="openapi-schema__property">{name}</strong>
+        <strong
+          className={clsx("openapi-schema__property", {
+            "openapi-schema__strikethrough": deprecated,
+          })}
+        >
+          {name}
+        </strong>
         {renderSchemaName}
-        {required && <span className="openapi-schema__divider"></span>}
+        {(required || deprecated) && (
+          <span className="openapi-schema__divider"></span>
+        )}
         {renderSchemaRequired}
+        {renderDeprecated}
       </span>
       {renderSchema}
       {renderDefaultValue}

package/src/theme/SchemaItem/index.tsx

@@ -90,14 +90,11 @@ export default function SchemaItem({
     </div>
   ));
 
-  const renderDefaultValue = guard(
-    typeof defaultValue === "boolean" ? defaultValue.toString() : defaultValue,
-    (value) => (
-      <div className="">
-        <ReactMarkdown children={`**Default value:** \`${value}\``} />
-      </div>
-    )
-  );
+  const renderDefaultValue = guard(defaultValue, (value) => (
+    <div className="">
+      <ReactMarkdown children={`**Default value:** \`${value}\``} />
+    </div>
+  ));
 
   const schemaContent = (
     <div>
@@ -114,7 +111,7 @@ export default function SchemaItem({
           <span className="openapi-schema__divider"></span>
         )}
         {renderNullable}
-        {!deprecated && renderRequired}
+        {renderRequired}
         {renderDeprecated}
       </span>
       {renderQualifierMessage}

package/src/theme/SchemaTabs/_SchemaTabs.scss

@@ -5,10 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.openapi-tabs__schema-container {
-  margin-top: 1rem;
-}
-
 .openapi-tabs__schema-item {
   display: flex;
   align-items: center;

package/src/theme/styles.scss

@@ -159,3 +159,7 @@
 .openapi-left-panel__container {
   border-right: thin solid var(--ifm-toc-border-color);
 }
+
+.openapi-tabs__heading {
+  margin-bottom: 1rem;
+}