docusaurus-theme-redoc
Version:
Redoc Component for DocusaurusV2
33 lines (32 loc) • 1.61 kB
JSX
import React from 'react';
import '../../global';
import useBaseUrl from '@docusaurus/useBaseUrl';
import { AppStore, Redoc } from 'redoc';
// eslint-disable-next-line import/no-extraneous-dependencies
import { renderToString } from 'react-dom/server';
import { ServerStyleSheet } from 'styled-components';
import postcss from 'postcss';
import prefixer from 'postcss-prefix-selector';
const prefixCssSelectors = function (css, className) {
const processor = postcss().use(prefixer({
prefix: className,
}));
return processor.process(css).css;
};
const renderCss = function (store) {
const styleSheet = new ServerStyleSheet();
renderToString(styleSheet.collectStyles(React.createElement(Redoc, { store })));
return String(styleSheet.instance);
};
const LIGHT_MODE_PREFIX = "html:not([data-theme='dark'])";
const DARK_MODE_PREFIX = "html([data-theme='dark'])";
export function ServerStyles({ specProps, lightThemeOptions, darkThemeOptions, }) {
const absoluteUrl = useBaseUrl(specProps.url, { absolute: true });
const fullUrl = specProps.normalizeUrl ? absoluteUrl : specProps.url;
const lightCss = prefixCssSelectors(renderCss(new AppStore(specProps.spec, fullUrl, lightThemeOptions)), LIGHT_MODE_PREFIX);
const darkCss = prefixCssSelectors(renderCss(new AppStore(specProps.spec, fullUrl, darkThemeOptions)), DARK_MODE_PREFIX);
return (<div className="redocusaurus-styles">
<style key="light-mode-styles" dangerouslySetInnerHTML={{ __html: lightCss }}/>
<style key="dark-mode-styles" dangerouslySetInnerHTML={{ __html: darkCss }}/>
</div>);
}