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

  • Select an option

    Learn more about clone URLs
  • Save rohit-gohri/b1a19f37702cfe4a6c5a47933a11785b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rohit-gohri/b1a19f37702cfe4a6c5a47933a11785b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rohit-gohri revised this gist Jan 18, 2021. No changes.
  2. rohit-gohri revised this gist Sep 21, 2020. 1 changed file with 29 additions and 2 deletions.
    31 changes: 29 additions & 2 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -22,16 +22,23 @@
    border-right: 1px solid var(--ifm-toc-border-color);
    }

    /* Logo Background */
    /* Hide Logo as already in navbar*/
    .redocusaurus .menu-content div:first-child {
    background-color: transparent !important;
    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 {
    @@ -42,6 +49,26 @@ html[data-theme="dark"] .redocusaurus code {
    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 {
  3. rohit-gohri revised this gist Jun 26, 2020. No changes.
  4. rohit-gohri revised this gist Jun 26, 2020. No changes.
  5. rohit-gohri revised this gist Jun 26, 2020. 2 changed files with 18 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions Redocusaurus.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -95,7 +95,7 @@ function getThemeOptions(isDarkMode) {
    * spec: string
    * }} props
    */
    function Redoc(props) {
    function Redocusaurus(props) {
    const { isDarkTheme } = useThemeContext();
    const theme = getThemeOptions(isDarkTheme);

    @@ -112,4 +112,4 @@ function Redoc(props) {
    );
    }

    export default Redoc;
    export default Redocusaurus;
    16 changes: 16 additions & 0 deletions api.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    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;
  6. rohit-gohri created this gist Jun 26, 2020.
    115 changes: 115 additions & 0 deletions Redocusaurus.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    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 Redoc(props) {
    const { isDarkTheme } = useThemeContext();
    const theme = getThemeOptions(isDarkTheme);

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

    export default Redoc;
    61 changes: 61 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    .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);
    }

    /* Logo Background */
    .redocusaurus .menu-content div:first-child {
    background-color: transparent !important;
    }

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

    .redocusaurus code {
    color: var(--ifm-color-emphasis-100);
    padding: 0px;
    }

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

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