docusaurus-theme-openapi-docs 2.0.3 → 2.1.0

package/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -0,0 +1,53 @@
+/* ============================================================================
+ * 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 { CodeSample, Language } from "./code-snippets-types";
+
+export function mergeCodeSampleLanguage(
+  languages: Language[],
+  codeSamples: CodeSample[]
+): Language[] {
+  return languages.map((language) => {
+    const languageCodeSamples = codeSamples.filter(
+      ({ lang }) => lang === language.codeSampleLanguage
+    );
+
+    if (languageCodeSamples.length) {
+      const samples = languageCodeSamples.map(({ lang }) => lang);
+      const samplesLabels = languageCodeSamples.map(
+        ({ label, lang }) => label || lang
+      );
+      const samplesSources = languageCodeSamples.map(({ source }) => source);
+
+      return {
+        ...language,
+        sample: samples[0],
+        samples,
+        samplesSources,
+        samplesLabels,
+      };
+    }
+
+    return language;
+  });
+}
+
+export function getCodeSampleSourceFromLanguage(language: Language) {
+  if (
+    language &&
+    language.sample &&
+    language.samples &&
+    language.samplesSources
+  ) {
+    const sampleIndex = language.samples.findIndex(
+      (smp) => smp === language.sample
+    );
+    return language.samplesSources[sampleIndex];
+  }
+
+  return "";
+}

package/src/theme/ApiExplorer/CodeTabs/_CodeTabs.scss

@@ -94,6 +94,20 @@ body[class="ReactModal__Body--open"] {
   padding-right: 0.5rem !important;
 }
 
+.openapi-tabs__code-item--sample {
+  color: var(--ifm-color-secondary);
+
+  &.active {
+    border-color: var(--ifm-toc-border-color);
+  }
+}
+
+.openapi-tabs__code-item--sample > span {
+  padding-top: unset !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
 .openapi-tabs__code-item--python {
   color: var(--ifm-color-success);
 

package/src/theme/ApiExplorer/CodeTabs/index.js

@@ -12,13 +12,14 @@ import {
   useTabs,
 } from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
-import { languageSet } from "@theme/ApiExplorer/CodeSnippets";
 import clsx from "clsx";
 
 function TabList({
   action,
   currentLanguage,
+  languageSet,
   includeVariant,
+  includeSample,
   className,
   block,
   selectedValue,
@@ -47,12 +48,20 @@ function TabList({
         )[0];
         newLanguage.variant = newTabValue;
         action.setSelectedVariant(newTabValue.toLowerCase());
+      } else if (currentLanguage && includeSample) {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === currentLanguage
+        )[0];
+        newLanguage.sample = newTabValue;
+        action.setSelectedSample(newTabValue);
       } else {
         newLanguage = languageSet.filter(
           (lang) => lang.language === newTabValue
         )[0];
         action.setSelectedVariant(newLanguage.variant.toLowerCase());
+        action.setSelectedSample(newLanguage.sample);
       }
+
       action.setLanguage(newLanguage);
     }
   };

package/src/theme/ApiExplorer/index.tsx

@@ -30,7 +30,7 @@ function ApiExplorer({
       {item.method !== "event" && (
         <CodeSnippets
           postman={postman}
-          codeSamples={(item as any)["x-code-samples"] ?? []}
+          codeSamples={(item as any)["x-codeSamples"] ?? []}
         />
       )}
       <Request item={item} />

package/src/theme/ApiItem/index.tsx

@@ -44,12 +44,17 @@ interface ApiFrontMatter extends DocFrontMatter {
   readonly api?: ApiItemType;
 }
 
+interface SchemaFrontMatter extends DocFrontMatter {
+  readonly schema?: boolean;
+}
+
 export default function ApiItem(props: Props): JSX.Element {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`;
   const MDXComponent = props.content;
   const { frontMatter } = MDXComponent;
   const { info_path: infoPath } = frontMatter as DocFrontMatter;
   let { api } = frontMatter as ApiFrontMatter;
+  const { schema } = frontMatter as SchemaFrontMatter;
   // decompress and parse
   if (api) {
     api = JSON.parse(
@@ -159,6 +164,21 @@ export default function ApiItem(props: Props): JSX.Element {
         </HtmlClassNameProvider>
       </DocProvider>
     );
+  } else if (schema) {
+    return (
+      <DocProvider content={props.content}>
+        <HtmlClassNameProvider className={docHtmlClassName}>
+          <DocItemMetadata />
+          <DocItemLayout>
+            <div className={clsx("row", "theme-api-markdown")}>
+              <div className="col col--12">
+                <MDXComponent />
+              </div>
+            </div>
+          </DocItemLayout>
+        </HtmlClassNameProvider>
+      </DocProvider>
+    );
   }
 
   // Non-API docs

package/src/theme/SchemaItem/index.js

@@ -79,14 +79,11 @@ function SchemaItem({
     </div>
   ));
 
-  const renderDefaultValue = guard(
-    typeof defaultValue === "boolean" ? defaultValue.toString() : defaultValue,
-    (value) => (
-      <div className="">
-        <ReactMarkdown children={`**Default value:** \`${value}\``} />
-      </div>
-    )
-  );
+  const renderDefaultValue = guard(defaultValue, (value) => (
+    <div className="">
+      <ReactMarkdown children={`**Default value:** \`${value}\``} />
+    </div>
+  ));
 
   const schemaContent = (
     <div>