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)
}

Thanks for putting this together! Did you run into any dependency issues with Redoc + Docusaurus? I’m trying to work through them right now, thought I would ask if you had any tips there…

These are my current dependencies:

  "dependencies": {
    "@docusaurus/core": "^2.0.0-alpha.64",
    "@docusaurus/preset-classic": "^2.0.0-alpha.64",
    "clsx": "^1.1.1",
    "core-js": "^3.6.5",
    "docusaurus-lunr-search": "^2.1.7",
    "lodash.merge": "^4.6.2",
    "mobx": "^4.15.7",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "redoc": "^2.0.0-rc.40",
    "styled-components": "^5.2.0"
  },

docusaurus-lunr-search is extra and not needed for redoc.

Thanks so much! This got me up and running.

This is really cool. Thanks for making this, Rohit. 😊

Scrolling behaviour breaks in the latest docusaurus version, last known working version is 2.0.0-alpha.64. Probably related to Redocly/redoc#1472 and/or Redocly/redoc#1235

I'm on 2.0.0-alpha.66 and I have not seen any problems with scrolling, but I always add nativeScrollbars: true to my config. If anyone runs into problems, maybe this is your solution.

UPDATE: okay, I found the reason: new theme brings another nav with zero height, which leads to the issues described below.

The fix is trivial: for the current theme (v alpha.69) it would be scrollYOffset: 'nav.navbar', or similar selector of your choice that selects the top navigation bar.

Below is the original message, kept for history

I can confirm the latest working was alpha.64 and in alpha.69 it's still broken

nativeScrollbars: true does not fix it.

It happens because the div.menu-content incorrectly calculates it's style.

Broken: style="top: 0px; height: calc(100vh - 0px);"
Correct: style="top: 60px; height: calc(100vh - 60px);"

It's with scrollYOffset: 'nav', and with nav existing on the page and having height of 60px.

@rohit-gohri what do you think about creating a docusaurus plugin out of these 3 files?

UPD: okay, I see it was already suggested, sorry :-)

@zerkms I'll try to make one now. So that it becomes easier to add fixes like yours through PRs.

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.