docusaurus-theme-openapi-docs 1.5.2 → 1.6.1

package/src/theme/ApiLogo/index.tsx

@@ -8,18 +8,45 @@
 import React from "react";
 
 import { useColorMode } from "@docusaurus/theme-common";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ThemedImage from "@theme/ThemedImage";
 
-export default function ApiLogo(props: any): JSX.Element {
+export default function ApiLogo(props: any): JSX.Element | undefined {
   const { colorMode } = useColorMode();
   const { logo, darkLogo } = props;
+  const altText = () => {
+    if (colorMode === "dark") {
+      return darkLogo?.altText ?? logo?.altText;
+    }
+    return logo?.altText;
+  };
+  const lightLogoUrl = useBaseUrl(logo?.url);
+  const darkLogoUrl = useBaseUrl(darkLogo?.url);
 
-  return logo ? (
-    <img
-      alt={colorMode === "dark" && darkLogo ? darkLogo.altText : logo.altText}
-      src={colorMode === "dark" && darkLogo ? darkLogo.url : logo.url}
-      width="250px"
-    />
-  ) : (
-    <div />
-  );
+  if (logo && darkLogo) {
+    return (
+      <ThemedImage
+        alt={altText()}
+        sources={{
+          light: lightLogoUrl,
+          dark: darkLogoUrl,
+        }}
+        className="openapi__logo"
+      />
+    );
+  }
+  if (logo || darkLogo) {
+    return (
+      <ThemedImage
+        alt={altText()}
+        sources={{
+          light: lightLogoUrl ?? darkLogoUrl,
+          dark: lightLogoUrl ?? darkLogoUrl,
+        }}
+        className="openapi__logo"
+      />
+    );
+  }
+
+  return undefined;
 }

package/src/theme/ApiTabs/index.js

@@ -188,12 +188,12 @@ function ApiTabsComponent(props) {
             )}
           >
             {values.map(({ value, label, attributes }) => {
-              const responseTabDotStyle =
+              const responseStatusStyle =
                 parseInt(value) >= 400
-                  ? styles.responseTabDotDanger
+                  ? styles.responseStatusDanger
                   : parseInt(value) >= 200 && parseInt(value) < 300
-                  ? styles.responseTabDotSuccess
-                  : styles.responseTabDotInfo;
+                  ? styles.responseStatusSuccess
+                  : styles.responseStatusInfo;
 
               return (
                 <li
@@ -210,14 +210,13 @@ function ApiTabsComponent(props) {
                     "tabs__item",
                     styles.tabItem,
                     attributes?.className,
+                    responseStatusStyle,
                     {
-                      [styles.responseTabActive]: selectedValue === value,
+                      [styles.active]: selectedValue === value,
                     }
                   )}
                 >
-                  <div
-                    className={clsx(styles.responseTabDot, responseTabDotStyle)}
-                  />
+                  <div className={styles.responseTabDot} />
                   {label ?? value}
                 </li>
               );

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

@@ -18,13 +18,12 @@
   font-weight: var(--ifm-font-weight-normal);
 }
 
-.tabItem:not(.responseTabActive) {
+.tabItem:not(.active) {
   opacity: 0.65;
 }
 
 .tabItem:hover {
   opacity: 1;
-  background-color: var(--ifm-color-emphasis-100);
 }
 
 .tabItem:last-child {
@@ -66,19 +65,19 @@
   border-radius: 50%;
 }
 
-.responseTabDotSuccess {
+.responseStatusSuccess > .responseTabDot {
   background-color: var(--ifm-color-success);
 }
 
-.responseTabDotDanger {
+.responseStatusDanger > .responseTabDot {
   background-color: var(--ifm-color-danger);
 }
 
-.responseTabDotInfo {
+.responseStatusInfo > .responseTabDot {
   background-color: var(--ifm-color-info);
 }
 
-.responseTabActive {
+.active {
   background-color: var(--ifm-color-emphasis-100);
 }
 

package/src/theme/ParamsItem/index.js

@@ -8,6 +8,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 { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
@@ -16,7 +18,10 @@ import {
   getSchemaName,
 } from "docusaurus-theme-openapi-docs/lib/markdown/schema";
 /* eslint-disable import/no-extraneous-dependencies*/
-import { guard } from "docusaurus-theme-openapi-docs/lib/markdown/utils";
+import {
+  guard,
+  toString,
+} from "docusaurus-theme-openapi-docs/lib/markdown/utils";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
@@ -25,6 +30,10 @@ import styles from "./styles.module.css";
 function ParamsItem({
   param: { description, example, examples, name, required, schema },
 }) {
+  if (!schema || !schema?.type) {
+    schema = { type: "any" };
+  }
+
   const renderSchemaName = guard(schema, (schema) => (
     <span className={styles.schemaName}> {getSchemaName(schema)}</span>
   ));
@@ -76,17 +85,35 @@ function ParamsItem({
     )
   );
 
-  const renderExample = guard(example, (example) => (
-    <div>{`Example: ${example}`}</div>
+  const renderExample = guard(toString(example), (example) => (
+    <div>
+      <strong>Example: </strong>
+      {example}
+    </div>
   ));
 
   const renderExamples = guard(examples, (examples) => {
     const exampleEntries = Object.entries(examples);
     return (
       <>
-        {exampleEntries.map(([k, v]) => (
-          <div>{`Example (${k}): ${v.value}`}</div>
-        ))}
+        <strong>Examples:</strong>
+        <SchemaTabs>
+          {exampleEntries.map(([exampleName, exampleProperties]) => (
+            <TabItem value={exampleName} label={exampleName}>
+              {exampleProperties.summary && <p>{exampleProperties.summary}</p>}
+              {exampleProperties.description && (
+                <p>
+                  <strong>Description: </strong>
+                  <span>{exampleProperties.description}</span>
+                </p>
+              )}
+              <p>
+                <strong>Example: </strong>
+                <code>{exampleProperties.value}</code>
+              </p>
+            </TabItem>
+          ))}
+        </SchemaTabs>
       </>
     );
   });

package/src/theme/SchemaItem/index.js

@@ -11,7 +11,10 @@ import CodeBlock from "@theme/CodeBlock";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
-import { guard } from "docusaurus-theme-openapi-docs/lib/markdown/utils";
+import {
+  guard,
+  toString,
+} from "docusaurus-theme-openapi-docs/lib/markdown/utils";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
@@ -36,6 +39,7 @@ function SchemaItem({
     defaultValue = schema.default;
     nullable = schema.nullable;
   }
+
   const renderRequired = guard(
     Array.isArray(required) ? required.includes(name) : required,
     () => <strong className={styles.required}> required</strong>
@@ -79,14 +83,11 @@ function SchemaItem({
     </div>
   ));
 
-  const renderDefaultValue = guard(
-    typeof defaultValue === "boolean" ? defaultValue.toString() : defaultValue,
-    (value) => (
-      <div className={styles.schemaQualifierMessage}>
-        <ReactMarkdown children={`**Default value:** \`${value}\``} />
-      </div>
-    )
-  );
+  const renderDefaultValue = guard(toString(defaultValue), (value) => (
+    <div className={styles.schemaQualifierMessage}>
+      <ReactMarkdown children={`**Default value:** \`${value}\``} />
+    </div>
+  ));
 
   const schemaContent = (
     <div>

package/src/theme/styles.css

@@ -445,7 +445,41 @@
   overflow: auto;
 }
 
+.code__tab--java::after {
+  content: "";
+  width: 28px;
+  height: 28px;
+  background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
+  margin-block: auto;
+}
+
+.code__tab--java {
+  color: var(--ifm-color-warning);
+  padding-left: 1.4rem;
+  padding-right: 1.4rem;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.code__tab--java.tabs__item--active {
+  border-bottom-color: var(--ifm-color-warning);
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.language-java {
+  max-height: 500px;
+  overflow: auto;
+}
+
 /* Prism code styles */
-.prism-code.language-json {
+.prism-code.language-java {
   white-space: pre !important;
 }
+
+.openapi__logo {
+  width: 250px;
+}
+
+div:has(> ul.openapi-tabs__security-schemes) {
+  max-width: 100%;
+}