docusaurus-theme-redoc
Version:
Redoc Component for DocusaurusV2
38 lines • 2.23 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ServerStyles = ServerStyles;
const react_1 = __importDefault(require("react"));
require("../../global");
const useBaseUrl_1 = __importDefault(require("@docusaurus/useBaseUrl"));
const redoc_1 = require("redoc");
// eslint-disable-next-line import/no-extraneous-dependencies
const server_1 = require("react-dom/server");
const styled_components_1 = require("styled-components");
const postcss_1 = __importDefault(require("postcss"));
const postcss_prefix_selector_1 = __importDefault(require("postcss-prefix-selector"));
const prefixCssSelectors = function (css, className) {
const processor = (0, postcss_1.default)().use((0, postcss_prefix_selector_1.default)({
prefix: className,
}));
return processor.process(css).css;
};
const renderCss = function (store) {
const styleSheet = new styled_components_1.ServerStyleSheet();
(0, server_1.renderToString)(styleSheet.collectStyles(react_1.default.createElement(redoc_1.Redoc, { store })));
return String(styleSheet.instance);
};
const LIGHT_MODE_PREFIX = "html:not([data-theme='dark'])";
const DARK_MODE_PREFIX = "html([data-theme='dark'])";
function ServerStyles({ specProps, lightThemeOptions, darkThemeOptions, }) {
const absoluteUrl = (0, useBaseUrl_1.default)(specProps.url, { absolute: true });
const fullUrl = specProps.normalizeUrl ? absoluteUrl : specProps.url;
const lightCss = prefixCssSelectors(renderCss(new redoc_1.AppStore(specProps.spec, fullUrl, lightThemeOptions)), LIGHT_MODE_PREFIX);
const darkCss = prefixCssSelectors(renderCss(new redoc_1.AppStore(specProps.spec, fullUrl, darkThemeOptions)), DARK_MODE_PREFIX);
return (react_1.default.createElement("div", { className: "redocusaurus-styles" },
react_1.default.createElement("style", { key: "light-mode-styles", dangerouslySetInnerHTML: { __html: lightCss } }),
react_1.default.createElement("style", { key: "dark-mode-styles", dangerouslySetInnerHTML: { __html: darkCss } })));
}
//# sourceMappingURL=ServerStyles.js.map