docusaurus-theme-openapi-docs 1.0.3 → 1.0.6

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

@@ -11,6 +11,23 @@
   margin-top: 0;
 }
 
+:global(.version-button div) {
+  display: block;
+}
+
+:global(.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;
+}
+
 /* default markdown margins look really silly in a table */
 :global(.theme-api-markdown table *:last-child) {
   margin-bottom: 0;
@@ -111,3 +128,75 @@
   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(.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(.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(.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);
+}

package/lib/theme/ApiDemoPanel/VSCode/index.js

@@ -1,252 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _themeCommon = require("@docusaurus/theme-common");
-
-var _react2 = _interopRequireDefault(require("@monaco-editor/react"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* ============================================================================
- * 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.
- * ========================================================================== */
-function VSCode({
-  value,
-  language,
-  onChange
-}) {
-  var _ref;
-
-  const [focused, setFocused] = (0, _react.useState)(false);
-  const isDarkTheme = (_ref = (0, _themeCommon.useColorMode)().colorMode === "dark") !== null && _ref !== void 0 ? _ref : false;
-
-  function handleEditorWillMount(monaco) {
-    const styles = getComputedStyle(document.documentElement);
-
-    function getColor(property) {
-      // Weird chrome bug, returns " #ffffff " instead of "#ffffff", see: https://github.com/cloud-annotations/docusaurus-openapi/issues/144
-      const color = styles.getPropertyValue(property).trim();
-      const isColorRgb = color.includes("rgb");
-      const isColorHexShortened = color.length === 4; // Convert "rgb(r, g, b)" to color hex code
-
-      const getColorHex = color => {
-        const rgbValues = color.substring(4).split(")")[0].split(",");
-        const [r, g, b] = rgbValues;
-
-        const colorToHex = rgb => {
-          const hexadecimal = parseInt(rgb).toString(16);
-          return hexadecimal.length === 1 ? "0" + hexadecimal : hexadecimal;
-        };
-
-        return "#" + colorToHex(r) + colorToHex(g) + colorToHex(b);
-      }; // Extend shortened hex codes ie. "#aaa" => "#aaaaaa" or "#xyz" => "#xxyyzz"
-
-
-      const getFullColorHex = color => {
-        let fullColorHex = "#";
-        const hexValues = color.slice(1);
-
-        for (let i = 0; i < hexValues.length; i++) {
-          for (let j = 0; j < 2; j++) {
-            fullColorHex += hexValues[i];
-          }
-        }
-
-        return fullColorHex.toLowerCase();
-      };
-
-      if (isColorRgb) {
-        return getColorHex(color);
-      } else if (isColorHexShortened) {
-        return getFullColorHex(color);
-      } else {
-        return color;
-      }
-    }
-
-    const LIGHT_BACKGROUND = getColor("--openapi-monaco-background-color-light");
-    const LIGHT_BRIGHT = getColor("--openapi-code-bright-light");
-    const LIGHT_DIM = getColor("--openapi-code-dim-light");
-    const LIGHT_BLUE = getColor("--openapi-code-blue-light");
-    const LIGHT_GREEN = getColor("--openapi-code-green-light");
-    const LIGHT_SELECT = getColor("--openapi-code-select-light");
-    const DARK_BACKGROUND = getColor("--openapi-monaco-background-color-dark");
-    const DARK_BRIGHT = getColor("--openapi-code-bright-dark");
-    const DARK_DIM = getColor("--openapi-code-dim-dark");
-    const DARK_BLUE = getColor("--openapi-code-blue-dark");
-    const DARK_GREEN = getColor("--openapi-code-green-dark");
-    const DARK_SELECT = getColor("--openapi-code-select-dark");
-    monaco.editor.defineTheme("OpenApiDark", {
-      base: "vs-dark",
-      inherit: true,
-      rules: [{
-        token: "",
-        foreground: DARK_BRIGHT
-      }, {
-        token: "string.key.json",
-        foreground: DARK_BRIGHT
-      }, {
-        token: "string.value.json",
-        foreground: DARK_GREEN
-      }, {
-        token: "number",
-        foreground: DARK_BLUE
-      }, {
-        token: "keyword.json",
-        foreground: DARK_BLUE
-      }, {
-        token: "delimiter",
-        foreground: DARK_DIM
-      }, {
-        token: "tag.xml",
-        foreground: DARK_DIM
-      }, {
-        token: "metatag.xml",
-        foreground: DARK_DIM
-      }, {
-        token: "attribute.name.xml",
-        foreground: DARK_BRIGHT
-      }, {
-        token: "attribute.value.xml",
-        foreground: DARK_GREEN
-      }, {
-        token: "metatag.xml",
-        foreground: DARK_BLUE
-      }, {
-        token: "tag.xml",
-        foreground: DARK_BLUE
-      }],
-      colors: {
-        "editor.background": DARK_BACKGROUND,
-        "editor.lineHighlightBackground": DARK_BACKGROUND,
-        "editorBracketMatch.background": DARK_BACKGROUND,
-        "editorBracketMatch.border": DARK_BACKGROUND,
-        "editor.selectionBackground": DARK_SELECT
-      }
-    });
-    monaco.editor.defineTheme("OpenApiLight", {
-      base: "vs",
-      inherit: true,
-      rules: [{
-        token: "",
-        foreground: LIGHT_BRIGHT
-      }, {
-        token: "string.key.json",
-        foreground: LIGHT_BRIGHT
-      }, {
-        token: "string.value.json",
-        foreground: LIGHT_GREEN
-      }, {
-        token: "number",
-        foreground: LIGHT_BLUE
-      }, {
-        token: "keyword.json",
-        foreground: LIGHT_BLUE
-      }, {
-        token: "delimiter",
-        foreground: LIGHT_DIM
-      }, {
-        token: "tag.xml",
-        foreground: LIGHT_DIM
-      }, {
-        token: "metatag.xml",
-        foreground: LIGHT_DIM
-      }, {
-        token: "attribute.name.xml",
-        foreground: LIGHT_BRIGHT
-      }, {
-        token: "attribute.value.xml",
-        foreground: LIGHT_GREEN
-      }, {
-        token: "metatag.xml",
-        foreground: LIGHT_BLUE
-      }, {
-        token: "tag.xml",
-        foreground: LIGHT_BLUE
-      }],
-      colors: {
-        "editor.background": LIGHT_BACKGROUND,
-        "editor.lineHighlightBackground": LIGHT_BACKGROUND,
-        "editorBracketMatch.background": LIGHT_BACKGROUND,
-        "editorBracketMatch.border": LIGHT_BACKGROUND,
-        "editor.selectionBackground": LIGHT_SELECT
-      }
-    });
-  }
-
-  return <div className={focused ? _stylesModule.default.monacoFocus : _stylesModule.default.monaco}>
-      <_react2.default value={value} language={language} theme={isDarkTheme ? "OpenApiDark" : "OpenApiLight"} beforeMount={handleEditorWillMount} options={{
-      lineNumbers: "off",
-      scrollBeyondLastLine: false,
-      scrollBeyondLastColumn: 3,
-      readOnly: false,
-      minimap: {
-        enabled: false
-      },
-      fontFamily: "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
-      fontSize: 14.4,
-      overviewRulerLanes: 0,
-      folding: false,
-      lineDecorationsWidth: 0,
-      contextmenu: false,
-      scrollbar: {
-        horizontal: "hidden"
-      }
-    }} onMount={editor => {
-      editor.onDidFocusEditorText(() => {
-        setFocused(true);
-      });
-      editor.onDidBlurEditorText(() => {
-        setFocused(false);
-      });
-      editor.onDidChangeModelDecorations(() => {
-        updateEditorHeight(); // typing
-
-        requestAnimationFrame(updateEditorHeight); // folding
-      });
-      let prevHeight = 0;
-
-      const updateEditorHeight = () => {
-        var _editor$getModel;
-
-        onChange(editor.getValue());
-        const editorElement = editor.getDomNode();
-
-        if (!editorElement) {
-          return;
-        }
-
-        const lineHeight = 22;
-        const lineCount = ((_editor$getModel = editor.getModel()) === null || _editor$getModel === void 0 ? void 0 : _editor$getModel.getLineCount()) || 1;
-        const height = editor.getTopForLineNumber(lineCount + 1) + lineHeight;
-        const clippedHeight = Math.min(height, 500);
-
-        if (prevHeight !== clippedHeight) {
-          prevHeight = clippedHeight;
-          editorElement.style.height = `${clippedHeight}px`;
-          editor.layout();
-        }
-      };
-
-      updateEditorHeight();
-    }} />
-    </div>;
-}
-
-var _default = VSCode;
-exports.default = _default;

package/lib/theme/ApiDemoPanel/VSCode/styles.module.css

@@ -1,19 +0,0 @@
-.monacoBase {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  border-radius: 4px;
-  padding: var(--ifm-pre-padding);
-  background-color: var(--openapi-monaco-background-color);
-}
-
-.monaco {
-  composes: monacoBase;
-
-  box-shadow: 0 0 0 1px var(--openapi-monaco-border-color);
-  border: 2px solid transparent;
-}
-
-.monacoFocus {
-  composes: monacoBase;
-
-  border: 2px solid var(--openapi-input-border);
-}

package/lib-next/theme/ApiDemoPanel/VSCode/index.js

@@ -1,265 +0,0 @@
-/* ============================================================================
- * 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, { useState } from "react";
-import { useColorMode } from "@docusaurus/theme-common";
-import Editor from "@monaco-editor/react";
-import styles from "./styles.module.css";
-
-function VSCode({ value, language, onChange }) {
-  const [focused, setFocused] = useState(false);
-  const isDarkTheme = useColorMode().colorMode === "dark" ?? false;
-
-  function handleEditorWillMount(monaco) {
-    const styles = getComputedStyle(document.documentElement);
-
-    function getColor(property) {
-      // Weird chrome bug, returns " #ffffff " instead of "#ffffff", see: https://github.com/cloud-annotations/docusaurus-openapi/issues/144
-      const color = styles.getPropertyValue(property).trim();
-      const isColorRgb = color.includes("rgb");
-      const isColorHexShortened = color.length === 4; // Convert "rgb(r, g, b)" to color hex code
-
-      const getColorHex = (color) => {
-        const rgbValues = color.substring(4).split(")")[0].split(",");
-        const [r, g, b] = rgbValues;
-
-        const colorToHex = (rgb) => {
-          const hexadecimal = parseInt(rgb).toString(16);
-          return hexadecimal.length === 1 ? "0" + hexadecimal : hexadecimal;
-        };
-
-        return "#" + colorToHex(r) + colorToHex(g) + colorToHex(b);
-      }; // Extend shortened hex codes ie. "#aaa" => "#aaaaaa" or "#xyz" => "#xxyyzz"
-
-      const getFullColorHex = (color) => {
-        let fullColorHex = "#";
-        const hexValues = color.slice(1);
-
-        for (let i = 0; i < hexValues.length; i++) {
-          for (let j = 0; j < 2; j++) {
-            fullColorHex += hexValues[i];
-          }
-        }
-
-        return fullColorHex.toLowerCase();
-      };
-
-      if (isColorRgb) {
-        return getColorHex(color);
-      } else if (isColorHexShortened) {
-        return getFullColorHex(color);
-      } else {
-        return color;
-      }
-    }
-
-    const LIGHT_BACKGROUND = getColor(
-      "--openapi-monaco-background-color-light"
-    );
-    const LIGHT_BRIGHT = getColor("--openapi-code-bright-light");
-    const LIGHT_DIM = getColor("--openapi-code-dim-light");
-    const LIGHT_BLUE = getColor("--openapi-code-blue-light");
-    const LIGHT_GREEN = getColor("--openapi-code-green-light");
-    const LIGHT_SELECT = getColor("--openapi-code-select-light");
-    const DARK_BACKGROUND = getColor("--openapi-monaco-background-color-dark");
-    const DARK_BRIGHT = getColor("--openapi-code-bright-dark");
-    const DARK_DIM = getColor("--openapi-code-dim-dark");
-    const DARK_BLUE = getColor("--openapi-code-blue-dark");
-    const DARK_GREEN = getColor("--openapi-code-green-dark");
-    const DARK_SELECT = getColor("--openapi-code-select-dark");
-    monaco.editor.defineTheme("OpenApiDark", {
-      base: "vs-dark",
-      inherit: true,
-      rules: [
-        {
-          token: "",
-          foreground: DARK_BRIGHT,
-        },
-        {
-          token: "string.key.json",
-          foreground: DARK_BRIGHT,
-        },
-        {
-          token: "string.value.json",
-          foreground: DARK_GREEN,
-        },
-        {
-          token: "number",
-          foreground: DARK_BLUE,
-        },
-        {
-          token: "keyword.json",
-          foreground: DARK_BLUE,
-        },
-        {
-          token: "delimiter",
-          foreground: DARK_DIM,
-        },
-        {
-          token: "tag.xml",
-          foreground: DARK_DIM,
-        },
-        {
-          token: "metatag.xml",
-          foreground: DARK_DIM,
-        },
-        {
-          token: "attribute.name.xml",
-          foreground: DARK_BRIGHT,
-        },
-        {
-          token: "attribute.value.xml",
-          foreground: DARK_GREEN,
-        },
-        {
-          token: "metatag.xml",
-          foreground: DARK_BLUE,
-        },
-        {
-          token: "tag.xml",
-          foreground: DARK_BLUE,
-        },
-      ],
-      colors: {
-        "editor.background": DARK_BACKGROUND,
-        "editor.lineHighlightBackground": DARK_BACKGROUND,
-        "editorBracketMatch.background": DARK_BACKGROUND,
-        "editorBracketMatch.border": DARK_BACKGROUND,
-        "editor.selectionBackground": DARK_SELECT,
-      },
-    });
-    monaco.editor.defineTheme("OpenApiLight", {
-      base: "vs",
-      inherit: true,
-      rules: [
-        {
-          token: "",
-          foreground: LIGHT_BRIGHT,
-        },
-        {
-          token: "string.key.json",
-          foreground: LIGHT_BRIGHT,
-        },
-        {
-          token: "string.value.json",
-          foreground: LIGHT_GREEN,
-        },
-        {
-          token: "number",
-          foreground: LIGHT_BLUE,
-        },
-        {
-          token: "keyword.json",
-          foreground: LIGHT_BLUE,
-        },
-        {
-          token: "delimiter",
-          foreground: LIGHT_DIM,
-        },
-        {
-          token: "tag.xml",
-          foreground: LIGHT_DIM,
-        },
-        {
-          token: "metatag.xml",
-          foreground: LIGHT_DIM,
-        },
-        {
-          token: "attribute.name.xml",
-          foreground: LIGHT_BRIGHT,
-        },
-        {
-          token: "attribute.value.xml",
-          foreground: LIGHT_GREEN,
-        },
-        {
-          token: "metatag.xml",
-          foreground: LIGHT_BLUE,
-        },
-        {
-          token: "tag.xml",
-          foreground: LIGHT_BLUE,
-        },
-      ],
-      colors: {
-        "editor.background": LIGHT_BACKGROUND,
-        "editor.lineHighlightBackground": LIGHT_BACKGROUND,
-        "editorBracketMatch.background": LIGHT_BACKGROUND,
-        "editorBracketMatch.border": LIGHT_BACKGROUND,
-        "editor.selectionBackground": LIGHT_SELECT,
-      },
-    });
-  }
-
-  return (
-    <div className={focused ? styles.monacoFocus : styles.monaco}>
-      <Editor
-        value={value}
-        language={language}
-        theme={isDarkTheme ? "OpenApiDark" : "OpenApiLight"}
-        beforeMount={handleEditorWillMount}
-        options={{
-          lineNumbers: "off",
-          scrollBeyondLastLine: false,
-          scrollBeyondLastColumn: 3,
-          readOnly: false,
-          minimap: {
-            enabled: false,
-          },
-          fontFamily:
-            "SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
-          fontSize: 14.4,
-          overviewRulerLanes: 0,
-          folding: false,
-          lineDecorationsWidth: 0,
-          contextmenu: false,
-          scrollbar: {
-            horizontal: "hidden",
-          },
-        }}
-        onMount={(editor) => {
-          editor.onDidFocusEditorText(() => {
-            setFocused(true);
-          });
-          editor.onDidBlurEditorText(() => {
-            setFocused(false);
-          });
-          editor.onDidChangeModelDecorations(() => {
-            updateEditorHeight(); // typing
-
-            requestAnimationFrame(updateEditorHeight); // folding
-          });
-          let prevHeight = 0;
-
-          const updateEditorHeight = () => {
-            onChange(editor.getValue());
-            const editorElement = editor.getDomNode();
-
-            if (!editorElement) {
-              return;
-            }
-
-            const lineHeight = 22;
-            const lineCount = editor.getModel()?.getLineCount() || 1;
-            const height =
-              editor.getTopForLineNumber(lineCount + 1) + lineHeight;
-            const clippedHeight = Math.min(height, 500);
-
-            if (prevHeight !== clippedHeight) {
-              prevHeight = clippedHeight;
-              editorElement.style.height = `${clippedHeight}px`;
-              editor.layout();
-            }
-          };
-
-          updateEditorHeight();
-        }}
-      />
-    </div>
-  );
-}
-
-export default VSCode;

package/lib-next/theme/ApiDemoPanel/VSCode/styles.module.css

@@ -1,19 +0,0 @@
-.monacoBase {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  border-radius: 4px;
-  padding: var(--ifm-pre-padding);
-  background-color: var(--openapi-monaco-background-color);
-}
-
-.monaco {
-  composes: monacoBase;
-
-  box-shadow: 0 0 0 1px var(--openapi-monaco-border-color);
-  border: 2px solid transparent;
-}
-
-.monacoFocus {
-  composes: monacoBase;
-
-  border: 2px solid var(--openapi-input-border);
-}