docusaurus-theme-openapi-docs 0.0.0-773 → 0.0.0-775

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Props } from "@theme/ApiItem/Layout";
+export default function DocItemLayout({ children }: Props): JSX.Element;

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

@@ -0,0 +1,117 @@
+"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.
+ * ========================================================================== */
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const client_1 = require("@docusaurus/plugin-content-docs/client");
+const theme_common_1 = require("@docusaurus/theme-common");
+const ContentVisibility_1 = __importDefault(
+  require("@theme/ContentVisibility")
+);
+const DocBreadcrumbs_1 = __importDefault(require("@theme/DocBreadcrumbs"));
+const Content_1 = __importDefault(require("@theme/DocItem/Content"));
+const Footer_1 = __importDefault(require("@theme/DocItem/Footer"));
+const Paginator_1 = __importDefault(require("@theme/DocItem/Paginator"));
+const Desktop_1 = __importDefault(require("@theme/DocItem/TOC/Desktop"));
+const Mobile_1 = __importDefault(require("@theme/DocItem/TOC/Mobile"));
+const DocVersionBadge_1 = __importDefault(require("@theme/DocVersionBadge"));
+const DocVersionBanner_1 = __importDefault(require("@theme/DocVersionBanner"));
+const clsx_1 = __importDefault(require("clsx"));
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const { frontMatter, toc } = (0, client_1.useDoc)();
+  const windowSize = (0, theme_common_1.useWindowSize)();
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+  const mobile = canRender
+    ? react_1.default.createElement(Mobile_1.default, null)
+    : undefined;
+  const desktop =
+    canRender && (windowSize === "desktop" || windowSize === "ssr")
+      ? react_1.default.createElement(Desktop_1.default, null)
+      : undefined;
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+function DocItemLayout({ children }) {
+  const docTOC = useDocTOC();
+  const { metadata } = (0, client_1.useDoc)();
+  const { frontMatter } = (0, client_1.useDoc)();
+  const api = frontMatter.api;
+  return react_1.default.createElement(
+    "div",
+    { className: "row" },
+    react_1.default.createElement(
+      "div",
+      {
+        className: (0, clsx_1.default)(
+          "col",
+          !docTOC.hidden && styles_module_css_1.default.docItemCol
+        ),
+      },
+      react_1.default.createElement(ContentVisibility_1.default, {
+        metadata: metadata,
+      }),
+      react_1.default.createElement(DocVersionBanner_1.default, null),
+      react_1.default.createElement(
+        "div",
+        { className: styles_module_css_1.default.docItemContainer },
+        react_1.default.createElement(
+          "article",
+          null,
+          react_1.default.createElement(DocBreadcrumbs_1.default, null),
+          react_1.default.createElement(DocVersionBadge_1.default, null),
+          docTOC.mobile,
+          react_1.default.createElement(Content_1.default, null, children),
+          react_1.default.createElement(
+            "div",
+            { className: "row" },
+            react_1.default.createElement(
+              "div",
+              {
+                className: (0, clsx_1.default)(
+                  "col",
+                  api ? "col--7" : "col--12"
+                ),
+              },
+              react_1.default.createElement(Footer_1.default, null)
+            )
+          )
+        ),
+        react_1.default.createElement(
+          "div",
+          { className: "row" },
+          react_1.default.createElement(
+            "div",
+            {
+              className: (0, clsx_1.default)("col", api ? "col--7" : "col--12"),
+            },
+            react_1.default.createElement(Paginator_1.default, null)
+          )
+        )
+      )
+    ),
+    docTOC.desktop &&
+      react_1.default.createElement(
+        "div",
+        { className: "col col--3" },
+        docTOC.desktop
+      )
+  );
+}
+exports.default = DocItemLayout;

package/lib/theme/ApiItem/Layout/styles.module.css

@@ -0,0 +1,17 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}

package/lib/theme/ApiItem/index.js

@@ -25,7 +25,7 @@ const useDocusaurusContext_1 = __importDefault(
 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/DocItem/Layout"));
+const Layout_1 = __importDefault(require("@theme/ApiItem/Layout"));
 const Metadata_1 = __importDefault(require("@theme/DocItem/Metadata"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_redux_1 = require("react-redux");

package/package.json

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

package/src/plugin-content-docs.d.ts

@@ -15,4 +15,6 @@ declare module "@docusaurus/plugin-content-docs/client" {
     children: ReactNode;
     content: PropDocContent;
   });
+
+  export function useDoc();
 }

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

@@ -0,0 +1,82 @@
+/* ============================================================================
+ * 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 React from "react";
+
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
+import { useWindowSize } from "@docusaurus/theme-common";
+import type { Props } from "@theme/ApiItem/Layout";
+import ContentVisibility from "@theme/ContentVisibility";
+import DocBreadcrumbs from "@theme/DocBreadcrumbs";
+import DocItemContent from "@theme/DocItem/Content";
+import DocItemFooter from "@theme/DocItem/Footer";
+import DocItemPaginator from "@theme/DocItem/Paginator";
+import DocItemTOCDesktop from "@theme/DocItem/TOC/Desktop";
+import DocItemTOCMobile from "@theme/DocItem/TOC/Mobile";
+import DocVersionBadge from "@theme/DocVersionBadge";
+import DocVersionBanner from "@theme/DocVersionBanner";
+import clsx from "clsx";
+
+import styles from "./styles.module.css";
+
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const { frontMatter, toc } = useDoc();
+  const windowSize = useWindowSize();
+
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+
+  const desktop =
+    canRender && (windowSize === "desktop" || windowSize === "ssr") ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+
+export default function DocItemLayout({ children }: Props): JSX.Element {
+  const docTOC = useDocTOC();
+  const { metadata } = useDoc();
+  const { frontMatter } = useDoc();
+  const api = frontMatter.api;
+  return (
+    <div className="row">
+      <div className={clsx("col", !docTOC.hidden && styles.docItemCol)}>
+        <ContentVisibility metadata={metadata} />
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <div className="row">
+              <div className={clsx("col", api ? "col--7" : "col--12")}>
+                <DocItemFooter />
+              </div>
+            </div>
+          </article>
+          <div className="row">
+            <div className={clsx("col", api ? "col--7" : "col--12")}>
+              <DocItemPaginator />
+            </div>
+          </div>
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  );
+}

package/src/theme/ApiItem/Layout/styles.module.css

@@ -0,0 +1,17 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}

package/src/theme/ApiItem/index.tsx

@@ -17,8 +17,8 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 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 type { Props } from "@theme/DocItem";
-import DocItemLayout from "@theme/DocItem/Layout";
 import DocItemMetadata from "@theme/DocItem/Metadata";
 import clsx from "clsx";
 import { ServerObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";

package/src/theme-classic.d.ts

@@ -27,8 +27,6 @@ declare module "@docusaurus/theme-common/internal" {
   export interface LineProps extends ILineProps {}
   export interface CodeBlockProps extends ICodeBlockProps {}
 
-  export function useDoc();
-
   export function usePrismTheme(): PrismTheme;
 
   export function sanitizeTabsChildren(children: TabProps["children"]);

package/src/theme-openapi.d.ts

@@ -54,6 +54,10 @@ declare module "@theme/ApiItem/hooks" {
 }
 
 declare module "@theme/ApiItem/Layout" {
+  export interface Props {
+    readonly children: JSX.Element;
+  }
+
   export default function Layout(props: any): JSX.Element;
 }