Skip to content

Instantly share code, notes, and snippets.

@rohit-gohri

rohit-gohri/Redocusaurus.jsx

Last active June 20, 2023 21:51
Show Gist options
  • Save rohit-gohri/b1a19f37702cfe4a6c5a47933a11785b to your computer and use it in GitHub Desktop.
Save rohit-gohri/b1a19f37702cfe4a6c5a47933a11785b to your computer and use it in GitHub Desktop.
Download ZIP
Redocusaurus: Reodc for use with Docusaurus V2, MOVED TO https://github.com/rohit-gohri/redocusaurus
Raw
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;
Raw
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;
Raw
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)
}
@rohit-gohri
Copy link
Author

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.

@chief-wizard
Copy link

Thanks so much! This got me up and running.

@pkowaluk
Copy link

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

@rohit-gohri
Copy link
Author

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

@pkowaluk
Copy link

pkowaluk commented Dec 7, 2020

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.

@zerkms
Copy link

zerkms commented Dec 8, 2020 •
edited
Loading

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.

@zerkms
Copy link

zerkms commented Dec 8, 2020 •
edited
Loading

@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 :-)

@rohit-gohri
Copy link
Author

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

@zerkms
Copy link

zerkms commented Dec 8, 2020

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

@pkowaluk
Copy link

pkowaluk commented Dec 8, 2020

I also add my 👍

@ArtFlag
Copy link

ArtFlag commented Dec 8, 2020 •
edited
Loading

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

@rohit-gohri
Copy link
Author

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.

@zerkms
Copy link

zerkms commented Jan 18, 2021

rohit-gohri/redocusaurus#1 :-)

@rohit-gohri
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment