docusaurus-theme-openapi-docs 0.0.0-939 → 0.0.0-940

package/lib/theme/ApiItem/Layout/index.js

@@ -53,6 +53,7 @@ function DocItemLayout({ children }) {
   const { metadata } = (0, client_1.useDoc)();
   const { frontMatter } = (0, client_1.useDoc)();
   const api = frontMatter.api;
+  const schema = frontMatter.schema;
   return react_1.default.createElement(
     "div",
     { className: "row" },
@@ -86,7 +87,7 @@ function DocItemLayout({ children }) {
               {
                 className: (0, clsx_1.default)(
                   "col",
-                  api ? "col--7" : "col--12"
+                  api || schema ? "col--7" : "col--12"
                 ),
               },
               react_1.default.createElement(Footer_1.default, null)
@@ -99,7 +100,10 @@ function DocItemLayout({ children }) {
           react_1.default.createElement(
             "div",
             {
-              className: (0, clsx_1.default)("col", api ? "col--7" : "col--12"),
+              className: (0, clsx_1.default)(
+                "col",
+                api || schema ? "col--7" : "col--12"
+              ),
             },
             react_1.default.createElement(Paginator_1.default, null)
           )

package/lib/theme/ApiItem/index.js

@@ -26,6 +26,7 @@ const useIsBrowser_1 = __importDefault(require("@docusaurus/useIsBrowser"));
 const slice_1 = require("@theme/ApiExplorer/Authorization/slice");
 const persistanceMiddleware_1 = require("@theme/ApiExplorer/persistanceMiddleware");
 const Layout_1 = __importDefault(require("@theme/ApiItem/Layout"));
+const CodeBlock_1 = __importDefault(require("@theme/CodeBlock"));
 const Metadata_1 = __importDefault(require("@theme/DocItem/Metadata"));
 const SkeletonLoader_1 = __importDefault(require("@theme/SkeletonLoader"));
 const clsx_1 = __importDefault(require("clsx"));
@@ -43,6 +44,7 @@ function ApiItem(props) {
   const { info_path: infoPath } = frontMatter;
   let { api } = frontMatter;
   const { schema } = frontMatter;
+  const { sample } = frontMatter;
   // decompress and parse
   if (api) {
     try {
@@ -183,8 +185,17 @@ function ApiItem(props) {
             { className: (0, clsx_1.default)("row", "theme-api-markdown") },
             react_1.default.createElement(
               "div",
-              { className: "col col--12" },
+              { className: "col col--7 openapi-left-panel__container schema" },
               react_1.default.createElement(MDXComponent, null)
+            ),
+            react_1.default.createElement(
+              "div",
+              { className: "col col--5 openapi-right-panel__container" },
+              react_1.default.createElement(
+                CodeBlock_1.default,
+                { language: "json", title: `${frontMatter.title}` },
+                JSON.stringify(sample, null, 2)
+              )
             )
           )
         )

package/lib/theme/styles.scss

@@ -93,16 +93,16 @@
   height: 100%;
 }
 
-@media (min-width: 997px) {
-  .docItemCol {
-    max-width: 75% !important;
-  }
-
-  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
-  .tocMobile {
-    display: none;
-  }
-}
+// @media (min-width: 997px) {
+//   .docItemCol {
+//     max-width: 75% !important;
+//   }
+
+//   /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
+//   .tocMobile {
+//     display: none;
+//   }
+// }
 
 /* Begin OpenAPI theme styles */
 // [data-theme="dark"] {
@@ -161,6 +161,12 @@
   border-right: thin solid var(--ifm-toc-border-color);
 }
 
+@media (max-width: 997px) {
+  .schema {
+    margin-bottom: 1rem;
+  }
+}
+
 .openapi-tabs__heading {
   margin-bottom: 1rem;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-939",
+  "version": "0.0.0-940",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -43,7 +43,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-939",
+    "docusaurus-plugin-openapi-docs": "0.0.0-940",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -59,8 +59,8 @@
     "react-redux": "^7.2.0",
     "rehype-raw": "^6.1.1",
     "remark-gfm": "3.0.1",
-    "sass": "^1.58.1",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.80.4",
+    "sass-loader": "^16.0.2",
     "webpack": "^5.61.0",
     "xml-formatter": "^2.6.1"
   },
@@ -71,5 +71,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "a5d3c2f5f5615038a44bb175811196f8be913503"
+  "gitHead": "73fe6a842a36f1da27cb0c22d2fa260b268739d6"
 }

package/src/theme/ApiItem/Layout/index.tsx

@@ -52,6 +52,7 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
   const { metadata } = useDoc();
   const { frontMatter } = useDoc();
   const api = frontMatter.api;
+  const schema = frontMatter.schema;
   return (
     <div className="row">
       <div className={clsx("col", !docTOC.hidden && styles.docItemCol)}>
@@ -64,13 +65,15 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
             {docTOC.mobile}
             <DocItemContent>{children}</DocItemContent>
             <div className="row">
-              <div className={clsx("col", api ? "col--7" : "col--12")}>
+              <div
+                className={clsx("col", api || schema ? "col--7" : "col--12")}
+              >
                 <DocItemFooter />
               </div>
             </div>
           </article>
           <div className="row">
-            <div className={clsx("col", api ? "col--7" : "col--12")}>
+            <div className={clsx("col", api || schema ? "col--7" : "col--12")}>
               <DocItemPaginator />
             </div>
           </div>

package/src/theme/ApiItem/index.tsx

@@ -18,6 +18,7 @@ import useIsBrowser from "@docusaurus/useIsBrowser";
 import { createAuth } from "@theme/ApiExplorer/Authorization/slice";
 import { createPersistanceMiddleware } from "@theme/ApiExplorer/persistanceMiddleware";
 import DocItemLayout from "@theme/ApiItem/Layout";
+import CodeBlock from "@theme/CodeBlock";
 import type { Props } from "@theme/DocItem";
 import DocItemMetadata from "@theme/DocItem/Metadata";
 import SkeletonLoader from "@theme/SkeletonLoader";
@@ -47,6 +48,10 @@ interface SchemaFrontMatter extends DocFrontMatter {
   readonly schema?: boolean;
 }
 
+interface SampleFrontMatter extends DocFrontMatter {
+  readonly sample?: any;
+}
+
 // @ts-ignore
 export default function ApiItem(props: Props): JSX.Element {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.id}`;
@@ -55,6 +60,7 @@ export default function ApiItem(props: Props): JSX.Element {
   const { info_path: infoPath } = frontMatter as DocFrontMatter;
   let { api } = frontMatter as ApiFrontMatter;
   const { schema } = frontMatter as SchemaFrontMatter;
+  const { sample } = frontMatter as SampleFrontMatter;
   // decompress and parse
   if (api) {
     try {
@@ -172,9 +178,14 @@ export default function ApiItem(props: Props): JSX.Element {
           <DocItemMetadata />
           <DocItemLayout>
             <div className={clsx("row", "theme-api-markdown")}>
-              <div className="col col--12">
+              <div className="col col--7 openapi-left-panel__container schema">
                 <MDXComponent />
               </div>
+              <div className="col col--5 openapi-right-panel__container">
+                <CodeBlock language="json" title={`${frontMatter.title}`}>
+                  {JSON.stringify(sample, null, 2)}
+                </CodeBlock>
+              </div>
             </div>
           </DocItemLayout>
         </HtmlClassNameProvider>

package/src/theme/styles.scss

@@ -93,16 +93,16 @@
   height: 100%;
 }
 
-@media (min-width: 997px) {
-  .docItemCol {
-    max-width: 75% !important;
-  }
-
-  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
-  .tocMobile {
-    display: none;
-  }
-}
+// @media (min-width: 997px) {
+//   .docItemCol {
+//     max-width: 75% !important;
+//   }
+
+//   /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
+//   .tocMobile {
+//     display: none;
+//   }
+// }
 
 /* Begin OpenAPI theme styles */
 // [data-theme="dark"] {
@@ -161,6 +161,12 @@
   border-right: thin solid var(--ifm-toc-border-color);
 }
 
+@media (max-width: 997px) {
+  .schema {
+    margin-bottom: 1rem;
+  }
+}
+
 .openapi-tabs__heading {
   margin-bottom: 1rem;
 }