Redocusaurus: Reodc for use with Docusaurus V2, MOVED TO https://github.com/rohit-gohri/redocusaurus

api.js

import React from 'react';
import Layout from '@theme/Layout';
import Redocusaurus from '../components/Redocusaurus';

function APIDocs() {
  return (
  <Layout
    title={`API Docs`}
    description={`Open API Reference Docs for the API`}
  >
    <Redocusaurus spec="/openapi/api.yaml" />
  </Layout>
  );
}

export default APIDocs;

Redocusaurus.jsx

import React from 'react';
import merge from 'lodash.merge';
import { RedocStandalone } from 'redoc';
import useThemeContext from '@theme/hooks/useThemeContext';
import './styles.css';

/**
 * NOTE: Colors taken from `node_modules/infima/styles/common/dark-mode.css`
 * and related files
 */
const DOCUSAURUS = {
  fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
  fontSize: '16px',
  darkGray: '#303846',
  dark: {
    primaryText: '#f5f6f7',
    secondaryText: 'rgba(255, 255, 255, 1)',
    backgroundColor: 'rgb(24, 25, 26)',
  }
};

/** @type {Partial<import('redoc').ResolvedThemeInterface>} */
let LIGHT_THEME_OPTIONS = {
  typography: {
    fontFamily: DOCUSAURUS.fontFamily,
    fontSize: DOCUSAURUS.fontSize,
    headings: {
      fontFamily: DOCUSAURUS.fontFamily,
      fontSize: DOCUSAURUS.fontSize,
    },
  },
  sidebar: {
    backgroundColor: '#ffffff',
  },
  rightPanel: {
    backgroundColor: DOCUSAURUS.darkGray,
  }
};

/**
 * @type {Partial<import('redoc').ResolvedThemeInterface>}
 */
let DARK_THEME_OPTIONS = {
  colors: {
    text: {
      primary: DOCUSAURUS.dark.primaryText,
      secondary: DOCUSAURUS.dark.secondaryText,
    },
    gray: {
      50: '#FAFAFA',
      100: '#F5F5F5',
    },
    border: {
      dark: '#ffffff',
      light: 'rgba(0,0,0, 0.1)',
    },
  },
  schema: {
    nestedBackground: DOCUSAURUS.dark.backgroundColor,
    typeNameColor: DOCUSAURUS.dark.secondaryText,
    typeTitleColor: DOCUSAURUS.dark.secondaryText,
  },
  sidebar: {
    backgroundColor: DOCUSAURUS.dark.backgroundColor,
    textColor: DOCUSAURUS.dark.primaryText,
    arrow: {
      color: DOCUSAURUS.dark.primaryText,
    },
  },
};


/**
 * @returns {import('redoc').ResolvedThemeInterface}
 */
function getThemeOptions(isDarkMode) {
  let baseTheme = {
    colors: {
      primary: {
        main: "#1890ff"
      },
    },
  };
  baseTheme = merge(baseTheme, LIGHT_THEME_OPTIONS);

  if (!isDarkMode) return baseTheme;

  return merge({}, baseTheme, DARK_THEME_OPTIONS);
}


/**
 *
 * @param {{
 *  spec: string
 * }} props
 */
function Redocusaurus(props) {
  const { isDarkTheme } = useThemeContext();
  const theme = getThemeOptions(isDarkTheme);

  return (
    <div className="redocusaurus">
      <RedocStandalone
        specUrl={props.spec}
        options={{
          scrollYOffset: 'nav',
          theme,
        }}
      />
    </div>
  );
}

export default Redocusaurus;

styles.css

.redocusaurus .redoc-wrap {
  border-bottom: 1px solid var(--ifm-toc-border-color);
}

/* ------ Headings Overrides ------- */

.redocusaurus h2,h3,h4 {
  color: var(--ifm-font-color-base);
}

.redocusaurus h5 {
  color: var(--ifm-font-color-secondary) !important;
}

.redocusaurus h5 > span {
  color: var(--ifm-font-color-secondary) !important;
}

/* ------- Sidebar Overrides (Left Panel) ------- */

.redocusaurus .menu-content {
  border-right: 1px solid var(--ifm-toc-border-color);
}

/* Hide Logo as already in navbar*/
.redocusaurus .menu-content div:first-child {
  display: none;
}

.redocusaurus .operation-type {
  margin-top: 6px;
  font-size: 8px;
}

/* ------- Right Panel Overrides ------- */

.redocusaurus code {
  color: var(--ifm-color-emphasis-100);
  padding: 0px;
  /* Fix weird overlay on curly braces */
  background-color: transparent;
}

html[data-theme="dark"] .redocusaurus code {
  color: var(--ifm-color-emphasis-900);
}

.redocusaurus ul > li.react-tabs__tab--selected:not(.tab-error):not(.tab-success) {
  color: #303846 !important;
}

/* Background of server selection dropdown */
html[data-theme="dark"] .redocusaurus div[id^="operation"] > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) {
  background-color: rgb(27, 32, 40);
  color: var(--ifm-font-color-secondary)
}

html[data-theme="dark"] .redocusaurus div[id^="operation"] > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(2) > div {
  background-color: var(--ifm-background-color);
}

/* Padding above Response Samples heading */
.redocusaurus .react-tabs__tab-panel--selected {
  margin-bottom: 10px;
}

/* Code Samples */
html:not([data-theme="dark"]) .redocusaurus div[id^="react-tabs"] > div:nth-child(1) > pre:nth-child(2) {
  background-color: var(--ifm-background-color);
}

/* ------ Schema Styling Overrides ------- */

.redocusaurus table th, table td {
  border: none;
}

.redocusaurus table:not(.security-details) td {
  border-bottom: none !important;
}

.redocusaurus table.security-details > tbody > tr  {
  color: var(--ifm-font-color);
}

.redocusaurus table.security-details tr {
  background-color: var(--ifm-background-color)
}

TIL it's impossible to "like" a comment in a gist, hence 👍 here :-D

I also add my 👍

I found a similar tutorial, maybe that helps to compare approaches to styling.

I made a repository, https://github.com/rohit-gohri/redocusaurus, and have divided this into 2: a theme and a plugin. It is a WIP, the plugin can't seem to add routes right now. If anyone has experience with docusaurus plugin development, feel free to open issues/PRs.

Will try to complete it this week.

@zerkms will be great if you could open a PR with your fix.

rohit-gohri/redocusaurus#1 :-)

The new module is working well now (demo: https://rohit-gohri.github.io/redocusaurus), please try to switch to it and open issues if you face any problems.