docusaurus-theme-openapi-docs 1.4.3 → 1.4.5

package/lib-next/theme/styles.css

@@ -0,0 +1,429 @@
+/* ============================================================================
+ * 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.
+ * ========================================================================== */
+
+:root {
+  --openapi-required: var(--ifm-color-danger);
+  --openapi-code-blue: var(--ifm-color-info);
+  --openapi-code-red: var(--ifm-color-danger);
+  --openapi-code-orange: var(--ifm-color-warning);
+  --openapi-code-green: var(--ifm-color-success);
+  --openapi-card-background-color: var(--ifm-color-gray-100);
+  --openapi-card-border-radius: var(--ifm-pre-border-radius);
+  --openapi-input-border: var(--ifm-color-primary);
+  --openapi-input-background: var(--openapi-card-background-color);
+}
+
+[data-theme="dark"] {
+  --openapi-card-background-color: var(--ifm-color-gray-900) !important;
+}
+
+.docs-wrapper {
+  height: 100%;
+}
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@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"] {
+  --openapi-card-background-color: var(--ifm-color-gray-900) !important;
+}
+
+.apiItemContainer article > *:first-child,
+.apiItemContainer header + * {
+  margin-top: 0;
+}
+
+.theme-api-markdown div[class^="collapsibleContent"] {
+  margin-top: 0 !important;
+  padding-left: 2px;
+}
+
+/* Main details */
+
+.theme-api-markdown details {
+  margin: unset;
+  max-width: 600px;
+  background-color: transparent;
+  color: var(--ifm-font-color-base);
+  padding: unset;
+  border: unset !important;
+  box-shadow: unset !important;
+  --docusaurus-details-decoration-color: var(--ifm-font-color-base);
+}
+
+.theme-api-markdown details ul {
+  padding-left: 0;
+  font-size: 14px;
+}
+
+.theme-api-markdown details li {
+  list-style: none;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+.theme-api-markdown details > div > div {
+  padding-top: unset !important;
+  border-top: unset !important;
+}
+
+.theme-api-markdown details p {
+  margin-bottom: 0;
+}
+
+/* Demo panel details */
+
+.theme-api-markdown .details__demo-panel {
+  margin-bottom: 1rem;
+  background: var(--openapi-card-background-color);
+  border-radius: var(--openapi-card-border-radius);
+}
+
+.theme-api-markdown .details__demo-panel > summary {
+  padding-left: 1rem;
+  padding-top: 1rem;
+  cursor: pointer;
+}
+
+.theme-api-markdown .details__demo-panel > div > div > pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.theme-api-markdown .details__demo-panel > summary::marker {
+  display: none;
+  content: "";
+}
+
+.theme-api-markdown .details__demo-panel > summary::-webkit-details-marker {
+  display: none;
+  content: "";
+}
+
+.theme-api-markdown .details__demo-panel > pre {
+  margin-bottom: 0;
+  padding-top: 0;
+}
+
+/* Demo panel request */
+
+.theme-api-markdown .details__request-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.theme-api-markdown .details__request-summary > button {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+
+/* Demo panel response */
+
+.theme-api-markdown .details__response-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.theme-api-markdown .details__response-summary > button {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}
+
+/* Code block */
+
+.theme-api-markdown code {
+  max-width: 600px;
+  max-height: 500px;
+  overflow: auto;
+}
+
+/* Version button */
+
+.version-button div {
+  display: block;
+}
+
+.version-button div > button > span::after {
+  border-color: currentcolor transparent;
+  border-style: solid;
+  border-width: 0.4em 0.4em 0;
+  content: "";
+  margin-left: 0.3em;
+  position: relative;
+  transform: translateY(-50%);
+  display: inline-block;
+  font-size: 0.8rem;
+  top: 1px;
+}
+
+/* Params, Schema and Discriminator Items */
+
+[class^="paramsItem"]::before,
+[class^="schemaItem"]::before {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  width: 0.7rem;
+  /* width of horizontal line */
+  height: 0.5rem;
+  /* vertical position of line */
+  vertical-align: top;
+  border-bottom: thin solid var(--ifm-color-gray-500);
+  content: "";
+  display: inline-block;
+}
+
+.schemaItem {
+  list-style: none;
+  position: relative;
+  margin: 0 !important;
+  padding: 5px 0 5px 1rem;
+  border-left: thin solid var(--ifm-color-gray-500) !important;
+}
+
+.discriminatorItem {
+  list-style: none;
+  position: relative;
+  margin: 0 !important;
+  padding: 5px 0 5px 0 !important;
+  border-left: thin solid var(--ifm-color-gray-500) !important;
+}
+
+.discriminatorTabsContainer {
+  padding-left: 0 !important;
+}
+
+.schemaItem:hover {
+  background-color: var(--ifm-menu-color-background-active);
+}
+
+.schemaItem:focus {
+  background-color: var(--ifm-menu-color-background-active);
+}
+
+.paramsItem:hover {
+  background-color: var(--ifm-menu-color-background-active);
+}
+
+.paramsItem:focus {
+  background-color: var(--ifm-menu-color-background-active);
+}
+
+/* CodeTabs */
+
+.code__tab--python::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
+  margin-block: auto;
+}
+
+.code__tab--python {
+  color: var(--ifm-color-success);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+.code__tab--python.tabs__item--active {
+  border-bottom-color: var(--ifm-color-success);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-python {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.code__tab--go::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
+  margin-block: auto;
+}
+
+.code__tab--go {
+  color: var(--ifm-color-info);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+.code__tab--go.tabs__item--active {
+  border-bottom-color: var(--ifm-color-info);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-go {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.code__tab--javascript::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
+  margin-block: auto;
+}
+
+.code__tab--javascript {
+  color: var(--ifm-color-warning);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+.code__tab--javascript.tabs__item--active {
+  border-bottom-color: var(--ifm-color-warning);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-javascript {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.code__tab--bash::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg");
+  margin-block: auto;
+}
+
+.code__tab--bash {
+  color: var(--ifm-color-danger);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+.code__tab--bash.tabs__item--active {
+  border-bottom-color: var(--ifm-color-danger);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-bash {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.code__tab--ruby::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
+  margin-block: auto;
+}
+
+.code__tab--ruby {
+  color: var(--ifm-color-danger);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+.code__tab--ruby.tabs__item--active {
+  border-bottom-color: var(--ifm-color-danger);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-ruby {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.code__tab--csharp::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
+  margin-block: auto;
+}
+
+.code__tab--csharp {
+  color: var(--ifm-color-gray-500);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+.code__tab--csharp.tabs__item--active {
+  border-bottom-color: var(--ifm-color-gray-500);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-csharp {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.code__tab--nodejs::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
+  margin-block: auto;
+}
+
+.code__tab--nodejs {
+  color: var(--ifm-color-success);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+.code__tab--nodejs.tabs__item--active {
+  border-bottom-color: var(--ifm-color-success);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-nodejs {
+  max-height: 500px;
+  overflow: auto;
+}
+
+.code__tab--php::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
+  margin-block: auto;
+}
+
+.code__tab--php {
+  color: var(--ifm-color-gray-500);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+}
+
+.code__tab--php.tabs__item--active {
+  border-bottom-color: var(--ifm-color-gray-500);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-php {
+  max-height: 500px;
+  overflow: auto;
+}
+
+/* Prism code styles */
+.prism-code.language-json {
+  white-space: pre !important;
+}

package/lib-next/theme-classic.d.ts

@@ -6,3 +6,8 @@
  * ========================================================================== */
 
 /// <reference types="@docusaurus/theme-classic" />
+
+declare module "@docusaurus/theme-common/internal" {
+  function useDoc(): any;
+  export const { useDoc };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -31,8 +31,8 @@
     "format:lib-next": "prettier --config ../../.prettierrc.json --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.1",
-    "@docusaurus/types": "2.0.1",
+    "@docusaurus/module-type-aliases": "^2.0.1",
+    "@docusaurus/types": "^2.0.1",
     "@types/concurrently": "^6.3.0",
     "@types/crypto-js": "^4.1.0",
     "@types/file-saver": "^2.0.5",
@@ -51,7 +51,7 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.4.3",
+    "docusaurus-plugin-openapi-docs": "^1.4.5",
     "file-saver": "^2.0.5",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
@@ -73,5 +73,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "277586102253008f831bedbb990fb9854658a190"
+  "gitHead": "84ff5b3176d6734e9ec967131f45e044eca5d108"
 }

package/src/index.ts

@@ -14,6 +14,11 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
   return {
     name: "docusaurus-theme-openapi",
 
+    getClientModules() {
+      const modules = [require.resolve("./theme/styles.css")];
+      return modules;
+    },
+
     getThemePath() {
       return path.join(__dirname, "..", "lib-next", "theme");
     },

package/src/theme/ApiDemoPanel/index.tsx

@@ -15,7 +15,6 @@ import MethodEndpoint from "./MethodEndpoint";
 import Request from "./Request";
 import Response from "./Response";
 import SecuritySchemes from "./SecuritySchemes";
-import styles from "./styles.module.css";
 
 function ApiDemoPanel({
   item,
@@ -28,7 +27,7 @@ function ApiDemoPanel({
   const { path, method } = item;
 
   return (
-    <div className={styles.apiDemoPanelContainer}>
+    <div>
       <MethodEndpoint method={method} path={path} />
       <SecuritySchemes infoPath={infoPath} />
       <Request item={item} />

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

@@ -8,19 +8,18 @@
 import React from "react";
 
 import { useWindowSize } from "@docusaurus/theme-common";
-// @ts-ignore
 import { useDoc } from "@docusaurus/theme-common/internal";
 import DocBreadcrumbs from "@theme/DocBreadcrumbs";
+import DocItemContent from "@theme/DocItem/Content";
+import DocItemFooter from "@theme/DocItem/Footer";
 import type { Props } from "@theme/DocItem/Layout";
+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 DocItemContent from "../Content";
-import DocItemFooter from "../Footer";
-import DocItemPaginator from "../Paginator";
-import DocItemTOCDesktop from "../TOC/Desktop";
-import DocItemTOCMobile from "../TOC/Mobile";
 import styles from "./styles.module.css";
 
 /**