docusaurus-theme-openapi-docs 1.0.4 → 1.1.0

package/lib/theme/ApiItem/{styles.module.css → Layout/styles.module.css}

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 :root {
   --openapi-required: var(--ifm-color-danger);
   --openapi-code-blue: var(--ifm-color-info);
@@ -6,6 +13,21 @@
   --openapi-code-green: var(--ifm-color-success);
 }
 
+:global(.docs-wrapper) {
+  height: 100%;
+}
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}
+
 .apiItemContainer article > *:first-child,
 .apiItemContainer header + * {
   margin-top: 0;
@@ -70,10 +92,6 @@
   padding-top: 5px;
 }
 
-:global(.theme-api-markdown details li:last-child) {
-  border-left: none;
-}
-
 :global(.theme-api-markdown details p) {
   margin-bottom: 0;
 }
@@ -128,3 +146,95 @@
   margin-top: 0 !important;
   padding-left: 2px;
 }
+
+:global(.code__tab--python::after) {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url(./icons/python-original.svg);
+  margin-block: auto;
+}
+
+:global(.code__tab--python) {
+  color: var(--ifm-color-success);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+:global(.code__tab--python.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-success);
+}
+
+:global(.language-python) {
+  max-height: 500px;
+  overflow: auto;
+}
+
+:global(.code__tab--go::after) {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url(./icons/go-original-wordmark.svg);
+  margin-block: auto;
+}
+
+:global(.code__tab--go) {
+  color: var(--ifm-color-info);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+:global(.code__tab--go.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-info);
+}
+
+:global(.language-go) {
+  max-height: 500px;
+  overflow: auto;
+}
+
+:global(.code__tab--javascript::after) {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url(./icons/javascript-original.svg);
+  margin-block: auto;
+}
+
+:global(.code__tab--javascript) {
+  color: var(--ifm-color-warning);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+:global(.code__tab--javascript.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-warning);
+}
+
+:global(.language-javascript) {
+  max-height: 500px;
+  overflow: auto;
+}
+
+:global(.code__tab--bash::after) {
+  content: "";
+  width: 32px;
+  height: 32px;
+  background: url(./icons/linux-original.svg);
+  margin-block: auto;
+}
+
+:global(.code__tab--bash) {
+  color: var(--ifm-color-danger);
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+:global(.code__tab--bash.tabs__item--active) {
+  border-bottom-color: var(--ifm-color-danger);
+}
+
+:global(.language-bash) {
+  max-height: 500px;
+  overflow: auto;
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocItemMetadata;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _internal = require("@docusaurus/theme-common/internal");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+// @ts-ignore
+function DocItemMetadata() {
+  var _assets$image;
+
+  const {
+    metadata,
+    frontMatter,
+    assets
+  } = (0, _internal.useDoc)();
+  return <_themeCommon.PageMetadata title={metadata.title} description={metadata.description} keywords={frontMatter.keywords} image={(_assets$image = assets.image) !== null && _assets$image !== void 0 ? _assets$image : frontMatter.image} />;
+}

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocItemPaginator;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _internal = require("@docusaurus/theme-common/internal");
+
+var _DocPaginator = _interopRequireDefault(require("@theme/DocPaginator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+// @ts-ignore
+
+/**
+ * This extra component is needed, because <DocPaginator> should remain generic.
+ * DocPaginator is used in non-docs contexts too: generated-index pages...
+ */
+function DocItemPaginator() {
+  const {
+    metadata
+  } = (0, _internal.useDoc)();
+  return <_DocPaginator.default previous={metadata.previous} next={metadata.next} />;
+}

package/lib/theme/ApiItem/TOC/Desktop/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocItemTOCDesktop;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _internal = require("@docusaurus/theme-common/internal");
+
+var _TOC = _interopRequireDefault(require("@theme/TOC"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+// @ts-ignore
+function DocItemTOCDesktop() {
+  const {
+    toc,
+    frontMatter
+  } = (0, _internal.useDoc)();
+  return <_TOC.default toc={toc} minHeadingLevel={frontMatter.toc_min_heading_level} maxHeadingLevel={frontMatter.toc_max_heading_level} className={_themeCommon.ThemeClassNames.docs.docTocDesktop} />;
+}

package/lib/theme/ApiItem/TOC/Mobile/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DocItemTOCMobile;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _internal = require("@docusaurus/theme-common/internal");
+
+var _TOCCollapsible = _interopRequireDefault(require("@theme/TOCCollapsible"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+// @ts-ignore
+function DocItemTOCMobile() {
+  const {
+    toc,
+    frontMatter
+  } = (0, _internal.useDoc)();
+  return <_TOCCollapsible.default toc={toc} minHeadingLevel={frontMatter.toc_min_heading_level} maxHeadingLevel={frontMatter.toc_max_heading_level} className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docTocMobile, _stylesModule.default.tocMobile)} />;
+}

package/lib/theme/ApiItem/TOC/Mobile/styles.module.css

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@media (min-width: 997px) {
+  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
+  .tocMobile {
+    display: none;
+  }
+}
+
+@media print {
+  .tocMobile {
+    display: none;
+  }
+}

package/lib/theme/ApiItem/index.js

@@ -11,27 +11,11 @@ var _ExecutionEnvironment = _interopRequireDefault(require("@docusaurus/Executio
 
 var _themeCommon = require("@docusaurus/theme-common");
 
-var _DocBreadcrumbs = _interopRequireDefault(require("@theme/DocBreadcrumbs"));
-
-var _DocItemFooter = _interopRequireDefault(require("@theme/DocItemFooter"));
-
-var _DocPaginator = _interopRequireDefault(require("@theme/DocPaginator"));
-
-var _DocVersionBadge = _interopRequireDefault(require("@theme/DocVersionBadge"));
-
-var _DocVersionBanner = _interopRequireDefault(require("@theme/DocVersionBanner"));
-
-var _Heading = _interopRequireDefault(require("@theme/Heading"));
-
-var _MDXContent = _interopRequireDefault(require("@theme/MDXContent"));
-
-var _TOC = _interopRequireDefault(require("@theme/TOC"));
-
-var _TOCCollapsible = _interopRequireDefault(require("@theme/TOCCollapsible"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+var _Layout = _interopRequireDefault(require("./Layout"));
+
+var _Metadata = _interopRequireDefault(require("./Metadata"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,6 +25,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
+const {
+  DocProvider
+} = require("@docusaurus/theme-common/internal");
+
 let ApiDemoPanel = _ => <div style={{
   marginTop: "3.5em"
 }} />;
@@ -49,113 +37,36 @@ if (_ExecutionEnvironment.default.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
 }
 
-function DocItemMetadata(props) {
-  var _assets$image;
-
-  const {
-    content: DocContent
-  } = props;
-  const {
-    metadata,
-    frontMatter,
-    assets
-  } = DocContent;
-  const {
-    keywords
-  } = frontMatter;
-  const {
-    description,
-    title
-  } = metadata;
-  const image = (_assets$image = assets.image) !== null && _assets$image !== void 0 ? _assets$image : frontMatter.image;
-  return <_themeCommon.PageMetadata {...{
-    title,
-    description,
-    keywords,
-    image
-  }} />;
-}
-
-function DocItemContent(props) {
-  const {
-    content: DocContent
-  } = props;
-  const {
-    metadata,
-    frontMatter
-  } = DocContent;
-  const {
-    info_path: infoPath,
-    hide_title: hideTitle,
-    hide_table_of_contents: hideTableOfContents,
-    toc_min_heading_level: tocMinHeadingLevel,
-    toc_max_heading_level: tocMaxHeadingLevel
-  } = frontMatter;
-  const {
-    title
-  } = metadata;
-  const {
-    api
-  } = frontMatter; // We only add a title if:
-  // - user doesn't ask to hide it with front matter
-  // - the markdown content does not already contain a top-level h1 heading
-
-  const shouldAddTitle = !hideTitle && typeof DocContent.contentTitle === "undefined";
-  const windowSize = (0, _themeCommon.useWindowSize)();
-  const canRenderTOC = !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
-  const renderTocDesktop = canRenderTOC && (windowSize === "desktop" || windowSize === "ssr");
-  return <div className="row">
-      <div className={(0, _clsx.default)("col", !hideTableOfContents && _stylesModule.default.docItemCol)}>
-        <_DocVersionBanner.default />
-        <div className={_stylesModule.default.docItemContainer}>
-          <article>
-            <_DocBreadcrumbs.default />
-            <_DocVersionBadge.default />
-
-            {canRenderTOC && <_TOCCollapsible.default toc={DocContent.toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docTocMobile, _stylesModule.default.tocMobile)} />}
-
-            <div className={(0, _clsx.default)(_themeCommon.ThemeClassNames.docs.docMarkdown, "theme-api-markdown", "markdown")}>
-              {
-              /*
-               Title can be declared inside md content or declared through
-               front matter and added manually. To make both cases consistent,
-               the added title is added under the same div.markdown block
-               See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
-               */
-            }
-              {shouldAddTitle && <header>
-                  <_Heading.default as="h1">{title}</_Heading.default>
-                </header>}
-              <_MDXContent.default>
-                <div className="row">
-                  <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-                    <DocContent />
-                  </div>
-                  {api && <div className="col col--5">
-                      <ApiDemoPanel item={api} infoPath={infoPath} />
-                    </div>}
-                </div>
-              </_MDXContent.default>
-            </div>
-            <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-              <_DocItemFooter.default {...props} />
-            </div>
-          </article>
-          <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-            <_DocPaginator.default previous={metadata.previous} next={metadata.next} />
-          </div>
-        </div>
-      </div>
-      {renderTocDesktop && <div className="col col--3">
-          <_TOC.default toc={DocContent.toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} className={_themeCommon.ThemeClassNames.docs.docTocDesktop} />
-        </div>}
-    </div>;
-}
-
 function DocItem(props) {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
-  return <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
-      <DocItemMetadata {...props} />
-      <DocItemContent {...props} />
-    </_themeCommon.HtmlClassNameProvider>;
+
+  const DocContent = () => {
+    const MDXComponent = props.content;
+    const {
+      frontMatter
+    } = MDXComponent;
+    const {
+      info_path: infoPath
+    } = frontMatter;
+    const {
+      api
+    } = frontMatter;
+    return <div className="row">
+        <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
+          <MDXComponent />
+        </div>
+        {api && <div className="col col--5">
+            <ApiDemoPanel item={api} infoPath={infoPath} />
+          </div>}
+      </div>;
+  };
+
+  return <DocProvider content={props.content}>
+      <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
+        <_Metadata.default />
+        <_Layout.default>
+          <DocContent />
+        </_Layout.default>
+      </_themeCommon.HtmlClassNameProvider>
+    </DocProvider>;
 }

package/lib/theme/ApiTabs/index.js

@@ -9,20 +9,22 @@ import React, {
   Children,
   cloneElement,
   isValidElement,
+  useEffect,
   useRef,
   useState,
 } from "react";
 
-import {
-  duplicates,
-  useScrollPositionBlocker,
-  useTabGroupChoice,
-} from "@docusaurus/theme-common";
+import { duplicates } from "@docusaurus/theme-common";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import clsx from "clsx";
 
 import styles from "./styles.module.css"; // A very rough duck type, but good enough to guard against mistakes while
 
+const {
+  useScrollPositionBlocker,
+  useTabGroupChoice,
+} = require("@docusaurus/theme-common/internal");
+
 // allowing customization
 
 function isTabItem(comp) {
@@ -142,7 +144,16 @@ function ApiTabsComponent(props) {
   };
 
   const tabItemListContainerRef = useRef(null);
-  const showTabArrows = values.length >= 5;
+  const [showTabArrows, setShowTabArrows] = useState(false);
+
+  useEffect(() => {
+    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
+    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+
+    if (tabOffsetWidth < tabScrollWidth) {
+      setShowTabArrows(true);
+    }
+  }, []);
 
   const handleRightClick = () => {
     tabItemListContainerRef.current.scrollLeft += 90;

package/lib/theme/ApiTabs/styles.module.css

@@ -87,7 +87,6 @@
   content: "";
   height: 1.25rem;
   width: 1.25rem;
-  padding: 0 0.75rem;
   border: none;
   min-width: 1.25rem;
   background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;